-
-
-
-
-
-
-
-
-
-
- Addis Ababa – Djibouti · 752 km electrified corridor
-
-
-
-
-
-
-
-
-
-
- {/* The two doors — the reason this page exists. */}
- - The Ethio-Djibouti Railway, - online. -
-- Book a seat or ship a container on the same railway. Pick the - service you need. -
-
- {doors.map((door, index) => (
-
-
- ))}
-
-
- - Travelling yourself?{" "} - Passenger.{" "} - Shipping goods?{" "} - Freight. -
-- {name} -
-{lede}
- --
- {points.map((point) => (
-
- - - {point} - - ))} -
-
-
-
-
-
-
-
-
- -
- {stations.map((station, index) => {
- const isFirst = index === 0;
- const isLast = index === stations.length - 1;
-
- return (
-
- - - - {/* Absolute so a long label never widens its column — the - nodes have to stay evenly spaced along the rail. */} - - {station.name} - {station.kind === "border" ? " (border)" : ""} - - - ); - })} -
-
-
-
- -
- {stats.map((stat) => (
-
-
- {"text" in stat ? (
- stat.text
- ) : (
-
- )} -
- - - {stat.label} - -
-
- ))}
-
+
+
+
+
+
+
+ -
+ {stations.map((station, index) => {
+ const isFirst = index === 0;
+ const isLast = index === stations.length - 1;
+
+ return (
+
- + + + {/* Absolute so a long label never widens its column — the + nodes have to stay evenly spaced along the rail. */} + + + {station.name} + + {"note" in station ? ( + + {station.note} + + ) : null} + + + ); + })} +
+
+
+ 
+ ))}
+
+ {/* Backdrop: a heavy ink wash so the message and cards always read. */}
+
+
+
+
+
+ One railway.
+
+
+ + Addis Ababa to Djibouti, by rail +
+
+ One railway.
+
+ Two ways to move.
+
+ + Book a seat or ship a container on the Ethio-Djibouti Railway. Pick + the service you need. +
+ +
+ {doors.map(({ key, icon: Icon, title, body, href, cta }, index) => (
+ setPinned(index)}
+ onMouseLeave={() => setPinned(null)}
+ onFocus={() => setPinned(index)}
+ onBlur={() => setPinned(null)}
+ className={`edr-rise group flex flex-col rounded-2xl border p-5 text-left backdrop-blur-xl transition duration-300 hover:-translate-y-1 focus-visible:-translate-y-1 focus-visible:outline-none ${
+ index === shown
+ ? "border-edr-light/60 bg-white/15 shadow-[0_24px_60px_-20px_rgba(52,211,153,0.35)]"
+ : "border-white/15 bg-white/10 hover:border-edr-light/60 hover:bg-white/15"
+ }`}
+ style={rise(280 + index * 90)}
+ >
+
+
+
+
+ );
+}
+
+function SearchMock() {
+ return (
+
+
+ );
+}
+
+/* ------------------------------------------------------------------ */
+/* Freight — the live tracking card from the freight portal */
+/* ------------------------------------------------------------------ */
+
+const trackingStops = [
+ { name: "Mojo Dry Port", time: "Departed 06:10", state: "done" },
+ { name: "Adama", time: "08:05", state: "done" },
+ { name: "Awash", time: "Now · 64 km/h", state: "current" },
+ { name: "Dire Dawa", time: "ETA 14:30", state: "idle" },
+ { name: "Dewele customs", time: "ETA 17:50", state: "idle" },
+ { name: "Djibouti Port", time: "ETA 22:10", state: "idle" },
+] as const;
+
+function TrackingMock() {
+ return (
+
+
+ One way
+
+ Round trip
+
+
+
+
+
+
+
+
+
+ Search trains
+
+
+
+ );
+}
+
+/* ------------------------------------------------------------------ */
+/* Section */
+/* ------------------------------------------------------------------ */
+
+const portals = [
+ {
+ key: "passenger",
+ title: "Passenger",
+ lede: "Search a train, choose your class and seat, and pay with Telebirr or CBE Birr. Your e-ticket comes to your phone.",
+ points: [
+ { icon: Armchair, text: "Economy, standard and VIP coaches" },
+ { icon: Smartphone, text: "Pay with Telebirr, CBE Birr or card" },
+ { icon: Ticket, text: "QR e-ticket by SMS, shown at the gate" },
+ ],
+ href: PASSENGER_URL,
+ cta: "Open Passenger",
+ Mock: SearchMock,
+ },
+ {
+ key: "freight",
+ title: "Freight",
+ lede: "Book wagons and containers, watch every train move along the line, and keep customs documents and invoices in one place.",
+ points: [
+ { icon: Radar, text: "Live GPS position of every wagon" },
+ { icon: FileCheck, text: "Interchange and customs documents, signed online" },
+ { icon: Receipt, text: "Invoices settled with Telebirr, CBE Birr or eBirr" },
+ ],
+ href: FREIGHT_URL,
+ cta: "Open Freight",
+ Mock: TrackingMock,
+ },
+] as const;
+
+export function Portals() {
+ return (
+
+
+
+
+
+
+
+ In transit
+
+ CN-2026-08417
++ Mojo Dry Port → Djibouti Port · 40ft × 12 +
+-
+ {trackingStops.map((stop, index) => {
+ const isLast = index === trackingStops.length - 1;
+ const done = stop.state === "done";
+ const current = stop.state === "current";
+ const nextDone = !isLast && trackingStops[index + 1].state === "done";
+
+ return (
+
- + + + {!isLast ? ( + + ) : null} + + + + + {stop.name} + + {stop.time} + + + ); + })} +
+ {[
+ ["Train", "TS-14 · 2 locos"],
+ ["Wagons", "12 / 12 loaded"],
+ ["Next gate", "Dewele customs"],
+ ].map(([key, value]) => (
+
+
+
+ ))}
+ {key}
+{value}
+
+ {portals.map(({ key, title, lede, points, href, cta, Mock }, index) => {
+ const flip = index % 2 === 1;
+
+ return (
+ 0 ? "border-t border-edr-border" : ""
+ }`}
+ >
+
+ );
+ })}
+
+
+
+
+ + {title} +
++ {lede} +
+ +-
+ {points.map(({ icon: Icon, text }) => (
+
-
+
+
+ + {text} +
+ ))}
+
+
+
+
+
+
+ -
+ {stats.map((stat) => (
+
-
+ {"text" in stat ? (
+ stat.text
+ ) : (
+
+ )} +
+ - {stat.label} +
+
+ ))}
+