From c27a2f46e9a4268eb362f62e1bca75c2a9df6551 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 15 Aug 2022 23:08:41 -0400
Subject: [PATCH] homepage revamped

---
 src/lib/components/atoms/Button.svelte        |  7 +++++-
 src/lib/components/atoms/HeroImage.svelte     | 14 ++++++++++--
 .../organisms/IndexDescription.svelte         | 11 +++++++---
 src/routes/__layout.svelte                    |  2 +-
 src/routes/index.svelte                       | 22 ++++++++++++++-----
 5 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index 2567afc..5359fc4 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -22,7 +22,7 @@
 	.button-secondary {
 		font-weight: 600;
 		color: var(--white);
-		border: 3px solid var(--red);
+		border: 3px solid var(--grey-three);
 		border-radius: 200px;
 		padding: 12px 40px;
 		cursor: pointer;
@@ -33,6 +33,7 @@
 	}
 
 	.button-primary {
+		border: 3px solid var(--red);
 		background-color: var(--red);
 		box-shadow: 0px 0px 32px 1px var(--red-glow);
 	}
@@ -44,4 +45,8 @@
 	button:hover {
 		transform: translate(0%, -5%);
 	}
+	button:active {
+		transition-duration: 0.1s;
+		transform: translate(0);
+	}
 </style>
diff --git a/src/lib/components/atoms/HeroImage.svelte b/src/lib/components/atoms/HeroImage.svelte
index 3f578eb..310f9ab 100644
--- a/src/lib/components/atoms/HeroImage.svelte
+++ b/src/lib/components/atoms/HeroImage.svelte
@@ -1,17 +1,27 @@
 <script>
 </script>
 
-<img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" />
+<div class="hero-img"><img height="100%" src="/manager.png" alt="Screenshot of ReVanced Manager" /></div>
 
 <style>
 	.hero-img {
+		overflow: hidden;
 		height: 80vh;
 		z-index: -1;
 		width: auto;
 		float: right;
 		border-radius: 2rem;
-		transform: rotate(3.7deg) translateY(2%) translateX(-15%);
+		transform: rotate(3.7deg) translateY(2%);
 		box-shadow: 0 1rem 3rem 0 #0f111a;
 		user-select: none;
 	}
+	.hero-img::after{
+		box-shadow: inset 2rem 2rem 5rem -3rem var(--grey-two), inset -2rem -2rem 5rem -3rem var(--grey-one);
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
 </style>
diff --git a/src/lib/components/organisms/IndexDescription.svelte b/src/lib/components/organisms/IndexDescription.svelte
index 48b0a84..df848f6 100644
--- a/src/lib/components/organisms/IndexDescription.svelte
+++ b/src/lib/components/organisms/IndexDescription.svelte
@@ -20,15 +20,20 @@
 </section>
 
 <style>
-	.hero-text {
+	h2 {
+		margin-top: 1rem;
+	}
+	.hero {
+		padding-bottom: 10rem;
+	}
+	.hero-text { 
 		align-items: center;
 	}
 
 	.hero-buttons {
-		display: flex;
 		gap: 1rem;
+		display: flex;
 		user-select: none;
-		transform: translateX(-3px);
 	}
 
 	.hero-text h1 {
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index bd13ae0..0d81557 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -62,7 +62,7 @@
 	}
 
 	:root {
-		--white: #ffe1e1;
+		--white: #fff;
 		--red: #ff4151;		
 		--red-glow: #ff838d40;
 		--grey-one: #1c1e29;
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 2845099..198ea88 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -5,11 +5,23 @@
 </script>
 
 <div class="wrapper">
-
-	<HeroImage />
-	<IndexDescription />
+	<div class="wrappezoid">
+		<IndexDescription />
+		<HeroImage />
+	</div>
 	<SocialHost />
-
 </div>
 
-
+<style>
+	.wrappezoid {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		align-items: center;
+	}
+	@media (max-width: 768px) {
+		.wrappezoid {
+			flex-direction: column;
+		}
+	}
+</style>
\ No newline at end of file