From 7ecf3258c259eb259d8dfb3c4a47d4ede82f5c56 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sun, 31 Jul 2022 13:41:15 -0600
Subject: add mobile menu to landing page and make header sticky

---
 src/routes/index.svelte | 33 ++++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index c823f668..faa881bb 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -53,7 +53,7 @@
 
 <LandingHeader {howItWorks} {faq} {about} />
 
-<main class="space-y-40 py-20 md:py-32 lg:py-40 px-5 md:px-0">
+<main class="space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0">
 	<!-- hero -->
 	<LandingHero />
 
@@ -82,14 +82,17 @@
 	</LandingInfoCard>
 
 	<!-- landing info 3 -->
-	<LandingInfoCard
-		image="customize"
-		title="Brand it your way!"
-		description="Customize your point of sale look and feel, or keep it on default - totally up to you."
-	/>
+	<div>
+		<LandingInfoCard
+			image="customize"
+			title="Brand it your way!"
+			description="Customize your point of sale look and feel, or keep it on default - totally up to you."
+		/>
+		<div bind:this={howItWorks} />
+	</div>
 
 	<!-- how it works -->
-	<div bind:this={howItWorks}>
+	<div>
 		<h3 class="text-5xl font-medium mb-10 text-center">How it works</h3>
 		<div
 			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 lg:space-x-10 text-center"
@@ -98,18 +101,22 @@
 				<HowItWorksCard image={step.image} step={step.step} description={step.description} />
 			{/each}
 		</div>
+		<div bind:this={faq} />
 	</div>
 
 	<!-- faq -->
-	<div class="space-y-10" bind:this={faq}>
-		<h3 class="text-5xl font-medium text-center">FAQ</h3>
-		{#each faqQuestions as question}
-			<FaqCard question={question.question} answer={question.answer} />
-		{/each}
+	<div>
+		<div class="space-y-10">
+			<h3 class="text-5xl font-medium text-center">FAQ</h3>
+			{#each faqQuestions as question}
+				<FaqCard question={question.question} answer={question.answer} />
+			{/each}
+		</div>
+		<div bind:this={about} />
 	</div>
 
 	<!-- about -->
-	<div bind:this={about}>
+	<div>
 		<About />
 	</div>
 </main>
-- 
cgit v1.2.3