no ushing

Co-authored-by: Affan Zaman <afnzmn@users.noreply.github.com>

src/lib/components/atoms/HeroImage.svelte

@@ -2,16 +2,17 @@
  
 </script>
 
-<div class="hero-img" style ="background-image:url('/manager.png')" alt="Screenshot of ReVanced Manager"></div>
+<img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager"/>
 
 <style>
 	.hero-img {
-        height: 400px;
+        height: 40rem;
-        width:fit-content;
+		z-index: -1;
+        width:auto;
+		float:right;
 		border-radius: 20px;
-		transform: rotate(3.7deg) translateY(-35%) translateX(200%);
+		transform: rotate(3.7deg) translateY(-5%);
 		user-select: none;
-        position: absolute;
 	}
 </style>
 

src/lib/components/atoms/Wave.svelte

@@ -8,6 +8,12 @@
 </svg>
 
 <style>
+  svg {
+    position: absolute;
+    z-index: -2;
+    bottom:0
+  }
+
   .wave {
     animation: wave-anim 40s;
     animation-timing-function: linear;

src/lib/components/organisms/IndexDescription.svelte

@@ -1,6 +1,7 @@
 <script>
 	import Button from '$lib/components/atoms/Button.svelte';
     import IndexHeroTitle from '../atoms/IndexHeroTitle.svelte';
+
 </script>
 
 <section class="hero">

src/routes/index.svelte

@@ -1,10 +1,13 @@
 <script>
-	import IndexDescription from '$lib/components/organisms/IndexDescription.svelte';
 	import HeroImage from '$lib/components/atoms/HeroImage.svelte';
+	import IndexDescription from '$lib/components/organisms/IndexDescription.svelte';
 </script>
 
 <div class="wrapper">
+
+	<HeroImage></HeroImage>
 	<IndexDescription />
-	<HeroImage />
+
 </div>
 
+