164 lines
8.9 KiB
Vue
164 lines
8.9 KiB
Vue
<script setup>
|
||
import { Head, Link } from '@inertiajs/vue3';
|
||
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
|
||
|
||
defineProps({
|
||
canLogin: {
|
||
type: Boolean,
|
||
},
|
||
canRegister: {
|
||
type: Boolean,
|
||
},
|
||
laravelVersion: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
phpVersion: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Head title="Bienvenue - Fiche Agent" />
|
||
|
||
<div class="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50 min-h-screen flex flex-col">
|
||
<!-- Background Effects -->
|
||
<div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
|
||
<div class="absolute -top-[30%] -left-[10%] w-[70%] h-[70%] rounded-full bg-red-500/10 blur-[120px] dark:bg-red-900/20"></div>
|
||
<div class="absolute top-[40%] -right-[10%] w-[60%] h-[60%] rounded-full bg-yellow-500/10 blur-[100px] dark:bg-yellow-600/10"></div>
|
||
</div>
|
||
|
||
<div class="relative w-full max-w-7xl mx-auto px-6 lg:px-8 z-10 flex-grow flex flex-col">
|
||
<!-- Header -->
|
||
<header class="flex justify-between items-center py-6">
|
||
<div class="flex items-center gap-2">
|
||
<ApplicationLogo class="w-12 h-12" />
|
||
<span class="text-xl font-bold text-gray-900 dark:text-white tracking-tight">
|
||
CAP <span class="text-red-600">CABM</span>
|
||
</span>
|
||
</div>
|
||
<nav v-if="canLogin" class="flex gap-4">
|
||
<Link
|
||
v-if="$page.props.auth.user"
|
||
:href="route('dashboard')"
|
||
class="rounded-full px-5 py-2 text-sm font-semibold text-white bg-red-600 hover:bg-red-500 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-black"
|
||
>
|
||
Tableau de Bord
|
||
</Link>
|
||
|
||
<template v-else>
|
||
<Link
|
||
:href="route('login')"
|
||
class="rounded-full px-5 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-900/10 hover:ring-gray-900/20 dark:text-white dark:ring-white/20 dark:hover:ring-white/30 transition"
|
||
>
|
||
Connexion
|
||
</Link>
|
||
</template>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Hero Section -->
|
||
<main class="flex-grow flex flex-col justify-center items-center text-center mt-10 lg:mt-20 mb-20">
|
||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-300 text-xs font-medium mb-6 animate-fade-in-up">
|
||
<span class="relative flex h-2 w-2">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
|
||
</span>
|
||
Construire l’Accueil et le Parcours
|
||
</div>
|
||
|
||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight text-gray-900 dark:text-white mb-6 max-w-4xl">
|
||
CAP <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-yellow-500 to-blue-600">CABM</span>
|
||
</h1>
|
||
|
||
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mb-10 leading-relaxed">
|
||
La plateforme dédiée à l'accueil et au parcours des agents de l'Agglomération Béziers Méditerranée.
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
|
||
<Link
|
||
v-if="$page.props.auth.user"
|
||
:href="route('dashboard')"
|
||
class="px-8 py-3.5 rounded-full text-base font-bold text-white bg-gradient-to-r from-red-600 to-red-800 hover:from-red-500 hover:to-red-700 shadow-lg shadow-red-500/30 transition transform hover:-translate-y-0.5"
|
||
>
|
||
Accéder à mon espace
|
||
</Link>
|
||
<Link
|
||
v-else
|
||
:href="route('login')"
|
||
class="px-8 py-3.5 rounded-full text-base font-bold text-white bg-gradient-to-r from-red-600 to-red-800 hover:from-red-500 hover:to-red-700 shadow-lg shadow-red-500/30 transition transform hover:-translate-y-0.5"
|
||
>
|
||
Commencer maintenant
|
||
</Link>
|
||
</div>
|
||
|
||
<!-- Features Grid -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-24 w-full max-w-6xl text-left">
|
||
<div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-6 rounded-2xl border border-gray-100 dark:border-gray-700 hover:border-red-500/50 transition duration-300 group">
|
||
<div class="w-12 h-12 bg-red-100 dark:bg-red-900/50 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition duration-300">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Ressources Humaines</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||
Centralisez les demandes d'arrivée et de départ des agents de l'agglomération.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-6 rounded-2xl border border-gray-100 dark:border-gray-700 hover:border-blue-500/50 transition duration-300 group">
|
||
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition duration-300">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Services Supports</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||
DSI, Bâtiment, Parc Auto : recevez vos ordres de mission automatiquement.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-6 rounded-2xl border border-gray-100 dark:border-gray-700 hover:border-yellow-500/50 transition duration-300 group">
|
||
<div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/50 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition duration-300">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Efficacité & Suivi</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||
Un tableau de bord aux couleurs de Béziers pour piloter l'activité en temps réel.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
|
||
© {{ new Date().getFullYear() }} CAP CABM. Tous droits réservés.
|
||
<div class="mt-2 text-xs opacity-70">
|
||
Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.animate-fade-in-up {
|
||
animation: fadeInUp 0.8s ease-out forwards;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
</style>
|