first commit

resources/js/layouts/auth/AuthCardLayout.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { Link } from '@inertiajs/svelte';
+    import type { Snippet } from 'svelte';
+    import AppLogoIcon from '@/components/AppLogoIcon.svelte';
+    import {
+        Card,
+        CardContent,
+        CardDescription,
+        CardHeader,
+        CardTitle,
+    } from '@/components/ui/card';
+    import { home } from '@/routes';
+
+    let {
+        title = '',
+        description = '',
+        children,
+    }: {
+        title?: string;
+        description?: string;
+        children?: Snippet;
+    } = $props();
+</script>
+
+<div
+    class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10"
+>
+    <div class="flex w-full max-w-md flex-col gap-6">
+        <Link
+            href={home()}
+            class="flex items-center gap-2 self-center font-medium"
+        >
+            <div class="flex h-9 w-9 items-center justify-center">
+                <AppLogoIcon
+                    class="size-9 fill-current text-black dark:text-white"
+                />
+            </div>
+        </Link>
+
+        <div class="flex flex-col gap-6">
+            <Card class="rounded-xl">
+                <CardHeader class="px-10 pt-8 pb-0 text-center">
+                    <CardTitle class="text-xl">{title}</CardTitle>
+                    <CardDescription>
+                        {description}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent class="px-10 py-8">
+                    {@render children?.()}
+                </CardContent>
+            </Card>
+        </div>
+    </div>
+</div>

resources/js/layouts/auth/AuthSimpleLayout.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { Link } from '@inertiajs/svelte';
+    import type { Snippet } from 'svelte';
+    import AppLogoIcon from '@/components/AppLogoIcon.svelte';
+    import { home } from '@/routes';
+
+    let {
+        title = '',
+        description = '',
+        children,
+    }: {
+        title?: string;
+        description?: string;
+        children?: Snippet;
+    } = $props();
+</script>
+
+<div
+    class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10"
+>
+    <div class="w-full max-w-sm">
+        <div class="flex flex-col gap-8">
+            <div class="flex flex-col items-center gap-4">
+                <Link
+                    href={home()}
+                    class="flex flex-col items-center gap-2 font-medium"
+                >
+                    <AppLogoIcon
+                        class="size-14 fill-current text-foreground dark:text-white"
+                    />
+                    <span class="sr-only">{title}</span>
+                </Link>
+                <div class="space-y-2 text-center">
+                    <h1 class="text-xl font-medium">{title}</h1>
+                    <p class="text-center text-sm text-muted-foreground">
+                        {description}
+                    </p>
+                </div>
+            </div>
+            {@render children?.()}
+        </div>
+    </div>
+</div>

resources/js/layouts/auth/AuthSplitLayout.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Link, page } from '@inertiajs/svelte';
+    import type { Snippet } from 'svelte';
+    import AppLogoIcon from '@/components/AppLogoIcon.svelte';
+    import { home } from '@/routes';
+
+    let {
+        title = '',
+        description = '',
+        children,
+    }: {
+        title?: string;
+        description?: string;
+        children?: Snippet;
+    } = $props();
+
+    const name = $derived(page.props.name);
+</script>
+
+<div
+    class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0"
+>
+    <div
+        class="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r"
+    >
+        <div class="absolute inset-0 bg-zinc-900"></div>
+        <Link
+            href={home()}
+            class="relative z-20 flex items-center text-lg font-medium"
+        >
+            <AppLogoIcon class="mr-2 size-8 fill-current text-white" />
+            {name}
+        </Link>
+    </div>
+    <div class="lg:p-8">
+        <div
+            class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"
+        >
+            <div class="flex flex-col space-y-2 text-center">
+                {#if title}
+                    <h1 class="text-xl font-medium tracking-tight">{title}</h1>
+                {/if}
+                {#if description}
+                    <p class="text-sm text-muted-foreground">{description}</p>
+                {/if}
+            </div>
+            {@render children?.()}
+        </div>
+    </div>
+</div>