ec0173483a
All checks were successful
Dev CI / Backend — Lint (push) Successful in 10m23s
Dev CI / Backend — Unit Tests (push) Successful in 10m17s
Dev CI / Frontend — Lint & Type-check (push) Successful in 11m3s
Dev CI / Frontend — Unit Tests (push) Successful in 10m33s
Dev CI / Notify Failure (push) Has been skipped
506 lines
20 KiB
TypeScript
506 lines
20 KiB
TypeScript
'use client';
|
|
|
|
import { useRef } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { motion, useInView } from 'framer-motion';
|
|
import {
|
|
Newspaper,
|
|
Download,
|
|
ExternalLink,
|
|
Calendar,
|
|
Mail,
|
|
Phone,
|
|
FileText,
|
|
Image as ImageIcon,
|
|
Video,
|
|
Award,
|
|
TrendingUp,
|
|
Users,
|
|
Globe,
|
|
ArrowRight,
|
|
Quote,
|
|
type LucideIcon,
|
|
} from 'lucide-react';
|
|
import { LandingHeader, LandingFooter } from '@/components/layout';
|
|
|
|
type StatKey = 'funding' | 'clients' | 'carriers' | 'countries';
|
|
type ReleaseKey = 'seriesA' | 'clients500' | 'cmaCgm' | 'tracking' | 'rotterdam';
|
|
type CoverageKey = 'lesEchos' | 'bfm' | 'jmm' | 'techEu';
|
|
type KitItemKey = 'visuals' | 'dossier' | 'videos';
|
|
type MilestoneKey = '2021' | '2022' | '2023' | '2024' | '2025';
|
|
|
|
const STATS: { key: StatKey; value: string }[] = [
|
|
{ key: 'funding', value: '15M€' },
|
|
{ key: 'clients', value: '500+' },
|
|
{ key: 'carriers', value: '50+' },
|
|
{ key: 'countries', value: '15' },
|
|
];
|
|
|
|
const RELEASES: { id: number; key: ReleaseKey }[] = [
|
|
{ id: 1, key: 'seriesA' },
|
|
{ id: 2, key: 'clients500' },
|
|
{ id: 3, key: 'cmaCgm' },
|
|
{ id: 4, key: 'tracking' },
|
|
{ id: 5, key: 'rotterdam' },
|
|
];
|
|
|
|
const COVERAGE: { key: CoverageKey; outlet: string; url: string }[] = [
|
|
{ key: 'lesEchos', outlet: 'Les Echos', url: '#' },
|
|
{ key: 'bfm', outlet: 'BFM Business', url: '#' },
|
|
{ key: 'jmm', outlet: 'Journal de la Marine Marchande', url: '#' },
|
|
{ key: 'techEu', outlet: 'Tech.eu', url: '#' },
|
|
];
|
|
|
|
const KIT_ITEMS: { key: KitItemKey; icon: LucideIcon }[] = [
|
|
{ key: 'visuals', icon: ImageIcon },
|
|
{ key: 'dossier', icon: FileText },
|
|
{ key: 'videos', icon: Video },
|
|
];
|
|
|
|
const MILESTONES: { key: MilestoneKey; icon: LucideIcon }[] = [
|
|
{ key: '2021', icon: Award },
|
|
{ key: '2022', icon: TrendingUp },
|
|
{ key: '2023', icon: TrendingUp },
|
|
{ key: '2024', icon: Users },
|
|
{ key: '2025', icon: Globe },
|
|
];
|
|
|
|
export default function PressPage() {
|
|
const t = useTranslations('marketing.press');
|
|
|
|
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 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">{t('badge')}</span>
|
|
</motion.div>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
|
{t('title1')}
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
|
|
{t('title2')}
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
|
|
{t('intro')}
|
|
</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>{t('pressKit')}</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"
|
|
>
|
|
{t('pressContact')}
|
|
</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">
|
|
{STATS.map((stat, index) => (
|
|
<motion.div
|
|
key={stat.key}
|
|
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">{t(`stats.${stat.key}`)}</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">
|
|
{t('releasesTitle')}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
{t('releasesSubtitle')}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isNewsInView ? 'visible' : 'hidden'}
|
|
className="space-y-6"
|
|
>
|
|
{RELEASES.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">
|
|
{t(`releases.${release.key}.category`)}
|
|
</span>
|
|
<span className="flex items-center space-x-1 text-gray-500 text-sm">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>{t(`releases.${release.key}.date`)}</span>
|
|
</span>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-brand-navy mb-2 group-hover:text-brand-turquoise transition-colors">
|
|
{t(`releases.${release.key}.title`)}
|
|
</h3>
|
|
<p className="text-gray-600">{t(`releases.${release.key}.excerpt`)}</p>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<a
|
|
href="#"
|
|
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>{t('read')}</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">
|
|
{t('coverageTitle')}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
{t('coverageSubtitle')}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{COVERAGE.map((article, index) => (
|
|
<motion.a
|
|
key={article.key}
|
|
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">
|
|
{t(`coverage.${article.key}.title`)}
|
|
</h3>
|
|
<span className="text-gray-500 text-sm">{t(`coverage.${article.key}.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">
|
|
{t('kitTitle')}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
{t('kitSubtitle')}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isResourcesInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-3 gap-8"
|
|
>
|
|
{KIT_ITEMS.map((item) => {
|
|
const IconComponent = item.icon;
|
|
return (
|
|
<motion.div
|
|
key={item.key}
|
|
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">{t(`kit.${item.key}.title`)}</h3>
|
|
<p className="text-gray-600 mb-4">{t(`kit.${item.key}.description`)}</p>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-500">{t(`kit.${item.key}.format`)}</span>
|
|
<a
|
|
href="#"
|
|
className="flex items-center space-x-2 text-brand-turquoise font-medium hover:underline"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
<span>{t('kit.download')}</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">
|
|
{t('milestonesTitle')}
|
|
</h2>
|
|
<p className="text-xl text-white/80 max-w-2xl mx-auto">
|
|
{t('milestonesSubtitle')}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="flex flex-wrap justify-center gap-8">
|
|
{MILESTONES.map((milestone, index) => {
|
|
const IconComponent = milestone.icon;
|
|
return (
|
|
<motion.div
|
|
key={milestone.key}
|
|
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.key}</div>
|
|
<div className="text-white/80 max-w-[150px]">{t(`milestones.${milestone.key}` as any)}</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">
|
|
{t('contact.title')}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
{t('contact.body')}
|
|
</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">{t('contact.relationsTitle')}</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">{t('contact.emailLabel')}</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('contact.phoneLabel')}</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">{t('contact.responsibleTitle')}</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">{t('contact.responsibleRole')}</div>
|
|
<p className="text-gray-600 text-sm">
|
|
{t('contact.responsibleBio')}
|
|
</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">
|
|
“{t('contact.quote')}”
|
|
</p>
|
|
<div className="text-sm">
|
|
<span className="font-bold text-brand-navy">Jean-Pierre Durand</span>
|
|
<span className="text-gray-500">{t('contact.quoteRole')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|