474 lines
20 KiB
TypeScript
474 lines
20 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef } from 'react';
|
|
import Link from 'next/link';
|
|
import { motion, useInView } from 'framer-motion';
|
|
import {
|
|
Ship,
|
|
BookOpen,
|
|
Calendar,
|
|
Clock,
|
|
User,
|
|
ArrowRight,
|
|
Search,
|
|
TrendingUp,
|
|
Globe,
|
|
FileText,
|
|
Anchor,
|
|
} from 'lucide-react';
|
|
import { LandingHeader, LandingFooter } from '@/components/layout';
|
|
|
|
export default function BlogPage() {
|
|
const [selectedCategory, setSelectedCategory] = useState('all');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
const heroRef = useRef(null);
|
|
const articlesRef = useRef(null);
|
|
const categoriesRef = useRef(null);
|
|
|
|
const isHeroInView = useInView(heroRef, { once: true });
|
|
const isArticlesInView = useInView(articlesRef, { once: true });
|
|
const isCategoriesInView = useInView(categoriesRef, { once: true });
|
|
|
|
const categories = [
|
|
{ value: 'all', label: 'Tous les articles', icon: BookOpen },
|
|
{ value: 'industry', label: 'Industrie maritime', icon: Ship },
|
|
{ value: 'technology', label: 'Technologie', icon: TrendingUp },
|
|
{ value: 'guides', label: 'Guides pratiques', icon: FileText },
|
|
{ value: 'news', label: 'Actualités', icon: Globe },
|
|
];
|
|
|
|
const featuredArticle = {
|
|
id: 1,
|
|
title: 'L\'avenir du fret maritime : comment l\'IA transforme la logistique',
|
|
excerpt:
|
|
'Découvrez comment l\'intelligence artificielle révolutionne la gestion des expéditions maritimes et optimise les chaînes d\'approvisionnement mondiales.',
|
|
category: 'technology',
|
|
author: 'Marie Lefebvre',
|
|
authorRole: 'CTO',
|
|
date: '15 janvier 2025',
|
|
readTime: '8 min',
|
|
image: '/assets/images/blog/featured.jpg',
|
|
tags: ['IA', 'Innovation', 'Logistique'],
|
|
};
|
|
|
|
const articles = [
|
|
{
|
|
id: 2,
|
|
title: 'Guide complet des Incoterms 2020 pour le transport maritime',
|
|
excerpt:
|
|
'Tout ce que vous devez savoir sur les règles Incoterms et leur application dans le fret maritime international.',
|
|
category: 'guides',
|
|
author: 'Thomas Martin',
|
|
date: '10 janvier 2025',
|
|
readTime: '12 min',
|
|
image: '/assets/images/blog/incoterms.jpg',
|
|
tags: ['Incoterms', 'Guide', 'Commerce international'],
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Comment optimiser vos coûts de transport maritime en 2025',
|
|
excerpt:
|
|
'Stratégies et conseils pratiques pour réduire vos dépenses logistiques sans compromettre la qualité de service.',
|
|
category: 'guides',
|
|
author: 'Sophie Bernard',
|
|
date: '8 janvier 2025',
|
|
readTime: '6 min',
|
|
image: '/assets/images/blog/costs.jpg',
|
|
tags: ['Optimisation', 'Coûts', 'Stratégie'],
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Les plus grands ports européens : classement 2025',
|
|
excerpt:
|
|
'Analyse des performances des principaux ports européens et tendances du trafic conteneurisé.',
|
|
category: 'industry',
|
|
author: 'Jean-Pierre Durand',
|
|
date: '5 janvier 2025',
|
|
readTime: '10 min',
|
|
image: '/assets/images/blog/ports.jpg',
|
|
tags: ['Ports', 'Europe', 'Statistiques'],
|
|
},
|
|
{
|
|
id: 5,
|
|
title: 'Xpeditis lève 15M€ pour accélérer son expansion',
|
|
excerpt:
|
|
'Notre série A nous permet de renforcer notre équipe et d\'étendre notre présence en Europe.',
|
|
category: 'news',
|
|
author: 'Jean-Pierre Durand',
|
|
date: '3 janvier 2025',
|
|
readTime: '4 min',
|
|
image: '/assets/images/blog/funding.jpg',
|
|
tags: ['Financement', 'Croissance', 'Xpeditis'],
|
|
},
|
|
{
|
|
id: 6,
|
|
title: 'Décarbonation du transport maritime : où en sommes-nous ?',
|
|
excerpt:
|
|
'État des lieux des initiatives environnementales dans le secteur maritime et perspectives pour 2030.',
|
|
category: 'industry',
|
|
author: 'Claire Moreau',
|
|
date: '28 décembre 2024',
|
|
readTime: '9 min',
|
|
image: '/assets/images/blog/green.jpg',
|
|
tags: ['Environnement', 'Décarbonation', 'Durabilité'],
|
|
},
|
|
{
|
|
id: 7,
|
|
title: 'APIs et intégrations : comment connecter votre TMS à Xpeditis',
|
|
excerpt:
|
|
'Guide technique pour intégrer notre plateforme avec vos systèmes de gestion existants.',
|
|
category: 'technology',
|
|
author: 'Alexandre Petit',
|
|
date: '22 décembre 2024',
|
|
readTime: '15 min',
|
|
image: '/assets/images/blog/api.jpg',
|
|
tags: ['API', 'Intégration', 'Technique'],
|
|
},
|
|
{
|
|
id: 8,
|
|
title: 'Les documents essentiels pour l\'export maritime',
|
|
excerpt:
|
|
'Check-list complète des documents requis pour vos expéditions maritimes internationales.',
|
|
category: 'guides',
|
|
author: 'Thomas Martin',
|
|
date: '18 décembre 2024',
|
|
readTime: '7 min',
|
|
image: '/assets/images/blog/documents.jpg',
|
|
tags: ['Documents', 'Export', 'Douane'],
|
|
},
|
|
];
|
|
|
|
const filteredArticles = articles.filter((article) => {
|
|
const categoryMatch = selectedCategory === 'all' || article.category === selectedCategory;
|
|
const searchMatch =
|
|
searchQuery === '' ||
|
|
article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
article.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
|
|
return categoryMatch && searchMatch;
|
|
});
|
|
|
|
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="blog" />
|
|
|
|
{/* 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"
|
|
>
|
|
<BookOpen className="w-5 h-5 text-brand-turquoise" />
|
|
<span className="text-white/90 text-sm font-medium">Blog Xpeditis</span>
|
|
</motion.div>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
|
Actualités & Insights
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
|
|
du fret maritime
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
|
|
Restez informé des dernières tendances du transport maritime, découvrez nos guides
|
|
pratiques et suivez l'actualité de Xpeditis.
|
|
</p>
|
|
|
|
{/* Search Bar */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
className="max-w-xl mx-auto"
|
|
>
|
|
<div className="relative">
|
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Rechercher un article..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-12 pr-4 py-4 rounded-xl bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-brand-turquoise focus:outline-none"
|
|
/>
|
|
</div>
|
|
</motion.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>
|
|
|
|
{/* Categories */}
|
|
<section ref={categoriesRef} className="py-8 border-b border-gray-200">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isCategoriesInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6 }}
|
|
className="max-w-7xl mx-auto px-6 lg:px-8"
|
|
>
|
|
<div className="flex flex-wrap items-center justify-center gap-4">
|
|
{categories.map((category) => {
|
|
const IconComponent = category.icon;
|
|
const isActive = selectedCategory === category.value;
|
|
return (
|
|
<button
|
|
key={category.value}
|
|
onClick={() => setSelectedCategory(category.value)}
|
|
className={`flex items-center space-x-2 px-4 py-2 rounded-full transition-all ${
|
|
isActive
|
|
? 'bg-brand-turquoise text-white'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
<IconComponent className="w-4 h-4" />
|
|
<span className="font-medium">{category.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Featured Article */}
|
|
<section className="py-16">
|
|
<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 }}
|
|
>
|
|
<Link href={`/blog/${featuredArticle.id}`}>
|
|
<div className="relative bg-gradient-to-br from-brand-navy to-brand-navy/90 rounded-3xl overflow-hidden group cursor-pointer">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-brand-navy via-brand-navy/80 to-transparent z-10" />
|
|
<div className="absolute right-0 top-0 bottom-0 w-1/2 bg-brand-turquoise/20 flex items-center justify-center">
|
|
<Anchor className="w-48 h-48 text-white/10" />
|
|
</div>
|
|
|
|
<div className="relative z-20 p-8 lg:p-12">
|
|
<div className="max-w-2xl">
|
|
<div className="flex items-center space-x-2 mb-4">
|
|
<span className="px-3 py-1 bg-brand-turquoise text-white text-sm font-medium rounded-full">
|
|
À la une
|
|
</span>
|
|
<span className="px-3 py-1 bg-white/20 text-white text-sm font-medium rounded-full">
|
|
{categories.find((c) => c.value === featuredArticle.category)?.label}
|
|
</span>
|
|
</div>
|
|
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-white mb-4 group-hover:text-brand-turquoise transition-colors">
|
|
{featuredArticle.title}
|
|
</h2>
|
|
|
|
<p className="text-lg text-white/80 mb-6">{featuredArticle.excerpt}</p>
|
|
|
|
<div className="flex items-center space-x-6 text-white/60 text-sm">
|
|
<div className="flex items-center space-x-2">
|
|
<User className="w-4 h-4" />
|
|
<span>{featuredArticle.author}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>{featuredArticle.date}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Clock className="w-4 h-4" />
|
|
<span>{featuredArticle.readTime}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2 mt-6 text-brand-turquoise font-medium opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span>Lire l'article</span>
|
|
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Articles Grid */}
|
|
<section ref={articlesRef} className="py-16 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isArticlesInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex items-center justify-between mb-12"
|
|
>
|
|
<h2 className="text-3xl font-bold text-brand-navy">Tous les articles</h2>
|
|
<span className="text-gray-500">{filteredArticles.length} articles</span>
|
|
</motion.div>
|
|
|
|
{filteredArticles.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-xl font-medium text-gray-600">Aucun article trouvé</h3>
|
|
<p className="text-gray-500">Essayez de modifier vos filtres ou votre recherche</p>
|
|
</div>
|
|
) : (
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isArticlesInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{filteredArticles.map((article) => (
|
|
<motion.div key={article.id} variants={itemVariants}>
|
|
<Link href={`/blog/${article.id}`}>
|
|
<div className="bg-white rounded-2xl shadow-lg overflow-hidden group hover:shadow-xl transition-all h-full flex flex-col">
|
|
<div className="aspect-video bg-gradient-to-br from-brand-navy/10 to-brand-turquoise/10 flex items-center justify-center relative">
|
|
<Ship className="w-16 h-16 text-brand-navy/20" />
|
|
<div className="absolute top-4 left-4">
|
|
<span className="px-3 py-1 bg-white/90 text-brand-navy text-xs font-medium rounded-full">
|
|
{categories.find((c) => c.value === article.category)?.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 flex-1 flex flex-col">
|
|
<h3 className="text-xl font-bold text-brand-navy mb-3 group-hover:text-brand-turquoise transition-colors line-clamp-2">
|
|
{article.title}
|
|
</h3>
|
|
|
|
<p className="text-gray-600 mb-4 line-clamp-2 flex-1">{article.excerpt}</p>
|
|
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{article.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between text-sm text-gray-500 pt-4 border-t border-gray-100">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-brand-turquoise/10 rounded-full flex items-center justify-center">
|
|
<User className="w-4 h-4 text-brand-turquoise" />
|
|
</div>
|
|
<span>{article.author}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span>{article.date}</span>
|
|
<span className="flex items-center space-x-1">
|
|
<Clock className="w-4 h-4" />
|
|
<span>{article.readTime}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Load More */}
|
|
{filteredArticles.length > 0 && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="text-center mt-12"
|
|
>
|
|
<button className="px-8 py-4 bg-white border-2 border-brand-turquoise text-brand-turquoise rounded-lg hover:bg-brand-turquoise hover:text-white transition-all font-semibold">
|
|
Charger plus d'articles
|
|
</button>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Newsletter Section */}
|
|
<section className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
|
|
<div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<h2 className="text-4xl font-bold text-white mb-6">
|
|
Restez informé
|
|
</h2>
|
|
<p className="text-xl text-white/80 mb-10">
|
|
Abonnez-vous à notre newsletter pour recevoir les derniers articles et actualités
|
|
du fret maritime directement dans votre boîte mail.
|
|
</p>
|
|
<form className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
|
|
<input
|
|
type="email"
|
|
placeholder="votre@email.com"
|
|
className="w-full sm:w-96 px-6 py-4 rounded-lg bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-brand-turquoise focus:outline-none"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="w-full sm:w-auto px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold flex items-center justify-center space-x-2"
|
|
>
|
|
<span>S'abonner</span>
|
|
<ArrowRight className="w-5 h-5" />
|
|
</button>
|
|
</form>
|
|
<p className="text-white/50 text-sm mt-4">
|
|
En vous inscrivant, vous acceptez notre politique de confidentialité. Désabonnement possible à tout moment.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|