<template>
<Head title="Welcome" />
<div class="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
<img
id="background"
class="absolute -left-20 top-0 max-w-[877px]"
src="https://laravel.com/assets/img/welcome/background.svg"
alt="Background"
/>
<div
class="relative min-h-screen flex flex-col items-center justify-center selection:bg-[#FF2D20] selection:text-white"
>
<div class="relative w-full max-w-2xl px-6 lg:max-w-7xl">
<header class="grid grid-cols-2 items-center gap-2 py-10 lg:grid-cols-3">
<div class="flex lg:justify-center lg:col-start-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-12 w-auto lg:h-16 lg:text-[#FF2D20]">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
/>
</svg>
</div>
<nav v-if="canLogin" class="-mx-3 flex flex-1 justify-end">
<Link
v-if="$page.props.auth.user"
:href="route('dashboard')"
class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
>
Dashboard
</Link>
<template v-else>
<Link
:href="route('login')"
class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
>
Entrar
</Link>
</template>
</nav>
</header>
<footer class="py-16 text-center text-sm text-black dark:text-white/70">
DB Sync v{{ appVersion }}
</footer>
</div>
</div>
</div>
</template>
<script setup>
import { Head, Link } from '@inertiajs/vue3';
defineProps({
canLogin: {
type: Boolean,
},
});
</script>
|
