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">
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>

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

@ -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>

Write Preview
Loading…
Cancel
Save