TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added features section to landing page

Browse Source
main
TZGyn 1 year ago
parent c73080defc
commit 58b1556c0c
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
2 changed files with 100 additions and 33 deletions
Show Stats Download Patch File Download Diff File

36
frontend/src/routes/(landing)/+layout.svelte
Unescape Escape View File

@ -1,8 +1,9 @@
<script lang="ts"> <script lang="ts">
import ThemeToggle from '$lib/components/theme-toggle.svelte' import ThemeToggle from '$lib/components/theme-toggle.svelte'
import { Button } from '$lib/components/ui/button' 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')) const el = document.querySelector(target.getAttribute('href'))
if (!el) return if (!el) return
el.scrollIntoView({ el.scrollIntoView({
@ -12,13 +13,15 @@
</script> </script>
<div class="flex h-screen w-screen flex-col items-center"> <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"> <div class="flex items-center gap-4">
<img src="/logo.png" alt="" class="h-8" /> <img src="/logo.png" alt="" class="h-8" />
<div>kon.sh</div> <div>kon.sh</div>
</div> </div>
<div class="flex items-center gap-8"> <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}> <a href="#pricing" on:click|preventDefault={scrollIntoView}>
Pricing Pricing
</a> </a>
@ -26,7 +29,7 @@
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<a <a
href="/login" href="/login"
class="text-primary/80 transition-all hover:text-primary"> class="text-primary/80 hover:text-primary transition-all">
Login Login
</a> </a>
<Button <Button
@ -36,6 +39,29 @@
</Button> </Button>
<ThemeToggle /> <ThemeToggle />
</div> </div>
</div> </header>
<slot /> <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> </div>

97
frontend/src/routes/(landing)/landing/+page.svelte
Unescape Escape View File

@ -1,65 +1,106 @@
<script lang="ts"> <script lang="ts">
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
import { Separator } from '$lib/components/ui/separator' import { Separator } from '$lib/components/ui/separator'
import { Check, XIcon } from 'lucide-svelte' import {
Check,
QrCodeIcon,
XIcon,
ChartAreaIcon,
ExternalLinkIcon,
} from 'lucide-svelte'
</script> </script>
<div class="flex flex-col items-center pt-24 w-full"> <main class="flex w-full flex-col items-center pt-24">
<div class="flex flex-col gap-24 p-4 w-full max-w-6xl"> <div class="flex w-full max-w-6xl flex-col gap-12 p-4">
<div class="flex flex-col gap-10 items-center text-center"> <div class="flex flex-col items-center gap-10 text-center">
<h1 <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 Kon.sh
</h1> </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 Open Source Self-hostable Link Shortener With Analytics
</p> </p>
<Button <Button
href="/signup" href="/signup"
class="bg-orange-400 hover:bg-orange-300 w-fit"> class="w-fit bg-orange-400 hover:bg-orange-300">
Get Started Get Started
</Button> </Button>
</div> </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> <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 Kon.sh is completely self-hostable, open source, and free. No
vendor lock-in, can be hosted using docker/docker compose with vendor lock-in, can be hosted using docker/docker compose with
no limitations. no limitations.
<a href="/landing/docs" class="text-orange-400 underline"> <!-- <a href="/landing/docs" class="text-orange-400 underline">
Learn More Learn More
</a> </a> -->
</p> </p>
</div> </div>
<section id="pricing"> <section id="features" class="pt-12">
<div <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> <h1 class="text-4xl font-bold">Pricing</h1>
<div <div
class="grid w-full grid-cols-[repeat(auto-fit,_minmax(450px,_1fr))] gap-4"> 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 gap-8 rounded-lg border p-8">
<div class="flex flex-col gap-4 w-full text-start"> <div class="flex w-full flex-col gap-4 text-start">
<h2 class="text-2xl font-bold">Free (demo)</h2> <h2 class="text-2xl font-bold">Free (demo)</h2>
<p>No credit card required.</p> <p>No credit card required.</p>
<Separator /> <Separator />
<div class="flex flex-col gap-4"> <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" /> <Check class="text-orange-400" />
<p>Unlimited Links</p> <p>Unlimited Links</p>
</div> </div>
<div class="flex gap-2 items-center"> <div class="flex items-center gap-2">
<Check class="text-orange-400" /> <Check class="text-orange-400" />
<p>Unlimited Projects</p> <p>Unlimited Projects</p>
</div> </div>
<div class="flex gap-2 items-center"> <div class="flex items-center gap-2">
<XIcon class="text-orange-400" /> <XIcon class="text-orange-400" />
<p>Will be limited in future</p> <p>Will be limited in future</p>
</div> </div>
</div> </div>
</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"> 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 gap-2 items-end"> <div class="flex items-end gap-2">
<h1 class="text-3xl font-bold">$0</h1> <h1 class="text-3xl font-bold">$0</h1>
<span>/month</span> <span>/month</span>
</div> </div>
@ -68,29 +109,29 @@
</Button> </Button>
</div> </div>
</div> </div>
<div class="flex gap-8 p-8 rounded-lg border"> <div class="flex gap-8 rounded-lg border p-8">
<div class="flex flex-col gap-4 w-full text-start"> <div class="flex w-full flex-col gap-4 text-start">
<h2 class="text-2xl font-bold">Free (Self Host)</h2> <h2 class="text-2xl font-bold">Free (Self Host)</h2>
<p>No credit card required.</p> <p>No credit card required.</p>
<Separator /> <Separator />
<div class="flex flex-col gap-4"> <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" /> <Check class="text-orange-400" />
<p>Unlimited Links</p> <p>Unlimited Links</p>
</div> </div>
<div class="flex gap-2 items-center"> <div class="flex items-center gap-2">
<Check class="text-orange-400" /> <Check class="text-orange-400" />
<p>Unlimited Projects</p> <p>Unlimited Projects</p>
</div> </div>
<div class="flex gap-2 items-center"> <div class="flex items-center gap-2">
<Check class="text-orange-400" /> <Check class="text-orange-400" />
<p>Basically No Limits</p> <p>Basically No Limits</p>
</div> </div>
</div> </div>
</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"> 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 gap-2 items-end"> <div class="flex items-end gap-2">
<h1 class="text-3xl font-bold">$0</h1> <h1 class="text-3xl font-bold">$0</h1>
<span>/month</span> <span>/month</span>
</div> </div>
@ -103,4 +144,4 @@
</div> </div>
</section> </section>
</div> </div>
</div> </main>

Write Preview
Loading…
Cancel
Save