1194 lines
48 KiB
TypeScript
1194 lines
48 KiB
TypeScript
'use client';
|
|
|
|
import { useRef, useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { motion, useInView, useScroll, useTransform } from 'framer-motion';
|
|
import {
|
|
Ship,
|
|
Shield,
|
|
Zap,
|
|
BarChart3,
|
|
Package,
|
|
Clock,
|
|
CheckCircle2,
|
|
ArrowRight,
|
|
Search,
|
|
Anchor,
|
|
Container,
|
|
FileText,
|
|
LayoutDashboard,
|
|
Bell,
|
|
BookOpen,
|
|
Users,
|
|
Check,
|
|
X,
|
|
} from 'lucide-react';
|
|
import { useAuth } from '@/lib/context/auth-context';
|
|
import { LandingHeader, LandingFooter } from '@/components/layout';
|
|
|
|
function AnimatedCounter({
|
|
end,
|
|
suffix = '',
|
|
prefix = '',
|
|
decimals = 0,
|
|
isActive,
|
|
duration = 2,
|
|
}: {
|
|
end: number;
|
|
suffix?: string;
|
|
prefix?: string;
|
|
decimals?: number;
|
|
isActive: boolean;
|
|
duration?: number;
|
|
}) {
|
|
const [count, setCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (!isActive) return;
|
|
let startTime: number | undefined;
|
|
|
|
const animate = (timestamp: number) => {
|
|
if (!startTime) startTime = timestamp;
|
|
const progress = Math.min((timestamp - startTime) / (duration * 1000), 1);
|
|
const eased = 1 - Math.pow(1 - progress, 3);
|
|
setCount(eased * end);
|
|
if (progress < 1) requestAnimationFrame(animate);
|
|
else setCount(end);
|
|
};
|
|
|
|
requestAnimationFrame(animate);
|
|
}, [end, duration, isActive]);
|
|
|
|
const display = decimals > 0 ? count.toFixed(decimals) : Math.floor(count).toString();
|
|
return <>{prefix}{display}{suffix}</>;
|
|
}
|
|
|
|
export default function LandingPage() {
|
|
const { user, isAuthenticated } = useAuth();
|
|
|
|
const heroRef = useRef(null);
|
|
const featuresRef = useRef(null);
|
|
const statsRef = useRef(null);
|
|
const toolsRef = useRef(null);
|
|
const pricingRef = useRef(null);
|
|
const testimonialsRef = useRef(null);
|
|
const ctaRef = useRef(null);
|
|
const howRef = useRef(null);
|
|
|
|
const isHeroInView = useInView(heroRef, { once: true });
|
|
const isFeaturesInView = useInView(featuresRef, { once: true });
|
|
const isStatsInView = useInView(statsRef, { once: true, amount: 0.3 });
|
|
const isToolsInView = useInView(toolsRef, { once: true });
|
|
const isPricingInView = useInView(pricingRef, { once: true });
|
|
const isTestimonialsInView = useInView(testimonialsRef, { once: true });
|
|
const isCtaInView = useInView(ctaRef, { once: true });
|
|
const isHowInView = useInView(howRef, { once: true, amount: 0.2 });
|
|
|
|
const [billingYearly, setBillingYearly] = useState(false);
|
|
|
|
const { scrollYProgress } = useScroll();
|
|
const backgroundY = useTransform(scrollYProgress, [0, 1], ['0%', '50%']);
|
|
|
|
const features = [
|
|
{
|
|
icon: BarChart3,
|
|
title: 'Tableau de bord',
|
|
description:
|
|
'Suivez tous vos KPIs en temps réel : bookings, volumes, revenus et alertes personnalisées.',
|
|
color: 'from-blue-500 to-cyan-500',
|
|
link: '/dashboard',
|
|
},
|
|
{
|
|
icon: Package,
|
|
title: 'Gestion des Réservations',
|
|
description: 'Créez, gérez et suivez vos réservations maritimes LCL/FCL avec un historique complet.',
|
|
color: 'from-purple-500 to-pink-500',
|
|
link: '/dashboard/bookings',
|
|
},
|
|
{
|
|
icon: FileText,
|
|
title: 'Documents Maritimes',
|
|
description: 'Centralisez tous vos documents : B/L, factures, certificats et documents douaniers.',
|
|
color: 'from-orange-500 to-red-500',
|
|
link: '/dashboard/documents',
|
|
},
|
|
{
|
|
icon: Search,
|
|
title: 'Suivi des expéditions',
|
|
description:
|
|
'Suivez vos conteneurs en temps réel auprès de 10+ transporteurs majeurs (Maersk, MSC, CMA CGM...).',
|
|
color: 'from-green-500 to-emerald-500',
|
|
link: '/dashboard/track-trace',
|
|
},
|
|
{
|
|
icon: BookOpen,
|
|
title: 'Wiki Maritime',
|
|
description:
|
|
'Base de connaissances complète : Incoterms, documents, procédures douanières et plus encore.',
|
|
color: 'from-yellow-500 to-orange-500',
|
|
link: '/dashboard/wiki',
|
|
},
|
|
{
|
|
icon: Bell,
|
|
title: 'Notifications Temps Réel',
|
|
description:
|
|
'Restez informé avec des alertes instantanées sur vos bookings, documents et mises à jour.',
|
|
color: 'from-indigo-500 to-purple-500',
|
|
link: '/dashboard',
|
|
},
|
|
];
|
|
|
|
const tools = [
|
|
{
|
|
icon: LayoutDashboard,
|
|
title: 'Tableau de bord',
|
|
description: 'Vue d\'ensemble de votre activité maritime',
|
|
link: '/dashboard',
|
|
},
|
|
{
|
|
icon: Package,
|
|
title: 'Mes Réservations',
|
|
description: 'Gérez toutes vos réservations en un seul endroit',
|
|
link: '/dashboard/bookings',
|
|
},
|
|
{
|
|
icon: FileText,
|
|
title: 'Documents',
|
|
description: 'Accédez à tous vos documents maritimes',
|
|
link: '/dashboard/documents',
|
|
},
|
|
{
|
|
icon: Search,
|
|
title: 'Suivi des expéditions',
|
|
description: 'Suivez vos conteneurs en temps réel',
|
|
link: '/dashboard/track-trace',
|
|
},
|
|
{
|
|
icon: BookOpen,
|
|
title: 'Wiki Maritime',
|
|
description: 'Base de connaissances du fret maritime',
|
|
link: '/dashboard/wiki',
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Mon Profil',
|
|
description: 'Gérez vos informations personnelles',
|
|
link: '/dashboard/profile',
|
|
},
|
|
];
|
|
|
|
const stats = [
|
|
{ end: 50, prefix: '', suffix: '+', decimals: 0, label: 'Compagnies Maritimes', icon: Ship },
|
|
{ end: 10, prefix: '', suffix: 'K+', decimals: 0, label: 'Ports Mondiaux', icon: Anchor },
|
|
{ end: 2, prefix: '<', suffix: 's', decimals: 0, label: 'Temps de Réponse', icon: Zap },
|
|
{ end: 99.5, prefix: '', suffix: '%', decimals: 1, label: 'Disponibilité', icon: CheckCircle2 },
|
|
];
|
|
|
|
const pricingPlans = [
|
|
{
|
|
key: 'bronze',
|
|
name: 'Bronze',
|
|
badge: null,
|
|
monthlyPrice: 0,
|
|
yearlyPrice: 0,
|
|
yearlyMonthly: 0,
|
|
description: 'Pour découvrir la plateforme',
|
|
users: '1 utilisateur',
|
|
shipments: '12 expéditions / an',
|
|
commission: '5%',
|
|
support: 'Aucun support',
|
|
features: [
|
|
{ text: 'Réservations maritimes LCL', included: true },
|
|
{ text: 'Track & Trace conteneurs', included: true },
|
|
{ text: 'Tableau de bord', included: false },
|
|
{ text: 'Wiki maritime', included: false },
|
|
{ text: 'Gestion des utilisateurs', included: false },
|
|
{ text: 'Export CSV', included: false },
|
|
{ text: 'Accès API', included: false },
|
|
{ text: 'KAM dédié', included: false },
|
|
],
|
|
cta: 'Commencer gratuitement',
|
|
ctaLink: '/register',
|
|
highlighted: false,
|
|
accentColor: 'from-amber-600 to-yellow-500',
|
|
textAccent: 'text-amber-700',
|
|
badgeBg: 'bg-amber-100 text-amber-800',
|
|
},
|
|
{
|
|
key: 'silver',
|
|
name: 'Silver',
|
|
badge: 'Populaire',
|
|
monthlyPrice: 249,
|
|
yearlyPrice: 2739,
|
|
yearlyMonthly: 228,
|
|
description: 'Pour les transitaires en croissance',
|
|
users: 'Jusqu\'à 5 utilisateurs',
|
|
shipments: 'Expéditions illimitées',
|
|
commission: '3%',
|
|
support: 'Support par email',
|
|
features: [
|
|
{ text: 'Réservations maritimes LCL', included: true },
|
|
{ text: 'Track & Trace conteneurs', included: true },
|
|
{ text: 'Tableau de bord avancé', included: true },
|
|
{ text: 'Wiki maritime complet', included: true },
|
|
{ text: 'Gestion des utilisateurs', included: true },
|
|
{ text: 'Export CSV', included: true },
|
|
{ text: 'Accès API', included: false },
|
|
{ text: 'KAM dédié', included: false },
|
|
],
|
|
cta: 'Essai gratuit 14 jours',
|
|
ctaLink: '/register',
|
|
highlighted: true,
|
|
accentColor: 'from-slate-400 to-slate-500',
|
|
textAccent: 'text-slate-600',
|
|
badgeBg: 'bg-slate-100 text-slate-700',
|
|
},
|
|
{
|
|
key: 'gold',
|
|
name: 'Gold',
|
|
badge: null,
|
|
monthlyPrice: 899,
|
|
yearlyPrice: 9889,
|
|
yearlyMonthly: 824,
|
|
description: 'Pour les équipes exigeantes',
|
|
users: 'Jusqu\'à 20 utilisateurs',
|
|
shipments: 'Expéditions illimitées',
|
|
commission: '2%',
|
|
support: 'Assistance commerciale directe',
|
|
features: [
|
|
{ text: 'Réservations maritimes LCL', included: true },
|
|
{ text: 'Track & Trace conteneurs', included: true },
|
|
{ text: 'Tableau de bord avancé', included: true },
|
|
{ text: 'Wiki maritime complet', included: true },
|
|
{ text: 'Gestion des utilisateurs', included: true },
|
|
{ text: 'Export CSV', included: true },
|
|
{ text: 'Accès API complet', included: true },
|
|
{ text: 'KAM dédié', included: false },
|
|
],
|
|
cta: 'Essai gratuit 14 jours',
|
|
ctaLink: '/register',
|
|
highlighted: false,
|
|
accentColor: 'from-yellow-400 to-amber-400',
|
|
textAccent: 'text-amber-600',
|
|
badgeBg: 'bg-yellow-50 text-amber-700',
|
|
},
|
|
{
|
|
key: 'platinium',
|
|
name: 'Platinium',
|
|
badge: 'Sur mesure',
|
|
monthlyPrice: null,
|
|
yearlyPrice: null,
|
|
yearlyMonthly: null,
|
|
description: 'Pour les grandes entreprises',
|
|
users: 'Utilisateurs illimités',
|
|
shipments: 'Expéditions illimitées',
|
|
commission: '1%',
|
|
support: 'Key Account Manager dédié',
|
|
features: [
|
|
{ text: 'Réservations maritimes LCL', included: true },
|
|
{ text: 'Track & Trace conteneurs', included: true },
|
|
{ text: 'Tableau de bord avancé', included: true },
|
|
{ text: 'Wiki maritime complet', included: true },
|
|
{ text: 'Gestion des utilisateurs', included: true },
|
|
{ text: 'Export CSV', included: true },
|
|
{ text: 'Accès API complet', included: true },
|
|
{ text: 'KAM dédié + Interface personnalisée', included: true },
|
|
],
|
|
cta: 'Nous contacter',
|
|
ctaLink: '/contact',
|
|
highlighted: false,
|
|
accentColor: 'from-brand-navy to-brand-turquoise',
|
|
textAccent: 'text-brand-turquoise',
|
|
badgeBg: 'bg-brand-navy/10 text-brand-navy',
|
|
},
|
|
];
|
|
|
|
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">
|
|
<LandingHeader transparentOnTop={true} />
|
|
|
|
{/* Hero Section */}
|
|
<section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden">
|
|
{/* Background Video */}
|
|
<motion.div style={{ y: backgroundY }} className="absolute inset-0 z-0">
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
>
|
|
<source
|
|
src="https://assets.mixkit.co/videos/36264/36264-720.mp4"
|
|
type="video/mp4"
|
|
/>
|
|
{/* Fallback image if video fails to load */}
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
</video>
|
|
{/* Dark overlay for text readability */}
|
|
<div className="absolute inset-0 bg-brand-navy/65" />
|
|
{/* 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"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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 tableau de bord</span>
|
|
<LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/register"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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 tabular-nums"
|
|
>
|
|
<AnimatedCounter
|
|
end={stat.end}
|
|
prefix={stat.prefix}
|
|
suffix={stat.suffix}
|
|
decimals={stat.decimals}
|
|
isActive={isStatsInView}
|
|
duration={2.2}
|
|
/>
|
|
</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={{ y: -8 }}
|
|
className="h-full"
|
|
>
|
|
<Link
|
|
href={feature.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group flex flex-col h-full bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all border border-gray-100 hover:border-brand-turquoise/30 relative overflow-hidden"
|
|
>
|
|
{/* Gradient accent bar on top — always visible, intensifies on hover */}
|
|
<div
|
|
className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${feature.color} opacity-40 group-hover:opacity-100 transition-opacity duration-300`}
|
|
/>
|
|
<div
|
|
className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-5 group-hover:scale-110 transition-transform flex-shrink-0`}
|
|
>
|
|
<IconComponent className="w-7 h-7 text-white" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-brand-navy mb-3 group-hover:text-brand-turquoise transition-colors">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-600 leading-relaxed flex-1">{feature.description}</p>
|
|
{/* CTA always visible */}
|
|
<div className="mt-5 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<span className="text-brand-turquoise font-semibold text-sm">Découvrir</span>
|
|
<div className="w-8 h-8 rounded-full bg-brand-turquoise/10 group-hover:bg-brand-turquoise/20 flex items-center justify-center transition-colors">
|
|
<ArrowRight className="w-4 h-4 text-brand-turquoise group-hover:translate-x-0.5 transition-transform" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</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}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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>
|
|
|
|
{/* Pricing Section */}
|
|
<section
|
|
ref={pricingRef}
|
|
id="pricing"
|
|
className="py-20 lg:py-32 bg-gradient-to-b from-white to-gray-50"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<span className="inline-block bg-brand-turquoise/10 text-brand-turquoise text-sm font-semibold px-4 py-1.5 rounded-full mb-4 uppercase tracking-wide">
|
|
Tarifs
|
|
</span>
|
|
<h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
|
|
Des plans adaptés à votre activité
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
De l'accès découverte au partenariat sur mesure — évoluez à tout moment.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Billing Toggle */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="flex items-center justify-center gap-4 mb-12"
|
|
>
|
|
<span className={`text-sm font-medium ${!billingYearly ? 'text-brand-navy' : 'text-gray-400'}`}>
|
|
Mensuel
|
|
</span>
|
|
<button
|
|
onClick={() => setBillingYearly(v => !v)}
|
|
className={`relative inline-flex h-7 w-14 items-center rounded-full transition-colors focus:outline-none ${
|
|
billingYearly ? 'bg-brand-turquoise' : 'bg-gray-300'
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${
|
|
billingYearly ? 'translate-x-8' : 'translate-x-1'
|
|
}`}
|
|
/>
|
|
</button>
|
|
<span className={`text-sm font-medium ${billingYearly ? 'text-brand-navy' : 'text-gray-400'}`}>
|
|
Annuel
|
|
</span>
|
|
{billingYearly && (
|
|
<span className="bg-brand-green/10 text-brand-green text-xs font-bold px-2.5 py-1 rounded-full">
|
|
1 mois offert
|
|
</span>
|
|
)}
|
|
</motion.div>
|
|
|
|
{/* Plans Grid */}
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isPricingInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-stretch"
|
|
>
|
|
{pricingPlans.map((plan, index) => (
|
|
<motion.div
|
|
key={plan.key}
|
|
variants={itemVariants}
|
|
whileHover={{ y: -6 }}
|
|
className={`relative flex flex-col rounded-2xl transition-all overflow-hidden ${
|
|
plan.highlighted
|
|
? 'bg-brand-navy shadow-2xl ring-2 ring-brand-turquoise'
|
|
: 'bg-white shadow-lg border border-gray-100 hover:shadow-xl hover:border-brand-turquoise/30'
|
|
}`}
|
|
>
|
|
{/* Top gradient bar */}
|
|
<div className={`h-1.5 w-full bg-gradient-to-r ${plan.accentColor}`} />
|
|
|
|
{/* Popular badge */}
|
|
{plan.badge && plan.key === 'silver' && (
|
|
<div className="absolute top-4 right-4">
|
|
<span className="bg-brand-turquoise text-white text-xs font-bold px-2.5 py-1 rounded-full">
|
|
{plan.badge}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{plan.badge && plan.key === 'platinium' && (
|
|
<div className="absolute top-4 right-4">
|
|
<span className="bg-gradient-to-r from-brand-navy to-brand-turquoise text-white text-xs font-bold px-2.5 py-1 rounded-full">
|
|
{plan.badge}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col flex-1 p-6">
|
|
{/* Plan name */}
|
|
<div className="mb-4">
|
|
<div className={`inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider px-2.5 py-1 rounded-full mb-3 ${plan.highlighted ? 'bg-white/10 text-white/70' : plan.badgeBg}`}>
|
|
<div className={`w-1.5 h-1.5 rounded-full bg-gradient-to-r ${plan.accentColor}`} />
|
|
{plan.name}
|
|
</div>
|
|
<h3 className={`text-xl font-bold mb-1 ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
|
|
{plan.description}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Price */}
|
|
<div className="mb-6">
|
|
{plan.monthlyPrice === null ? (
|
|
<div>
|
|
<span className={`text-3xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
|
|
Sur mesure
|
|
</span>
|
|
<p className={`text-sm mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
|
|
Tarification personnalisée
|
|
</p>
|
|
</div>
|
|
) : plan.monthlyPrice === 0 ? (
|
|
<div>
|
|
<span className={`text-4xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
|
|
Gratuit
|
|
</span>
|
|
<p className={`text-sm mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
|
|
Pour toujours
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<div className="flex items-end gap-1">
|
|
<span className={`text-4xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
|
|
{billingYearly ? plan.yearlyMonthly : plan.monthlyPrice}€
|
|
</span>
|
|
<span className={`text-sm pb-1.5 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
|
|
/mois
|
|
</span>
|
|
</div>
|
|
{billingYearly ? (
|
|
<p className={`text-xs mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
|
|
Facturé {plan.yearlyPrice?.toLocaleString('fr-FR')}€/an
|
|
</p>
|
|
) : (
|
|
<p className={`text-xs mt-1 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`}>
|
|
Économisez 1 mois avec l'annuel
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Key stats */}
|
|
<div className={`rounded-xl p-3 mb-5 space-y-2 ${plan.highlighted ? 'bg-white/10' : 'bg-gray-50'}`}>
|
|
<div className="flex items-center gap-2">
|
|
<Users className={`w-3.5 h-3.5 flex-shrink-0 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`} />
|
|
<span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>{plan.users}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Ship className={`w-3.5 h-3.5 flex-shrink-0 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`} />
|
|
<span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>{plan.shipments}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<BarChart3 className={`w-3.5 h-3.5 flex-shrink-0 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`} />
|
|
<span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>
|
|
Commission {plan.commission}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<ul className="space-y-2.5 mb-6 flex-1">
|
|
{plan.features.map((feature, featureIndex) => (
|
|
<li key={featureIndex} className="flex items-start gap-2.5">
|
|
{feature.included ? (
|
|
<Check className={`w-4 h-4 flex-shrink-0 mt-0.5 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-green'}`} />
|
|
) : (
|
|
<X className={`w-4 h-4 flex-shrink-0 mt-0.5 ${plan.highlighted ? 'text-white/20' : 'text-gray-300'}`} />
|
|
)}
|
|
<span className={`text-sm ${
|
|
feature.included
|
|
? plan.highlighted ? 'text-white/90' : 'text-gray-700'
|
|
: plan.highlighted ? 'text-white/30' : 'text-gray-400'
|
|
}`}>
|
|
{feature.text}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* CTA */}
|
|
<Link
|
|
href={plan.ctaLink}
|
|
className={`block w-full text-center py-3 px-6 rounded-xl font-semibold text-sm transition-all ${
|
|
plan.highlighted
|
|
? 'bg-brand-turquoise text-white hover:bg-brand-turquoise/90 shadow-lg shadow-brand-turquoise/30 hover:shadow-xl'
|
|
: plan.key === 'bronze'
|
|
? 'bg-gray-100 text-brand-navy hover:bg-gray-200'
|
|
: 'bg-brand-navy text-white hover:bg-brand-navy/90 shadow-md hover:shadow-lg'
|
|
}`}
|
|
>
|
|
{plan.cta}
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
|
|
{/* Bottom note */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
|
className="mt-12 text-center space-y-2"
|
|
>
|
|
<p className="text-gray-600 text-sm">
|
|
Plans Silver et Gold : essai gratuit 14 jours inclus · Aucune carte bancaire requise
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
Des questions ?{' '}
|
|
<Link href="/contact" className="text-brand-turquoise font-medium hover:underline">
|
|
Contactez notre équipe commerciale
|
|
</Link>
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How It Works Section */}
|
|
<section
|
|
ref={howRef}
|
|
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 pointer-events-none">
|
|
<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 }}
|
|
animate={isHowInView ? { opacity: 1, y: 0 } : {}}
|
|
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>
|
|
|
|
{/* Steps grid with animated connecting line */}
|
|
<div className="relative">
|
|
{/* Animated progress line — desktop only */}
|
|
<div className="hidden lg:block absolute top-10 left-[12.5%] right-[12.5%] h-px bg-white/15">
|
|
<motion.div
|
|
initial={{ scaleX: 0 }}
|
|
animate={isHowInView ? { scaleX: 1 } : {}}
|
|
transition={{ duration: 1.6, delay: 0.5, ease: 'easeInOut' }}
|
|
style={{ transformOrigin: 'left' }}
|
|
className="absolute inset-0 bg-brand-turquoise"
|
|
/>
|
|
</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 réservation en un clic',
|
|
icon: CheckCircle2,
|
|
},
|
|
{
|
|
step: '04',
|
|
title: 'Suivez',
|
|
description: 'Suivez 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 }}
|
|
animate={isHowInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.3 + index * 0.15 }}
|
|
className="text-center relative z-10"
|
|
>
|
|
{/* Clean number circle — no icon overlay */}
|
|
<div className="mb-5">
|
|
<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 ring-4 ring-brand-turquoise/20">
|
|
{step.step}
|
|
</div>
|
|
</div>
|
|
{/* Icon badge — separate from the number */}
|
|
<div className="flex justify-center mb-3">
|
|
<div className="p-2 bg-white/10 rounded-lg">
|
|
<IconComponent className="w-5 h-5 text-brand-turquoise" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white mb-2">{step.title}</h3>
|
|
<p className="text-white/70 text-sm leading-relaxed">{step.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA after last step */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isHowInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: 1.4 }}
|
|
className="mt-16 text-center"
|
|
>
|
|
<Link
|
|
href="/register"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center space-x-2 px-8 py-4 bg-brand-turquoise text-white rounded-xl font-semibold text-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 group"
|
|
>
|
|
<span>Essayer maintenant</span>
|
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
<p className="mt-3 text-white/50 text-sm">
|
|
Inscription gratuite · Aucune carte bancaire requise
|
|
</p>
|
|
</motion.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"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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 tableau de bord</span>
|
|
<LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/register"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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>
|
|
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|