235 lines
16 KiB
Vue
235 lines
16 KiB
Vue
<script setup>
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
|
|
defineProps({
|
|
canLogin: {
|
|
type: Boolean,
|
|
},
|
|
latestJobs: {
|
|
type: Array,
|
|
default: () => [],
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Recru IT" />
|
|
|
|
<div class="min-h-screen bg-neutral text-anthracite font-sans overflow-x-hidden selection:bg-highlight selection:text-anthracite">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="relative z-50 flex items-center justify-between px-6 py-8 md:px-12 max-w-7xl mx-auto">
|
|
<Link href="/" class="flex items-center gap-3 group">
|
|
<img src="/images/logo.png" alt="Logo" class="h-12 object-contain group-hover:scale-105 transition-transform duration-300" />
|
|
</Link>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<template v-if="$page.props.auth.user">
|
|
<Link :href="route('dashboard')" class="px-8 py-3 bg-highlight text-[#3a2800] rounded-lg font-subtitle font-bold text-sm hover:brightness-110 hover:shadow-xl hover:shadow-highlight/20 transition-all duration-300">
|
|
Accéder au Tableau de bord
|
|
</Link>
|
|
</template>
|
|
<template v-else>
|
|
<Link :href="route('login')" class="px-8 py-3 bg-highlight text-[#3a2800] rounded-lg font-subtitle font-bold text-sm hover:brightness-110 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-highlight/20 transition-all duration-300">
|
|
Connexion
|
|
</Link>
|
|
</template>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Fond Institutionnel Hero Section -->
|
|
<main class="relative z-10 w-full mt-4">
|
|
<div class="max-w-[95%] mx-auto bg-primary rounded-[2.5rem] overflow-hidden shadow-2xl relative px-8 py-20 pb-32 md:px-16 md:py-32">
|
|
|
|
<!-- Graphic Elements -->
|
|
<div class="absolute top-0 right-0 w-[50%] h-full bg-gradient-to-l from-sky/40 to-transparent pointer-events-none"></div>
|
|
<div class="absolute -bottom-24 -left-24 w-96 h-96 bg-accent/20 rounded-full blur-[100px] pointer-events-none"></div>
|
|
|
|
<div class="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
|
|
<!-- Hero Content -->
|
|
<div class="space-y-10 text-white">
|
|
<div class="inline-flex items-center gap-3 px-5 py-2.5 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-white text-sm font-subtitle font-bold uppercase tracking-widest shadow-inner">
|
|
<span class="relative flex h-3 w-3">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-highlight opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-3 w-3 bg-highlight"></span>
|
|
</span>
|
|
Communauté d'agglomération Béziers Méditerranée
|
|
</div>
|
|
|
|
<h1 class="text-5xl md:text-7xl font-serif leading-[1.1] text-white">
|
|
Donnez du sens à votre <span class="text-highlight"> carrière</span>.
|
|
</h1>
|
|
|
|
<p class="text-lg md:text-xl text-sand font-sans font-light max-w-xl leading-relaxed">
|
|
Découvrez nos offres d'emploi, postulez facilement et rejoignez une collectivité dynamique au service de son territoire et de ses citoyens.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 pt-4">
|
|
<Link
|
|
v-if="!$page.props.auth.user"
|
|
:href="route('login')"
|
|
class="inline-flex items-center justify-center px-10 py-4 bg-highlight text-[#3a2800] rounded-xl font-subtitle font-bold uppercase tracking-wider text-sm hover:brightness-110 hover:-translate-y-1 hover:shadow-2xl hover:shadow-highlight/40 transition-all duration-300"
|
|
>
|
|
Espace candidat
|
|
</Link>
|
|
<Link
|
|
:href="route('jobs.index')"
|
|
class="inline-flex items-center justify-center px-10 py-4 bg-white/10 text-white border border-white/20 rounded-xl font-subtitle font-bold uppercase tracking-wider text-sm hover:bg-white/20 hover:-translate-y-1 hover:shadow-xl transition-all duration-300"
|
|
>
|
|
Voir nos offres
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right illustration (abstract or UI mockup) -->
|
|
<div class="hidden lg:flex justify-end relative h-full">
|
|
<div class="w-full max-w-md bg-sand rounded-3xl p-8 shadow-2xl relative transform rotate-2 hover:rotate-0 transition-transform duration-500 border border-white/10">
|
|
<!-- Fake dashboard element -->
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-center border-b border-anthracite/10 pb-4">
|
|
<div class="h-6 w-32 bg-primary/20 rounded"></div>
|
|
<div class="h-6 w-12 bg-accent/20 rounded-full"></div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="h-24 bg-white rounded-xl shadow-sm border border-anthracite/5 p-4 flex flex-col justify-between">
|
|
<div class="h-3 w-20 bg-neutral rounded"></div>
|
|
<div class="h-8 w-16 bg-primary/10 rounded"></div>
|
|
</div>
|
|
<div class="h-24 bg-white rounded-xl shadow-sm border border-anthracite/5 p-4 flex flex-col justify-between">
|
|
<div class="h-3 w-24 bg-neutral rounded"></div>
|
|
<div class="h-8 w-full bg-highlight/20 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="h-32 bg-white rounded-xl shadow-sm border border-anthracite/5 p-4 flex gap-4">
|
|
<div class="w-16 h-16 bg-sky/20 rounded-full shrink-0"></div>
|
|
<div class="flex-1 space-y-3 py-2">
|
|
<div class="h-3 w-[60%] bg-anthracite/20 rounded"></div>
|
|
<div class="h-2 w-[80%] bg-neutral rounded"></div>
|
|
<div class="h-2 w-[40%] bg-neutral rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating badge -->
|
|
<div class="absolute -left-12 bottom-12 bg-white p-5 rounded-2xl shadow-xl flex items-center gap-4 border border-sand/50 animate-bounce" style="animation-duration: 3s">
|
|
<div class="w-12 h-12 bg-accent rounded-full flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-anthracite/50 font-subtitle font-bold uppercase tracking-wider">Candidat</p>
|
|
<p class="text-anthracite font-bold">Approuvé</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Latest Jobs -->
|
|
<section class="relative z-10 bg-neutral px-6 py-24 md:px-12 -mt-16 pt-32">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-end mb-12 gap-6">
|
|
<div>
|
|
<h2 class="text-3xl md:text-5xl font-serif text-primary">Dernières offres</h2>
|
|
<p class="text-anthracite/70 font-sans text-lg pt-2">Rejoignez-nous et participez à nos projets d'envergure.</p>
|
|
</div>
|
|
<Link :href="route('jobs.index')" class="hidden sm:inline-flex items-center gap-2 text-highlight font-bold font-subtitle uppercase tracking-wider text-sm hover:text-primary transition-colors">
|
|
Voir toutes les offres <span aria-hidden="true">→</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div v-for="job in latestJobs" :key="job.id" class="relative bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-anthracite/10 group flex flex-col">
|
|
<div class="p-8 flex-1">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="px-3 py-1 bg-highlight/10 text-highlight rounded-full text-[10px] font-black uppercase tracking-widest border border-highlight/20">Nouveau</span>
|
|
<span class="text-xs text-anthracite/50 font-bold" v-if="job.tenant">{{ job.tenant.name }}</span>
|
|
</div>
|
|
<h3 class="text-xl font-serif font-black text-primary mb-3 line-clamp-2 group-hover:text-highlight transition-colors">{{ job.title }}</h3>
|
|
<p class="text-anthracite/70 text-sm mb-6 line-clamp-3">{{ job.description }}</p>
|
|
</div>
|
|
<div class="px-8 py-4 bg-sand/30 border-t border-anthracite/5 flex justify-between items-center">
|
|
<Link :href="route('jobs.show', job.id)" class="text-sm font-bold text-highlight uppercase tracking-wider hover:text-primary transition-colors before:absolute before:inset-0">
|
|
Découvrir
|
|
</Link>
|
|
<svg class="w-5 h-5 text-highlight group-hover:translate-x-1 transition-transform relative z-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!latestJobs?.length" class="col-span-3 text-center py-12 text-anthracite/50 italic">
|
|
Aucune offre d'emploi disponible pour le moment.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 text-center sm:hidden">
|
|
<Link :href="route('jobs.index')" class="inline-flex items-center gap-2 text-highlight font-bold font-subtitle uppercase tracking-wider text-sm hover:text-primary transition-colors">
|
|
Voir toutes les offres <span aria-hidden="true">→</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="relative z-10 bg-surface px-6 py-24 md:px-12 border-t border-anthracite/10">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-16 space-y-4">
|
|
<h2 class="text-3xl md:text-5xl font-serif text-primary">Pourquoi nous rejoindre ?</h2>
|
|
<p class="text-anthracite/70 font-sans max-w-2xl mx-auto text-lg pt-2">La Communauté d'Agglomération Béziers Méditerranée s'engage au quotidien pour ses collaborateurs.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Feature 1 -->
|
|
<div class="p-8 bg-white rounded-2xl shadow-md shadow-anthracite/5 border-b-4 border-primary hover:-translate-y-2 transition-transform duration-300">
|
|
<div class="w-14 h-14 bg-sky/10 rounded-xl flex items-center justify-center mb-6">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-subtitle font-bold text-primary mb-3">Opportunités variées</h3>
|
|
<p class="text-anthracite/70 font-sans text-sm leading-relaxed">De nombreux domaines d'expertise sont représentés au sein de notre collectivité. Trouvez le poste qui correspond à vos ambitions.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="p-8 bg-white rounded-2xl shadow-md shadow-anthracite/5 border-b-4 border-highlight hover:-translate-y-2 transition-transform duration-300">
|
|
<div class="w-14 h-14 bg-highlight/10 rounded-xl flex items-center justify-center mb-6">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-highlight" 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-subtitle font-bold text-anthracite mb-3">Service du public</h3>
|
|
<p class="text-anthracite/70 font-sans text-sm leading-relaxed">Donnez du sens à votre carrière en participant activement au développement et à l'attractivité de notre territoire.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="p-8 bg-white rounded-2xl shadow-md shadow-anthracite/5 border-b-4 border-accent hover:-translate-y-2 transition-transform duration-300">
|
|
<div class="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-6">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-subtitle font-bold text-accent mb-3">Processus simplifié</h3>
|
|
<p class="text-anthracite/70 font-sans text-sm leading-relaxed">Postulez en quelques clics, suivez l'avancement de vos candidatures et passez vos évaluations directement en ligne.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="relative bg-sand px-6 py-12 text-center border-t border-anthracite/10">
|
|
<p class="text-primary font-subtitle font-bold text-xs uppercase tracking-[0.1em]">
|
|
© {{ new Date().getFullYear() }} — Communauté d'Agglomération Béziers Méditerranée — Tous droits réservés
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
/* Import custom typographies */
|
|
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&display=swap');
|
|
</style>
|