/* global React */ // YachtingStack — For Yachts page. Agents-first; cloud/local de-emphasized. // Full-height snap sections (like home), each anchored for the For Yachts mega-menu. const { Icon, Eyebrow, Btn, Reveal } = window; // full-screen snap section const Snap = ({ children, id, style = {} }) => (
{children}
); const Head = ({ children, style = {} }) => (

{children}

); // compact cloud / local card function ModeCard({ m }) { const tone = m.tone === "violet" ? "var(--violet)" : "var(--cyan-2)"; const toneBg = m.tone === "violet" ? "rgba(167,139,250,.08)" : "rgba(250,204,21,.07)"; const toneBd = m.tone === "violet" ? "rgba(167,139,250,.22)" : "rgba(250,204,21,.22)"; return (
{m.name}
{m.tagline}

{m.desc}

{m.points.map(([ic, t]) => (
{t}
))}
{m.note}
); } // yacht-centric network — yacht ⇄ management (cloud), private connection, // onboard departments/dashboards/devices/crew, powered by the platform. function OnboardMap() { const [hov, setHov] = React.useState(null); const W = 860, Ht = 560, HUB = [430, 286]; const px = (v, m) => (v / m * 100) + "%"; const SPEED = 54; const segDur = (a, b) => Math.max(1.6, Math.hypot(b[0] - a[0], b[1] - a[1]) / SPEED); const primary = [ { id: "yacht", t: "Yacht", badge: "On board", x: 232, y: 168, tip: "Your vessel — agents, modules and crew working on board, online or off." }, { id: "mgmt", ic: "Building2", t: "Management", badge: "In the cloud", x: 628, y: 168, tip: "Your management office in the cloud — privately connected to the vessel." }]; const onboard = [ { id: "depts", ic: "Boxes", t: "Departments", x: 140, y: 248, tip: "Every onboard department — bridge, engineering, interior, deck — on the platform." }, { id: "dash", ic: "LayoutDashboard", t: "Custom Dashboards", x: 64, y: 330, tip: "Purpose-built dashboards, fed by the departments." }, { id: "devices", ic: "Smartphone", t: "Agents on devices", x: 216, y: 342, tip: "Department agents in the crew's hands — on phones and tablets." }, { id: "crew", ic: "Users", t: "Crew", x: 138, y: 420, tip: "The crew — working through the dashboards and the agents on their devices." }]; const supports = [ { id: "interfaces", ic: "AppWindow", t: "Interfaces", x: 318, y: 472, tip: "The apps and surfaces your team works in — web, mobile and extensions." }, { id: "intel", ic: "BrainCircuit", t: "Intelligence", x: 396, y: 498, tip: "Yachting market intelligence, fed to your agents." }, { id: "sec", ic: "ShieldCheck", t: "Security", x: 474, y: 512, tip: "One verified identity, least-privilege access and enforced MFA." }, { id: "models", ic: "Cpu", t: "AI Models", x: 552, y: 514, tip: "Private, yachting-tuned models — never pooled." }, { id: "sim", ic: "Workflow", t: "Simulation", x: 630, y: 506, tip: "Test scenarios, generate SOPs and benchmark before anything goes live." }, { id: "data", ic: "Database", t: "Data", x: 706, y: 488, tip: "A shared data ontology — one source of truth." }, { id: "identity", ic: "Fingerprint", t: "Identity", x: 776, y: 458, tip: "One YachtingStack ID governing who and what can act, everywhere." }, { id: "priv", ic: "ShieldAlert", t: "Privacy", x: 822, y: 414, tip: "Private by design — your data never leaves for external models." }]; const nById = {}; [...primary, ...onboard].forEach((n) => { nById[n.id] = n; }); const obLinks = [["yacht", "depts"], ["depts", "dash"], ["depts", "devices"], ["devices", "crew"], ["dash", "crew"]].map(([a, b]) => [nById[a], nById[b]]); const tips = {}; [...primary, ...onboard, ...supports].forEach((n) => { tips[n.id] = n; }); tips.hub = { t: "YachtingStack", x: HUB[0], y: HUB[1], tip: "The platform connecting vessel and management and running your agents — powered by shared capabilities." }; const beam = (k, a, b) => { const d = segDur(a, b); return ( ); }; const arc = `M ${primary[0].x},${primary[0].y} Q ${HUB[0]},86 ${primary[1].x},${primary[1].y}`; return ( Vessel to management Your yacht and your office, privately connected.

On board, every department, dashboard, device and crew member works through your agents. A single private connection links the vessel to management in the cloud — powered by the same platform of identity, models, simulation and data. Hover any node to see what it does.

{primary.map((a, i) => beam("p" + i, [a.x, a.y], HUB))} {obLinks.map((l, i) => beam("o" + i, [l[0].x, l[0].y], [l[1].x, l[1].y]))} {supports.map((u, i) => beam("u" + i, [u.x, u.y], HUB))} {/* private-connection label on the arc */}
Private connection
{/* hub */}
setHov("hub")} onMouseLeave={() => setHov(null)} style={{ position: "absolute", left: px(HUB[0], W), top: px(HUB[1], Ht), transform: "translate(-50%,-50%)", zIndex: 4, textAlign: "center", cursor: "default" }}>
YachtingStack
{/* primary nodes: yacht + management */} {primary.map((a) => (
setHov(a.id)} onMouseLeave={() => setHov(null)} style={{ position: "absolute", left: px(a.x, W), top: px(a.y, Ht), transform: "translate(-50%,-50%)", zIndex: 4, width: 96, cursor: "default" }}>
{a.id === "yacht" ? Yacht : }
{a.t}
{a.badge}
))} {/* onboard cluster */} {onboard.map((o) => (
setHov(o.id)} onMouseLeave={() => setHov(null)} style={{ position: "absolute", left: px(o.x, W), top: px(o.y, Ht), transform: "translate(-50%,-50%)", zIndex: 4, textAlign: "center", width: 104, cursor: "default" }}>
{o.t}
))} {/* powering capabilities */} {supports.map((u) => (
setHov(u.id)} onMouseLeave={() => setHov(null)} style={{ position: "absolute", left: px(u.x, W), top: px(u.y, Ht), transform: "translate(-50%,-50%)", zIndex: 4, textAlign: "center", width: 90, cursor: "default" }}>
{u.t}
))} {hov && tips[hov] && (
{tips[hov].t}
{tips[hov].tip}
)}
); } function OnBoard({ go }) { const d = window.ONBOARD; const feeds = [ ["Compass", "Navigation & AIS"], ["Gauge", "Engines & propulsion"], ["Droplet", "Tanks & bilge"], ["BellRing", "Alarms & safety"], ["Zap", "Power & electrical"], ["Thermometer", "HVAC & climate"]]; return (
{/* hero — yacht line-art background */}
{/* yacht ⇄ management network */} {/* agents + pillars */} Yachting Agents One crew of agents, one structured-data backbone.

{d.agentsBody}
{d.pillars.map(([ic, t, s], i) => (
{t}

{s}

 ))}
{/* IoT */} IoT Connect to your vessel's data.

Onboard sensors and systems stream straight to your agents — navigation, engines, tanks, power and alarms — so the AI works from live vessel data, not guesswork.

{feeds.map(([ic, t], i) => (
{t}
))}
{/* modules */} Onboard modules A module for every department.

Each department runs on a dedicated module, wired to its specialist agent. Custom modules are built whenever your operation needs one.

{d.modules.map(([ic, t], i) => (
{t}
))}
Custom module
{/* every deployment is custom — the spectrum */} Every deployment is a custom project Scaled to your vessel — new build or refit.

From the lightest cloud setup to a full local installation, we scope and install around your vessel — whether it's a new build or a refit.

{d.tiers.map((t, i) => (
{t.tag}
{t.vessel} {t.crew}

{t.body}

 ))}
{/* how it runs — cloud / local, de-emphasized */} How it runs Cloud, local, or both.

The same agents run either way. Most fleets mix both — cloud where there's connectivity, local for sensitive or offshore work.

{d.modes.map((m) => )}
{/* CTA */}

Put a crew of agents aboard.

Tell us about your vessel and we'll scope the deployment — agents, modules and the right mix of cloud and local.

go("onboarding")} iconRight="ArrowRight">Begin Onboarding
); } Object.assign(window, { OnBoard });