477 lines
19 KiB
TypeScript
477 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import { useRef } from 'react';
|
|
import Link from 'next/link';
|
|
import { motion, useInView } from 'framer-motion';
|
|
import {
|
|
Ship,
|
|
Target,
|
|
Eye,
|
|
Heart,
|
|
Users,
|
|
TrendingUp,
|
|
Linkedin,
|
|
Calendar,
|
|
ArrowRight,
|
|
} from 'lucide-react';
|
|
import { LandingHeader, LandingFooter } from '@/components/layout';
|
|
|
|
export default function AboutPage() {
|
|
const heroRef = useRef(null);
|
|
const missionRef = useRef(null);
|
|
const valuesRef = useRef(null);
|
|
const teamRef = useRef(null);
|
|
const timelineRef = useRef(null);
|
|
const statsRef = useRef(null);
|
|
|
|
const isHeroInView = useInView(heroRef, { once: true });
|
|
const isMissionInView = useInView(missionRef, { once: true });
|
|
const isValuesInView = useInView(valuesRef, { once: true });
|
|
const isTeamInView = useInView(teamRef, { once: true });
|
|
const isTimelineInView = useInView(timelineRef, { once: true });
|
|
const isStatsInView = useInView(statsRef, { once: true });
|
|
|
|
const values = [
|
|
{
|
|
icon: Target,
|
|
title: 'Excellence',
|
|
description:
|
|
'Nous visons l\'excellence dans chaque aspect de notre plateforme, en offrant une expérience utilisateur de premier ordre.',
|
|
color: 'from-blue-500 to-cyan-500',
|
|
},
|
|
{
|
|
icon: Heart,
|
|
title: 'Transparence',
|
|
description:
|
|
'Nous croyons en une communication ouverte et honnête avec nos clients, partenaires et employés.',
|
|
color: 'from-pink-500 to-rose-500',
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Collaboration',
|
|
description:
|
|
'Le succès se construit ensemble. Nous travaillons main dans la main avec nos clients pour atteindre leurs objectifs.',
|
|
color: 'from-purple-500 to-indigo-500',
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: 'Innovation',
|
|
description:
|
|
'Nous repoussons constamment les limites de la technologie pour révolutionner le fret maritime.',
|
|
color: 'from-orange-500 to-amber-500',
|
|
},
|
|
];
|
|
|
|
const team = [
|
|
{
|
|
name: 'Jean-Pierre Durand',
|
|
role: 'CEO & Co-fondateur',
|
|
bio: 'Ex-directeur chez Maersk, 20 ans d\'expérience dans le shipping',
|
|
image: '/assets/images/team/ceo.jpg',
|
|
linkedin: '#',
|
|
},
|
|
{
|
|
name: 'Marie Lefebvre',
|
|
role: 'CTO & Co-fondatrice',
|
|
bio: 'Ex-Google, experte en plateformes B2B et systèmes distribués',
|
|
image: '/assets/images/team/cto.jpg',
|
|
linkedin: '#',
|
|
},
|
|
{
|
|
name: 'Thomas Martin',
|
|
role: 'COO',
|
|
bio: 'Ex-CMA CGM, spécialiste des opérations maritimes internationales',
|
|
image: '/assets/images/team/coo.jpg',
|
|
linkedin: '#',
|
|
},
|
|
{
|
|
name: 'Sophie Bernard',
|
|
role: 'VP Sales',
|
|
bio: '15 ans d\'expérience commerciale dans le secteur logistique',
|
|
image: '/assets/images/team/vp-sales.jpg',
|
|
linkedin: '#',
|
|
},
|
|
{
|
|
name: 'Alexandre Petit',
|
|
role: 'VP Engineering',
|
|
bio: 'Ex-Uber Freight, expert en systèmes de réservation temps réel',
|
|
image: '/assets/images/team/vp-eng.jpg',
|
|
linkedin: '#',
|
|
},
|
|
{
|
|
name: 'Claire Moreau',
|
|
role: 'VP Product',
|
|
bio: 'Ex-Flexport, passionnée par l\'UX et l\'innovation produit',
|
|
image: '/assets/images/team/vp-product.jpg',
|
|
linkedin: '#',
|
|
},
|
|
];
|
|
|
|
const timeline = [
|
|
{
|
|
year: '2021',
|
|
title: 'Fondation',
|
|
description: 'Création de Xpeditis avec une vision claire : simplifier le fret maritime pour tous.',
|
|
},
|
|
{
|
|
year: '2022',
|
|
title: 'Première version',
|
|
description: 'Lancement de la plateforme beta avec 10 compagnies maritimes partenaires.',
|
|
},
|
|
{
|
|
year: '2023',
|
|
title: 'Série A',
|
|
description: 'Levée de fonds de 15M€ pour accélérer notre expansion européenne.',
|
|
},
|
|
{
|
|
year: '2024',
|
|
title: 'Expansion',
|
|
description: '50+ compagnies maritimes, présence dans 15 pays européens.',
|
|
},
|
|
{
|
|
year: '2025',
|
|
title: 'Leader européen',
|
|
description: 'Plateforme #1 du fret maritime B2B en Europe avec 500+ clients actifs.',
|
|
},
|
|
];
|
|
|
|
const stats = [
|
|
{ value: '500+', label: 'Clients actifs' },
|
|
{ value: '50+', label: 'Compagnies maritimes' },
|
|
{ value: '15', label: 'Pays couverts' },
|
|
{ value: '100K+', label: 'Réservations/an' },
|
|
];
|
|
|
|
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="about" />
|
|
|
|
{/* 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"
|
|
>
|
|
<Ship className="w-5 h-5 text-brand-turquoise" />
|
|
<span className="text-white/90 text-sm font-medium">Notre histoire</span>
|
|
</motion.div>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
|
Révolutionner le fret maritime,
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
|
|
une réservation à la fois
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
|
|
Fondée en 2021, Xpeditis est née d'une vision simple : rendre le fret maritime aussi simple
|
|
qu'une réservation de vol. Nous connectons les transitaires du monde entier avec les plus
|
|
grandes compagnies maritimes.
|
|
</p>
|
|
</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>
|
|
|
|
{/* Mission & Vision Section */}
|
|
<section ref={missionRef} className="py-20">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isMissionInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 lg:grid-cols-2 gap-12"
|
|
>
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="bg-gradient-to-br from-brand-turquoise/10 to-brand-turquoise/5 p-10 rounded-3xl border border-brand-turquoise/20"
|
|
>
|
|
<div className="w-16 h-16 bg-brand-turquoise rounded-2xl flex items-center justify-center mb-6">
|
|
<Target className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h2 className="text-3xl font-bold text-brand-navy mb-4">Notre Mission</h2>
|
|
<p className="text-gray-600 text-lg leading-relaxed">
|
|
Démocratiser l'accès au fret maritime en offrant une plateforme technologique de pointe
|
|
qui simplifie la recherche, la comparaison et la réservation de transport maritime pour
|
|
tous les professionnels de la logistique.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="bg-gradient-to-br from-brand-green/10 to-brand-green/5 p-10 rounded-3xl border border-brand-green/20"
|
|
>
|
|
<div className="w-16 h-16 bg-brand-green rounded-2xl flex items-center justify-center mb-6">
|
|
<Eye className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h2 className="text-3xl font-bold text-brand-navy mb-4">Notre Vision</h2>
|
|
<p className="text-gray-600 text-lg leading-relaxed">
|
|
Devenir la référence mondiale du fret maritime digital, en connectant chaque transitaire
|
|
à chaque compagnie maritime, partout dans le monde, avec la transparence et l'efficacité
|
|
que mérite le commerce international.
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats Section */}
|
|
<section ref={statsRef} className="py-16 bg-gray-50">
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isStatsInView ? 'visible' : 'hidden'}
|
|
className="max-w-7xl mx-auto px-6 lg:px-8"
|
|
>
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{stats.map((stat, index) => (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
className="text-center"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={isStatsInView ? { scale: 1 } : {}}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="text-5xl lg:text-6xl font-bold text-brand-turquoise mb-2"
|
|
>
|
|
{stat.value}
|
|
</motion.div>
|
|
<div className="text-gray-600 font-medium">{stat.label}</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Values Section */}
|
|
<section ref={valuesRef} className="py-20">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isValuesInView ? { 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">Nos Valeurs</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Les principes qui guident chacune de nos décisions
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isValuesInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
|
|
>
|
|
{values.map((value, index) => {
|
|
const IconComponent = value.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
whileHover={{ y: -10 }}
|
|
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
|
|
>
|
|
<div
|
|
className={`w-14 h-14 rounded-xl bg-gradient-to-br ${value.color} flex items-center justify-center mb-4`}
|
|
>
|
|
<IconComponent className="w-7 h-7 text-white" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-brand-navy mb-3">{value.title}</h3>
|
|
<p className="text-gray-600">{value.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Timeline Section */}
|
|
<section ref={timelineRef} className="py-20 bg-gradient-to-br from-gray-50 to-white">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isTimelineInView ? { 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">Notre Parcours</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
De la startup au leader européen du fret maritime digital
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="relative">
|
|
{/* Timeline line */}
|
|
<div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-brand-turquoise/20" />
|
|
|
|
<div className="space-y-12">
|
|
{timeline.map((item, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
|
|
animate={isTimelineInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
className={`flex items-center ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'}`}
|
|
>
|
|
<div className={`flex-1 ${index % 2 === 0 ? 'lg:pr-12 lg:text-right' : 'lg:pl-12'}`}>
|
|
<div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 inline-block">
|
|
<div className="flex items-center space-x-3 mb-3">
|
|
<Calendar className="w-5 h-5 text-brand-turquoise" />
|
|
<span className="text-2xl font-bold text-brand-turquoise">{item.year}</span>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-brand-navy mb-2">{item.title}</h3>
|
|
<p className="text-gray-600">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
<div className="hidden lg:flex items-center justify-center">
|
|
<div className="w-6 h-6 bg-brand-turquoise rounded-full border-4 border-white shadow-lg" />
|
|
</div>
|
|
<div className="hidden lg:block flex-1" />
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Team Section */}
|
|
<section ref={teamRef} className="py-20">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isTeamInView ? { 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">Notre Équipe</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Des experts passionnés par le maritime et la technologie
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isTeamInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{team.map((member, index) => (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
whileHover={{ y: -10 }}
|
|
className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden group"
|
|
>
|
|
<div className="aspect-[4/3] bg-gradient-to-br from-brand-navy to-brand-navy/80 flex items-center justify-center relative overflow-hidden">
|
|
<div className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center">
|
|
<Users className="w-12 h-12 text-white/80" />
|
|
</div>
|
|
<div className="absolute inset-0 bg-brand-turquoise/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<a
|
|
href={member.linkedin}
|
|
className="w-12 h-12 bg-white rounded-full flex items-center justify-center hover:scale-110 transition-transform"
|
|
>
|
|
<Linkedin className="w-6 h-6 text-brand-navy" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-brand-navy mb-1">{member.name}</h3>
|
|
<p className="text-brand-turquoise font-medium mb-3">{member.role}</p>
|
|
<p className="text-gray-600 text-sm">{member.bio}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
|
|
<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 lg:text-5xl font-bold text-white mb-6">
|
|
Rejoignez l'aventure Xpeditis
|
|
</h2>
|
|
<p className="text-xl text-white/80 mb-10">
|
|
Que vous soyez transitaire à la recherche d'une solution moderne ou talent souhaitant
|
|
rejoindre une équipe passionnée, nous avons hâte de vous rencontrer.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
|
|
<Link
|
|
href="/register"
|
|
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>Créer un compte</span>
|
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
<Link
|
|
href="/careers"
|
|
className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
|
|
>
|
|
Voir les offres d'emploi
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|