first commit

resources/js/components/my/Hero.svelte

@@ -0,0 +1,82 @@
+<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>