Files
RecruIT/resources/js/Layouts/GuestLayout.vue

34 lines
1.5 KiB
Vue

<script setup>
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import { Link } from '@inertiajs/vue3';
import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
</script>
<template>
<EnvironmentBanner />
<div class="flex min-h-screen flex-col items-center justify-center bg-neutral pt-6 sm:pt-0 font-sans text-anthracite selection:bg-highlight selection:text-anthracite">
<div class="w-full max-w-md px-6">
<!-- Header and Logo -->
<div class="mb-8 flex flex-col justify-center items-center gap-4">
<Link href="/" class="flex flex-col items-center gap-3 group">
<img src="/images/logo.png" alt="Logo" class="h-16 object-contain group-hover:-translate-y-1 transition-all duration-300" />
<span class="text-xs font-subtitle uppercase tracking-[0.2em] text-anthracite/50 font-bold mt-1">Espace sécurisé</span>
</Link>
</div>
<!-- Content Card -->
<div class="w-full overflow-hidden bg-white px-8 py-10 shadow-xl shadow-anthracite/5 rounded-3xl border border-anthracite/5">
<slot />
</div>
<!-- Footer Footer -->
<div class="mt-8 text-center">
<Link href="/" class="text-primary hover:text-highlight transition-colors text-sm font-subtitle font-bold">
&larr; Retour à l'accueil
</Link>
</div>
</div>
</div>
</template>