xpeditis2.0/apps/frontend/app/press/page.tsx
2026-01-26 00:08:04 +01:00

579 lines
23 KiB
TypeScript

'use client';
import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import {
Newspaper,
Download,
ExternalLink,
Calendar,
Mail,
Phone,
FileText,
Image as ImageIcon,
Video,
Award,
TrendingUp,
Users,
Globe,
ArrowRight,
Quote,
} from 'lucide-react';
import { LandingHeader, LandingFooter } from '@/components/layout';
export default function PressPage() {
const heroRef = useRef(null);
const newsRef = useRef(null);
const resourcesRef = useRef(null);
const contactRef = useRef(null);
const milestonesRef = useRef(null);
const isHeroInView = useInView(heroRef, { once: true });
const isNewsInView = useInView(newsRef, { once: true });
const isResourcesInView = useInView(resourcesRef, { once: true });
const isContactInView = useInView(contactRef, { once: true });
const isMilestonesInView = useInView(milestonesRef, { once: true });
const pressReleases = [
{
id: 1,
title: 'Xpeditis lève 15 millions d\'euros pour accélérer son expansion européenne',
date: '15 janvier 2025',
excerpt:
'La startup française de fret maritime digital annonce une levée de fonds Série A menée par Partech et Eurazeo.',
category: 'Financement',
pdfUrl: '#',
},
{
id: 2,
title: 'Xpeditis franchit le cap des 500 clients actifs',
date: '8 janvier 2025',
excerpt:
'La plateforme B2B de fret maritime confirme sa position de leader en Europe avec une croissance de 200% en 2024.',
category: 'Croissance',
pdfUrl: '#',
},
{
id: 3,
title: 'Partenariat stratégique avec CMA CGM',
date: '15 décembre 2024',
excerpt:
'Xpeditis intègre l\'offre complète du groupe CMA CGM, offrant encore plus de choix à ses utilisateurs.',
category: 'Partenariat',
pdfUrl: '#',
},
{
id: 4,
title: 'Lancement de nouvelles fonctionnalités de tracking en temps réel',
date: '1er décembre 2024',
excerpt:
'La plateforme enrichit son offre avec un système de suivi des conteneurs amélioré et des notifications proactives.',
category: 'Produit',
pdfUrl: '#',
},
{
id: 5,
title: 'Ouverture du bureau de Rotterdam',
date: '15 novembre 2024',
excerpt:
'Xpeditis poursuit son expansion avec l\'ouverture d\'un nouveau bureau aux Pays-Bas pour servir le marché Benelux.',
category: 'Expansion',
pdfUrl: '#',
},
];
const mediaCoverage = [
{
outlet: 'Les Echos',
title: 'Xpeditis, la startup qui digitalise le fret maritime',
date: '12 janvier 2025',
url: '#',
logo: '/assets/logos/media/les-echos.png',
},
{
outlet: 'BFM Business',
title: 'Comment l\'IA révolutionne la logistique maritime',
date: '10 janvier 2025',
url: '#',
logo: '/assets/logos/media/bfm.png',
},
{
outlet: 'Journal de la Marine Marchande',
title: 'Les plateformes digitales au service des transitaires',
date: '5 janvier 2025',
url: '#',
logo: '/assets/logos/media/jmm.png',
},
{
outlet: 'Tech.eu',
title: 'French logistics startup Xpeditis raises €15M',
date: '15 janvier 2025',
url: '#',
logo: '/assets/logos/media/tech-eu.png',
},
];
const pressKitItems = [
{
icon: ImageIcon,
title: 'Logos & Visuels',
description: 'Logos en haute résolution (PNG, SVG) et visuels de la plateforme',
downloadUrl: '#',
format: 'ZIP - 12 MB',
},
{
icon: FileText,
title: 'Dossier de presse',
description: 'Présentation complète de Xpeditis, chiffres clés et biographies des fondateurs',
downloadUrl: '#',
format: 'PDF - 4 MB',
},
{
icon: Video,
title: 'Vidéos & B-Roll',
description: 'Vidéos de présentation et séquences B-Roll pour vos reportages',
downloadUrl: '#',
format: 'MP4 - 250 MB',
},
];
const milestones = [
{ year: '2021', event: 'Création de Xpeditis', icon: Award },
{ year: '2022', event: 'Première version lancée', icon: TrendingUp },
{ year: '2023', event: 'Levée Seed de 3M€', icon: TrendingUp },
{ year: '2024', event: '500 clients actifs', icon: Users },
{ year: '2025', event: 'Série A - 15M€', icon: Globe },
];
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="press" />
{/* 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"
>
<Newspaper className="w-5 h-5 text-brand-turquoise" />
<span className="text-white/90 text-sm font-medium">Espace Presse</span>
</motion.div>
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
Espace Presse
<br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
Xpeditis
</span>
</h1>
<p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
Retrouvez tous nos communiqués de presse, ressources médias et informations
pour les journalistes. Notre équipe communication est à votre disposition.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<a
href="#resources"
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"
>
<Download className="w-5 h-5" />
<span>Kit Presse</span>
</a>
<a
href="#contact"
className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
>
Contact Presse
</a>
</div>
</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>
{/* Key Stats */}
<section className="py-16 bg-gray-50">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
{[
{ value: '15M€', label: 'Levée de fonds' },
{ value: '500+', label: 'Clients actifs' },
{ value: '50+', label: 'Compagnies maritimes' },
{ value: '15', label: 'Pays couverts' },
].map((stat, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="text-center"
>
<div className="text-5xl font-bold text-brand-turquoise mb-2">{stat.value}</div>
<div className="text-gray-600 font-medium">{stat.label}</div>
</motion.div>
))}
</div>
</div>
</section>
{/* Press Releases */}
<section ref={newsRef} className="py-20">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isNewsInView ? { 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">
Communiqués de Presse
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Les dernières actualités officielles de Xpeditis
</p>
</motion.div>
<motion.div
variants={containerVariants}
initial="hidden"
animate={isNewsInView ? 'visible' : 'hidden'}
className="space-y-6"
>
{pressReleases.map((release) => (
<motion.div
key={release.id}
variants={itemVariants}
className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all group"
>
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div className="flex-1">
<div className="flex items-center space-x-3 mb-2">
<span className="px-3 py-1 bg-brand-turquoise/10 text-brand-turquoise text-sm font-medium rounded-full">
{release.category}
</span>
<span className="flex items-center space-x-1 text-gray-500 text-sm">
<Calendar className="w-4 h-4" />
<span>{release.date}</span>
</span>
</div>
<h3 className="text-xl font-bold text-brand-navy mb-2 group-hover:text-brand-turquoise transition-colors">
{release.title}
</h3>
<p className="text-gray-600">{release.excerpt}</p>
</div>
<div className="flex items-center space-x-3">
<a
href={release.pdfUrl}
className="flex items-center space-x-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
>
<Download className="w-4 h-4" />
<span>PDF</span>
</a>
<a
href={`/press/${release.id}`}
className="flex items-center space-x-2 px-4 py-2 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors"
>
<span>Lire</span>
<ArrowRight className="w-4 h-4" />
</a>
</div>
</div>
</motion.div>
))}
</motion.div>
</div>
</section>
{/* Media Coverage */}
<section className="py-20 bg-gray-50">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<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-brand-navy mb-4">
Ils parlent de nous
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Retrouvez les articles de presse mentionnant Xpeditis
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{mediaCoverage.map((article, index) => (
<motion.a
key={index}
href={article.url}
target="_blank"
rel="noopener noreferrer"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }}
whileHover={{ y: -5 }}
className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
>
<div className="flex items-start space-x-4">
<div className="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center flex-shrink-0">
<Newspaper className="w-8 h-8 text-gray-400" />
</div>
<div className="flex-1">
<div className="flex items-center justify-between mb-2">
<span className="font-bold text-brand-turquoise">{article.outlet}</span>
<ExternalLink className="w-4 h-4 text-gray-400 group-hover:text-brand-turquoise transition-colors" />
</div>
<h3 className="text-lg font-bold text-brand-navy mb-2 group-hover:text-brand-turquoise transition-colors">
{article.title}
</h3>
<span className="text-gray-500 text-sm">{article.date}</span>
</div>
</div>
</motion.a>
))}
</div>
</div>
</section>
{/* Press Kit Resources */}
<section ref={resourcesRef} id="resources" className="py-20">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isResourcesInView ? { 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">
Kit Presse
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Téléchargez tous les éléments dont vous avez besoin pour vos articles
</p>
</motion.div>
<motion.div
variants={containerVariants}
initial="hidden"
animate={isResourcesInView ? 'visible' : 'hidden'}
className="grid grid-cols-1 md:grid-cols-3 gap-8"
>
{pressKitItems.map((item, index) => {
const IconComponent = item.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-16 h-16 bg-brand-turquoise/10 rounded-2xl flex items-center justify-center mb-6">
<IconComponent className="w-8 h-8 text-brand-turquoise" />
</div>
<h3 className="text-xl font-bold text-brand-navy mb-2">{item.title}</h3>
<p className="text-gray-600 mb-4">{item.description}</p>
<div className="flex items-center justify-between">
<span className="text-sm text-gray-500">{item.format}</span>
<a
href={item.downloadUrl}
className="flex items-center space-x-2 text-brand-turquoise font-medium hover:underline"
>
<Download className="w-4 h-4" />
<span>Télécharger</span>
</a>
</div>
</motion.div>
);
})}
</motion.div>
</div>
</section>
{/* Milestones */}
<section ref={milestonesRef} className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isMilestonesInView ? { 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">
Notre Parcours
</h2>
<p className="text-xl text-white/80 max-w-2xl mx-auto">
Les grandes étapes de l'histoire de Xpeditis
</p>
</motion.div>
<div className="flex flex-wrap justify-center gap-8">
{milestones.map((milestone, index) => {
const IconComponent = milestone.icon;
return (
<motion.div
key={index}
initial={{ opacity: 0, scale: 0.8 }}
animate={isMilestonesInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="text-center"
>
<div className="w-20 h-20 bg-brand-turquoise rounded-full flex items-center justify-center mx-auto mb-4">
<IconComponent className="w-10 h-10 text-white" />
</div>
<div className="text-2xl font-bold text-brand-turquoise mb-1">{milestone.year}</div>
<div className="text-white/80 max-w-[150px]">{milestone.event}</div>
</motion.div>
);
})}
</div>
</div>
</section>
{/* Press Contact */}
<section ref={contactRef} id="contact" className="py-20">
<div className="max-w-4xl mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isContactInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
className="text-center mb-12"
>
<h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
Contact Presse
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Notre équipe communication est à votre disposition pour toute demande d'interview,
d'information ou de partenariat média.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isContactInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.2 }}
className="bg-white rounded-3xl shadow-xl border border-gray-100 p-8 lg:p-12"
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 className="text-2xl font-bold text-brand-navy mb-6">Relations Presse</h3>
<div className="space-y-4">
<div className="flex items-center space-x-4">
<div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
<Mail className="w-6 h-6 text-brand-turquoise" />
</div>
<div>
<div className="text-sm text-gray-500">Email</div>
<a
href="mailto:presse@xpeditis.com"
className="text-lg font-medium text-brand-navy hover:text-brand-turquoise transition-colors"
>
presse@xpeditis.com
</a>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
<Phone className="w-6 h-6 text-brand-turquoise" />
</div>
<div>
<div className="text-sm text-gray-500">Téléphone</div>
<a
href="tel:+33123456790"
className="text-lg font-medium text-brand-navy hover:text-brand-turquoise transition-colors"
>
+33 1 23 45 67 90
</a>
</div>
</div>
</div>
</div>
<div>
<h3 className="text-2xl font-bold text-brand-navy mb-6">Responsable Communication</h3>
<div className="flex items-start space-x-4">
<div className="w-16 h-16 bg-brand-turquoise/10 rounded-full flex items-center justify-center flex-shrink-0">
<Users className="w-8 h-8 text-brand-turquoise" />
</div>
<div>
<div className="text-lg font-bold text-brand-navy">Camille Dumont</div>
<div className="text-brand-turquoise font-medium mb-2">Directrice Communication</div>
<p className="text-gray-600 text-sm">
Disponible pour les interviews, demandes d'information et partenariats médias.
</p>
</div>
</div>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-100">
<div className="flex items-start space-x-4 bg-gray-50 p-6 rounded-xl">
<Quote className="w-8 h-8 text-brand-turquoise flex-shrink-0" />
<div>
<p className="text-gray-600 italic mb-4">
"Nous sommes toujours ravis d'échanger avec les journalistes sur notre mission de
révolutionner le fret maritime. N'hésitez pas à nous contacter pour toute demande."
</p>
<div className="text-sm">
<span className="font-bold text-brand-navy">Jean-Pierre Durand</span>
<span className="text-gray-500"> - CEO & Co-fondateur</span>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</section>
<LandingFooter />
</div>
);
}