/* global React, ReactDOM */ const { useState, useEffect, useRef } = React; const DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "blue", "dark": false }/*EDITMODE-END*/; const asset = (path) => { if (!path || /^([a-z]+:)?\/\//i.test(path) || path.startsWith("data:") || path.startsWith("#")) return path; const base = window.OCEANIS_THEME_URI || ""; return base ? `${base.replace(/\/$/, "")}/${path.replace(/^\/+/, "")}` : path; }; const homeUrl = (hash = "") => { const base = window.OCEANIS_HOME_URL || "/"; return `${base.replace(/\/?$/, "/")}${hash}`; }; const privacyUrl = () => window.OCEANIS_PRIVACY_URL || "privacy.html"; /* ---------- Reveal hook (IntersectionObserver) ---------- */ const useReveal = (opts = {}) => { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { if (!ref.current) return; const el = ref.current; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.unobserve(el); } }); }, { threshold: opts.threshold ?? 0.15, rootMargin: opts.rootMargin ?? "0px 0px -8% 0px" } ); io.observe(el); return () => io.disconnect(); }, []); return [ref, shown]; }; const Reveal = ({ children, delay = 0, y = 24, as: As = "div", className = "", style = {}, ...rest }) => { const [ref, shown] = useReveal(); return ( {children} ); }; const LazyImage = ({ src, alt, className = "", eager = false, ...rest }) => ( {alt} ); const InlineSvg = ({ src, className = "", play = true, label = "" }) => { const [markup, setMarkup] = useState(""); useEffect(() => { let cancelled = false; fetch(asset(src)) .then((res) => res.text()) .then((text) => { if (!cancelled) setMarkup(text); }) .catch(() => { if (!cancelled) setMarkup(""); }); return () => { cancelled = true; }; }, [src]); return (
); }; const AutoVideo = ({ className = "", src, type = "video/mp4", preload = "auto", ...rest }) => { const videoRef = useRef(null); useEffect(() => { const video = videoRef.current; if (!video) return; const playPromise = video.play(); if (playPromise && typeof playPromise.catch === "function") { playPromise.catch(() => {}); } }, [src]); return ( ); }; /* ---------- icon helpers ---------- */ const Icon = ({ name, size = 18, stroke = 1.6 }) => { const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "chev": return ; case "arrow": return ; case "arrow-ne": return ; case "tag": return ; case "quote": return ; default: return null; } }; /* ---------- Nav ---------- */ const Nav = () => (
); /* ---------- Hero ---------- */ const Hero = () => (

Trade flows
where Oceanis delivers

Reliable bulk, dry-bulk and container shipping and logistics solutions across Asia, the Middle East, Africa and the Indian Subcontinent.

); /* ---------- Bento charts (animated) ---------- */ const BarsViz = ({ play }) => { // Reliable capacity — wave of bars rising in const N = 32; return ( {Array.from({length: N}).map((_, i) => { const h = 30 + Math.sin(i * 0.7) * 20 + Math.cos(i * 0.3) * 14 + 30; const delay = i * 35; return ( ); })} ); }; const PricingViz = ({ play }) => { const data = [28, 36, 52, 44, 64, 56, 72, 60, 84, 70, 92]; return (
{data.map((h, i) => (
))}
); }; const ServiceOrbitsViz = ({ play }) => ( {[0, 72, 144, 216, 288].map((deg, i) => { const r = i % 2 === 0 ? 36 : 22; const x = 80 + Math.cos((deg - 90) * Math.PI / 180) * r; const y = 55 + Math.sin((deg - 90) * Math.PI / 180) * r; const c = i % 2 === 0 ? "#02ADEE" : "#77C04B"; return ( ); })} ); const WaveViz = ({ play }) => ( ); const CompetitiveBarsViz = ({ play }) => { const bars = [ { x: 8, base: 102, h1: 26, h2: 22 }, { x: 50, base: 102, h1: 38, h2: 28 }, { x: 92, base: 102, h1: 56, h2: 36 }, { x: 134, base: 102, h1: 68, h2: 44 }, { x: 176, base: 102, h1: 84, h2: 52 }, { x: 218, base: 102, h1: 118, h2: 66 }, ]; return ( {bars.map((bar, i) => ( ))} ); }; const ServiceNetworkViz = ({ play }) => { const nodes = [ { x: 130, y: 22, c: "#2ad4a1" }, { x: 58, y: 52, c: "#217aff" }, { x: 202, y: 52, c: "#2ad4a1" }, { x: 88, y: 102, c: "#2ad4a1" }, { x: 172, y: 102, c: "#217aff" }, { x: 130, y: 68, c: "#217aff", r: 10 } ]; const links = [ [0, 5], [1, 5], [2, 5], [3, 5], [4, 5], [1, 3], [2, 4] ]; return ( {links.map(([a, b], i) => ( ))} {nodes.map((node, i) => ( ))} ); }; const Bento = () => { const [ref1, shown1] = useReveal(); const [ref2, shown2] = useReveal(); const [ref3, shown3] = useReveal(); const [ref4, shown4] = useReveal(); return (

Solutions built around the realities of regional trade.

A dedicated liner network across the Indian Ocean, offering reliable schedules, agile service and deep regional market knowledge.

See services
Assured capacity

Capacity you can count on, lane after lane.

Carefully managed vessel deployment, strong partner networks and well-structured service schedules, so your cargo moves on time, every time. Capacity backed by vessels and slot agreements with mainline carriers.

Competitive pricing

Cost-efficient by design.

Operational efficiencies, strategic alliances and flexible commercial structures. Delivering freight competitively without compromising on service quality.

Personalised service

Tailored to your needs

Dedicated support and flexible handling for every shipment, relationship-driven, not transactional.

Trade-lane focus

Depth over breadth.

A select network of high-potential lanes. Deeper market understanding and better schedule integrity.

); }; /* ---------- Service illustrations ---------- */ const SvcContainer = () => ( {/* containers stacked */} {/* container detail lines */} {[30,68,106].map((x,i) => )} {/* ocean waves */} ); const SvcVessel = () => ( {/* radar arcs */} {/* ship */} {/* status dots */} ); const SvcRoute = () => ( {/* dotted grid backdrop */} {Array.from({length:6}).map((_,i) => )} {/* warehouse left */} {/* truck middle */} {/* destination right */} {/* route line */} ); const SvcCharter = () => ( {/* horizon */} {/* document tiles */} {/* clock badge */} ); const SERVICES = [ { title: "Sea Cargo Services", body: "Full Container Load (FCL) and Less than Container Load (LCL) cargo with space secured through our vessels plus slot and space arrangements with mainline carriers via vessel sharing agreements (VSA) and slot sharing agreements (SCA).", tags: ["FCL", "LCL", "VSA", "SCA"], layout: "service-card detail-card", kicker: "Core lane access", video: "assets/media/videos/services/sea-cargo-services-low-20260624.mp4" }, { title: "Logistics & Transportation", body: "Logistics and transportation coordination and multimodal transport delivered through trusted regional partners across our core corridors.", tags: ["Inland haulage", "Multimodal"], layout: "service-card detail-card", kicker: "Connected delivery", video: "assets/media/videos/services/logistics-and-transportation-low-20260624.mp4" }, { title: "Ship Chartering", body: "Short-term and contractual chartering solutions for cargo and seasonal demand, flexible tonnage when and where you need it.", tags: ["Project cargo", "Seasonal", "Spot & contract"], layout: "service-card detail-card", kicker: "Flexible tonnage", video: "assets/media/videos/services/ship-chartering-low-20260624.mp4" }, ]; const Services = () => (

End-to-end freight solutions.

Solutions designed to move cargo across the supply chain.

Get in touch
{SERVICES.map((s, i) => (
{s.kicker}

{s.title}

{s.body}

{s.tags.map((t) => {t})}
))}
); /* ---------- World Map (regional glow) ---------- */ /* Schematic continent paths sized to a 1000x500 viewBox. Regional dots are simplified geo positions. */ const WorldMap = () => (
Southeast Asia
South Asia
China
Middle East
East Africa
); const Coverage = () => (

One ocean. Five regions.
Every link in the chain.

Operating across Africa, China, Southeast Asia, South Asia and the Middle East — the high-potential corridors at the heart of Indian Ocean trade.

); /* ---------- Vision & Mission — editorial split ---------- */ const CompassViz = () => ( ); const FlowViz = () => ( ); const Approach = () => (

What guides every mile.

Vision

To be a regional Indian Ocean
trade facilitator
connecting fast-growing trade corridors of Asia and Africa.

Mission

To provide reliable and streamlined maritime transport solutions across major trade corridors linking China, Southeast Asia, South Asia, the Middle East and Africa. With a strong customer-first approach, the company focuses on enabling smooth cargo flow throughout the supply chain.

); /* ---------- CTA band ---------- */ const CTA = () => (

End-to-end shipping.
One conversation away.

Tell us where your cargo needs to go and our team will come back with routing options, capacity and a tailored quote.

); /* ---------- Footer ---------- */ const Footer = () => ( ); /* ---------- Tweaks Panel ---------- */ const TweaksUI = () => { const [t, setT] = useTweaks(DEFAULTS); useEffect(() => { document.body.classList.toggle("theme-green", t.theme === "green"); document.body.classList.toggle("theme-navy", t.theme === "navy"); document.body.classList.toggle("dark", !!t.dark); }, [t.theme, t.dark]); return ( setT("theme", v)} options={[ { value: "blue", label: "Blue" }, { value: "green", label: "Green" }, { value: "navy", label: "Navy" }, ]}/> setT("dark", v)}/> ); }; /* ---------- App ---------- */ const App = () => { const [t] = useTweaks(DEFAULTS); return ( <>