'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 (
{/* 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}

 ); })}
{/* 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 ))}
{/* 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 */}
); }