303 lines
13 KiB
TypeScript
303 lines
13 KiB
TypeScript
/**
|
|
* Ports et Routes Maritimes - Wiki Page
|
|
*
|
|
* Les principales routes commerciales mondiales
|
|
*/
|
|
|
|
import Link from 'next/link';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
|
import { Globe, BarChart3, Ship, Trophy, RefreshCw, Lightbulb, Anchor } from 'lucide-react';
|
|
|
|
const majorRoutes = [
|
|
{
|
|
name: 'Asie - Europe',
|
|
description: 'La plus importante route commerciale mondiale',
|
|
transitTime: '28-35 jours',
|
|
volume: '~24 millions TEU/an',
|
|
keyPorts: ['Shanghai', 'Singapour', 'Rotterdam', 'Hambourg', 'Anvers'],
|
|
passages: ['Canal de Suez', 'Détroit de Malacca'],
|
|
},
|
|
{
|
|
name: 'Asie - Amérique du Nord (Pacifique)',
|
|
description: 'Deuxième route la plus importante',
|
|
transitTime: '12-18 jours',
|
|
volume: '~26 millions TEU/an',
|
|
keyPorts: ['Shanghai', 'Busan', 'Los Angeles', 'Long Beach', 'Seattle'],
|
|
passages: ['Traversée Pacifique directe'],
|
|
},
|
|
{
|
|
name: 'Europe - Amérique du Nord (Atlantique)',
|
|
description: 'Route transatlantique historique',
|
|
transitTime: '8-12 jours',
|
|
volume: '~8 millions TEU/an',
|
|
keyPorts: ['Rotterdam', 'Anvers', 'New York', 'Savannah', 'Charleston'],
|
|
passages: ['Traversée Atlantique directe'],
|
|
},
|
|
{
|
|
name: 'Asie - Méditerranée',
|
|
description: 'Variante de la route Asie-Europe via Med',
|
|
transitTime: '18-25 jours',
|
|
volume: '~6 millions TEU/an',
|
|
keyPorts: ['Shanghai', 'Pirée', 'Gênes', 'Barcelone', 'Tanger Med'],
|
|
passages: ['Canal de Suez', 'Détroit de Gibraltar'],
|
|
},
|
|
];
|
|
|
|
const strategicPassages = [
|
|
{
|
|
name: 'Canal de Suez',
|
|
location: 'Égypte',
|
|
opened: '1869',
|
|
length: '193.3 km',
|
|
transitTime: '12-16 heures',
|
|
traffic: '~20,000 navires/an',
|
|
importance: 'Relie la Méditerranée à la Mer Rouge. Raccourcit de 7,000 km la route Europe-Asie.',
|
|
},
|
|
{
|
|
name: 'Canal de Panama',
|
|
location: 'Panama',
|
|
opened: '1914',
|
|
length: '82 km',
|
|
transitTime: '8-10 heures',
|
|
traffic: '~14,000 navires/an',
|
|
importance: 'Relie l\'Atlantique au Pacifique. Crucial pour le commerce Asie-Côte Est USA.',
|
|
},
|
|
{
|
|
name: 'Détroit de Malacca',
|
|
location: 'Malaisie/Indonésie',
|
|
opened: 'Naturel',
|
|
length: '800 km',
|
|
transitTime: '12 heures',
|
|
traffic: '~90,000 navires/an',
|
|
importance: 'Point de passage obligé entre Océan Indien et Mer de Chine. 25% du commerce mondial.',
|
|
},
|
|
{
|
|
name: 'Détroit de Gibraltar',
|
|
location: 'Espagne/Maroc',
|
|
opened: 'Naturel',
|
|
length: '60 km',
|
|
transitTime: '2-3 heures',
|
|
traffic: '~100,000 navires/an',
|
|
importance: 'Entrée en Méditerranée depuis l\'Atlantique.',
|
|
},
|
|
];
|
|
|
|
const majorPorts = [
|
|
{ name: 'Shanghai', country: 'Chine', volume: '47.0', rank: 1 },
|
|
{ name: 'Singapour', country: 'Singapour', volume: '37.2', rank: 2 },
|
|
{ name: 'Ningbo-Zhoushan', country: 'Chine', volume: '33.0', rank: 3 },
|
|
{ name: 'Shenzhen', country: 'Chine', volume: '30.0', rank: 4 },
|
|
{ name: 'Guangzhou', country: 'Chine', volume: '24.2', rank: 5 },
|
|
{ name: 'Busan', country: 'Corée du Sud', volume: '22.7', rank: 6 },
|
|
{ name: 'Qingdao', country: 'Chine', volume: '22.0', rank: 7 },
|
|
{ name: 'Rotterdam', country: 'Pays-Bas', volume: '14.5', rank: 8 },
|
|
{ name: 'Dubai/Jebel Ali', country: 'EAU', volume: '14.1', rank: 9 },
|
|
{ name: 'Tianjin', country: 'Chine', volume: '14.0', rank: 10 },
|
|
];
|
|
|
|
export default function PortsRoutesPage() {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header with back link */}
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<Link
|
|
href="/dashboard/wiki"
|
|
className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
|
|
>
|
|
<svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Retour au Wiki
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<Globe className="w-10 h-10 text-blue-600" />
|
|
<h1 className="text-3xl font-bold text-gray-900">Ports et Routes Maritimes</h1>
|
|
</div>
|
|
<p className="mt-3 text-gray-600 max-w-3xl">
|
|
Le transport maritime assure plus de 80% du commerce mondial en volume.
|
|
Comprendre les grandes routes et les ports stratégiques est essentiel pour optimiser sa supply chain.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Key Stats */}
|
|
<Card className="bg-blue-50 border-blue-200">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-blue-900 mb-3 flex items-center gap-2"><BarChart3 className="w-5 h-5" /> Chiffres Clés du Maritime Mondial</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-blue-700">80%</p>
|
|
<p className="text-sm text-blue-600">du commerce mondial (volume)</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-blue-700">~800M</p>
|
|
<p className="text-sm text-blue-600">TEU transportés/an</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-blue-700">~60,000</p>
|
|
<p className="text-sm text-blue-600">navires marchands</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-blue-700">~14B</p>
|
|
<p className="text-sm text-blue-600">tonnes de marchandises/an</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Major Routes */}
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Ship className="w-5 h-5" /> Routes Commerciales Majeures</h2>
|
|
<div className="space-y-4">
|
|
{majorRoutes.map((route) => (
|
|
<Card key={route.name} className="bg-white">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-lg">{route.name}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-gray-600 mb-3">{route.description}</p>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-gray-500">Transit time:</span>
|
|
<p className="font-medium">{route.transitTime}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-500">Volume annuel:</span>
|
|
<p className="font-medium">{route.volume}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-500">Ports clés:</span>
|
|
<p className="font-medium">{route.keyPorts.slice(0, 3).join(', ')}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-500">Passages:</span>
|
|
<p className="font-medium">{route.passages.join(', ')}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Strategic Passages */}
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Anchor className="w-5 h-5" /> Passages Stratégiques</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{strategicPassages.map((passage) => (
|
|
<Card key={passage.name} className="bg-white">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<span className="text-lg">{passage.name}</span>
|
|
<span className="text-xs bg-gray-100 px-2 py-1 rounded">{passage.location}</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-gray-600 text-sm mb-3">{passage.importance}</p>
|
|
<div className="grid grid-cols-2 gap-2 text-xs">
|
|
<div className="bg-gray-50 p-2 rounded">
|
|
<span className="text-gray-500">Longueur:</span>
|
|
<p className="font-medium">{passage.length}</p>
|
|
</div>
|
|
<div className="bg-gray-50 p-2 rounded">
|
|
<span className="text-gray-500">Transit:</span>
|
|
<p className="font-medium">{passage.transitTime}</p>
|
|
</div>
|
|
<div className="bg-gray-50 p-2 rounded">
|
|
<span className="text-gray-500">Trafic:</span>
|
|
<p className="font-medium">{passage.traffic}</p>
|
|
</div>
|
|
<div className="bg-gray-50 p-2 rounded">
|
|
<span className="text-gray-500">Ouverture:</span>
|
|
<p className="font-medium">{passage.opened}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top Ports */}
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Trophy className="w-5 h-5" /> Top 10 Ports Mondiaux (TEU)</h2>
|
|
<Card className="bg-white">
|
|
<CardContent className="pt-6">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b">
|
|
<th className="text-left py-2 font-medium">Rang</th>
|
|
<th className="text-left py-2 font-medium">Port</th>
|
|
<th className="text-left py-2 font-medium">Pays</th>
|
|
<th className="text-right py-2 font-medium">Volume (M TEU)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{majorPorts.map((port) => (
|
|
<tr key={port.name} className="border-b last:border-0 hover:bg-gray-50">
|
|
<td className="py-3">
|
|
<span className={`inline-block w-6 h-6 text-center rounded-full text-white text-xs leading-6 ${
|
|
port.rank <= 3 ? 'bg-yellow-500' : 'bg-gray-400'
|
|
}`}>
|
|
{port.rank}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 font-medium text-gray-900">{port.name}</td>
|
|
<td className="py-3 text-gray-600">{port.country}</td>
|
|
<td className="py-3 text-right font-mono">{port.volume}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-3">Source: World Shipping Council, données approximatives</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Hub Ports Info */}
|
|
<Card className="mt-8 bg-gray-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><RefreshCw className="w-5 h-5" /> Ports Hub vs Ports Régionaux</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="bg-white p-4 rounded-lg border">
|
|
<h4 className="font-medium text-gray-900">Ports Hub (Transbordement)</h4>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
Grands ports où les conteneurs sont transférés entre navires mères et feeders.
|
|
Ex: Singapour, Tanger Med, Algésiras.
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-2">Avantage: Desserte mondiale, fréquence élevée</p>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg border">
|
|
<h4 className="font-medium text-gray-900">Ports Régionaux (Gateway)</h4>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
Ports desservant directement un hinterland économique.
|
|
Ex: Le Havre, Marseille, Hambourg.
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-2">Avantage: Proximité du marché final, moins de manutention</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Tips */}
|
|
<Card className="mt-8 bg-amber-50 border-amber-200">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-amber-900 mb-3 flex items-center gap-2"><Lightbulb className="w-5 h-5" /> Conseils Pratiques</h3>
|
|
<ul className="list-disc list-inside space-y-2 text-amber-800">
|
|
<li>Privilégiez les routes directes pour réduire les délais et risques</li>
|
|
<li>Anticipez les congestions portuaires (Los Angeles, Rotterdam en haute saison)</li>
|
|
<li>Surveillez les perturbations géopolitiques (Canal de Suez, Détroit d'Ormuz)</li>
|
|
<li>Comparez les transbordements vs les services directs selon vos priorités (coût vs délai)</li>
|
|
<li>Vérifiez les connexions ferroviaires/fluviales depuis les ports</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|