83 lines
2.8 KiB
Svelte
83 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { Link, page } from '@inertiajs/svelte';
|
|
import { toUrl } from '@/lib/utils';
|
|
import { dashboard, login, register } from '@/routes';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import burg from '@/lib/assets/img/burg.jpg';
|
|
import SunIcon from '@lucide/svelte/icons/sun';
|
|
import MoonIcon from '@lucide/svelte/icons/moon';
|
|
import { toggleMode } from 'mode-watcher';
|
|
|
|
let {
|
|
canRegister = true,
|
|
}: {
|
|
canRegister: boolean;
|
|
} = $props();
|
|
|
|
const auth = $derived(page.props.auth);
|
|
</script>
|
|
|
|
<div class="text-center space-y-8">
|
|
<Badge variant="outline" class="text-sm py-2">
|
|
<span class="mr-2 text-primary">
|
|
<Badge>Neu</Badge>
|
|
</span>
|
|
<span>Für Android, Apple oder Desktop!</span>
|
|
</Badge>
|
|
|
|
<div class="max-w-3xl mx-auto text-center text-5xl md:text-6xl font-bold">
|
|
<h1>
|
|
<span
|
|
class="text-transparent bg-linear-to-r from-lime-600 to-primary bg-clip-text"
|
|
>
|
|
Ladinisch Watten
|
|
</span>
|
|
<br />FC Dotterbühel
|
|
</h1>
|
|
</div>
|
|
|
|
<p class="max-w-screen-sm mx-auto text-xl text-muted-foreground">
|
|
Ladinisch Watten vom Handy, Tablet oder PC, mit deinen Freunden oder auf
|
|
der offenen Platform, nach deinen Regeln, mit begleitenden Statistiken.
|
|
</p>
|
|
<nav class="flex items-center justify-center gap-4">
|
|
{#if auth.user}
|
|
<Link href={toUrl(dashboard())} as="button">Dashboard</Link>
|
|
{:else}
|
|
<Link href={toUrl(login())}>
|
|
<Button>Anmelden</Button>
|
|
</Link>
|
|
{#if canRegister}
|
|
<Link href={toUrl(register())}>
|
|
<Button variant="outline">Registrieren</Button>
|
|
</Link>
|
|
{/if}
|
|
{/if}
|
|
<Button onclick={toggleMode} variant="outline" size="icon">
|
|
<SunIcon
|
|
class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all! dark:scale-0 dark:-rotate-90"
|
|
/>
|
|
<MoonIcon
|
|
class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all! dark:scale-100 dark:rotate-0"
|
|
/>
|
|
<span class="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</nav>
|
|
</div>
|
|
<div class="relative group mt-14">
|
|
<div
|
|
class="absolute -top-6 right-12 w-[90%] h-12 lg:h-[80%] bg-primary/50 blur-3xl rounded-full img-shadow-animation"
|
|
></div>
|
|
|
|
<enhanced:img
|
|
class="w-full mx-auto rounded-xl"
|
|
src={burg}
|
|
alt="dashboard using shadcn-svelte"
|
|
/>
|
|
|
|
<div
|
|
class="absolute bottom-0 left-0 w-full h-20 md:h-28 bg-linear-to-b from-background/0 via-background/50 to-background"
|
|
></div>
|
|
</div>
|