371 lines
18 KiB
Vue
371 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import {
|
|
ArrowRight,
|
|
Check,
|
|
Code2,
|
|
GitBranch,
|
|
LayoutDashboard,
|
|
Server,
|
|
ShieldCheck,
|
|
Workflow,
|
|
} from 'lucide-vue-next';
|
|
import AppLogoIcon from '@/components/AppLogoIcon.vue';
|
|
import { dashboard, login } from '@/routes/index';
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Open source Kanban for Git teams" />
|
|
|
|
<div class="bg-background text-foreground min-h-screen overflow-hidden">
|
|
<header
|
|
class="border-outline-variant/70 bg-background/90 sticky top-0 z-30 border-b backdrop-blur-xl"
|
|
>
|
|
<div
|
|
class="mx-auto flex h-16 max-w-7xl items-center justify-between gap-6 px-4 sm:px-6 lg:px-8"
|
|
>
|
|
<Link
|
|
:href="$page.props.auth.user ? dashboard() : login()"
|
|
class="flex items-center gap-3 font-semibold tracking-tight"
|
|
>
|
|
<span
|
|
class="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-lg shadow-[0_8px_22px_rgba(34,197,94,0.2)]"
|
|
>
|
|
<AppLogoIcon class="size-5 fill-current" />
|
|
</span>
|
|
<span>KanbanGit</span>
|
|
</Link>
|
|
|
|
<nav
|
|
class="text-muted-foreground hidden items-center gap-7 text-sm md:flex"
|
|
aria-label="Primary navigation"
|
|
>
|
|
<a
|
|
href="#product"
|
|
class="hover:text-foreground transition-colors"
|
|
>Product</a
|
|
>
|
|
<a
|
|
href="#self-hosted"
|
|
class="hover:text-foreground transition-colors"
|
|
>Self-hosted</a
|
|
>
|
|
<a
|
|
href="https://git.twyco.de/OpenSource/KanbanGit"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="hover:text-foreground transition-colors"
|
|
>
|
|
Repository
|
|
</a>
|
|
</nav>
|
|
|
|
<Link
|
|
:href="$page.props.auth.user ? dashboard() : login()"
|
|
class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 text-sm font-semibold shadow-[0_8px_22px_rgba(34,197,94,0.18)] transition-all hover:-translate-y-px"
|
|
>
|
|
{{ $page.props.auth.user ? 'Open dashboard' : 'Log in' }}
|
|
<ArrowRight class="size-4" />
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="relative">
|
|
<div
|
|
class="pointer-events-none absolute inset-0"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="bg-primary/12 absolute left-[8%] top-12 size-80 rounded-full blur-3xl"
|
|
/>
|
|
<div
|
|
class="bg-secondary/65 absolute right-[4%] top-28 size-[28rem] rounded-full blur-3xl"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="relative mx-auto grid max-w-7xl gap-12 px-4 pb-16 pt-20 sm:px-6 sm:pt-24 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:px-8 lg:pb-24 lg:pt-32"
|
|
>
|
|
<div class="max-w-2xl">
|
|
<div
|
|
class="border-primary/20 bg-primary/10 text-on-primary-container dark:text-primary-fixed inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold"
|
|
>
|
|
<GitBranch class="size-3.5" />
|
|
Open source and built for Git workflows
|
|
</div>
|
|
<h1
|
|
class="mt-6 text-4xl font-semibold tracking-[-0.05em] sm:text-6xl sm:leading-[1.04]"
|
|
>
|
|
Move work forward without giving up control.
|
|
</h1>
|
|
<p
|
|
class="text-muted-foreground mt-6 max-w-xl text-base leading-7 sm:text-lg"
|
|
>
|
|
KanbanGit brings projects, adaptable boards, ticket
|
|
metadata, repository connections, and team access
|
|
into one focused workspace you can host yourself.
|
|
</p>
|
|
<div class="mt-8 flex flex-wrap gap-3">
|
|
<Link
|
|
:href="
|
|
$page.props.auth.user
|
|
? dashboard()
|
|
: login()
|
|
"
|
|
class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-11 items-center gap-2 rounded-md px-5 text-sm font-semibold shadow-[0_10px_28px_rgba(34,197,94,0.22)] transition-all hover:-translate-y-px"
|
|
>
|
|
{{
|
|
$page.props.auth.user
|
|
? 'Go to workspace'
|
|
: 'Log in to your workspace'
|
|
}}
|
|
<ArrowRight class="size-4" />
|
|
</Link>
|
|
<a
|
|
href="https://git.twyco.de/OpenSource/KanbanGit"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="border-outline-variant bg-surface-container-lowest shadow-xs hover:bg-surface-container-low inline-flex h-11 items-center gap-2 rounded-md border px-5 text-sm font-semibold transition-colors"
|
|
>
|
|
<Code2 class="size-4" />
|
|
View source
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="border-outline-variant bg-surface-container-lowest relative rounded-xl border p-3 shadow-[0_30px_90px_rgba(10,20,35,0.16)] sm:p-4"
|
|
>
|
|
<div
|
|
class="border-outline-variant bg-surface-container-low flex items-center gap-2 rounded-lg border px-4 py-3"
|
|
>
|
|
<span class="bg-destructive size-2 rounded-full" />
|
|
<span class="size-2 rounded-full bg-amber-400" />
|
|
<span class="bg-primary size-2 rounded-full" />
|
|
<div
|
|
class="bg-outline-variant/50 ml-3 h-2 w-28 rounded-full"
|
|
/>
|
|
</div>
|
|
<div class="mt-3 grid gap-3 sm:grid-cols-3">
|
|
<div
|
|
v-for="(column, index) in [
|
|
'Ready',
|
|
'In progress',
|
|
'Review',
|
|
]"
|
|
:key="column"
|
|
class="bg-surface-container-low rounded-lg p-3"
|
|
>
|
|
<div
|
|
class="mb-3 flex items-center justify-between gap-2"
|
|
>
|
|
<span class="text-xs font-semibold">{{
|
|
column
|
|
}}</span>
|
|
<span
|
|
class="bg-surface-container-highest text-muted-foreground rounded-full px-2 py-0.5 text-[0.65rem]"
|
|
>{{ index + 2 }}</span
|
|
>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<article
|
|
v-for="ticket in index === 1 ? 3 : 2"
|
|
:key="ticket"
|
|
class="border-outline-variant bg-surface-container-lowest shadow-xs rounded-lg border p-3"
|
|
>
|
|
<div
|
|
class="text-primary text-[0.65rem] font-bold"
|
|
>
|
|
KG-{{ index * 3 + ticket + 10 }}
|
|
</div>
|
|
<div
|
|
class="bg-foreground/75 mt-2 h-2 w-4/5 rounded-full"
|
|
/>
|
|
<div
|
|
class="bg-outline-variant/65 mt-2 h-2 w-2/3 rounded-full"
|
|
/>
|
|
<div
|
|
class="mt-4 flex items-center justify-between"
|
|
>
|
|
<span
|
|
class="bg-primary/12 text-primary rounded-full px-2 py-1 text-[0.6rem] font-semibold"
|
|
>Feature</span
|
|
>
|
|
<span
|
|
class="bg-secondary text-secondary-foreground flex size-6 items-center justify-center rounded-full text-[0.6rem] font-bold"
|
|
>KG</span
|
|
>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id="product"
|
|
class="border-outline-variant bg-surface-container-low border-y"
|
|
>
|
|
<div
|
|
class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-24"
|
|
>
|
|
<div class="max-w-2xl">
|
|
<div class="eyebrow">One coherent workspace</div>
|
|
<h2
|
|
class="mt-3 text-3xl font-semibold tracking-[-0.035em] sm:text-4xl"
|
|
>
|
|
Everything around the board stays connected.
|
|
</h2>
|
|
<p class="text-muted-foreground mt-4 leading-7">
|
|
Keep the workflow visual while preserving the
|
|
project structure your team needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-10 grid gap-4 md:grid-cols-3">
|
|
<article
|
|
v-for="feature in [
|
|
{
|
|
icon: LayoutDashboard,
|
|
title: 'Flexible workflows',
|
|
text: 'Shape board columns, backlog states, ticket types, priorities, and custom metadata per project.',
|
|
},
|
|
{
|
|
icon: GitBranch,
|
|
title: 'Repository context',
|
|
text: 'Connect repositories and keep ticket branches and pull requests visible beside the work.',
|
|
},
|
|
{
|
|
icon: ShieldCheck,
|
|
title: 'Controlled access',
|
|
text: 'Manage users, teams, and project permissions without turning the interface into an admin console.',
|
|
},
|
|
]"
|
|
:key="feature.title"
|
|
class="border-outline-variant bg-surface-container-lowest shadow-xs rounded-xl border p-6"
|
|
>
|
|
<div
|
|
class="bg-primary/10 text-primary flex size-11 items-center justify-center rounded-lg"
|
|
>
|
|
<component :is="feature.icon" class="size-5" />
|
|
</div>
|
|
<h3 class="mt-6 text-lg font-semibold">
|
|
{{ feature.title }}
|
|
</h3>
|
|
<p
|
|
class="text-muted-foreground mt-2 text-sm leading-6"
|
|
>
|
|
{{ feature.text }}
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id="self-hosted"
|
|
class="mx-auto grid max-w-7xl gap-10 px-4 py-20 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8 lg:py-28"
|
|
>
|
|
<div>
|
|
<div class="eyebrow">Run it on your infrastructure</div>
|
|
<h2
|
|
class="mt-3 text-3xl font-semibold tracking-[-0.035em] sm:text-4xl"
|
|
>
|
|
Self-hosted by design.
|
|
</h2>
|
|
<p class="text-muted-foreground mt-5 max-w-xl leading-7">
|
|
Keep project data close, inspect the code, and evolve
|
|
the installation with your own deployment practices.
|
|
</p>
|
|
<ul class="mt-7 space-y-3 text-sm">
|
|
<li
|
|
v-for="item in [
|
|
'Open source codebase',
|
|
'No external product dependency',
|
|
'Designed around your Git repositories',
|
|
]"
|
|
:key="item"
|
|
class="flex items-center gap-3"
|
|
>
|
|
<span
|
|
class="bg-primary/12 text-primary flex size-6 items-center justify-center rounded-full"
|
|
><Check class="size-3.5"
|
|
/></span>
|
|
{{ item }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
class="border-outline-variant bg-surface-container-lowest overflow-hidden rounded-xl border shadow-[0_24px_70px_rgba(10,20,35,0.12)]"
|
|
>
|
|
<div
|
|
class="border-outline-variant bg-surface-container-low text-muted-foreground flex items-center gap-3 border-b px-4 py-3 text-xs"
|
|
>
|
|
<Server class="size-4" />
|
|
your-infrastructure
|
|
</div>
|
|
<div
|
|
class="bg-surface-dim text-on-surface dark:bg-surface-container-lowest p-5 font-mono text-sm leading-7"
|
|
>
|
|
<p>
|
|
<span class="text-primary">$</span> git clone
|
|
kanbangit
|
|
</p>
|
|
<p>
|
|
<span class="text-primary">$</span> configure your
|
|
environment
|
|
</p>
|
|
<p>
|
|
<span class="text-primary">$</span> deploy on your
|
|
terms
|
|
</p>
|
|
<p class="text-muted-foreground mt-3">
|
|
Workspace ready for your team.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="border-outline-variant bg-primary text-primary-foreground border-y"
|
|
>
|
|
<div
|
|
class="mx-auto flex max-w-7xl flex-col gap-6 px-4 py-12 sm:px-6 md:flex-row md:items-center md:justify-between lg:px-8"
|
|
>
|
|
<div>
|
|
<h2 class="text-2xl font-semibold tracking-tight">
|
|
Your work. Your workflow. Your server.
|
|
</h2>
|
|
<p class="mt-2 text-sm opacity-80">
|
|
Open the workspace and keep delivery moving.
|
|
</p>
|
|
</div>
|
|
<Link
|
|
:href="$page.props.auth.user ? dashboard() : login()"
|
|
class="bg-primary-foreground text-primary inline-flex h-10 items-center justify-center gap-2 rounded-md px-5 text-sm font-semibold shadow-lg transition-transform hover:-translate-y-px"
|
|
>
|
|
{{
|
|
$page.props.auth.user ? 'Open dashboard' : 'Log in'
|
|
}}
|
|
<ArrowRight class="size-4" />
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer
|
|
class="text-muted-foreground mx-auto flex max-w-7xl flex-col gap-4 px-4 py-8 text-sm sm:px-6 md:flex-row md:items-center md:justify-between lg:px-8"
|
|
>
|
|
<div class="text-foreground flex items-center gap-2 font-semibold">
|
|
<Workflow class="text-primary size-4" />
|
|
KanbanGit
|
|
</div>
|
|
<p>Open source project management for Git teams.</p>
|
|
</footer>
|
|
</div>
|
|
</template>
|