972 lines
38 KiB
TypeScript
972 lines
38 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { motion, useInView, useScroll, useTransform } from 'framer-motion';
|
|
import {
|
|
Ship,
|
|
TrendingUp,
|
|
Globe,
|
|
Shield,
|
|
Zap,
|
|
BarChart3,
|
|
Calculator,
|
|
MapPin,
|
|
Package,
|
|
Clock,
|
|
CheckCircle2,
|
|
ArrowRight,
|
|
Search,
|
|
Anchor,
|
|
Container,
|
|
FileText,
|
|
LayoutDashboard,
|
|
} from 'lucide-react';
|
|
import { useAuth } from '@/lib/context/auth-context';
|
|
|
|
export default function LandingPage() {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const { user, isAuthenticated, loading } = useAuth();
|
|
|
|
// Helper function to get user initials
|
|
const getUserInitials = () => {
|
|
if (!user) return '';
|
|
const firstInitial = user.firstName?.charAt(0)?.toUpperCase() || '';
|
|
const lastInitial = user.lastName?.charAt(0)?.toUpperCase() || '';
|
|
return firstInitial + lastInitial || user.email?.charAt(0)?.toUpperCase() || '?';
|
|
};
|
|
|
|
// Helper function to get full name
|
|
const getFullName = () => {
|
|
if (!user) return '';
|
|
if (user.firstName && user.lastName) {
|
|
return `${user.firstName} ${user.lastName}`;
|
|
}
|
|
return user.email || '';
|
|
};
|
|
|
|
const heroRef = useRef(null);
|
|
const featuresRef = useRef(null);
|
|
const statsRef = useRef(null);
|
|
const toolsRef = useRef(null);
|
|
const testimonialsRef = useRef(null);
|
|
const ctaRef = useRef(null);
|
|
|
|
const isHeroInView = useInView(heroRef, { once: true });
|
|
const isFeaturesInView = useInView(featuresRef, { once: true });
|
|
const isStatsInView = useInView(statsRef, { once: true });
|
|
const isToolsInView = useInView(toolsRef, { once: true });
|
|
const isTestimonialsInView = useInView(testimonialsRef, { once: true });
|
|
const isCtaInView = useInView(ctaRef, { once: true });
|
|
|
|
const { scrollYProgress } = useScroll();
|
|
const backgroundY = useTransform(scrollYProgress, [0, 1], ['0%', '50%']);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const features = [
|
|
{
|
|
icon: Search,
|
|
title: 'Recherche Intelligente',
|
|
description:
|
|
'Comparez instantanément les tarifs de plus de 50 compagnies maritimes en temps réel.',
|
|
color: 'from-blue-500 to-cyan-500',
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: 'Réservation Rapide',
|
|
description: 'Réservez vos containers LCL/FCL en quelques clics avec confirmation immédiate.',
|
|
color: 'from-purple-500 to-pink-500',
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: 'Tableau de Bord',
|
|
description: 'Suivez tous vos envois en temps réel avec des KPIs détaillés et des analytics.',
|
|
color: 'from-orange-500 to-red-500',
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: '10 000+ Ports',
|
|
description:
|
|
'Accédez à un réseau mondial de ports avec des données actualisées quotidiennement.',
|
|
color: 'from-green-500 to-emerald-500',
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: 'Meilleurs Prix',
|
|
description:
|
|
'Optimisation automatique des tarifs pour vous garantir les prix les plus compétitifs.',
|
|
color: 'from-yellow-500 to-orange-500',
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: 'Sécurisé',
|
|
description:
|
|
'Plateforme conforme aux standards internationaux avec chiffrement de bout en bout.',
|
|
color: 'from-indigo-500 to-purple-500',
|
|
},
|
|
];
|
|
|
|
const tools = [
|
|
{
|
|
icon: Calculator,
|
|
title: 'Calculateur de Fret',
|
|
description: 'Estimez vos coûts de transport en temps réel',
|
|
link: '/tools/calculator',
|
|
},
|
|
{
|
|
icon: MapPin,
|
|
title: 'Distance & Temps',
|
|
description: 'Calculez la distance et le temps entre ports',
|
|
link: '/tools/distance',
|
|
},
|
|
{
|
|
icon: Package,
|
|
title: 'Optimiseur de Chargement',
|
|
description: "Maximisez l'utilisation de vos containers",
|
|
link: '/tools/load-optimizer',
|
|
},
|
|
{
|
|
icon: Ship,
|
|
title: 'Suivi en Temps Réel',
|
|
description: 'Trackez vos envois partout dans le monde',
|
|
link: '/tracking',
|
|
},
|
|
{
|
|
icon: FileText,
|
|
title: 'Documents Maritimes',
|
|
description: 'Générez automatiquement vos documents',
|
|
link: '/tools/documents',
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: 'Index des Tarifs',
|
|
description: 'Suivez les tendances du marché maritime',
|
|
link: '/tools/freight-index',
|
|
},
|
|
];
|
|
|
|
const stats = [
|
|
{ value: '50+', label: 'Compagnies Maritimes', icon: Ship },
|
|
{ value: '10K+', label: 'Ports Mondiaux', icon: Anchor },
|
|
{ value: '<2s', label: 'Temps de Réponse', icon: Zap },
|
|
{ value: '99.5%', label: 'Disponibilité', icon: CheckCircle2 },
|
|
];
|
|
|
|
const testimonials = [
|
|
{
|
|
quote:
|
|
'Xpeditis a révolutionné notre façon de gérer le fret maritime. Les tarifs sont compétitifs et la plateforme est intuitive.',
|
|
author: 'Marie Dubois',
|
|
role: 'Directrice Logistique',
|
|
company: 'LogiFrance',
|
|
},
|
|
{
|
|
quote:
|
|
'Le gain de temps est considérable. Ce qui nous prenait des heures se fait maintenant en quelques minutes.',
|
|
author: 'Thomas Martin',
|
|
role: 'Responsable Transport',
|
|
company: 'EuroShipping',
|
|
},
|
|
{
|
|
quote:
|
|
"L'interface est claire, les données sont précises et le support client est réactif. Un vrai partenaire de confiance.",
|
|
author: 'Sophie Bernard',
|
|
role: 'CEO',
|
|
company: 'MariTime Solutions',
|
|
},
|
|
];
|
|
|
|
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">
|
|
{/* Navigation */}
|
|
<motion.nav
|
|
initial={{ y: -100 }}
|
|
animate={{ y: 0 }}
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
isScrolled ? 'bg-brand-navy/95 backdrop-blur-md shadow-lg' : 'bg-transparent'
|
|
}`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-20">
|
|
<Link href="/" className="flex items-center space-x-2">
|
|
<Image
|
|
src="/assets/logos/logo-white.png"
|
|
alt="Xpeditis"
|
|
width={70}
|
|
height={80}
|
|
priority
|
|
className="h-auto"
|
|
/>
|
|
</Link>
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
<Link
|
|
href="#features"
|
|
className="text-white hover:text-brand-turquoise transition-colors font-medium"
|
|
>
|
|
Fonctionnalités
|
|
</Link>
|
|
<Link
|
|
href="#tools"
|
|
className="text-white hover:text-brand-turquoise transition-colors font-medium"
|
|
>
|
|
Outils
|
|
</Link>
|
|
<Link
|
|
href="#pricing"
|
|
className="text-white hover:text-brand-turquoise transition-colors font-medium"
|
|
>
|
|
Tarifs
|
|
</Link>
|
|
|
|
{/* Affichage conditionnel: connecté vs non connecté */}
|
|
{loading ? (
|
|
<div className="w-8 h-8 rounded-full bg-white/20 animate-pulse" />
|
|
) : isAuthenticated && user ? (
|
|
<Link
|
|
href="/dashboard"
|
|
className="flex items-center space-x-3 group"
|
|
>
|
|
{/* Avatar avec initiales */}
|
|
<div className="w-10 h-10 rounded-full bg-brand-turquoise flex items-center justify-center text-white font-semibold text-sm border-2 border-white/30 group-hover:border-white transition-colors">
|
|
{getUserInitials()}
|
|
</div>
|
|
{/* Nom de l'utilisateur */}
|
|
<span className="text-white font-medium group-hover:text-brand-turquoise transition-colors max-w-[150px] truncate">
|
|
{getFullName()}
|
|
</span>
|
|
{/* Icône dashboard */}
|
|
<LayoutDashboard className="w-5 h-5 text-white/70 group-hover:text-brand-turquoise transition-colors" />
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/login"
|
|
className="text-white hover:text-brand-turquoise transition-colors font-medium"
|
|
>
|
|
Connexion
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="px-6 py-2.5 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-lg font-medium"
|
|
>
|
|
Commencer Gratuitement
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.nav>
|
|
|
|
{/* Hero Section */}
|
|
<section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden">
|
|
{/* Background Image */}
|
|
<motion.div style={{ y: backgroundY }} className="absolute inset-0 z-0">
|
|
{/* Container background image */}
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
}}
|
|
/>
|
|
{/* Dark overlay for text readability */}
|
|
<div className="absolute inset-0 bg-brand-navy/60" />
|
|
{/* Gradient overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-brand-navy/70 via-brand-navy/50 to-brand-turquoise/20" />
|
|
</motion.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">
|
|
Plateforme B2B de Fret Maritime #1 en Europe
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="text-5xl lg:text-7xl font-bold text-white mb-6 leading-tight"
|
|
>
|
|
Réservez votre fret
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
|
|
en quelques clics
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="text-xl lg:text-2xl text-white/80 mb-12 max-w-3xl mx-auto leading-relaxed"
|
|
>
|
|
Comparez les tarifs de 50+ compagnies maritimes, réservez en ligne et suivez vos
|
|
envois en temps réel.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
|
className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6 mb-12"
|
|
>
|
|
{isAuthenticated && user ? (
|
|
<Link
|
|
href="/dashboard"
|
|
className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
|
|
>
|
|
<span>Accéder au Dashboard</span>
|
|
<LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<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 hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
|
|
>
|
|
<span>Créer un compte gratuit</span>
|
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
<Link
|
|
href="/login"
|
|
className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-50 transition-all hover:shadow-xl font-semibold text-lg w-full sm:w-auto"
|
|
>
|
|
Voir la démo
|
|
</Link>
|
|
</>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Animated Waves */}
|
|
<div className="absolute bottom-0 left-0 right-0">
|
|
<svg className="w-full h-24 lg:h-32" viewBox="0 0 1440 120" preserveAspectRatio="none">
|
|
<motion.path
|
|
initial={{ pathLength: 0 }}
|
|
animate={{ pathLength: 1 }}
|
|
transition={{ duration: 2, ease: 'easeInOut' }}
|
|
d="M0,60 C240,90 480,30 720,60 C960,90 1200,30 1440,60 L1440,120 L0,120 Z"
|
|
fill="white"
|
|
opacity="0.8"
|
|
/>
|
|
<motion.path
|
|
initial={{ pathLength: 0 }}
|
|
animate={{ pathLength: 1 }}
|
|
transition={{ duration: 2.5, ease: 'easeInOut' }}
|
|
d="M0,80 C240,50 480,110 720,80 C960,50 1200,110 1440,80 L1440,120 L0,120 Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</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) => {
|
|
const IconComponent = stat.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
className="text-center group cursor-pointer"
|
|
>
|
|
<div className="flex justify-center mb-3">
|
|
<div className="p-3 bg-brand-turquoise/10 rounded-full group-hover:bg-brand-turquoise/20 transition-colors">
|
|
<IconComponent className="w-8 h-8 text-brand-turquoise" />
|
|
</div>
|
|
</div>
|
|
<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-navy mb-2"
|
|
>
|
|
{stat.value}
|
|
</motion.div>
|
|
<div className="text-gray-600 font-medium">{stat.label}</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section ref={featuresRef} id="features" className="py-20 lg:py-32">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isFeaturesInView ? { 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 choisir Xpeditis ?
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Une plateforme complète pour gérer tous vos besoins en fret maritime
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isFeaturesInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{features.map((feature, index) => {
|
|
const IconComponent = feature.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
whileHover={{ scale: 1.05, y: -10 }}
|
|
className="group bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all border border-gray-100 cursor-pointer"
|
|
>
|
|
<div
|
|
className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}
|
|
>
|
|
<IconComponent className="w-7 h-7 text-white" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-brand-navy mb-3">{feature.title}</h3>
|
|
<p className="text-gray-600 leading-relaxed">{feature.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Tools & Calculators Section */}
|
|
<section
|
|
ref={toolsRef}
|
|
id="tools"
|
|
className="py-20 lg:py-32 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={isToolsInView ? { 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">
|
|
Outils & Calculateurs
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Des outils puissants pour optimiser vos opérations maritimes
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isToolsInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
|
|
>
|
|
{tools.map((tool, index) => {
|
|
const IconComponent = tool.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Link
|
|
href={tool.link}
|
|
className="block bg-white p-6 rounded-xl border-2 border-gray-200 hover:border-brand-turquoise transition-all hover:shadow-lg"
|
|
>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="flex-shrink-0 w-12 h-12 bg-brand-turquoise/10 rounded-lg flex items-center justify-center group-hover:bg-brand-turquoise/20 transition-colors">
|
|
<IconComponent className="w-6 h-6 text-brand-turquoise" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-bold text-brand-navy mb-1 group-hover:text-brand-turquoise transition-colors">
|
|
{tool.title}
|
|
</h3>
|
|
<p className="text-sm text-gray-600">{tool.description}</p>
|
|
</div>
|
|
<ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-brand-turquoise group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Partner Logos Section */}
|
|
<section className="py-16 bg-white">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<h3 className="text-2xl font-bold text-brand-navy mb-2">
|
|
En partenariat avec les plus grandes compagnies maritimes
|
|
</h3>
|
|
<p className="text-gray-600">Accédez aux tarifs de 50+ transporteurs mondiaux</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center"
|
|
>
|
|
{[
|
|
'ECU Line 2.png',
|
|
'ICL 1.png',
|
|
'NVO Consolidation 1.png',
|
|
'TCC LOG 1.png',
|
|
'VANGUARD 1.png',
|
|
'image 1.png',
|
|
].map((logo, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
whileHover={{ scale: 1.1 }}
|
|
className="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all cursor-pointer"
|
|
>
|
|
<Image
|
|
src={`/assets/logos/partner/${logo}`}
|
|
alt={`Partner ${index + 1}`}
|
|
width={120}
|
|
height={60}
|
|
className="object-contain h-12 w-auto"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How It Works Section */}
|
|
<section className="py-20 lg:py-32 bg-gradient-to-br from-brand-navy to-brand-navy/95 relative overflow-hidden">
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute top-10 left-10 w-72 h-72 bg-brand-turquoise rounded-full blur-3xl" />
|
|
<div className="absolute bottom-10 right-10 w-72 h-72 bg-brand-green rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">Comment ça marche ?</h2>
|
|
<p className="text-xl text-white/80 max-w-2xl mx-auto">
|
|
Réservez votre fret maritime en 4 étapes simples
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{[
|
|
{
|
|
step: '01',
|
|
title: 'Recherchez',
|
|
description: "Entrez vos ports de départ et d'arrivée",
|
|
icon: Search,
|
|
},
|
|
{
|
|
step: '02',
|
|
title: 'Comparez',
|
|
description: 'Analysez les tarifs de 50+ compagnies',
|
|
icon: BarChart3,
|
|
},
|
|
{
|
|
step: '03',
|
|
title: 'Réservez',
|
|
description: 'Confirmez votre booking en un clic',
|
|
icon: CheckCircle2,
|
|
},
|
|
{
|
|
step: '04',
|
|
title: 'Suivez',
|
|
description: 'Trackez votre envoi en temps réel',
|
|
icon: Container,
|
|
},
|
|
].map((step, index) => {
|
|
const IconComponent = step.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
className="text-center"
|
|
>
|
|
<div className="relative mb-6">
|
|
<div className="w-20 h-20 bg-brand-turquoise rounded-full flex items-center justify-center text-3xl font-bold text-white mx-auto shadow-xl">
|
|
{step.step}
|
|
</div>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<IconComponent className="w-8 h-8 text-white/30" />
|
|
</div>
|
|
{index < 3 && (
|
|
<div className="hidden lg:block absolute top-10 left-[60%] w-full h-0.5 bg-brand-turquoise/30" />
|
|
)}
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-white mb-2">{step.title}</h3>
|
|
<p className="text-white/70">{step.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Testimonials Section */}
|
|
<section
|
|
ref={testimonialsRef}
|
|
className="py-20 lg:py-32 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={isTestimonialsInView ? { 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">
|
|
Ils nous font confiance
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Découvrez les témoignages de nos clients satisfaits
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isTestimonialsInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-3 gap-8"
|
|
>
|
|
{testimonials.map((testimonial, index) => (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
whileHover={{ y: -10 }}
|
|
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
|
>
|
|
<div className="flex mb-4">
|
|
{[...Array(5)].map((_, i) => (
|
|
<svg
|
|
key={i}
|
|
className="w-5 h-5 text-yellow-400 fill-current"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
|
|
</svg>
|
|
))}
|
|
</div>
|
|
<p className="text-gray-700 mb-6 leading-relaxed italic">"{testimonial.quote}"</p>
|
|
<div className="border-t pt-4">
|
|
<div className="font-bold text-brand-navy">{testimonial.author}</div>
|
|
<div className="text-sm text-gray-600">
|
|
{testimonial.role} - {testimonial.company}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section ref={ctaRef} className="py-20 lg:py-32">
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isCtaInView ? 'visible' : 'hidden'}
|
|
className="max-w-4xl mx-auto px-6 lg:px-8 text-center"
|
|
>
|
|
<motion.div variants={itemVariants}>
|
|
<h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-6">
|
|
Prêt à simplifier votre fret maritime ?
|
|
</h2>
|
|
<p className="text-xl text-gray-600 mb-10">
|
|
Rejoignez des centaines de transitaires qui font confiance à Xpeditis pour leurs
|
|
expéditions maritimes.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6"
|
|
>
|
|
{isAuthenticated && user ? (
|
|
<Link
|
|
href="/dashboard"
|
|
className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
|
|
>
|
|
<span>Accéder au Dashboard</span>
|
|
<LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<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 hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
|
|
>
|
|
<span>Créer un compte gratuit</span>
|
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
<Link
|
|
href="/login"
|
|
className="px-8 py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all hover:shadow-xl font-semibold text-lg w-full sm:w-auto"
|
|
>
|
|
Se connecter
|
|
</Link>
|
|
</>
|
|
)}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="flex items-center justify-center space-x-6 mt-8 text-sm text-gray-500"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<CheckCircle2 className="w-4 h-4 text-brand-green" />
|
|
<span>Sans carte bancaire</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Clock className="w-4 h-4 text-brand-green" />
|
|
<span>Configuration en 2 min</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Shield className="w-4 h-4 text-brand-green" />
|
|
<span>Données sécurisées</span>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-brand-navy text-white py-16">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12">
|
|
{/* Company Info */}
|
|
<div className="lg:col-span-2">
|
|
<Image
|
|
src="/assets/logos/logo-white.png"
|
|
alt="Xpeditis"
|
|
width={160}
|
|
height={55}
|
|
className="h-auto mb-6"
|
|
/>
|
|
<p className="text-white/70 text-sm mb-6 leading-relaxed">
|
|
Xpeditis est la plateforme B2B leader pour le fret maritime en Europe. Nous
|
|
connectons les transitaires avec les plus grandes compagnies maritimes mondiales.
|
|
</p>
|
|
<div className="flex space-x-4">
|
|
<a
|
|
href="#"
|
|
className="w-10 h-10 bg-white/10 hover:bg-brand-turquoise rounded-full flex items-center justify-center transition-colors"
|
|
>
|
|
<span className="sr-only">LinkedIn</span>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="w-10 h-10 bg-white/10 hover:bg-brand-turquoise rounded-full flex items-center justify-center transition-colors"
|
|
>
|
|
<span className="sr-only">Twitter</span>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Products */}
|
|
<div>
|
|
<h4 className="font-bold text-lg mb-4 text-white">Produits</h4>
|
|
<ul className="space-y-3 text-white/70 text-sm">
|
|
<li>
|
|
<Link href="#features" className="hover:text-brand-turquoise transition-colors">
|
|
Fonctionnalités
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#tools" className="hover:text-brand-turquoise transition-colors">
|
|
Outils & Calculateurs
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#pricing" className="hover:text-brand-turquoise transition-colors">
|
|
Tarifs
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/api" className="hover:text-brand-turquoise transition-colors">
|
|
API Documentation
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/integrations"
|
|
className="hover:text-brand-turquoise transition-colors"
|
|
>
|
|
Intégrations
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Company */}
|
|
<div>
|
|
<h4 className="font-bold text-lg mb-4 text-white">Entreprise</h4>
|
|
<ul className="space-y-3 text-white/70 text-sm">
|
|
<li>
|
|
<Link href="/about" className="hover:text-brand-turquoise transition-colors">
|
|
À propos
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/contact" className="hover:text-brand-turquoise transition-colors">
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/careers" className="hover:text-brand-turquoise transition-colors">
|
|
Carrières
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/blog" className="hover:text-brand-turquoise transition-colors">
|
|
Blog
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/press" className="hover:text-brand-turquoise transition-colors">
|
|
Presse
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Legal */}
|
|
<div>
|
|
<h4 className="font-bold text-lg mb-4 text-white">Légal</h4>
|
|
<ul className="space-y-3 text-white/70 text-sm">
|
|
<li>
|
|
<Link href="/privacy" className="hover:text-brand-turquoise transition-colors">
|
|
Politique de confidentialité
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/terms" className="hover:text-brand-turquoise transition-colors">
|
|
Conditions générales
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/cookies" className="hover:text-brand-turquoise transition-colors">
|
|
Politique de cookies
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/security" className="hover:text-brand-turquoise transition-colors">
|
|
Sécurité
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/compliance" className="hover:text-brand-turquoise transition-colors">
|
|
Conformité RGPD
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Footer */}
|
|
<div className="border-t border-white/10 pt-8">
|
|
<div className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
|
|
<div className="text-white/50 text-sm">
|
|
© 2025 Xpeditis SAS. Tous droits réservés.
|
|
</div>
|
|
<div className="flex items-center space-x-6 text-sm text-white/50">
|
|
<span className="flex items-center space-x-2">
|
|
<MapPin className="w-4 h-4" />
|
|
<span>Paris, France</span>
|
|
</span>
|
|
<span className="flex items-center space-x-2">
|
|
<Globe className="w-4 h-4" />
|
|
<span>50+ Pays</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|