// Direction 3 — Cinematic Operator // Near-black product-led, sparse technical, terminal/mono accents, vibrant teal. // Supports a light "day" mode that mutates `cinematicTheme` in place before each render // so existing `const c = cinematicTheme` references still work. const cinematicDark = { bg: '#06090F', panel: '#0B111A', panelAlt: '#0F1623', line: '#1B2535', lineSoft: 'rgba(255,255,255,0.08)', text: '#E2E8F0', textDim: '#94A3B8', muted: '#64748B', gold: '#D4B36A', teal: '#2DD4BF', tealDim: '#0F766E', signal: '#84CC16', navBg: 'rgba(6,9,15,0.82)', ctaText: '#04201E', shadow: '0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(45,212,191,0.05)', gridLine: '#1B2535', warn: '#F87171' }; const cinematicLight = { bg: '#F7F8FB', panel: '#FFFFFF', panelAlt: '#F1F4F8', line: '#DCE2EA', lineSoft: 'rgba(11,17,26,0.08)', text: '#0B111A', textDim: '#475569', muted: '#94A3B8', gold: '#A87E1B', teal: '#0D9488', tealDim: '#CCFBF1', signal: '#65A30D', navBg: 'rgba(255,255,255,0.82)', ctaText: '#FFFFFF', shadow: '0 24px 60px rgba(15,23,42,0.12), 0 0 0 1px rgba(13,148,136,0.08)', gridLine: '#E6EAF0', warn: '#DC2626' }; const cinematicTheme = { ...cinematicDark }; function setCinematicMode(mode) { Object.assign(cinematicTheme, mode === 'light' ? cinematicLight : cinematicDark); } function CinematicShell({ children, page, setPage, tagline, mode, setMode }) { setCinematicMode(mode); return (
{children}
); } function NavikaWordmark() { return ( Nāvika a PortCall.ai company ); } function CinematicThemeToggle({ mode, setMode }) { const next = mode === 'light' ? 'dark' : 'light'; return ( ); } function CinematicNav({ page, setPage, mode, setMode }) { const marketing = [ { id: 'home', label: 'Product' }, { id: 'contact', label: 'Contact' }]; const items = marketing; return (
); } function CinematicFooter({ tagline }) { return ( ); } function CinematicNavika({ setPage }) { const c = cinematicTheme; return (
{/* HERO */}
PRODUCT / NĀVIKA / PILOTAGE PLATFORM ● LIVE BETA · PORTS OF MELBOURNE & GEELONG

The complete platform for{' '} modern pilotage.

Nāvika brings every part of a pilotage operation into one connected platform — passage planning, vessel movements, and crew competency. Built by pilots, for pilots, it replaces paper plans, spreadsheets and disconnected tools with a single, fast, browser-based system that works at the berth, on the bridge, and everywhere in between — online or off.

{[ ['Works offline', 'on the bridge, even when the signal drops'], ['Browser-based', 'no apps, no installs, no rollout'], ['Built by pilots', 'for the realities of pilotage'], ['1,000+ vessels', 'on tap, growing with every job']]. map(([n, l]) =>
{n}
{l}
)}
{/* PROBLEM */}

Critical information,
Consolidated.

Pilotage runs on critical information that's scattered across paper charts or ECDIS, vessel files, tide tables, spreadsheets and email. Every passage means reassembling it by hand — and every gap is a risk.

Nāvika consolidates it: the vessel's particulars, the tides, the under-keel clearance, the chart, the checklist and the sign-off — all in one place, all current, all to hand when the pilot needs them.

{[ ['Paper', 'charts & plans'], ['Files', 'vessel particulars'], ['Tables', 'tide predictions'], ['Sheets', 'UKC, tugs, billing'], ['Email', 'master-pilot exchange']]. map(([h, d], i) =>
{h.toUpperCase()}
{d}
)}
→ ONE CONNECTED PLATFORM
{/* DATA-ASSEMBLED · OCEANS-X */}

The plan assembles itself{' '} from the feeds a port already publishes.

Increasingly the data a pilot needs is already digital. Nāvika is a native consumer of Singapore's MPA OCEANS-X data platform — vessel particulars, arrival and departure declarations, port-clearance certificates, live weather and AIS position flow straight into the plan, with no re-keying of data the port already holds.

From those declarations Nāvika assembles a pre-boarding brief — the vessel, the movement and the clearances, ready before the pilot steps aboard. It complements the agent-and-master ordering workflow rather than replacing it.

→ ONE INTEGRATION · THE WHOLE SUITE LIGHTS UP
OCEANS-X · LIVE SURFACES ● 12 ACROSS 4 APPS
{[ ['MPX', 'Particulars · weather · pre-boarding brief · AIS position'], ['OPS', 'Due to arrive · due to depart · clearance light · traffic'], ['e-CHIT', 'Particulars enrichment · clearance line'], ['Portal', 'Live port-traffic tile']]. map(([app, desc], i) =>
{app}
{desc}
)}
{/* MODULES OVERVIEW */} {/* MODULE 01 — PILOTAGE PLANNING */}
MODULE 01 · CURRENTLY MPX

Every passage, fully planned —{' '} in minutes, not hours.

The heart of the platform. A complete digital pilotage planning tool that takes a movement from first details to a signed, exportable passage plan.

{[ { n: '01', title: 'Vessel intelligence on tap', body: 'A database of 1,000+ vessels with full particulars: dimensions, drafts, tonnage, propulsion, thrusters, engine data and master details. Enter an IMO or vessel name and the entire plan pre-populates. New vessels are captured automatically and grow the database with every job.', tag: '1,000+ VESSELS' }, { n: '02', title: 'Interactive chart annotation', body: 'Mark up harbour charts directly: freehand, lines, shapes, text and nautical symbols, plus to-scale, fully rotatable ship and tug stamps. Calibrate any chart to real-world scale so every vessel is drawn in correct proportion.', tag: 'TO-SCALE STAMPS' }, { n: '03', title: 'Tide-aware UKC risk assessment', body: 'Live tide predictions from configurable tide stations, with under-keel-clearance calculated against each channel\u2019s charted depth. Transit timing adjusts automatically by route and vessel type, and pilots can fine-tune for delays.', tag: 'LIVE TIDE · UKC' }, { n: '04', title: 'Structured passage stages', body: 'Break the voyage into stages, each with its own annotated chart and notes, kept independently for every pilotage.', tag: 'STAGE-BY-STAGE' }, { n: '05', title: 'Master–Pilot Exchange checklists', body: 'Standardised pre-departure and pass/caution checklists ensure nothing is missed.', tag: 'MPX · STANDARDISED' }, { n: '06', title: 'Tug planning', body: 'Assign tugs, roles and bollard pull to match the job.', tag: 'TUGS · ROLES · BP' }, { n: '07', title: 'Professional PDF output', body: 'Generate a complete, branded passage plan document with charts, risk assessment and digital pilot & master sign-off.', tag: 'SIGNED PDF · BRANDED' }]. map((f) =>
{f.n} {f.tag}
{f.title}
{f.body}
)}
{/* MODULE 02 — MOVEMENTS SCHEDULING */}
MODULE 02 · CURRENT Allocations

See every movement,{' '} allocate with clarity.

Schedule and coordinate shipping movements across the port. Arrivals, departures and shifts are managed in one view and flow directly into the planning module — so the pilot opens a job that's already half-built.

NO RE-KEYING· NO VERSION CONFUSION
MOVEMENTS · TODAY ● 6 SCHEDULED
{[ ['06:40', 'M/V Stellaris', 'Arrival', 'OP-3', c.teal], ['09:15', 'M/V Orion Star', 'Arrival', 'OP-1', c.teal], ['11:30', 'M/V Talisman', 'Shift', 'OP-2 → OP-4', c.gold], ['14:20', 'M/V Atlantic Drift', 'Arrival', 'BLK-7', c.teal], ['17:50', 'M/V Helios', 'Departure', 'OP-4', c.textDim], ['21:15', 'M/V Northwind', 'Arrival', 'BLK-3', c.teal]]. map(([t, v, k, b, col], i) =>
{t} {v} {k.toUpperCase()} {b}
)}
{/* MODULE 03 — CREW & COMPETENCY */}
PILOTS · COMPETENCY ● ALL CURRENT
{[ ['Capt. Kavanagh', 'Class 1 · unrestricted', 'Valid · 18mo', c.teal], ['Capt. O\u2019Brien', 'Class 2 · ≤ 270m', 'Valid · 22mo', c.teal], ['Capt. Walsh', 'Class 4 · ≤ 220m', 'Valid · 6mo', c.gold], ['Capt. Murphy', 'Class 1 · unrestricted', 'Valid · 14mo', c.teal], ['Capt. Lynch', 'Class 4 · ≤ 220m', 'Expires · 28d', c.warn]]. map(([n, q, v, col], i) =>
{n} {q} {v.toUpperCase()}
)}
MODULE 03 · CURRENTLY Crew

The right pilot,{' '} qualified and available.

Manage pilots and crew alongside their competencies and authorisations. Keep qualifications current and visible, so allocation decisions are always backed by who is licensed and ready for the movement.

{/* MODULE 04 — UNIFIED PORTAL */}
MODULE 04 · THE UNIFIED PORTAL

One sign-in.{' '} The whole operation.

A single secure gateway into the Nāvika platform. Every module, every user — one consistent place to start the day.

{['Pilotage', 'Movements', 'Crew', 'Reports'].map((m, i) =>
{m}
● READY
)}
{/* WHY NĀVIKA */}

Built for the realities of pilotage.

{[ { tag: 'OFFLINE', h: 'Works offline', d: 'Charts, plans and vessel data are stored on the device. When the connection drops underway, Nāvika doesn\u2019t.' }, { tag: 'NO INSTALL', h: 'Nothing to install', d: 'Runs in any modern browser, on the bridge laptop or the office desktop. No app stores, no IT rollout.' }, { tag: 'CONNECTED', h: 'Connected by design', d: 'Movements, vessels, precincts and crew flow between modules automatically — enter information once.' }, { tag: 'CONFIGURABLE', h: 'Fully configurable', d: 'Ports, berths, channels, passage stages, tide stations and tug fleets are all set up to match your operation, by you.' }, { tag: 'FAST', h: 'Fast', d: 'Built for speed — a plan that took an afternoon now takes minutes.' }]. map((p, i) =>
● {p.tag}
{p.h}
{p.d}
)}
{/* TWO AUDIENCES */}
{[ { tag: 'FOR PORT AUTHORITIES & PILOTAGE PROVIDERS', h: 'Standardise every pilotage across your service.', d: 'Nāvika standardises how every pilotage is planned and recorded across your service. Consistent checklists, auditable risk assessments and signed passage plans — with the configurability to reflect your port\u2019s precincts, channels and procedures exactly. Reduce risk, demonstrate compliance, and give every pilot the same high-quality toolset.', bullets: ['Consistent checklists', 'Auditable risk assessments', 'Signed passage plans', 'Configurable to your port'] }, { tag: 'FOR HARBOUR PILOTS', h: 'Ready before you board. Working when the signal isn\u2019t.', d: 'Everything you need for the next job, ready before you board: the vessel\u2019s particulars, the chart, the tides, the clearances. Annotate, plan and sign off in one tool that\u2019s as quick as it is thorough — and that keeps working when the signal doesn\u2019t.', bullets: ['Vessel particulars on tap', 'Chart, tides & clearances', 'Annotate & sign off', 'Offline on the bridge'] }]. map((a) =>
{a.tag}

{a.h}

{a.d}

{a.bullets.map((b) =>
{b}
)}
)}
{/* TESTIMONIAL — founder & working pilot */}
FROM THE BRIDGE

"Planning that used to take hours is done in minutes."

— Capt Aaron Kavanagh · Founder & marine pilot, Ports of Melbourne & Geelong
{/* SCALES TO ANY PORT */}

A port is a{' '} portable profile.

Everything port-specific — berths, channels, tides, tugs, routes and under-keel rules — lives in a versioned Port Profile the whole suite consumes. An onboarding wizard authors it; the apps reskin to whatever port is active.

We modelled the full Port of Singapore profile in days, from MPA's own published sources — 246 berths, 124 tugs, 315 recommended routes and the Straits/port under-keel regimes — and authored the Port of Brisbane end-to-end as proof.

{[['246', 'SG berths modelled'], ['124', 'named tugs'], ['315', 'PSA routes']]. map(([n, l]) =>
{n}
{l}
)}
IN DEVELOPMENT An AI onboarding agent that assembles a new port's profile straight from its published sources — turning a multi-week setup into a guided conversation.
{/* CLOSING CTA */}

Bring your pilotage operation onto{' '} one platform.

See how Nāvika fits your port.

SOLD AS Per-port licence + per-seat. We'll scope it to your operation.
YOUR DATA Offline-first, held on the device; AU ⇄ SG data sovereignty by design.
); } function CinematicContact({ formState, setFormState, submitted, onSubmit, submitting, submitError }) { return (

See Nāvika in your port.

Tell us about your operation and we'll be in touch to walk you through Nāvika and explore how it could fit your port.

{[ ['Email', 'info@portcall.ai'], ['Phone', '+61 427 824 875'], ['Based', 'Melbourne · Singapore']]. map((r) =>
{r[0]}
{r[1]}
)}
{submitted ?
✓ MESSAGE RECEIVED
Thanks — we'll be in touch.
We typically reply within one business day.
: <>
$ contact.send --new
{[ { k: 'name', l: 'Your name' }, { k: 'organisation', l: 'Pilot station / port / organisation' }, { k: 'role', l: 'Your role' }, { k: 'email', l: 'Email', type: 'email' }]. map((f) => setFormState({ ...formState, [f.k]: e.target.value })} style={cinInput()} /> )}