622 lines
25 KiB
TypeScript
622 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef } from 'react';
|
|
import Link from 'next/link';
|
|
import { motion, useInView, AnimatePresence } from 'framer-motion';
|
|
import {
|
|
Briefcase,
|
|
MapPin,
|
|
Clock,
|
|
Users,
|
|
Heart,
|
|
Zap,
|
|
Coffee,
|
|
GraduationCap,
|
|
Plane,
|
|
Building2,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
ArrowRight,
|
|
Search,
|
|
Code,
|
|
LineChart,
|
|
Headphones,
|
|
Megaphone,
|
|
} from 'lucide-react';
|
|
import { LandingHeader, LandingFooter } from '@/components/layout';
|
|
|
|
export default function CareersPage() {
|
|
const [selectedDepartment, setSelectedDepartment] = useState('all');
|
|
const [selectedLocation, setSelectedLocation] = useState('all');
|
|
const [expandedJob, setExpandedJob] = useState<number | null>(null);
|
|
|
|
const heroRef = useRef(null);
|
|
const benefitsRef = useRef(null);
|
|
const jobsRef = useRef(null);
|
|
const cultureRef = useRef(null);
|
|
|
|
const isHeroInView = useInView(heroRef, { once: true });
|
|
const isBenefitsInView = useInView(benefitsRef, { once: true });
|
|
const isJobsInView = useInView(jobsRef, { once: true });
|
|
const isCultureInView = useInView(cultureRef, { once: true });
|
|
|
|
const benefits = [
|
|
{
|
|
icon: Heart,
|
|
title: 'Mutuelle Premium',
|
|
description: 'Couverture santé complète pour vous et votre famille',
|
|
},
|
|
{
|
|
icon: Plane,
|
|
title: 'Télétravail Flexible',
|
|
description: 'Travaillez d\'où vous voulez, jusqu\'à 3 jours par semaine',
|
|
},
|
|
{
|
|
icon: Coffee,
|
|
title: 'Bien-être au Travail',
|
|
description: 'Salle de sport, fruits frais, et événements d\'équipe',
|
|
},
|
|
{
|
|
icon: GraduationCap,
|
|
title: 'Formation Continue',
|
|
description: '2 000€/an de budget formation et conférences',
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Équipe Internationale',
|
|
description: 'Travaillez avec des talents de 15 nationalités',
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: 'Stock Options',
|
|
description: 'Participez à la croissance de l\'entreprise',
|
|
},
|
|
];
|
|
|
|
const jobs = [
|
|
{
|
|
id: 1,
|
|
title: 'Senior Frontend Engineer',
|
|
department: 'Engineering',
|
|
location: 'Paris',
|
|
type: 'CDI',
|
|
remote: true,
|
|
salary: '65K - 85K €',
|
|
description: 'Rejoignez notre équipe frontend pour développer la prochaine génération de notre plateforme.',
|
|
requirements: [
|
|
'5+ ans d\'expérience en développement frontend',
|
|
'Maîtrise de React, TypeScript et Next.js',
|
|
'Expérience avec les design systems',
|
|
'Capacité à mentorer des développeurs juniors',
|
|
],
|
|
icon: Code,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Backend Engineer (Node.js)',
|
|
department: 'Engineering',
|
|
location: 'Paris',
|
|
type: 'CDI',
|
|
remote: true,
|
|
salary: '55K - 75K €',
|
|
description: 'Construisez des APIs scalables pour connecter les transitaires aux compagnies maritimes.',
|
|
requirements: [
|
|
'3+ ans d\'expérience en Node.js/NestJS',
|
|
'Maîtrise de PostgreSQL et Redis',
|
|
'Connaissance des architectures microservices',
|
|
'Expérience avec Docker et Kubernetes appréciée',
|
|
],
|
|
icon: Code,
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Product Manager',
|
|
department: 'Product',
|
|
location: 'Paris',
|
|
type: 'CDI',
|
|
remote: true,
|
|
salary: '60K - 80K €',
|
|
description: 'Définissez la vision produit et priorisez les fonctionnalités avec notre équipe.',
|
|
requirements: [
|
|
'4+ ans d\'expérience en product management B2B',
|
|
'Expérience dans la logistique ou le shipping appréciée',
|
|
'Capacité à analyser les données et définir les KPIs',
|
|
'Excellentes compétences en communication',
|
|
],
|
|
icon: LineChart,
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Account Executive',
|
|
department: 'Sales',
|
|
location: 'Rotterdam',
|
|
type: 'CDI',
|
|
remote: false,
|
|
salary: '50K - 70K € + variable',
|
|
description: 'Développez notre portefeuille clients aux Pays-Bas et en Belgique.',
|
|
requirements: [
|
|
'3+ ans d\'expérience en vente B2B',
|
|
'Connaissance du secteur maritime/logistique',
|
|
'Maîtrise du néerlandais et de l\'anglais',
|
|
'Capacité à gérer des cycles de vente longs',
|
|
],
|
|
icon: Megaphone,
|
|
},
|
|
{
|
|
id: 5,
|
|
title: 'Customer Success Manager',
|
|
department: 'Customer Success',
|
|
location: 'Paris',
|
|
type: 'CDI',
|
|
remote: true,
|
|
salary: '45K - 60K €',
|
|
description: 'Accompagnez nos clients dans l\'utilisation de la plateforme et maximisez leur satisfaction.',
|
|
requirements: [
|
|
'2+ ans d\'expérience en customer success',
|
|
'Expérience avec les outils CRM (HubSpot, Salesforce)',
|
|
'Excellent relationnel et sens du service',
|
|
'Capacité à former et accompagner les utilisateurs',
|
|
],
|
|
icon: Headphones,
|
|
},
|
|
{
|
|
id: 6,
|
|
title: 'Data Analyst',
|
|
department: 'Data',
|
|
location: 'Hambourg',
|
|
type: 'CDI',
|
|
remote: true,
|
|
salary: '50K - 65K €',
|
|
description: 'Analysez les données de shipping pour optimiser notre plateforme et nos processus.',
|
|
requirements: [
|
|
'3+ ans d\'expérience en data analysis',
|
|
'Maîtrise de SQL, Python et des outils BI',
|
|
'Expérience avec le shipping/logistics appréciée',
|
|
'Capacité à communiquer les insights aux équipes',
|
|
],
|
|
icon: LineChart,
|
|
},
|
|
];
|
|
|
|
const departments = [
|
|
{ value: 'all', label: 'Tous les départements' },
|
|
{ value: 'Engineering', label: 'Engineering' },
|
|
{ value: 'Product', label: 'Product' },
|
|
{ value: 'Sales', label: 'Sales' },
|
|
{ value: 'Customer Success', label: 'Customer Success' },
|
|
{ value: 'Data', label: 'Data' },
|
|
];
|
|
|
|
const locations = [
|
|
{ value: 'all', label: 'Toutes les villes' },
|
|
{ value: 'Paris', label: 'Paris' },
|
|
{ value: 'Rotterdam', label: 'Rotterdam' },
|
|
{ value: 'Hambourg', label: 'Hambourg' },
|
|
];
|
|
|
|
const filteredJobs = jobs.filter((job) => {
|
|
const departmentMatch = selectedDepartment === 'all' || job.department === selectedDepartment;
|
|
const locationMatch = selectedLocation === 'all' || job.location === selectedLocation;
|
|
return departmentMatch && locationMatch;
|
|
});
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0, y: 50 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.6,
|
|
staggerChildren: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.5 },
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<LandingHeader activePage="careers" />
|
|
|
|
{/* Hero Section */}
|
|
<section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
|
|
<div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
|
|
>
|
|
<Briefcase className="w-5 h-5 text-brand-turquoise" />
|
|
<span className="text-white/90 text-sm font-medium">Rejoignez-nous</span>
|
|
</motion.div>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
|
Construisons ensemble
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
|
|
le futur du maritime
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
|
|
Rejoignez une équipe passionnée qui révolutionne le fret maritime. Des défis stimulants,
|
|
une culture bienveillante et des opportunités de croissance uniques vous attendent.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
|
|
<a
|
|
href="#jobs"
|
|
className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl font-semibold text-lg flex items-center space-x-2"
|
|
>
|
|
<span>Voir les offres</span>
|
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</a>
|
|
<Link
|
|
href="/about"
|
|
className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
|
|
>
|
|
En savoir plus
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Wave */}
|
|
<div className="absolute bottom-0 left-0 right-0">
|
|
<svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
|
|
<path
|
|
d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats Section */}
|
|
<section className="py-16 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{[
|
|
{ value: '50+', label: 'Employés' },
|
|
{ value: '15', label: 'Nationalités' },
|
|
{ value: '3', label: 'Bureaux en Europe' },
|
|
{ value: '40%', label: 'Femmes dans la tech' },
|
|
].map((stat, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="text-center"
|
|
>
|
|
<div className="text-5xl font-bold text-brand-turquoise mb-2">{stat.value}</div>
|
|
<div className="text-gray-600 font-medium">{stat.label}</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Benefits Section */}
|
|
<section ref={benefitsRef} className="py-20">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isBenefitsInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
|
|
Pourquoi nous rejoindre ?
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Nous investissons dans le bien-être et le développement de nos équipes
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isBenefitsInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{benefits.map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
whileHover={{ y: -5 }}
|
|
className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
|
|
>
|
|
<div className="w-14 h-14 bg-brand-turquoise/10 rounded-xl flex items-center justify-center mb-4">
|
|
<IconComponent className="w-7 h-7 text-brand-turquoise" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-brand-navy mb-2">{benefit.title}</h3>
|
|
<p className="text-gray-600">{benefit.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Culture Section */}
|
|
<section ref={cultureRef} className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
|
|
Notre culture
|
|
</h2>
|
|
<p className="text-xl text-white/80 mb-8">
|
|
Chez Xpeditis, nous croyons que les meilleures idées viennent d'équipes diverses
|
|
et inclusives. Nous valorisons l'autonomie, la créativité et le feedback constructif.
|
|
</p>
|
|
<ul className="space-y-4">
|
|
{[
|
|
'Transparence totale sur les décisions et les résultats',
|
|
'Feedback continu et culture de l\'amélioration',
|
|
'Équilibre vie pro/perso respecté',
|
|
'Célébration des succès collectifs',
|
|
].map((item, index) => (
|
|
<motion.li
|
|
key={index}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="flex items-center space-x-3 text-white/90"
|
|
>
|
|
<div className="w-6 h-6 bg-brand-turquoise rounded-full flex items-center justify-center flex-shrink-0">
|
|
<ChevronRight className="w-4 h-4 text-white" />
|
|
</div>
|
|
<span>{item}</span>
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="grid grid-cols-2 gap-4"
|
|
>
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="aspect-square bg-white/10 rounded-2xl flex items-center justify-center"
|
|
>
|
|
<Users className="w-12 h-12 text-white/40" />
|
|
</div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Jobs Section */}
|
|
<section ref={jobsRef} id="jobs" className="py-20">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
|
|
Nos offres d'emploi
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Trouvez le poste qui correspond à vos ambitions
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Filters */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4 mb-12"
|
|
>
|
|
<div className="relative">
|
|
<select
|
|
value={selectedDepartment}
|
|
onChange={(e) => setSelectedDepartment(e.target.value)}
|
|
className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
|
|
>
|
|
{departments.map((dept) => (
|
|
<option key={dept.value} value={dept.value}>
|
|
{dept.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
|
|
</div>
|
|
<div className="relative">
|
|
<select
|
|
value={selectedLocation}
|
|
onChange={(e) => setSelectedLocation(e.target.value)}
|
|
className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
|
|
>
|
|
{locations.map((loc) => (
|
|
<option key={loc.value} value={loc.value}>
|
|
{loc.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Job Listings */}
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isJobsInView ? 'visible' : 'hidden'}
|
|
className="space-y-4"
|
|
>
|
|
{filteredJobs.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-xl font-medium text-gray-600">Aucune offre trouvée</h3>
|
|
<p className="text-gray-500">Essayez de modifier vos filtres</p>
|
|
</div>
|
|
) : (
|
|
filteredJobs.map((job) => {
|
|
const IconComponent = job.icon;
|
|
const isExpanded = expandedJob === job.id;
|
|
|
|
return (
|
|
<motion.div
|
|
key={job.id}
|
|
variants={itemVariants}
|
|
className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden"
|
|
>
|
|
<div
|
|
className="p-6 cursor-pointer hover:bg-gray-50 transition-colors"
|
|
onClick={() => setExpandedJob(isExpanded ? null : job.id)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
|
|
<IconComponent className="w-6 h-6 text-brand-turquoise" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-brand-navy">{job.title}</h3>
|
|
<div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
|
|
<span className="flex items-center space-x-1">
|
|
<Building2 className="w-4 h-4" />
|
|
<span>{job.department}</span>
|
|
</span>
|
|
<span className="flex items-center space-x-1">
|
|
<MapPin className="w-4 h-4" />
|
|
<span>{job.location}</span>
|
|
</span>
|
|
<span className="flex items-center space-x-1">
|
|
<Clock className="w-4 h-4" />
|
|
<span>{job.type}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="hidden md:flex items-center space-x-2">
|
|
{job.remote && (
|
|
<span className="px-3 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
|
|
Remote OK
|
|
</span>
|
|
)}
|
|
<span className="px-3 py-1 bg-brand-turquoise/10 text-brand-turquoise text-sm font-medium rounded-full">
|
|
{job.salary}
|
|
</span>
|
|
</div>
|
|
<ChevronDown
|
|
className={`w-6 h-6 text-gray-400 transition-transform ${
|
|
isExpanded ? 'transform rotate-180' : ''
|
|
}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<AnimatePresence>
|
|
{isExpanded && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="border-t border-gray-100"
|
|
>
|
|
<div className="p-6 bg-gray-50">
|
|
<p className="text-gray-600 mb-6">{job.description}</p>
|
|
<h4 className="font-bold text-brand-navy mb-3">Profil recherché :</h4>
|
|
<ul className="space-y-2 mb-6">
|
|
{job.requirements.map((req, index) => (
|
|
<li key={index} className="flex items-start space-x-2 text-gray-600">
|
|
<ChevronRight className="w-5 h-5 text-brand-turquoise flex-shrink-0 mt-0.5" />
|
|
<span>{req}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="flex items-center space-x-4">
|
|
<Link
|
|
href={`/careers/${job.id}`}
|
|
className="px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-medium flex items-center space-x-2"
|
|
>
|
|
<span>Postuler</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
<button className="px-6 py-3 border border-gray-300 rounded-lg hover:border-brand-turquoise transition-all font-medium text-gray-700">
|
|
En savoir plus
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
);
|
|
})
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<h2 className="text-4xl font-bold text-brand-navy mb-6">
|
|
Pas de poste correspondant ?
|
|
</h2>
|
|
<p className="text-xl text-gray-600 mb-10">
|
|
Envoyez-nous une candidature spontanée ! Nous sommes toujours à la recherche de
|
|
talents passionnés pour rejoindre notre aventure.
|
|
</p>
|
|
<Link
|
|
href="/contact"
|
|
className="inline-flex items-center space-x-2 px-8 py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all font-semibold text-lg"
|
|
>
|
|
<span>Candidature spontanée</span>
|
|
<ArrowRight className="w-5 h-5" />
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|