Add AppStores component to Hero section

src/lib/components/molecules/AppStores.svelte

@@ -0,0 +1,44 @@
+<script>
+	import Image from '$lib/components/atoms/Image.svelte';
+</script>
+
+<div class="app-stores">
+	<a
+		href="https://apps.apple.com/app/languagexchange/id6474187141"
+		target="_blank"
+		rel="noopener noreferrer"
+		title="Download the app from App Store"
+	>
+		<Image src="images/features/ios.png" alt="Apple App Store"></Image>
+	</a>
+	<a
+		href="https://play.google.com/store/apps/details?id=tech.newchapter.languageXchange"
+		target="_blank"
+		rel="noopener noreferrer"
+		title="Download the app from Google Play Store"
+	>
+		<Image src="images/features/android.png" alt="Google Play Store"></Image>
+	</a>
+</div>
+
+<style lang="scss">
+	@import '../../scss/breakpoints.scss';
+	.app-stores {
+		display: flex;
+		align-items: center;
+		gap: 20px;
+
+		a {
+			transition: all 0.2s ease-in-out;
+			width: 200px;
+			color: var(--color--text);
+			fill: var(--color--text);
+
+			&:hover {
+				color: var(--color--primary);
+				fill: var(--color--primary);
+				filter: drop-shadow(0px 0px 3px var(--color--primary));
+			}
+		}
+	}
+</style>

src/lib/components/organisms/Hero.svelte

@@ -1,7 +1,6 @@
 <script>
-	import LoginIcon from '$lib/icons/login.svelte';
-	import Button from '$lib/components/atoms/Button.svelte';
-	import Sparkles from '../atoms/Sparkles.svelte';
+	import AppStores from '$lib/components/molecules/AppStores.svelte';
+	import Sparkles from '$lib/components/atoms/Sparkles.svelte';
 </script>
 
 <section id="hero">
@@ -12,10 +11,7 @@
 	</p>
 	<div class="ctas">
 		<Sparkles>
-			<Button href="https://app.languagexchange.net/login">
-				<LoginIcon slot="icon" />
-				Join Us
-			</Button>
+			<AppStores />
 		</Sparkles>
 	</div>
 </section>
@@ -66,6 +62,7 @@
 			justify-content: center;
 			gap: 10px;
 			width: 100%;
+			margin-top: 30px;
 		}
 	}
 </style>