From 58b1556c0c17d5c8c4f2943c4ac51145e6581c8d Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Fri, 2 Aug 2024 11:26:59 +0800
Subject: [PATCH] added features section to landing page

---
 frontend/src/routes/(landing)/+layout.svelte  | 36 ++++++-
 .../src/routes/(landing)/landing/+page.svelte | 97 +++++++++++++------
 2 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/frontend/src/routes/(landing)/+layout.svelte b/frontend/src/routes/(landing)/+layout.svelte
index c3a31e2..f3fee27 100644
--- a/frontend/src/routes/(landing)/+layout.svelte
+++ b/frontend/src/routes/(landing)/+layout.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import ThemeToggle from '$lib/components/theme-toggle.svelte'
 	import { Button } from '$lib/components/ui/button'
+	import { Separator } from '$lib/components/ui/separator'
 
-	function scrollIntoView({ target }) {
+	function scrollIntoView({ target }: { target: any }) {
 		const el = document.querySelector(target.getAttribute('href'))
 		if (!el) return
 		el.scrollIntoView({
@@ -12,13 +13,15 @@
 </script>
 
 <div class="flex h-screen w-screen flex-col items-center">
-	<div class="flex w-full max-w-6xl justify-between px-8 py-4">
+	<header class="flex w-full max-w-6xl justify-between px-8 py-4">
 		<div class="flex items-center gap-4">
 			<img src="/logo.png" alt="" class="h-8" />
 			<div>kon.sh</div>
 		</div>
 		<div class="flex items-center gap-8">
-			<a href="/landing/docs">Docs</a>
+			<a href="#features" on:click|preventDefault={scrollIntoView}>
+				Features
+			</a>
 			<a href="#pricing" on:click|preventDefault={scrollIntoView}>
 				Pricing
 			</a>
@@ -26,7 +29,7 @@
 		<div class="flex items-center gap-4">
 			<a
 				href="/login"
-				class="text-primary/80 transition-all hover:text-primary">
+				class="text-primary/80 hover:text-primary transition-all">
 				Login
 			</a>
 			<Button
@@ -36,6 +39,29 @@
 			</Button>
 			<ThemeToggle />
 		</div>
-	</div>
+	</header>
 	<slot />
+	<footer
+		class="flex w-full max-w-6xl flex-col items-center justify-center gap-4 px-8 pb-8 pt-64">
+		<div>Kon.sh - Url Shortener</div>
+		<Separator />
+		<nav class="w-full">
+			<ul
+				class="grid w-full grid-cols-[1fr_10px_1fr_10px_1fr] justify-items-center">
+				<li>
+					<a href="https://app.kon.sh">Kon.sh</a>
+				</li>
+				<Separator orientation={'vertical'} />
+				<li>
+					<a href="mailto:subsonic_module981@slmails.com">Contact</a>
+				</li>
+				<Separator orientation={'vertical'} />
+				<li>
+					<a href="https://kon.sh/AX0LqT-v" target="_blank">
+						Report Bugs
+					</a>
+				</li>
+			</ul>
+		</nav>
+	</footer>
 </div>
diff --git a/frontend/src/routes/(landing)/landing/+page.svelte b/frontend/src/routes/(landing)/landing/+page.svelte
index 52723d8..665119a 100644
--- a/frontend/src/routes/(landing)/landing/+page.svelte
+++ b/frontend/src/routes/(landing)/landing/+page.svelte
@@ -1,65 +1,106 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button'
 	import { Separator } from '$lib/components/ui/separator'
-	import { Check, XIcon } from 'lucide-svelte'
+	import {
+		Check,
+		QrCodeIcon,
+		XIcon,
+		ChartAreaIcon,
+		ExternalLinkIcon,
+	} from 'lucide-svelte'
 </script>
 
-<div class="flex flex-col items-center pt-24 w-full">
-	<div class="flex flex-col gap-24 p-4 w-full max-w-6xl">
-		<div class="flex flex-col gap-10 items-center text-center">
+<main class="flex w-full flex-col items-center pt-24">
+	<div class="flex w-full max-w-6xl flex-col gap-12 p-4">
+		<div class="flex flex-col items-center gap-10 text-center">
 			<h1
-				class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-400">
+				class="bg-gradient-to-r from-orange-300 to-orange-400 bg-clip-text text-6xl font-bold text-transparent">
 				Kon.sh
 			</h1>
-			<p class="max-w-sm text-xl font-semibold text-center">
+			<p class="max-w-sm text-center text-xl font-semibold">
 				Open Source Self-hostable Link Shortener With Analytics
 			</p>
 			<Button
 				href="/signup"
-				class="bg-orange-400 hover:bg-orange-300 w-fit">
+				class="w-fit bg-orange-400 hover:bg-orange-300">
 				Get Started
 			</Button>
 		</div>
-		<div class="flex flex-col gap-10 items-center text-center">
+		<div class="flex flex-col items-center gap-10 pt-12 text-center">
 			<h1 class="text-4xl font-bold">Why Kon.sh?</h1>
-			<p class="max-w-lg text-xl font-semibold text-center">
+			<p class="max-w-lg text-center text-xl font-semibold">
 				Kon.sh is completely self-hostable, open source, and free. No
 				vendor lock-in, can be hosted using docker/docker compose with
 				no limitations.
-				<a href="/landing/docs" class="text-orange-400 underline">
+				<!-- <a href="/landing/docs" class="text-orange-400 underline">
 					Learn More
-				</a>
+				</a> -->
 			</p>
 		</div>
-		<section id="pricing">
+		<section id="features" class="pt-12">
 			<div
-				class="flex flex-col gap-10 items-center pb-64 w-full text-center">
+				class="flex w-full flex-col items-center gap-10 text-center">
+				<h1 class="text-4xl font-bold">Features</h1>
+				<div
+					class="grid w-full grid-cols-[repeat(auto-fit,_minmax(250px,_1fr))] gap-4">
+					<div class="flex gap-8 rounded-lg p-8">
+						<div class="flex w-full flex-col gap-4 text-start">
+							<div class="flex flex-col items-center justify-center">
+								<QrCodeIcon size={128} class="text-orange-400" />
+								<h2 class="text-xl font-semibold">Custom QR Codes</h2>
+							</div>
+						</div>
+					</div>
+					<div class="flex gap-8 rounded-lg p-8">
+						<div class="flex w-full flex-col gap-4 text-start">
+							<div class="flex flex-col items-center justify-center">
+								<ChartAreaIcon size={128} class="text-orange-400" />
+								<h2 class="text-xl font-semibold">Analytics</h2>
+							</div>
+						</div>
+					</div>
+					<div class="flex gap-8 rounded-lg p-8">
+						<div class="flex w-full flex-col gap-4 text-start">
+							<div class="flex flex-col items-center justify-center">
+								<ExternalLinkIcon
+									size={128}
+									class="text-orange-400" />
+								<h2 class="font-semibol text-xl">Custom Domains</h2>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+		<section id="pricing" class="pt-12">
+			<div
+				class="flex w-full flex-col items-center gap-10 text-center">
 				<h1 class="text-4xl font-bold">Pricing</h1>
 				<div
 					class="grid w-full grid-cols-[repeat(auto-fit,_minmax(450px,_1fr))] gap-4">
-					<div class="flex gap-8 p-8 rounded-lg border">
-						<div class="flex flex-col gap-4 w-full text-start">
+					<div class="flex gap-8 rounded-lg border p-8">
+						<div class="flex w-full flex-col gap-4 text-start">
 							<h2 class="text-2xl font-bold">Free (demo)</h2>
 							<p>No credit card required.</p>
 							<Separator />
 							<div class="flex flex-col gap-4">
-								<div class="flex gap-2 items-center">
+								<div class="flex items-center gap-2">
 									<Check class="text-orange-400" />
 									<p>Unlimited Links</p>
 								</div>
-								<div class="flex gap-2 items-center">
+								<div class="flex items-center gap-2">
 									<Check class="text-orange-400" />
 									<p>Unlimited Projects</p>
 								</div>
-								<div class="flex gap-2 items-center">
+								<div class="flex items-center gap-2">
 									<XIcon class="text-orange-400" />
 									<p>Will be limited in future</p>
 								</div>
 							</div>
 						</div>
 						<div
-							class="flex flex-col gap-4 justify-center items-center w-full bg-gradient-to-r from-orange-300 to-orange-400 rounded-xl text-start">
-							<div class="flex gap-2 items-end">
+							class="flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-gradient-to-r from-orange-300 to-orange-400 text-start">
+							<div class="flex items-end gap-2">
 								<h1 class="text-3xl font-bold">$0</h1>
 								<span>/month</span>
 							</div>
@@ -68,29 +109,29 @@
 							</Button>
 						</div>
 					</div>
-					<div class="flex gap-8 p-8 rounded-lg border">
-						<div class="flex flex-col gap-4 w-full text-start">
+					<div class="flex gap-8 rounded-lg border p-8">
+						<div class="flex w-full flex-col gap-4 text-start">
 							<h2 class="text-2xl font-bold">Free (Self Host)</h2>
 							<p>No credit card required.</p>
 							<Separator />
 							<div class="flex flex-col gap-4">
-								<div class="flex gap-2 items-center">
+								<div class="flex items-center gap-2">
 									<Check class="text-orange-400" />
 									<p>Unlimited Links</p>
 								</div>
-								<div class="flex gap-2 items-center">
+								<div class="flex items-center gap-2">
 									<Check class="text-orange-400" />
 									<p>Unlimited Projects</p>
 								</div>
-								<div class="flex gap-2 items-center">
+								<div class="flex items-center gap-2">
 									<Check class="text-orange-400" />
 									<p>Basically No Limits</p>
 								</div>
 							</div>
 						</div>
 						<div
-							class="flex flex-col gap-4 justify-center items-center w-full bg-gradient-to-r from-orange-300 to-orange-400 rounded-xl text-start">
-							<div class="flex gap-2 items-end">
+							class="flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-gradient-to-r from-orange-300 to-orange-400 text-start">
+							<div class="flex items-end gap-2">
 								<h1 class="text-3xl font-bold">$0</h1>
 								<span>/month</span>
 							</div>
@@ -103,4 +144,4 @@
 			</div>
 		</section>
 	</div>
-</div>
+</main>