jeremy/RecruIT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: localize errors, translate profile, refine jobs UI

Browse Source
This commit is contained in:
jeremy bayse
2026-05-08 12:20:30 +02:00
parent fd4a39a703
commit 7c01803f46
29 changed files with 3633 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
resources/js/Pages/Welcome.vue
View File

@@ -5,6 +5,10 @@ defineProps({
canLogin: {
type: Boolean,
},
latestJobs: {
type: Array,
default: () => [],
}
});
</script>
@@ -15,14 +19,9 @@ defineProps({
<!-- Navigation -->
<nav class="relative z-50 flex items-center justify-between px-6 py-8 md:px-12 max-w-7xl mx-auto">
<div class="flex items-center gap-3 group cursor-default">
<div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center shadow-lg shadow-primary/30 group-hover:scale-105 transition-transform duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 18v3m4.95-4.95l.707.707M12 3c-4.418 0-8 3.582-8 8 0 2.209.895 4.209 2.343 5.657L12 21l5.657-5.343A7.994 7.994 0 0020 11c0-4.418-3.582-8-8-8z" />
</svg>
</div>
<span class="text-3xl font-serif font-bold text-primary">RECRU<span class="text-accent italic px-1">IT</span></span>
</div>
<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">
@@ -55,16 +54,15 @@ defineProps({
<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>
Évaluation des candidats
Communauté d'agglomération Béziers Méditerranée
</div>
<h1 class="text-5xl md:text-7xl font-serif leading-[1.1] text-white">
Découvrez le potentiel de vos <span class="text-highlight">futures équipes</span>.
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">
Recru.IT simplifie le processus d'évaluation.
Générez des tests sur-mesure pour chaque poste et accédez à une analyse de compétences claire, précise et équitable.
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">
@@ -73,7 +71,13 @@ defineProps({
: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"
>
S'identifier
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>
@@ -126,12 +130,56 @@ defineProps({
</div>
</main>
<!-- Features -->
<!-- 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">&rarr;</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">&rarr;</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">Un processus optimisé</h2>
<p class="text-anthracite/70 font-sans max-w-2xl mx-auto text-lg pt-2">Pensé pour offrir la meilleure expérience d'évaluation technique aux communautés d'agglomération et leurs candidats.</p>
<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">
@@ -139,33 +187,33 @@ defineProps({
<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="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
<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">Quiz Dynamiques</h3>
<p class="text-anthracite/70 font-sans text-sm leading-relaxed">Une génération intelligente de questions basées sur l'Intelligence Artificielle pour cibler les attentes du poste.</p>
<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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
<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">Sécurisé & Traçable</h3>
<p class="text-anthracite/70 font-sans text-sm leading-relaxed">Respect de l'intégrité des compétences et de la RGPD, sans biais lors de l'analyse des profils.</p>
<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="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
<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">Expérience fluide</h3>
<p class="text-anthracite/70 font-sans text-sm leading-relaxed">Une interface candidate repensée pour valoriser la marque employeur et simplifier la passation d'examens.</p>
<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>