From 10216bb65f4a963aaea25f54c0b77619ca617148 Mon Sep 17 00:00:00 2001
From: pyrossh <pyrossh>
Date: Fri, 3 May 2024 19:22:36 +0530
Subject: [PATCH] improve website

---
 website/src/lib/components/intro.svelte | 10 ++++++++++
 website/src/routes/+page.svelte         | 20 ++++++++------------
 2 files changed, 18 insertions(+), 12 deletions(-)
 create mode 100644 website/src/lib/components/intro.svelte

diff --git a/website/src/lib/components/intro.svelte b/website/src/lib/components/intro.svelte
new file mode 100644
index 00000000..1dafe1ed
--- /dev/null
+++ b/website/src/lib/components/intro.svelte
@@ -0,0 +1,10 @@
+<h1
+	class="sm:m-0 text-3xl font-bold text-center sm:text-left sm:text-4xl lg:leading-tight text-white"
+>
+	The only bible app you will ever need
+</h1>
+<div class="text-center sm:text-left flex flex-col text-lg text-neutral-100 sm:mt-5">
+	<span>No ads,</span>
+	<span>No in-app purchases,</span>
+	<span>No distractions.</span>
+</div>
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index ba5f6df0..1d4c50ed 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 	import AppStoreIcon from '$lib/icons/appstore.svg?component';
 	import lightPng from '$lib/images/light.png?enhanced';
 	import logoPng from '../../../assets/icon.png';
+	import Intro from '$lib/components/intro.svelte';
 </script>
 
 <svelte:head>
@@ -95,19 +96,11 @@
 	<!-- ========== END HEADER ========== -->
 
 	<!-- ========== HERO ========== -->
-	<div class="flex flex-1 flex-col sm:flex-row items-center mt-20 sm:mt-0">
+	<div class="flex flex-1 flex-col-reverse sm:flex-row items-center mt-10 sm:mt-0">
 		<div class="flex flex-col items-center sm:items-start">
-			<h1
-				class="m-0 text-3xl font-bold text-center sm:text-left sm:text-4xl lg:leading-tight text-white"
-			>
-				The only bible app you will ever need
-			</h1>
-			<div class="flex flex-row gap-2 sm:flex-col mb-10 text-lg text-neutral-100 mt-5">
-				<span>No ads,</span>
-				<span>No in-app purchases,</span>
-				<span>No distractions.</span>
+			<div class="hidden sm:block sm:mb-10">
+				<Intro />
 			</div>
-
 			<!-- Buttons -->
 			<div class="flex flex-col sm:flex-row">
 				<a
@@ -133,7 +126,7 @@
 		<!-- Slider -->
 		<!-- End Slider -->
 		<div
-			class="not-prose flex items-center mt-20 sm:flex-row [&>picture]:flex [&>picture]:justify-center sm:[&>picture]:justify-end"
+			class="not-prose flex items-center mt-10 sm:mt-20 sm:flex-row [&>picture]:flex [&>picture]:justify-center sm:[&>picture]:justify-end"
 		>
 			<enhanced:img
 				class="w-9/12"
@@ -158,6 +151,9 @@
 				</div>
 			</div>
 		</div>
+		<div class="sm:hidden">
+			<Intro />
+		</div>
 		<!-- End Col -->
 	</div>
 	<!-- ========== END HERO ========== -->