From 5a08d21c3999f8472d1b195d5f970b01ea869ea9 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Fri, 21 Jun 2024 10:51:39 +0800
Subject: [PATCH] added landing page

---
 frontend/src/hooks.server.ts                  | 13 +--
 frontend/src/routes/(landing)/+layout.svelte  | 11 ++-
 .../src/routes/(landing)/landing/+page.svelte | 81 ++++++++++++++++++-
 3 files changed, 94 insertions(+), 11 deletions(-)

diff --git a/frontend/src/hooks.server.ts b/frontend/src/hooks.server.ts
index b2b2805..504742e 100644
--- a/frontend/src/hooks.server.ts
+++ b/frontend/src/hooks.server.ts
@@ -6,12 +6,13 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 	const pathname = event.url.pathname
 
-	const allowedPath = [
-		'/login',
-		'/signup',
-		'/api/login',
-		'/api/signup',
-	]
+	if (pathname.startsWith('/landing')) {
+		const response = await resolve(event)
+
+		return response
+	}
+
+	const allowedPath = ['/login', '/signup']
 
 	if (allowedPath.includes(pathname)) {
 		if (sessionId) {
diff --git a/frontend/src/routes/(landing)/+layout.svelte b/frontend/src/routes/(landing)/+layout.svelte
index 602ae0a..bfda9ad 100644
--- a/frontend/src/routes/(landing)/+layout.svelte
+++ b/frontend/src/routes/(landing)/+layout.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
 	import ThemeToggle from '$lib/components/theme-toggle.svelte'
 	import { Button } from '$lib/components/ui/button'
+
+	function scrollIntoView({ target }) {
+		const el = document.querySelector(target.getAttribute('href'))
+		if (!el) return
+		el.scrollIntoView({
+			behavior: 'smooth',
+		})
+	}
 </script>
 
 <div class="flex flex-col items-center w-screen h-screen">
@@ -11,7 +19,8 @@
 		</div>
 		<div class="flex gap-8 items-center">
 			<a href="/landing/docs">Docs</a>
-			<a href="/landing/pricing">Pricing</a>
+			<a href="#pricing" on:click|preventDefault={scrollIntoView}
+				>Pricing</a>
 		</div>
 		<div class="flex gap-4 items-center">
 			<a
diff --git a/frontend/src/routes/(landing)/landing/+page.svelte b/frontend/src/routes/(landing)/landing/+page.svelte
index a7714d9..52723d8 100644
--- a/frontend/src/routes/(landing)/landing/+page.svelte
+++ b/frontend/src/routes/(landing)/landing/+page.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button'
+	import { Separator } from '$lib/components/ui/separator'
+	import { Check, XIcon } from 'lucide-svelte'
 </script>
 
-<div class="flex flex-col items-center pt-24">
-	<div class="flex flex-col gap-24 max-w-6xl">
-		<div class="flex flex-col gap-4 items-center text-center">
+<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">
 			<h1
 				class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-400">
 				Kon.sh
@@ -18,7 +20,7 @@
 				Get Started
 			</Button>
 		</div>
-		<div class="flex flex-col gap-4 items-center text-center">
+		<div class="flex flex-col gap-10 items-center text-center">
 			<h1 class="text-4xl font-bold">Why Kon.sh?</h1>
 			<p class="max-w-lg text-xl font-semibold text-center">
 				Kon.sh is completely self-hostable, open source, and free. No
@@ -29,5 +31,76 @@
 				</a>
 			</p>
 		</div>
+		<section id="pricing">
+			<div
+				class="flex flex-col gap-10 items-center pb-64 w-full 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">
+							<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">
+									<Check class="text-orange-400" />
+									<p>Unlimited Links</p>
+								</div>
+								<div class="flex gap-2 items-center">
+									<Check class="text-orange-400" />
+									<p>Unlimited Projects</p>
+								</div>
+								<div class="flex gap-2 items-center">
+									<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">
+								<h1 class="text-3xl font-bold">$0</h1>
+								<span>/month</span>
+							</div>
+							<Button href="/signup" class="bg-background">
+								Get Started
+							</Button>
+						</div>
+					</div>
+					<div class="flex gap-8 p-8 rounded-lg border">
+						<div class="flex flex-col gap-4 w-full 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">
+									<Check class="text-orange-400" />
+									<p>Unlimited Links</p>
+								</div>
+								<div class="flex gap-2 items-center">
+									<Check class="text-orange-400" />
+									<p>Unlimited Projects</p>
+								</div>
+								<div class="flex gap-2 items-center">
+									<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">
+								<h1 class="text-3xl font-bold">$0</h1>
+								<span>/month</span>
+							</div>
+							<Button href="/signup" class="bg-background">
+								Get Started
+							</Button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
 	</div>
 </div>