feat: localize errors, translate profile, refine jobs UI
This commit is contained in:
jeremy bayse
@@ -109,17 +109,9 @@ const isActive = (item) => {
|
||||
<!-- Logo -->
|
||||
<div class="h-[60px] flex items-center border-b border-white/[0.07] px-4 shrink-0">
|
||||
<Link :href="route('dashboard')" class="flex items-center gap-3 overflow-hidden">
|
||||
<!-- Icône -->
|
||||
<div class="w-[30px] h-[30px] bg-highlight rounded-lg flex items-center justify-center shrink-0 shadow-gold">
|
||||
<svg class="w-4 h-4 text-highlight-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Wordmark -->
|
||||
<Transition name="fade">
|
||||
<span v-if="isSidebarOpen" class="font-serif font-black text-[17px] text-white tracking-tight whitespace-nowrap">
|
||||
RECRU<span class="text-highlight italic">IT</span>
|
||||
</span>
|
||||
<img v-if="isSidebarOpen" src="/images/logo.png" alt="Logo" class="h-8 object-contain" />
|
||||
<img v-else src="/images/logo.png" alt="Logo" class="h-6 object-contain" />
|
||||
</Transition>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -21,16 +21,7 @@ const page = usePage();
|
||||
<!-- Left side: Logo -->
|
||||
<div class="flex items-center">
|
||||
<Link :href="route('dashboard')" class="flex items-center gap-3">
|
||||
<!-- Logo Icon -->
|
||||
<div class="w-[34px] h-[34px] bg-highlight rounded-xl flex items-center justify-center shrink-0 shadow-gold hover:-translate-y-0.5 transition-transform duration-200">
|
||||
<svg class="w-4 h-4 text-highlight-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Wordmark -->
|
||||
<span class="font-serif font-black text-xl text-primary tracking-tight whitespace-nowrap">
|
||||
RECRU<span class="text-highlight italic">IT</span>
|
||||
</span>
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 object-contain" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -12,12 +12,7 @@ import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
|
||||
<!-- 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">
|
||||
<div class="w-16 h-16 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/30 group-hover:-translate-y-1 transition-all duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 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-black tracking-tight text-primary">RECRU<span class="text-accent italic px-1">IT</span></span>
|
||||
<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>
|
||||
|
||||
@@ -16,14 +16,14 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Profile" />
|
||||
<Head title="Profil" />
|
||||
|
||||
<AuthenticatedLayout>
|
||||
<template #header>
|
||||
<h2
|
||||
class="text-xl font-semibold leading-tight text-gray-800"
|
||||
>
|
||||
Profile
|
||||
Profil
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -42,36 +42,32 @@ const closeModal = () => {
|
||||
<section class="space-y-6">
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900">
|
||||
Delete Account
|
||||
Supprimer le compte
|
||||
</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Once your account is deleted, all of its resources and data will
|
||||
be permanently deleted. Before deleting your account, please
|
||||
download any data or information that you wish to retain.
|
||||
Une fois votre compte supprimé, toutes ses ressources et données seront définitivement supprimées. Avant de supprimer votre compte, veuillez télécharger les données ou informations que vous souhaitez conserver.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<DangerButton @click="confirmUserDeletion">Delete Account</DangerButton>
|
||||
<DangerButton @click="confirmUserDeletion">Supprimer le compte</DangerButton>
|
||||
|
||||
<Modal :show="confirmingUserDeletion" @close="closeModal">
|
||||
<div class="p-6">
|
||||
<h2
|
||||
class="text-lg font-medium text-gray-900"
|
||||
>
|
||||
Are you sure you want to delete your account?
|
||||
Êtes-vous sûr de vouloir supprimer votre compte ?
|
||||
</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Once your account is deleted, all of its resources and data
|
||||
will be permanently deleted. Please enter your password to
|
||||
confirm you would like to permanently delete your account.
|
||||
Une fois votre compte supprimé, toutes ses ressources et données seront définitivement supprimées. Veuillez saisir votre mot de passe pour confirmer que vous souhaitez supprimer définitivement votre compte.
|
||||
</p>
|
||||
|
||||
<div class="mt-6">
|
||||
<InputLabel
|
||||
for="password"
|
||||
value="Password"
|
||||
value="Mot de passe"
|
||||
class="sr-only"
|
||||
/>
|
||||
|
||||
@@ -81,7 +77,7 @@ const closeModal = () => {
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
class="mt-1 block w-3/4"
|
||||
placeholder="Password"
|
||||
placeholder="Mot de passe"
|
||||
@keyup.enter="deleteUser"
|
||||
/>
|
||||
|
||||
@@ -90,7 +86,7 @@ const closeModal = () => {
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<SecondaryButton @click="closeModal">
|
||||
Cancel
|
||||
Annuler
|
||||
</SecondaryButton>
|
||||
|
||||
<DangerButton
|
||||
@@ -99,7 +95,7 @@ const closeModal = () => {
|
||||
:disabled="form.processing"
|
||||
@click="deleteUser"
|
||||
>
|
||||
Delete Account
|
||||
Supprimer le compte
|
||||
</DangerButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -37,18 +37,17 @@ const updatePassword = () => {
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900">
|
||||
Update Password
|
||||
Mettre à jour le mot de passe
|
||||
</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Ensure your account is using a long, random password to stay
|
||||
secure.
|
||||
Assurez-vous que votre compte utilise un long mot de passe aléatoire pour rester sécurisé.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="updatePassword" class="mt-6 space-y-6">
|
||||
<div>
|
||||
<InputLabel for="current_password" value="Current Password" />
|
||||
<InputLabel for="current_password" value="Mot de passe actuel" />
|
||||
|
||||
<TextInput
|
||||
id="current_password"
|
||||
@@ -66,7 +65,7 @@ const updatePassword = () => {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InputLabel for="password" value="New Password" />
|
||||
<InputLabel for="password" value="Nouveau mot de passe" />
|
||||
|
||||
<TextInput
|
||||
id="password"
|
||||
@@ -83,7 +82,7 @@ const updatePassword = () => {
|
||||
<div>
|
||||
<InputLabel
|
||||
for="password_confirmation"
|
||||
value="Confirm Password"
|
||||
value="Confirmer le mot de passe"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
@@ -101,7 +100,7 @@ const updatePassword = () => {
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<PrimaryButton :disabled="form.processing">Save</PrimaryButton>
|
||||
<PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
|
||||
|
||||
<Transition
|
||||
enter-active-class="transition ease-in-out"
|
||||
@@ -113,7 +112,7 @@ const updatePassword = () => {
|
||||
v-if="form.recentlySuccessful"
|
||||
class="text-sm text-gray-600"
|
||||
>
|
||||
Saved.
|
||||
Enregistré.
|
||||
</p>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
@@ -26,11 +26,11 @@ const form = useForm({
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900">
|
||||
Profile Information
|
||||
Informations du profil
|
||||
</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Update your account's profile information and email address.
|
||||
Mettez à jour les informations de profil et l'adresse e-mail de votre compte.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
@@ -39,7 +39,7 @@ const form = useForm({
|
||||
class="mt-6 space-y-6"
|
||||
>
|
||||
<div>
|
||||
<InputLabel for="name" value="Name" />
|
||||
<InputLabel for="name" value="Nom" />
|
||||
|
||||
<TextInput
|
||||
id="name"
|
||||
@@ -55,7 +55,7 @@ const form = useForm({
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InputLabel for="email" value="Email" />
|
||||
<InputLabel for="email" value="E-mail" />
|
||||
|
||||
<TextInput
|
||||
id="email"
|
||||
@@ -71,14 +71,14 @@ const form = useForm({
|
||||
|
||||
<div v-if="mustVerifyEmail && user.email_verified_at === null">
|
||||
<p class="mt-2 text-sm text-gray-800">
|
||||
Your email address is unverified.
|
||||
Votre adresse e-mail n'est pas vérifiée.
|
||||
<Link
|
||||
:href="route('verification.send')"
|
||||
method="post"
|
||||
as="button"
|
||||
class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
Click here to re-send the verification email.
|
||||
Cliquez ici pour renvoyer l'e-mail de vérification.
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@@ -86,12 +86,12 @@ const form = useForm({
|
||||
v-show="status === 'verification-link-sent'"
|
||||
class="mt-2 text-sm font-medium text-green-600"
|
||||
>
|
||||
A new verification link has been sent to your email address.
|
||||
Un nouveau lien de vérification a été envoyé à votre adresse e-mail.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<PrimaryButton :disabled="form.processing">Save</PrimaryButton>
|
||||
<PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
|
||||
|
||||
<Transition
|
||||
enter-active-class="transition ease-in-out"
|
||||
@@ -103,7 +103,7 @@ const form = useForm({
|
||||
v-if="form.recentlySuccessful"
|
||||
class="text-sm text-gray-600"
|
||||
>
|
||||
Saved.
|
||||
Enregistré.
|
||||
</p>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
@@ -14,18 +14,13 @@ defineProps({
|
||||
|
||||
<div class="min-h-screen bg-neutral text-anthracite font-sans">
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="bg-primary shadow-lg p-6">
|
||||
<nav class="bg-white border-b border-anthracite/10 p-6">
|
||||
<div class="max-w-4xl mx-auto flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" 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-2xl font-serif font-bold text-white">RECRU<span class="text-highlight italic px-1">IT</span></span>
|
||||
</div>
|
||||
<Link href="/" class="flex items-center gap-3">
|
||||
<img src="/images/logo.png" alt="Logo CABM" class="h-12 object-contain" />
|
||||
</Link>
|
||||
<div>
|
||||
<Link :href="route('login')" class="text-sm font-bold text-white hover:text-highlight transition-colors">
|
||||
<Link :href="route('login')" class="text-sm font-bold text-primary hover:text-highlight transition-colors">
|
||||
Espace Recruteur
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -33,18 +33,25 @@ const submit = () => {
|
||||
|
||||
<div class="min-h-screen bg-neutral text-anthracite font-sans">
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="bg-primary shadow-lg p-6">
|
||||
<div class="max-w-4xl mx-auto flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" 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-2xl font-serif font-bold text-white">RECRU<span class="text-highlight italic px-1">IT</span></span>
|
||||
<nav class="bg-white border-b border-anthracite/10 p-6">
|
||||
<div class="max-w-4xl mx-auto flex items-center justify-between">
|
||||
<Link href="/" class="flex items-center gap-3">
|
||||
<img src="/images/logo.png" alt="Logo CABM" class="h-12 object-contain" />
|
||||
</Link>
|
||||
<Link :href="route('jobs.index')" class="text-sm font-bold text-primary hover:text-highlight transition-colors">
|
||||
← Retour aux offres
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-4xl mx-auto py-12 px-6">
|
||||
<div class="mb-6">
|
||||
<Link :href="route('jobs.index')" class="inline-flex items-center gap-2 text-sm font-bold text-anthracite/60 hover:text-primary transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
|
||||
Retour à la liste des offres
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="bg-primary/5 border-b border-primary/10 px-8 py-10">
|
||||
|
||||
@@ -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">→</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">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>
|
||||
|
||||
Reference in New Issue
Block a user