302 lines
13 KiB
TypeScript
302 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';
|
||
|
||
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">
|
||
<span className="text-4xl">🌍</span>
|
||
<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">📊 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">🛳️ 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">⚓ 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">🏆 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">🔄 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">💡 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>
|
||
);
|
||
}
|