heroimage height & shadow

src/lib/components/atoms/HeroImage.svelte

@@ -5,12 +5,13 @@
 
 <style>
 	.hero-img {
-		height: 40rem;
+		height: 80vh;
 		z-index: -1;
 		width: auto;
 		float: right;
-		border-radius: 20px;
+		border-radius: 2rem;
 		transform: rotate(3.7deg) translateY(2%) translateX(-15%);
+		box-shadow: 0 1rem 3rem 0 #0f111a;
 		user-select: none;
 	}
 </style>

src/lib/components/organisms/IndexDescription.svelte

@@ -1,33 +1,32 @@
 <script>
 	import Button from '$lib/components/atoms/Button.svelte';
-    import IndexHeroTitle from '../atoms/IndexHeroTitle.svelte';
-
+	import IndexHeroTitle from '../atoms/IndexHeroTitle.svelte';
 </script>
 
 <section class="hero">
-    <div class="hero-text">
-        <!-- <img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" /> -->
-        <IndexHeroTitle></IndexHeroTitle>
-        <h2>
+	<div class="hero-text">
+		<!-- <img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" /> -->
+		<IndexHeroTitle />
+		<h2>
 			An extensible framework for<br />
 			building application mods.
 		</h2>
-		
+
 		<div class="hero-buttons">
 			<Button kind="primary" href="/download" fontsize="1.3rem">Download</Button>
 			<Button href="/docs" fontsize="1.3rem">Read The Docs</Button>
 		</div>
-    </div>
+	</div>
 </section>
 
 <style>
 	.hero-text {
 		align-items: center;
 	}
-	
+
 	.hero-buttons {
 		display: flex;
-		gap:1rem;
+		gap: 1rem;
 		user-select: none;
 		transform: translateX(-3px);
 	}
@@ -36,5 +35,4 @@
 		font-size: 6.5rem;
 		letter-spacing: -0.04em;
 	}
-
 </style>

src/routes/index.svelte

@@ -6,7 +6,7 @@
 
 <div class="wrapper">
 
-	<HeroImage></HeroImage>
+	<HeroImage />
 	<IndexDescription />
 	<SocialHost />