homepage revamped

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>

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>

src/lib/components/organisms/IndexDescription.svelte

@@ -20,15 +20,20 @@
 </section>
 
 <style>
+	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 {

src/routes/__layout.svelte

@@ -62,7 +62,7 @@
 	}
 
 	:root {
-		--white: #ffe1e1;
+		--white: #fff;
 		--red: #ff4151;		
 		--red-glow: #ff838d40;
 		--grey-one: #1c1e29;

src/routes/index.svelte

@@ -5,11 +5,23 @@
 </script>
 
 <div class="wrapper">
-
-	<HeroImage />
+	<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>