'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, Bell, BookOpen, Users, Building2, Check, X, } 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 pricingRef = 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 isPricingInView = useInView(pricingRef, { 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: BarChart3, title: 'Dashboard Analytics', 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 Bookings', 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: 'Track & Trace', 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: 'Dashboard', description: 'Vue d\'ensemble de votre activité maritime', link: '/dashboard', }, { icon: Package, title: 'Mes Bookings', 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: 'Track & Trace', 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 = [ { 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 pricingPlans = [ { name: 'Starter', price: 'Gratuit', period: '', description: 'Idéal pour découvrir la plateforme', features: [ { text: 'Jusqu\'à 5 bookings/mois', included: true }, { text: 'Track & Trace illimité', included: true }, { text: 'Wiki maritime complet', included: true }, { text: 'Dashboard basique', included: true }, { text: 'Support par email', included: true }, { text: 'Gestion des documents', included: false }, { text: 'Notifications temps réel', included: false }, { text: 'API access', included: false }, ], cta: 'Commencer gratuitement', highlighted: false, }, { name: 'Professional', price: '99€', period: '/mois', description: 'Pour les transitaires en croissance', features: [ { text: 'Bookings illimités', included: true }, { text: 'Track & Trace illimité', included: true }, { text: 'Wiki maritime complet', included: true }, { text: 'Dashboard avancé + KPIs', included: true }, { text: 'Support prioritaire', included: true }, { text: 'Gestion des documents', included: true }, { text: 'Notifications temps réel', included: true }, { text: 'API access', included: false }, ], cta: 'Essai gratuit 14 jours', highlighted: true, }, { name: 'Enterprise', price: 'Sur mesure', period: '', description: 'Pour les grandes entreprises', features: [ { text: 'Tout Professional +', included: true }, { text: 'API access complet', included: true }, { text: 'Intégrations personnalisées', included: true }, { text: 'Account manager dédié', included: true }, { text: 'SLA garanti 99.9%', included: true }, { text: 'Formation sur site', included: true }, { text: 'Multi-organisations', included: true }, { text: 'Audit & conformité', included: true }, ], cta: 'Contactez-nous', highlighted: false, }, ]; 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 (
{/* Navigation */}
Xpeditis
Fonctionnalités Outils Tarifs {/* Affichage conditionnel: connecté vs non connecté */} {loading ? (
) : isAuthenticated && user ? ( {/* Avatar avec initiales */}
{getUserInitials()}
{/* Nom de l'utilisateur */} {getFullName()} {/* Icône dashboard */} ) : ( <> Connexion Commencer Gratuitement )}
{/* Hero Section */}
{/* Background Image */} {/* Container background image */}
{/* Dark overlay for text readability */}
{/* Gradient overlay */}
Plateforme B2B de Fret Maritime #1 en Europe Réservez votre fret
en quelques clics Comparez les tarifs de 50+ compagnies maritimes, réservez en ligne et suivez vos envois en temps réel. {isAuthenticated && user ? ( Accéder au Dashboard ) : ( <> Créer un compte gratuit Voir la démo )}
{/* Animated Waves */}
{/* Stats Section */}
{stats.map((stat, index) => { const IconComponent = stat.icon; return (
{stat.value}
{stat.label}
 ); })}
{/* Features Section */}

Pourquoi choisir Xpeditis ?

Une plateforme complète pour gérer tous vos besoins en fret maritime

{features.map((feature, index) => { const IconComponent = feature.icon; return (

{feature.title}

{feature.description}

Découvrir
); })}
{/* Tools & Calculators Section */}

Outils & Calculateurs

Des outils puissants pour optimiser vos opérations maritimes

{tools.map((tool, index) => { const IconComponent = tool.icon; return (

{tool.title}

{tool.description}

 ); })}
{/* Partner Logos Section */}

En partenariat avec les plus grandes compagnies maritimes

Accédez aux tarifs de 50+ transporteurs mondiaux

 {[ 'ECU Line 2.png', 'ICL 1.png', 'NVO Consolidation 1.png', 'TCC LOG 1.png', 'VANGUARD 1.png', 'image 1.png', ].map((logo, index) => ( {`Partner ))}
{/* Pricing Section */}

Tarifs simples et transparents

Choisissez le plan adapté à vos besoins. Évoluez à tout moment.

{pricingPlans.map((plan, index) => ( {plan.highlighted && (
Populaire
)}

{plan.name}

{plan.description}

{plan.price} {plan.period}
    {plan.features.map((feature, featureIndex) => (
  • {feature.included ? ( ) : ( )} {feature.text}
    • ))}
{plan.cta}
))}

Tous les plans incluent un essai gratuit de 14 jours. Aucune carte bancaire requise.

Des questions ? Contactez notre équipe commerciale

{/* How It Works Section */}

Comment ça marche ?

Réservez votre fret maritime en 4 étapes simples

{[ { 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 (
{step.step}
{index < 3 && (
)}

{step.title}

{step.description}

); })}
{/* Testimonials Section */}

Ils nous font confiance

Découvrez les témoignages de nos clients satisfaits

{testimonials.map((testimonial, index) => (
{[...Array(5)].map((_, i) => ( ))}

"{testimonial.quote}"

{testimonial.author}
{testimonial.role} - {testimonial.company}
))}
{/* CTA Section */}

Prêt à simplifier votre fret maritime ?

Rejoignez des centaines de transitaires qui font confiance à Xpeditis pour leurs expéditions maritimes.

{isAuthenticated && user ? ( Accéder au Dashboard ) : ( <> Créer un compte gratuit Se connecter )}
Sans carte bancaire
Configuration en 2 min
Données sécurisées
{/* Footer */}
); }