75 lines
2.9 KiB
Vue
75 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import AppLogoIcon from '@/components/AppLogoIcon.vue';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { home } from '@/routes/index';
|
|
import type { AuthLayoutProps } from '@/types';
|
|
|
|
defineProps<AuthLayoutProps>();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="bg-background relative flex min-h-svh flex-col items-center justify-center overflow-hidden p-5 sm:p-8"
|
|
>
|
|
<div
|
|
class="pointer-events-none absolute inset-0 overflow-hidden"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="bg-primary/12 absolute -left-24 -top-24 size-80 rounded-full blur-3xl"
|
|
/>
|
|
<div
|
|
class="bg-secondary/55 absolute -bottom-36 -right-20 size-[28rem] rounded-full blur-3xl"
|
|
/>
|
|
<div
|
|
class="absolute inset-0 bg-[linear-gradient(to_right,var(--outline-variant)_1px,transparent_1px),linear-gradient(to_bottom,var(--outline-variant)_1px,transparent_1px)] bg-[size:48px_48px] opacity-[0.08]"
|
|
/>
|
|
</div>
|
|
|
|
<div class="relative flex w-full max-w-[28rem] flex-col gap-7">
|
|
<Link
|
|
:href="home()"
|
|
class="group flex items-center gap-3 self-center font-semibold"
|
|
>
|
|
<div
|
|
class="bg-primary text-primary-foreground flex size-10 items-center justify-center rounded-lg shadow-[0_10px_28px_rgba(34,197,94,0.22)] transition-transform group-hover:-translate-y-0.5"
|
|
>
|
|
<AppLogoIcon class="size-5 fill-current" />
|
|
</div>
|
|
<span class="text-lg tracking-tight">KanbanGit</span>
|
|
</Link>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<Card
|
|
class="border-outline-variant/80 rounded-xl py-0 shadow-[0_24px_70px_rgba(10,20,35,0.12)] hover:shadow-[0_24px_70px_rgba(10,20,35,0.12)]"
|
|
>
|
|
<CardHeader
|
|
class="px-6 pb-0 pt-7 text-center sm:px-9 sm:pt-9"
|
|
>
|
|
<CardTitle
|
|
class="text-2xl font-semibold tracking-[-0.025em]"
|
|
>{{ title }}</CardTitle
|
|
>
|
|
<CardDescription>
|
|
{{ description }}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="px-6 pb-7 pt-7 sm:px-9 sm:pb-9">
|
|
<slot />
|
|
</CardContent>
|
|
</Card>
|
|
<p class="text-muted-foreground text-center text-xs">
|
|
Open source project management, hosted on your terms.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|