Line item	Amount
Monthly total	${fmt(ywMonthly)}

Horizon	YachtWay total	${priced.length === 1 ? priced[0].name + " total" : "Current platforms total"}	You save
Year 1	${fmt(annualYW)}	${fmt(annualComp)}	${fmt(annualSavings)}
Year 2	${fmt(annualYW * 2)}	${fmt(annualComp * 2)}	${fmt(annualSavings * 2)}
Year 3	${fmt(annualYW * 3)}	${fmt(annualComp * 3)}	${fmt(annualSavings * 3)}
3-year total savings	${fmt(annualYW * 3)}	${fmt(annualComp * 3)}	${fmt(annualSavings * 3)}

Phase	Timing	What happens
Day 0 to 3	Kickoff	Your account is live, your brand is configured, and your team has their seats.
Week 1	Catalog import	Your inventory comes in via API feed. Talk to your YachtWay representative today to confirm your feed is supported. Live within 5 business days.
Week 2	Team training	Your brokers get hands-on time with the full toolset. Workflows, LIVE, EasyFund, MasterCover. Everything configured to how your team works.

{/* FRONT — entire card is clickable when details exist */}

setFlipped(true) : undefined} onKeyDown={hasDetails ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setFlipped(true); } } : undefined} onMouseEnter={hasDetails ? () => setHover(true) : undefined} onMouseLeave={hasDetails ? () => setHover(false) : undefined} style={{ position: flipped ? "absolute" : "relative", inset: flipped ? 0 : "auto", background: T.bg, border: `1px solid ${hasDetails && hover ? T.accent : T.border}`, borderRadius: 14, padding: 22, display: "flex", flexDirection: "column", gap: 10, backfaceVisibility: "hidden", WebkitBackfaceVisibility: "hidden", height: "100%", minHeight: 168, boxSizing: "border-box", cursor: hasDetails ? "pointer" : "default", transform: hasDetails && hover ? "translateY(-2px)" : "translateY(0)", boxShadow: hasDetails && hover ? `0 12px 28px -12px ${rgba(T.accent, .35)}, 0 0 0 1px ${rgba(T.accent, .1)}` : "0 1px 0 rgba(0,0,0,0)", transition: "transform .18s ease, box-shadow .18s ease, border-color .18s ease", outline: "none" }}>

{p.name}

{p.unit}

{p.price} {p.priceSuffix && {p.priceSuffix} }

{p.desc}

{hasDetails &&

View details

}

{/* BACK */} {hasDetails &&

{p.name} · {p.details.label || "How it pays back"}

{p.details.headline}

{p.details.intro}

{/* Bullet/point list - used for explanation-style detail cards (EasyFund, MasterCover) where there is no savings table. Each bullet has a label and short body. */} {p.details.bullets ?

{p.details.bullets.map((b, i) =>

{b.k && {b.k}{b.v ? ". " : ""} } {b.v || b}

)}

: null} {/* Perks table */} {p.details.perks ?

{p.details.col1 || "Service"}

{p.details.col2 || "Standard"}

{p.details.col3 || p.name}

{p.details.perks.map((row, i) =>

{row.k}

{row.nonMember}

{row.member} {row.save}

)}

: null} {/* Sample math block: shows real ROI per shoot for plans that define a `roi` object (Studio Pass). Brokers see exactly what one boat saves them and how the membership pays back. */} {p.details.roi ?

Sample math · {p.details.roi.boat || "One 50ft vessel"}

Without Pass

{p.details.roi.non}

With Pass

{p.details.roi.member}

Saved per shoot

{p.details.roi.save}

: null} {p.details.bottom ?

{p.details.bottom}

: null}

}

); }; // ── Live broadcast frame: blinking REC + corner brackets, activates on scroll-in ── const LiveBroadcastFrame = ({ T, A, AL }) => { const ref = useRefD(null); const [active, setActive] = useStateD(false); const [viewers, setViewers] = useStateD(20); // Stream of fake live-chat comments. We keep up to 4; oldest fades out. const [comments, setComments] = useStateD([]); React.useEffect(() => { const el = ref.current; if (!el) return; const target = el.parentElement; if (!target) return; let timer = 0; let done = false; const check = () => { if (done) return; const r = target.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (r.top < vh * 0.85 && r.bottom > 0) { done = true; setActive(true); return; } timer = window.setTimeout(check, 250); }; check(); return () => {done = true;window.clearTimeout(timer);}; }, []); // Viewer counter: gently climbs from 90 to 100 once the section is active, // with small jitter so it reads as a live broadcast rather than a fixed // figure. Stops at 100 and idles with ±1 fluctuations. React.useEffect(() => { if (!active) return; // Start at 20 viewers; each second roughly 1.5 join, and every 2nd // second one leaves, so the count climbs naturally toward ~50, with // small ebb-and-flow that looks like a real stream. let cur = 20; let joinAcc = 0; // fractional accumulator for the 1.5/sec join rate let leaveTick = 0; // alternates each second to drop one viewer every 2s setViewers(cur); let stopped = false; const TARGET = 50; const tick = () => { if (stopped) return; // Joins: +1.5 per second on average. We jitter the increment a bit // so it does not tick like a metronome (1, 2, 1, 2…). joinAcc += 1.2 + Math.random() * 0.6; // 1.2 - 1.8 let joined = 0; while (joinAcc >= 1) {joined += 1;joinAcc -= 1;} // Leaves: one viewer every ~2 seconds. let left = 0; leaveTick += 1; if (leaveTick >= 2) {left = 1;leaveTick = 0;} // Once we are around the target, ease off so we hover instead of // shooting past, joins slow, leaves keep going. Yields a soft // plateau around 48 - 52. if (cur >= TARGET) { joined = Math.random() < 0.55 ? 1 : 0; } cur = Math.max(20, cur + joined - left); setViewers(cur); window.setTimeout(tick, 1000); }; const t = window.setTimeout(tick, 600); return () => {stopped = true;window.clearTimeout(t);}; }, [active]); // Live-chat comment stream. Spawns a new comment every 2.2 - 3.5s once the // section is in view; keeps the most recent 4. Each entry has a unique id // (so React can key them) and the text + username are randomized per spawn. React.useEffect(() => { if (!active) return; const POOL = [ "Range on the 105 footer?", "Beautiful lines", "Twin MAN V12s?", "Can the buyer do a survey via livestream?", "📍 Monaco - when is it next here?", "Stunning! What is the asking?", "Carbon mast option available?", "Crew quarters?", "How is she handle a head sea?", "Watching from Auckland 🇳🇿", "What is the fuel burn at cruise?", "Beam?", "Already messaged the broker", "When are sea trials in Palma?", "Joystick docking?", "Hybrid drive?", "Sweet teak deck", "Bar setup on the flybridge?", "Tender garage hold a 4.5m?", "Watching from Fort Lauderdale 👋", "Rolls-Royce stabilizers?", "Refit history?", "Charter income?", "EU VAT paid?", "Stunning interior", "Master cabin on the main deck?"]; let stopped = false; let nextId = 0; let pending = new Set(); const spawn = () => { if (stopped) return; const text = POOL[Math.floor(Math.random() * POOL.length)]; const userNum = 100 + Math.floor(Math.random() * 9900); const name = `User${userNum}`; const id = nextId++; setComments((prev) => { // Keep last 4, prepending new at the bottom. const next = [...prev, { id, name, text }]; return next.slice(-4); }); // Auto-prune this comment after ~7s so older ones fade out even // if the spawn rate slows. const pruneT = window.setTimeout(() => { setComments((prev) => prev.filter((c) => c.id !== id)); pending.delete(pruneT); }, 7500); pending.add(pruneT); // Cadence: 1.0 - 2.2s so the chat feels constantly alive, like a // real popular livestream where messages stream in non-stop. const next = 1000 + Math.random() * 1200; const spawnT = window.setTimeout(spawn, next); pending.add(spawnT); }; const t = window.setTimeout(spawn, 900); pending.add(t); return () => { stopped = true; pending.forEach((id) => window.clearTimeout(id)); pending.clear(); }; }, [active]); const cornerBase = { position: "absolute", width: 38, height: 38, borderColor: "rgba(255,255,255,.6)", borderStyle: "solid", transition: "transform .9s cubic-bezier(.5,.05,.2,1)", opacity: active ? 1 : 0 }; return (

{/* Sticky viewport-tracking frame, fits within the section bounds */}

{/* TL */}

{/* TR */}

{/* BL */}

{/* BR */}

{/* Top-right LIVE indicator */}

LIVE

REC · CH 01

{/* Top-left viewer count (eye + count climbing 90 → 100) */}

{/* Eye icon */} {viewers} WATCHING

{/* Bottom-left live comments stream */}

{comments.map((c) =>

{c.name} {c.text}

)}

); }; // ── Engagement toast: live activity counter, appears after a long scroll-in delay, // then auto-collapses to a small pill so it stops grabbing attention. Hover the // pill to re-expand. Bottom-right placement so it stays out of reading flow. ── const EngagementToast = ({ T, A }) => { const [show, setShow] = useStateD(false); const [collapsed, setCollapsed] = useStateD(false); const [hover, setHover] = useStateD(false); const [dismissed, setDismissed] = useStateD(false); const [count, setCount] = useStateD(840); const [inLive, setInLive] = useStateD(false); // Hide toast while the LIVE section OR the footer is on screen, LIVE has // its own broadcast UI, and the footer is the bottom of the page where the // toast would block the dark CTA panel. We watch BOTH live (#live) and // mobile-live (#live-mobile) variants, only one is ever visible at a // given viewport, but we observe both so the toast is suppressed in either // layout. React.useEffect(() => { if (typeof IntersectionObserver === "undefined") return; const ids = ["live", "live-mobile", "site-footer"]; const els = ids.map((id) => document.getElementById(id)).filter(Boolean); if (!els.length) return; const visible = new Map(); const io = new IntersectionObserver((entries) => { for (const e of entries) visible.set(e.target, e.isIntersecting); setInLive([...visible.values()].some(Boolean)); }, { threshold: 0.15 }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); // Mount: appear after 8s so it does not crowd the hero or first scroll. React.useEffect(() => { const t = window.setTimeout(() => setShow(true), 8000); return () => window.clearTimeout(t); }, []); // After first appearance, auto-collapse to a pill after 7s so it is not constantly looming. React.useEffect(() => { if (!show || collapsed) return; const t = window.setTimeout(() => setCollapsed(true), 7000); return () => window.clearTimeout(t); }, [show, collapsed]); // The headline stat is "840 people engage per minute, globally" - it is // a fixed figure, not a live ticker, so the counter stays at 840. React.useEffect(() => { setCount(840); }, []); if (dismissed) return null; if (inLive) return null; return ( <>

setHover(true)} onMouseLeave={() => setHover(false)}>

Live · Right now

{count.toLocaleString()}+ People live now

engaging with YachtWay every minute, globally.

); }; // ── Shared deal store ────────────────────────────────────────────── // Lightweight pub/sub on window so the §2 cost calculator can hand // its values (dealership name, broker seats, current monthly spend) // forward to the §6 configurator and the proposal PDF without // threading props through twenty components. (() => { if (typeof window === "undefined") return; if (window.__YW_DEAL) return; const state = { dealership: "", brokers: 3, currentMonthly: 0 }; const subs = new Set(); window.__YW_DEAL = { get: () => ({ ...state }), set: (patch) => { Object.assign(state, patch); subs.forEach((cb) => { try { cb({ ...state }); } catch (_) {} }); }, on: (cb) => { subs.add(cb); return () => subs.delete(cb); }, }; })(); // ── Cost Calculator (§2) ─────────────────────────────────────────── // "What you are paying right now." Three inputs (dealership name, // broker seats, monthly cost). One big output: annualized spend // rendered as a typographic counter, plus a CTA that scrolls to // the configurator and seeds it with the entered values. const CostCalculator = ({ T, A, AOnDark, glow, tint, rgba }) => { const [dealership, setDealership] = useState(""); const [brokers, setBrokers] = useState(3); const [monthly, setMonthly] = useState(2500); // Region detection mirrors the configurator below, used only to pick // the currency + per-seat price so the savings line stays honest. const isEU = (typeof navigator !== "undefined" && /^(de|fr|es|it|nl|pt|pl|sv|fi|da|no|cs|hu|ro|bg|hr|sk|sl|et|lv|lt|el|ga|mt)/i.test( navigator.language || "" )); const seatPrice = isEU ? 12 : 19; const currency = isEU ? "€" : "$"; // When the slider hits its 10k ceiling, expose a free-form numeric // input so dealers with bigger spend can enter their actual figure. const [customMode, setCustomMode] = useState(false); const [customStr, setCustomStr] = useState(""); useEffect(() => { if (window.__YW_DEAL) { window.__YW_DEAL.set({ dealership, brokers, currentMonthly: monthly }); } }, [dealership, brokers, monthly]); const annual = monthly * 12; const [shownAnnual, setShownAnnual] = useState(annual); useEffect(() => { const start = shownAnnual; const delta = annual - start; if (delta === 0) return; const t0 = performance.now(); let raf; const tick = (now) => { const t = Math.min(1, (now - t0) / 600); const eased = 1 - Math.pow(1 - t, 3); setShownAnnual(Math.round(start + delta * eased)); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); // eslint-disable-next-line react-hooks/exhaustive-deps }, [annual]); const fmt = (n) => `$${Math.round(n).toLocaleString("en-US")}`; const handleCta = () => { const el = document.getElementById("configure"); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; return (

What you are paying for it

Free to list.
Pay for what you need.

Listings on YachtWay are always free. The numbers below are about optional services, broker tools, contracts, websites, and API feeds.

Dealership name setDealership(e.target.value)} placeholder="Your Dealership name" style={{ width: "100%", background: "transparent", border: "none", borderBottom: "1px solid rgba(255,255,255,.18)", fontFamily: T.fDisplay, fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em", color: "#fff", padding: "10px 0", outline: "none", transition: "border-color .15s ease", }} onFocus={(e) => { e.target.style.borderBottomColor = A; }} onBlur={(e) => { e.target.style.borderBottomColor = "rgba(255,255,255,.18)"; }} />

Broker seats

{ const raw = e.target.value.replace(/[^0-9]/g, ""); if (raw === "") { setBrokers(0); return; } const n = Math.min(999, parseInt(raw, 10)); setBrokers(isNaN(n) ? 0 : n); }} onBlur={(e) => { if (!e.target.value || parseInt(e.target.value, 10) < 1) setBrokers(1); }} aria-label="Broker seat count" style={{ fontFamily: T.fDisplay, fontSize: 40, fontWeight: 600, letterSpacing: "-0.02em", color: "#fff", minWidth: 64, width: 80, textAlign: "center", fontVariantNumeric: "tabular-nums", background: "transparent", border: "none", outline: "none", padding: 0, }} />

On YachtWay that is {currency}{(brokers * seatPrice).toLocaleString("en-US")}/mo

{currency}{seatPrice}/seat

What you pay today on legacy platforms, per month

{fmt(monthly)}

{ const v = parseInt(e.target.value, 10); // Schedule the heavy state update on next frame so the // slider thumb stays glued to the cursor instead of // waiting for the downstream React subtree to re-render. if (window.__monthlyRaf) cancelAnimationFrame(window.__monthlyRaf); window.__monthlyRaf = requestAnimationFrame(() => { setMonthly(v); if (v >= 10000) { setCustomMode(true); setCustomStr(String(v)); } else if (customMode) { setCustomMode(false); } }); }} className="cc-slider" style={{ width: "100%", accentColor: A }} />

$0 $5,000 { setCustomMode(true); setCustomStr(monthly >= 10000 ? String(monthly) : ""); }}>$10,000+

{customMode && (

Enter exact amount

$ { const raw = e.target.value.replace(/[^0-9]/g, ""); setCustomStr(raw); const n = parseInt(raw, 10); if (!isNaN(n)) setMonthly(n); else if (raw === "") setMonthly(0); }} placeholder="15,000" style={{ flex: 1, background: "transparent", border: "none", fontFamily: T.fDisplay, fontSize: 24, fontWeight: 600, letterSpacing: "-0.01em", color: "#fff", outline: "none", padding: 0, fontVariantNumeric: "tabular-nums", }} /> /mo

)}

{dealership ? `${dealership} pays today` : "You pay today"}

= 10000000 ? "clamp(40px, 5.5vw, 76px)" : shownAnnual >= 1000000 ? "clamp(48px, 6.8vw, 92px)" : "clamp(64px, 9vw, 120px)", fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 0.9, color: "#fff", fontVariantNumeric: "tabular-nums", wordBreak: "keep-all", }}>{fmt(shownAnnual)}

per year to legacy platforms, listings, seats, and add-ons across nine vendors.

{(() => { // Potential savings = the dealer's actual current annual // spend (what they typed in / dragged) minus what they // would pay on YachtWay for the same seat count. So if a // dealer pays $5,000/mo today (= $60K/yr) with 8 brokers, // their annual savings is $60K − (8 × $19 × 12) = $58,176. // Drives directly off the inputs above instead of the // synthetic per-broker reference we used before. const annualToday = monthly * 12; const ywAnnual = brokers * seatPrice * 12; const saved = Math.max(0, annualToday - ywAnnual); if (saved <= 0 || monthly <= 0) return null; return (

Potential Savings

= 10000000 ? "clamp(28px, 3.6vw, 44px)" : saved >= 1000000 ? "clamp(34px, 4.4vw, 54px)" : "clamp(44px, 5.4vw, 64px)", fontWeight: 700, color: "#fff", letterSpacing: "-0.035em", lineHeight: 0.95, fontVariantNumeric: "tabular-nums", wordBreak: "keep-all", }}>{fmt(saved)}/yr

{fmt(monthly * 12)}/yr today (legacy) − {fmt(brokers * seatPrice * 12)}/yr on YachtWay ({brokers} seat{brokers === 1 ? "" : "s"} × {fmt(seatPrice)}/mo × 12). Build your real plan below for the exact number.

); })()}

Build a full YachtWay plan with add-ons, offices, and LIVE, see the itemized breakdown side-by-side.

); }; // ── Reach numbers strip, collapsed credibility footer to §4 // (the buyer journey). One row of stats, no expandable cards, no // bar charts. The full sourced detail is still available on hover. ── const ReachNumbersStrip = ({ T, A, AOnDark, glow, tint, rgba }) => { // 5 metrics, terse copy. These were previously expanding cards; here // they are plain typographic columns separated by hairlines. const STATS = [ { v: "27.4K", l: "Decision-maker visits/mo", note: "Verified dealers, brokers, and buyers — no tire-kickers." }, { v: "DA 27", l: "Editorial authority", note: "Equal authority to platforms 5× our age. Zero spam." }, { v: "470", l: "Editorial backlinks", note: "All-organic, all-editorial. 123× fewer than Yachtr — zero spam links." }, { v: "2.18M", l: "Social audience", note: "IG, YouTube, FB, TikTok combined." }, { v: "47", l: "Countries reached", note: "Buyers in every major yachting market." }, ]; return (

Reach, in numbers

The credibility footer to the journey above , the audience proof, in one line.

Sourced from Ahrefs, SEMrush, and the platform's own analytics.

{STATS.map((s, i) => (

{s.v}

{s.l}

))}

); }; const DirectionD = () => { const useState = useStateD; const useRef = useRefD; const [hoverFeature, setHoverFeature] = useState(-1); const [activeJourney, setActiveJourney] = useState(0); const [activeMetric, setActiveMetric] = useState(0); const [navScrolled, setNavScrolled] = useState(false); // Region toggle for the comparison table (US / EU). Independent from the // configurator's region so a US dealer can spot-check EU pricing without // resetting their plan build. const [compareRegion, setCompareRegion] = useState("us"); const cost = useCostEstimator(); const cpl = useCPL(); const journeyTrackRef = useRef(null); // Track whether the user has scrolled past the hero so the nav can flip // from solid black (clean editorial header at the top) to a translucent // glass that adapts to whatever section is behind it. React.useEffect(() => { const onScroll = () => setNavScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // Scrollspy: track which section is currently centered in the viewport so // the nav can underline the matching link. const [activeSection, setActiveSection] = useState(""); // Mobile-nav drawer open state. The drawer is rendered absolutely-positioned // and gated by [data-open] on its root, while gets [data-yw-drawer] // so we can lock page scroll while it is up. const [navOpen, setNavOpen] = useState(false); React.useEffect(() => { document.body.dataset.ywDrawer = navOpen ? "true" : "false"; return () => {delete document.body.dataset.ywDrawer;}; }, [navOpen]); React.useEffect(() => { // Note: "live" appears twice, once for the desktop cinematic, once for // the mobile-native version (id="live-mobile"). Whichever is visible at // the current viewport drives the LIVE highlight; the other is // display:none and never crosses the probe line. We normalise both ids // back to "live" so the nav button stays correctly highlighted. const ids = ["cost", "journey", "compare", "members", "services", "pricing", "configure", "security"]; const isVisible = (el) => { if (!el) return false; const r = el.getBoundingClientRect(); return r.width > 0 && r.height > 0; }; const normalise = (id) => id === "live-mobile" ? "live" : id; const onScroll = () => { // Re-resolve elements every scroll. Sections may be added/removed // by responsive mounts (live vs live-mobile), and stale references // would silently miss matches. const els = ids.map((id) => document.getElementById(id)).filter(isVisible); if (!els.length) return; const probe = window.innerHeight * 0.35; // Bottom-of-page edge case: if the user has scrolled to within // ~80px of the bottom, force the LAST visible section active. // The probe-based test fails here because no section's bottom // is past the probe, every visible section's bottom is below // it (or above, scrolled past). The last visible section is // what the user is reading. const nearBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 80; if (nearBottom) { setActiveSection(normalise(els[els.length - 1].id)); return; } // Otherwise, find the section whose top has crossed the probe // line and whose bottom is still below it (i.e., the section // currently spanning the probe). let current = ""; for (const el of els) { const r = el.getBoundingClientRect(); if (r.top <= probe && r.bottom > probe) {current = normalise(el.id);break;} } // Fallback: pick the LAST section whose top has crossed the probe. if (!current) { for (const el of els) { const r = el.getBoundingClientRect(); if (r.top <= probe) current = normalise(el.id); } } setActiveSection(current); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); // Lead-capture modal that gates the PDF export. We stash the export params // when the user clicks "Export PDF Proposal" and only fire the actual export // once they submit a valid (non-free-domain) email. const [exportModalOpen, setExportModalOpen] = useState(false); // Pre-fill the dealership name from the §2 calculator if the user // entered one. The modal stays editable. const [exportName, setExportName] = useState(() => { try { return (window.__YW_DEAL && window.__YW_DEAL.get().dealership) || ""; } catch (_) { return ""; } }); const [exportEmail, setExportEmail] = useState(""); // Keep exportName synced with §2 dealership entries until the user types // into the export field directly. We track that via a ref. const exportNameTouchedRef = useRef(false); useEffect(() => { if (!window.__YW_DEAL) return; return window.__YW_DEAL.on((s) => { if (!exportNameTouchedRef.current && s.dealership) { setExportName(s.dealership); } }); }, []); const [exportError, setExportError] = useState(""); const pendingExportRef = useRef(null); const FREE_EMAIL_DOMAINS = [ "gmail.com", "googlemail.com", "yahoo.com", "yahoo.co.uk", "yahoo.fr", "yahoo.de", "yahoo.it", "yahoo.es", "hotmail.com", "hotmail.co.uk", "hotmail.fr", "hotmail.it", "outlook.com", "live.com", "msn.com", "aol.com", "icloud.com", "me.com", "mac.com", "proton.me", "protonmail.com", "gmx.com", "gmx.de", "mail.com", "yandex.com", "yandex.ru", "zoho.com"]; const validateExportForm = () => { const name = exportName.trim(); const email = exportEmail.trim().toLowerCase(); if (!name) return "Please enter your name."; if (!email) return "Please enter your work email."; // Basic shape: something@something.tld if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return "That does not look like a valid email."; const domain = email.split("@")[1]; if (FREE_EMAIL_DOMAINS.includes(domain)) { return "Please use your work email, free email providers are not accepted."; } return ""; }; const handleExportSubmit = async (e) => { if (e && e.preventDefault) e.preventDefault(); const err = validateExportForm(); if (err) {setExportError(err);return;} setExportError(""); const params = pendingExportRef.current; if (!params) {setExportModalOpen(false);return;} await exportProposalPDF({ ...params, dealerName: exportName.trim(), dealerEmail: exportEmail.trim() }); setExportModalOpen(false); }; // ─── Tweaks ───────────────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#4A2C8A", "accentHover": "#3A2070", "accentLight": "#4A2C8A", "purpleIntensity": 0.35, "gradientHeadline": false, "animateStats": true } /*EDITMODE-END*/; const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); // hex → rgba helper (handles #rgb and #rrggbb) const rgba = (hex, a) => { let h = (hex || "#000000").replace("#", ""); if (h.length === 3) h = h.split("").map((c) => c + c).join(""); const r = parseInt(h.slice(0, 2), 16) || 0; const g = parseInt(h.slice(2, 4), 16) || 0; const b = parseInt(h.slice(4, 6), 16) || 0; return `rgba(${r}, ${g}, ${b}, ${a})`; }; const T = { bg: "#ffffff", bgAlt: "#f7f7f8", bgDark: "#0a0a0c", bgDark2: "#0f0f14", fg: "#0a0a0c", fgMuted: "#5e5e66", fgFaint: "#9a9aa3", border: "#ececef", borderStrong: "#dcdce0", accent: tweaks.accent, accentHover: tweaks.accentHover, accentLight: tweaks.accentLight, fDisplay: "Poppins, var(--font-display, sans-serif)", fBody: "Figtree, var(--font-body, sans-serif)", radius: 12 }; const A = T.accent; const AL = T.accentLight; // Lightened accent for use as TEXT on dark backgrounds. The brand purple // #4A2C8A is too dark to read against near-black, so we lift L* into a // legible range while preserving hue. Used wherever an eyebrow/label/heading // sits on T.bgDark. const AOnDark = (() => { // Convert hex to HSL, bump lightness to ~72%, return as hex. const hex = (T.accent || "#4A2C8A").replace("#", ""); const r = parseInt(hex.slice(0,2), 16) / 255; const g = parseInt(hex.slice(2,4), 16) / 255; const b = parseInt(hex.slice(4,6), 16) / 255; const max = Math.max(r,g,b), min = Math.min(r,g,b); let h = 0, s = 0; const l = (max + min) / 2; if (max !== min) { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } // Force lightness up; keep saturation healthy. const L = 0.72, S = Math.max(s, 0.55); const hue2rgb = (p, q, t) => { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; }; const q = L < 0.5 ? L * (1 + S) : L + S - L * S; const p = 2 * L - q; const R = Math.round(hue2rgb(p, q, h + 1/3) * 255); const G = Math.round(hue2rgb(p, q, h) * 255); const B = Math.round(hue2rgb(p, q, h - 1/3) * 255); return "#" + [R,G,B].map(v => v.toString(16).padStart(2, "0")).join(""); })(); const PI = tweaks.purpleIntensity; // 0 (no purple ambience) → 1 (full) // glow opacity scales with purple intensity (default 0.55 ≈ original look halved) const glow = (a) => rgba(A, a * PI); const tint = (a) => rgba(A, a); const HeadlineAccent = ({ children }) => {children}; const scrollJourney = (dir) => { if (!journeyTrackRef.current) return; const w = journeyTrackRef.current.clientWidth; journeyTrackRef.current.scrollBy({ left: dir * w * 0.85, behavior: "smooth" }); }; return (

{/* ── NAV (sticky, blurred) ────────────────────────────────────── */}

{[ ["compare", "Compare"], ["members", "Members"], ["services", "Services"], ["configure", "Pricing"], ["security", "Trust"]]. map(([id, label]) => {label} )}

{e.currentTarget.style.background = "#fff";e.currentTarget.style.color = "#0a0a0c";e.currentTarget.style.borderColor = "#fff";}} onMouseOut={(e) => {e.currentTarget.style.background = "transparent";e.currentTarget.style.color = "#fff";e.currentTarget.style.borderColor = "rgba(255,255,255,.55)";}}> Calculate Savings Become a Member {/* Hamburger, visible only on mobile (CSS in mobile.css gates it). */}

{/* ── MOBILE NAV DRAWER ────────────────────────────────────────── Rendered always so we can transition the open/close states; the [data-open] attr drives the slide+fade. CSS in mobile.css makes this a no-op at desktop widths (display rules suppress it). */}

setNavOpen(false)}>Calculate Savings setNavOpen(false)}>Become a Member

{/* ── HERO (DARK editorial) ────────────────────────────────────── */}

{/* ── Background listing-card grid ──────────────────────────────── Faint outlined skeleton cards tiled across the entire hero. We then drop a dark-color overlay layer on top with two radial "spotlights" of dark, centered on the H1 and the stat tower, so the cards visually disappear behind those zones (positive-space overlay rather than a subtractive mask, which is unreliable across browsers when chained). The cards live behind the content but in front of the dot-grid bg. */}

{/* The card grid itself. We render two copies of the row pattern stacked vertically and translate downward for a seamless infinite scroll, the way a real listings feed reads online. The track is twice as tall as the section, so cards leaving the top wrap around from the bottom. */} {(() => { // Side-profile vessel line-art images. Each is a clean white // outline on transparent (pre-processed: white background // removed, lines inverted to white). Five distinct silhouettes // (mystic speedboat, sportfish tower, day-cruiser, flybridge, // superyacht) get pseudo-randomly distributed + h-flipped per // cell so the grid reads as a fleet of different boats. const BOATS = [ { type: "img", src: "assets/boat-mystic.png", aspect: 2504 / 1664 }, { type: "img", src: "assets/boat-sportfish.png", aspect: 2576 / 1664 }, { type: "img", src: "assets/boat-daycruiser.png", aspect: 3722 / 1152 }, { type: "img", src: "assets/boat-superyacht.png", aspect: 2816 / 1536 }, { type: "img", src: "assets/boat-classic.png", aspect: 1365 / 768 }, { type: "img", src: "assets/boat-venus.png", aspect: 2736 / 1568 }, { type: "img", src: "assets/boat-aria.png", aspect: 2736 / 1536 }]; // Pseudo-random but deterministic pick + flip per cell, so // the pattern is varied across the grid yet stable across // renders. We walk a shuffled "deck" of all boat indices , // each row gets its own seeded shuffle, so every consecutive // run of N=BOATS.length cells contains all unique boats. Any // pick that would repeat the cell directly above or to the // left is swapped with the next deck entry, preserving the // no-adjacent-duplicates rule without skewing the distribution. const COLS = 5; const ROWS = 14; const TOTAL = COLS * ROWS; // Deterministic shuffle: Fisher - Yates seeded by `seed`. const shuffleDeck = (seed) => { const deck = BOATS.map((_, j) => j); let s = (seed * 2654435761 ^ 0x9e3779b9) >>> 0; for (let k = deck.length - 1; k > 0; k--) { s = (s * 1664525 + 1013904223) >>> 0; const r = s % (k + 1); [deck[k], deck[r]] = [deck[r], deck[k]]; } return deck; }; const cells = []; const decks = []; const cursors = []; for (let row = 0; row < ROWS; row++) { decks.push(shuffleDeck(row + 17)); cursors.push(0); } for (let i = 0; i < TOTAL; i++) { const col = i % COLS; const row = Math.floor(i / COLS); const leftIdx = col > 0 ? cells[i - 1].boatIdx : -1; const upIdx = row > 0 ? cells[i - COLS].boatIdx : -1; const deck = decks[row]; // Walk the deck; if the next entry collides with above/left, // swap it with a later entry in the deck and try again. let attempts = 0; while (attempts < deck.length) { const c = cursors[row] % deck.length; const candidate = deck[c]; if (candidate !== leftIdx && candidate !== upIdx) break; // Swap candidate with the entry after it (cyclic) so // it gets retried later in the row, not lost. const swap = (c + 1) % deck.length; [deck[c], deck[swap]] = [deck[swap], deck[c]]; attempts++; } const boatIdx = deck[cursors[row] % deck.length]; cursors[row]++; const h = ((row * 73856093) ^ (col * 19349663)) >>> 0; const flip = (h & 1) === 1; cells.push({ boat: BOATS[boatIdx], boatIdx, flip, key: i }); } return (

{cells.map(({ boat, flip, key }, i) => (i % COLS) < 2 ? null :

{/* Photo area, with a side-profile boat outline */}

{boat.type === "img" ?

: }

{/* Skeleton text rows */}

)}

); })()} {/* Dark spotlights that hide the cards behind H1 & stats. Each radial-gradient goes from the bg color (opaque) at the center to fully transparent at the edge. We use the actual dark hero color so the cutout reads as the same surface as the section. */}

Stop paying
to list your
own inventory.

Inventory · Contracts · Media.{" "} All in one place.

Start Free. No Card Required. Calculate Your Savings

{/* Trust band, anchor logos + count. Sits in the hero under the CTAs as a horizontal strip. The count is the lead element (it is the proof number); the logos sit to its right behind a vertical divider, all on a single baseline so they read as a quiet honor roll rather than a sales banner. */}

Trusted by

400+ brokerages, dealers and shipyards

{/* §5 hero result line */}

Average dealer saves $24,300/year vs. YachtWorld.

{[ { name: "Allied Marine", file: "allied-logo.svg", h: 32, treat: "asis" }, { name: "FGI Yacht Group", file: "fgi-yacht-group.png", h: 32, treat: "default" }, { name: "Sunreef Yachts", file: "sunreef.webp", h: 26, treat: "invert" }, ].map((m) => ( {m.name}

{ e.currentTarget.style.opacity = "1"; }} onMouseOut={(e) => { e.currentTarget.style.opacity = ".80"; }} /> ))}

{/* Right column removed per design feedback. */}

{/* Dashboard preview moved out of the hero into its own §3 section "This is what replaces all of that.", see below the cost calculator. The hero now ends after the H1 + CTA stack. */}

{/* ── PROOF STRIP (§2 — replaces full Buyer Journey Cinema) Three highest-impact stats lifted from the journey, presented as a compact 3-column proof band directly below the hero so the dealer gets credibility before any pricing surface. */}

{[ { v: "2.18M", l: "Social audience", s: "Buyers find your inventory before they Google a competitor." }, { v: "20M+", l: "People reached per month on social", s: "Organic social reach, not paid ads." }, { v: "100+", l: "Qualified buyers per LIVE session", s: "Pre-vetted, decision-grade audience." }, ].map((s, i) => (

{s.v}

{s.l}

{s.s}

))}

{/* Legacy "§3 The alternative" + dashboard preview retained in v1 only; removed here to keep narrative on cost/value. */}

What replaces it

One platform.
Listings, contracts, global reach and tools you need.

Add listings, manage events, start live streams, or reach more people. All in one place.

YachtWay.com / dealer / inventory

{/* end legacy hidden block */} {/* ── BUYER JOURNEY removed per CRO/design review — moved off the pricing page entirely. The condensed proof strip (above hero) carries the audience credibility into the pricing narrative. */} {/* ── REACH NUMBERS STRIP — removed per design feedback (m0075). The named dealer quote + hero result line now carry the credibility weight; the strip felt redundant after the information-architecture re-org. ─── */} {/* */} {/* ── FEATURE MATRIX (LIGHT), the nav "Compare" anchor lives here. CompetitiveIntelligence above is treated as part of the Reach narrative (numbers backing the reach claim). */}

Capability

Every tool a dealer needs,
in one platform.

YachtWay vs. the major listing platforms. Hover any row for detail.

{/* Region toggle — switches the priced rows (Listing cost, Annual cost, Per-broker seat) between USD and EUR. */}

{[ { k: "us", label: "US (USD)" }, { k: "eu", label: "EU (EUR)" } ].map((opt) => { const active = compareRegion === opt.k; return ( ); })}

{(() => { // Competitors. "yw" = YachtWay; the rest are individual platforms. // Column order matters, YachtWay sits first as the highlighted column. const COLS = [ { k: "yw", name: "YachtWay", sub: "All-in-one" }, { k: "ywld", name: "YachtWorld", sub: "incl. Boats.com, BoatTrader" }, { k: "msrc", name: "MarineSource", sub: "" }, { k: "ychr", name: "Yachtr", sub: "" }, { k: "rbt", name: "Rightboat", sub: "" }, { k: "ytco", name: "Yatco", sub: "" }]; // Each row: feature label, plus per-column value. // true = supported (check), false = not (x), or string for nuance. // Priced rows swap between US (USD) and EU (EUR) values based on // the section-level compareRegion toggle. const isEU = compareRegion === "eu"; const ROWS = [ isEU ? { f: "Listing cost", yw: "Free", ywld: "€925 - €13.8K+/mo", msrc: "Unknown", ychr: "€349 - €999/mo", rbt: "€25/lead", ytco: "Unknown" } : { f: "Listing cost", yw: "Free", ywld: "$1K - $15K+/mo", msrc: "Unknown", ychr: "$399 - $1,199/mo", rbt: "Unknown", ytco: "Unknown" }, isEU ? { f: "Annual cost (typical SMB)", yw: "€0", ywld: "€11K - €165K", msrc: "Unknown", ychr: "€4.2K - €12K", rbt: "Unknown", ytco: "Unknown" } : { f: "Annual cost (typical SMB)", yw: "$0", ywld: "$12K - $180K", msrc: "Unknown", ychr: "$4.8K - $14.4K", rbt: "Unknown", ytco: "Unknown" }, isEU ? { f: "Per-broker seat", yw: "€12/seat/mo", ywld: "+€45/seat", msrc: "-", ychr: "+ IYBA fee", rbt: "-", ytco: "-" } : { f: "Per-broker seat", yw: "$19/seat/mo", ywld: "+$50/seat", msrc: "-", ychr: "+ IYBA fee", rbt: "-", ytco: "-" }, { f: "Free unlimited inventory", yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Live streaming to buyers", learn: { title: "YachtWay Live", kicker: "Only on YachtWay", tagline: "See it. Live. Now.", visual: "live", lead: "A one-tap, in-browser walkthrough broadcast from any phone. Buyers worldwide watch, ask questions in real time, and the entire session lives on your listing forever, with analytics, replays, and shareable links.", steps: [ { h: "Schedule ahead or go live now", b: "Pick any of your listings and set a time. Or go live right now, the moment a buyer asks." }, { h: "Set up in seconds", b: "Turn on the lights, pull out your phone, tap Go Live. No apps, no crew, no extra gear, any smartphone from the last five years works." }, { h: "Walk buyers through the vessel", b: "Real-time questions stream in as you walk. You answer them on camera. It feels like a real conversation because it practically is one." }, { h: "Every Live lives on the listing", b: "The recording auto-attaches to the listing page, viewer analytics go live the second you stop, and buyers can rewatch any time." } ], why: [ { h: "Direct the camera", b: "Curious about the engine room or the cabin finish? Buyers ask in real time and you show them exactly what they want to see." }, { h: "Jump in instantly", b: "No apps, no accounts, no barriers. Tap any live stream and start watching from your browser, wherever you are." }, { h: "Live-first catalog", b: "Active Lives are automatically pinned to the top of the catalog so the freshest content sells first." }, { h: "Dolby audio, 1080p HD", b: "Built for real conversations, not glitchy mobile streams. Every finish, texture and detail comes through clean." } ], footnote: "Other platforms may offer scheduled appointments or a third-party video tool. YachtWay Live is the only integrated, in-platform broadcast: one stream, dozens of showings, the recording stays on the listing." }, yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Built-in buyer financing", yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Built-in insurance", learn: { title: "YachtWay MasterCover", kicker: "Powered by Lloyd's of London", tagline: "Quote, bind, pay. All online.", visual: "mastercover", lead: "Direct access to the Lloyd's of London marketplace, the same floor that backs superyachts and satellites, built into your listing. Hulls from $100K to $300M, estimate in under 2 minutes, full digital flow from quote to bind.", steps: [ { h: "Estimate in under 2 minutes", b: "Enter vessel year, length, value, top speed and cruising area. Instant annual estimate, no commitment, no broker call." }, { h: "Routed to Lloyd's of London", b: "Your request goes straight to A-rated Lloyd's underwriters — the world's most trusted marine market for 300+ years." }, { h: "Quote, bind, and pay online", b: "Compare offers, approve digitally, pay by card or wire. Certificate of Insurance issued the same day." } ], why: [ { h: "$100K – $300M coverage", b: "Powerboats, sailboats, charter fleets, mega-yachts. If it floats and it's insurable, MasterCover writes it." }, { h: "All-Risk, not Named Perils", b: "If it isn't explicitly excluded, it's insured. New-for-old on partial losses, Agreed Value on total loss." }, { h: "Worldwide, year-round", b: "On water, on land, in transport, on ferries. Liability, hull & machinery, P&I, personal accident, crew." }, { h: "SOC 2 + GDPR", b: "Bank-grade data handling. The same compliance bar enterprise software clears, applied to your buyers' info." } ], footnote: "Other listing platforms link out to third-party brokers. MasterCover is the only insurance product built directly into the listing flow — buyers quote, bind and pay without leaving the platform." }, yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Digital contracts", learn: { title: "EasySign", kicker: "Powered by DocuSign", tagline: "Sign. Send. Track. Done.", visual: "easysign", lead: "Every contract a dealer touches — Listing Agreements, Purchase Agreements, Offers, Commission Agreements, Bill of Sale, State Registration, U.S. Coast Guard Documentation — created, sent, signed and tracked in one dashboard. Powered by DocuSign, legally binding worldwide, and built into your listing flow so a signed Listing Agreement becomes a live draft in seconds.", steps: [ { h: "Listing Agreement → live draft in seconds", b: "The moment a Listing Agreement is signed, EasySign spins up a draft listing pre-filled with vessel and pricing data. Add photos, hit publish, done." }, { h: "20+ documents ready in a few clicks", b: "Purchase Agreements, Closing Statements, Vessel Acceptance, Bill of Sale, State Registration, U.S. Certificate of Documentation, Title, Wire Info, Build Sheet — all templated and ready to send." }, { h: "Signed via DocuSign, legally valid worldwide", b: "Every signature is audit-trailed, timestamped, and court-recognized in every market a YachtWay deal closes in." }, { h: "Track every deal stage in one dashboard", b: "Created, Sent, Signed, Countersigned — every document on every deal, with automated payment-milestone alerts so nothing slips." } ], why: [ { h: "Works where others freeze", b: "Built to keep working on bad connections — close contracts at boat shows, on docks, anywhere a 4G bar wobbles. Deals in minutes, not hours." }, { h: "Automated state forms", b: "California, Florida, New York, Delaware, Illinois auto-populate from the deal. More states are added regularly." }, { h: "AI-assisted paperwork", b: "Built for pros, driven by AI. Fields auto-fill from the listing and buyer profile; the system flags what's missing before you send." }, { h: "Your contracts stay private", b: "We can't read them. GDPR-compliant, SOC 2 Type 1 + SOC 2 Type 2 certified, penetration-tested. You control who sees every deal." } ], footnote: "$269/mo. First 30 days or 5 contracts free for all users. Up to 5 deals per month included — $20 per additional deal. Replaces DocuSign Business Pro ($300+/mo) and the manual paperwork stack a brokerage normally runs separately." }, yw: true, ywld: true, msrc: false, ychr: true, rbt: false, ytco: false }, { f: "VATO, Vessel Valuation Tool", yw: true, ywld: true, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Content production", yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Dealer site + inventory sync", yw: true, ywld: true, msrc: false, ychr: false, rbt: false, ytco: true }, { f: "3D tour support", learn: { title: "3D Tours", kicker: "Walk the boat from anywhere", tagline: "Bring every cabin, helm and deck to the listing.", visual: "tour3d", lead: "Every broker can attach a full 3D virtual tour to their listing, plus an optional vessel brochure. Buyers explore the entire boat — interior, helm, deck, engine room — without leaving the listing page. We accept tours from every major provider so you use whoever you already shoot with.", steps: [ { h: "Shoot with the provider you already use", b: "Accepted formats: Matterport, Giraffe360, CloudPano, Kuula, VRCloud and Theatro360. If your tour lives on one of those, it works on YachtWay." }, { h: "Paste the link in the listing flow", b: "In the listing-creation flow, drop the tour URL into the \"3D Tour\" field. YachtWay auto-detects the provider and embeds it inline on the listing page." }, { h: "Upload the brochure (optional)", b: "Attach the manufacturer or dealer PDF brochure for buyers who want to read the full spec sheet. Sits next to the tour as a one-click download." }, { h: "Don't have a tour? Use YachtWay Studio", b: "Request a YachtWay Studio shoot directly from the listing flow and a local crew captures the 3D tour, photos and walkthrough video for you." } ], why: [ { h: "Provider-agnostic", b: "Use the platform you and your photographer already trust — no lock-in, no re-shoots, no proprietary viewer." }, { h: "Embedded, not linked away", b: "Tours play full-screen inside the listing. Buyers stay on the page; you keep the engagement." }, { h: "3D badge in search", b: "Listings with a tour get a \"3D\" badge in the search grid, lifting click-through versus photo-only listings." }, { h: "Brochure download is tracked", b: "See which buyers opened the brochure so your follow-up is informed before the first call." } ], footnote: "3D tour embedding is included on every plan. YachtWay Studio production is à-la-carte." }, yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Social reach", yw: true, ywld: true, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Dealer earns referral income", yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Schedule a tour", learn: { title: "Schedule a Tour", kicker: "Built into every listing", tagline: "Pick a time. Done.", visual: "schedule", lead: "Buyers book a showing directly from the listing page — they pick a date, pick a time, pick In-Person or Video Call, and the slot is locked. No phone tag, no email threads, no \"let me check and get back to you.\" The easiest way for a customer to pick a time that suits them without the constant back-and-forth.", steps: [ { h: "Book from the listing page", b: "Every listing has a Schedule a Tour button. One click opens the booking sheet — no account required to start." }, { h: "In-Person or Video Tour", b: "Buyer chooses how they want to see the vessel. In-Person shows the vessel's home port; Video Tour books a FaceTime or Zoom walkthrough." }, { h: "Pick a slot that works", b: "Available times are shown in the vessel's local time zone. Booked or unavailable slots are greyed out so the buyer only sees real options." }, { h: "Confirm and the broker is notified", b: "Name, email and phone, then Submit. The request lands in the broker's dashboard with the buyer's contact info and the chosen slot." } ], why: [ { h: "No back-and-forth", b: "Customers self-serve their own time. Brokers stop losing showings to scheduling friction." }, { h: "Vessel-local time zone", b: "Times shown match where the vessel is, not where the buyer is — no confusion about whether 3pm is local or remote." }, { h: "In-Person or Video, one flow", b: "A buyer in Monaco can book a video walk-through of a vessel in Fort Lauderdale in the same two clicks as a local in-person showing." }, { h: "Routed to the right broker", b: "Every booking goes straight to the listing's broker — calls and messages route to the assigned seat, not the office switchboard." } ], footnote: "Other listing platforms hand the buyer a phone number or a generic contact form. Schedule a Tour is the only native, calendar-aware booking flow built into the listing — buyer picks a slot, broker gets a confirmed showing." }, yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Events", learn: { title: "Events", kicker: "Boat shows, unveilings & open houses", tagline: "Show up where buyers are already looking.", visual: "events", lead: "Tell buyers exactly which boat shows you'll be attending, which vessels you're bringing, and let them RSVP straight from the listing. Create unveilings and open houses, send instant invitation emails, and get discovered by buyers browsing boats in your area.", steps: [ { h: "Create the event in a minute", b: "Boat show, unveiling, open house, sea trial day — pick the type, set the date(s), drop the address (or mark it private), and you're live." }, { h: "Pick which vessels you're bringing", b: "Attach any of your listings as 'Vessels on Display.' Each one shows up on the event page with price, location and a direct link back to its listing." }, { h: "Buyers RSVP from the listing", b: "Every attached listing shows the upcoming event with an RSVP button. Buyers reserve a slot in one click — no phone tag, no email back-and-forth." }, { h: "Instant invitation emails", b: "Invite your saved buyer list with a single click; YachtWay sends a branded invite and tracks who opened, who RSVP'd, and who's still pending." }, { h: "Get found by nearby buyers", b: "Anyone browsing boats in your event's region sees it surfaced on relevant listings and in search — free local exposure, every time you set up." } ], why: [ { h: "Pending requests in one place", b: "A live counter of open RSVPs sits at the top of the event page so nothing falls through the cracks." }, { h: "Real engagement metrics", b: "Guests, views, vessels on display and impressions are tracked per event — see exactly what each show or open house is worth." }, { h: "Share with one tap", b: "Every event has a shareable link and a branded social card, ready to post on Instagram, LinkedIn or email." }, { h: "Private or public", b: "Run a private VIP unveiling with an invite-only guest list, or a public open house indexed across YachtWay." } ], footnote: "Included on every dealer plan at no extra cost. Unlimited events, unlimited vessels on display, unlimited RSVPs." }, yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "Range calculator", learn: { title: "NautiX", kicker: "The YachtWay range & speed engine", tagline: "Real distance. Real fuel. Real answers.", visual: "nautix", lead: "NautiX is a context-aware top-speed, range and fuel-burn calculator built into every listing. Plot two points on the map and instantly see trip distance, duration, cruise speed, fuel used (L + GAL) and tank usage — calculated from real vessel specs, hull type, drive system, and a continuously expanding database of manufacturer and sea-trial data, not the generic legacy formulas that miss by 20–30%.", steps: [ { h: "Pick two points on the map", b: "Buyer drops a start and an end pin. NautiX measures the nautical-mile distance over water and draws the route." }, { h: "Real-vessel math, not a generic formula", b: "Top Speed = (C × √(HP ÷ tons)) ÷ 100, where C is dynamically chosen based on hull type (planing / displacement / semi-displacement), drive system, era of design and brand/model reference data." }, { h: "Fuel, duration and tank usage", b: "Combines verified builder data, published sea-trial results and engine specs to estimate gallons + litres burned, trip duration and what percentage of the tank that takes." }, { h: "Round Trip & Fast Cruise toggles", b: "One click doubles the leg for a return journey; Fast Cruise recalculates everything at the vessel's faster cruise RPM band." } ], why: [ { h: "Most accurate in the industry", b: "Smarter C values per hull design and era, real builder/test data for popular models, results match published performance within a few knots." }, { h: "Manufacturer-verified models", b: "Builders and dealers submit official performance sheets to NautiX@YachtWay.com and get a verified checkmark next to their models — factory-backed, not estimated." }, { h: "Safe-side rounding + margin of error", b: "Fuel and time round up to the nearest tenth with a built-in 0.5 buffer for real-world variables, so a buyer is never left short on math." }, { h: "Continuously improving", b: "If a result is off, users flag it and the reference database is updated. Every flag makes every future estimate sharper." } ], footnote: "Calm-water baseline (the same one used by builders and sea-trial reports). Heavy weather increases real fuel burn — always allow extra margin. All results are estimates for reference, not performance guarantees." }, yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "AI chat", learn: { title: "Waylo", kicker: "The model-specific AI assistant", tagline: "Ask anything about this exact boat.", visual: "waylo", lead: "Waylo is an AI assistant built into every listing that answers basic, model-specific questions in seconds. It draws strictly from manufacturer specifications and verified public journalism about the boat in front of you — never opinions, never cross-vessel comparisons, never sales talk.", steps: [ { h: "Open any listing, click Ask Waylo", b: "A chat panel opens with three suggested questions pre-loaded: engine type and power, top cruising speed, layout and accommodations. One tap to ask, or type your own." }, { h: "Strictly model-scoped answers", b: "Waylo only answers questions about THIS specific make, model and year. Ask about a different boat and it politely declines — no apples-to-apples, no \"compare with…\", no comparisons to other vessels on the platform." }, { h: "Sourced from real data, not opinions", b: "Two sources only: the manufacturer's published specs and reputable public journalism (sea trials, magazine reviews, builder press kits). No reviewer star ratings, no buyer chatter, no anecdotes." }, { h: "Buyer gets answers, dealer keeps the lead", b: "The basic questions get handled instantly — fuel capacity, beam, draft, range, accommodations. The buyer arrives at your inbox already qualified, ready to discuss the real stuff." } ], why: [ { h: "No comparisons, ever", b: "Waylo is hard-coded to never recommend, rank, or contrast this vessel against any other. The conversation stays on the boat the buyer is looking at." }, { h: "Manufacturer data first", b: "Builder spec sheets are the source of truth. Where a number is officially published, that's the number Waylo returns — not an estimate, not an aggregation." }, { h: "Public journalism, not reviews", b: "Sea-trial reports and editorial features add real-world color (handling, cabin layout, build quality notes) without crossing into opinion or buyer sentiment." }, { h: "Cites what it doesn't know", b: "If a fact isn't in the spec or the journalism, Waylo says so and points the buyer to ask the dealer directly — no hallucinated numbers." } ], footnote: "Available on every listing at no extra cost. Waylo will never recommend a competing boat, suggest a substitute, or run a side-by-side." }, yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }, { f: "API feed out", yw: true, ywld: true, msrc: false, ychr: true, rbt: true, ytco: true }, { f: "GDPR", tip: "EU regulation governing personal-data handling. Under GDPR, an EU buyer can demand to see, correct, or delete the data a platform holds on them, and demand the platform stop selling or sharing it. A serious dealer needs proof their listing platform actually enforces this so an inquiry from an EU buyer does not turn into a regulatory complaint against the dealership.", yw: true, ywld: { value: "Self-claimed", tip: "Self-declared in Privacy Notice & agreements. Historical mention of external auditor (2018). No current public proof." }, msrc: false, ychr: false, rbt: { value: "Self-claimed", tip: "Primarily self-claimed GDPR compliance with good documentation but no strong public evidence of independent audits." }, ytco: { value: "Self-claimed", tip: "Self-claimed GDPR compliance with a basic, outdated policy and no published audits or certifications." } }, { f: "SOC 2", tip: "Independent third-party audit (AICPA standard) that proves a platform's security, availability, and confidentiality controls actually work. A SOC 2 report tells a dealer that buyer data, signed contracts, and financial documents are stored in audited infrastructure, not on someone's laptop. It is the same bar enterprise software has to clear, applied to your listing platform.", yw: true, ywld: false, msrc: false, ychr: false, rbt: false, ytco: false }]; const cellWidth = "minmax(110px, 1fr)"; const gridCols = `minmax(220px, 1.6fr) ${cellWidth} repeat(${COLS.length - 1}, ${cellWidth})`; // Lightweight hover tooltip - shows a styled bubble above the // anchor on hover/focus. Native `title` is too slow and clipped // by the table chrome, so we render our own. const HoverTip = ({ tip, children, width = 280 }) => { const [open, setOpen] = useStateD(false); const tipRef = React.useRef(null); const arrowRef = React.useRef(null); // After the tooltip mounts, measure its position. If it // would overflow the viewport on the left or right, slide // it horizontally (and re-aim the little arrow back at // the anchor so the pointer still hits the cell). This // matters most on mobile, where columns near the right // edge of the table push the centered tooltip past the // screen — the user saw the GDPR "Self-claimed" tip // running off the right side of the viewport. React.useLayoutEffect(() => { if (!open) return; const tipEl = tipRef.current; const arrow = arrowRef.current; if (!tipEl) return; // Reset before measuring so each open is fresh. tipEl.style.transform = "translateX(-50%)"; if (arrow) arrow.style.left = "50%"; const rect = tipEl.getBoundingClientRect(); const margin = 8; const vw = document.documentElement.clientWidth; let shift = 0; if (rect.left < margin) shift = margin - rect.left; else if (rect.right > vw - margin) shift = vw - margin - rect.right; if (shift !== 0) { tipEl.style.transform = `translateX(calc(-50% + ${shift}px))`; // Push the arrow back the opposite way so it still // points at the anchor's centre. if (arrow) arrow.style.left = `calc(50% - ${shift}px)`; } }, [open]); return ( setOpen(true)} onMouseLeave={() => setOpen(false)} onFocus={() => setOpen(true)} onBlur={() => setOpen(false)}> {children} {open && ); }; // Learn-more popup: click trigger → centered modal in a portal so // it escapes the table overflow. Closes on backdrop click, X, or // Esc. Locks body scroll while open. Renders the rich "learn" // schema attached to a row (title, lead, numbered steps, "why" // bullets, footnote) styled to match the dark editorial direction. const LearnPopup = ({ data, accent: aPurple }) => { const [open, setOpen] = useStateD(false); React.useEffect(() => { if (!open) return; const h = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("keydown", h); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", h); document.body.style.overflow = prev; }; }, [open]); const modal = open && ReactDOM.createPortal(

setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 1000, background: "rgba(10,10,12,.78)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", padding: "32px 20px", animation: "yw-learn-fade .22s ease-out both" }}>

, document.body ); return ( {modal} ); }; const Cell = ({ value, isYw }) => { // Object form: { value: "...", tip: "..." } -> render as a // pill with a dotted underline + native title tooltip so the // dealer can hover to see the caveat (e.g. self-claimed GDPR). if (value && typeof value === "object" && "value" in value) { return ( {value.value} ); } if (value === true) { return ( ); } if (value === false) { return ( ); } // String value return ( {value}); }; // ─── Mobile view ────────────────────────────────────── // The 7-column grid is unusable on a 390px screen even with // sticky-column scroll. On mobile we render a competitor // picker (segmented + select) and a clean stacked list of // capabilities, each row shows YachtWay's value vs. the // selected competitor's value side-by-side. Hidden on // desktop via the `.yw-matrix--mobile` class in mobile.css. const MatrixMobile = () => { // Default to YachtWorld (most relevant, the incumbent). const [selKey, setSelKey] = useStateD("ywld"); // Collapse state for the comparison area. Default expanded // so the comparison is immediately visible, but the user // can collapse it to skim the rest of the page faster. const [open, setOpen] = useStateD(true); const yw = COLS[0]; // YachtWay const sel = COLS.find((c) => c.k === selKey) || COLS[1]; const others = COLS.filter((c) => c.k !== "yw"); return (

{/* Picker, title says "Tap any to compare with YachtWay" */}

Tap any to compare with YachtWay

{others.map((c) => { const active = c.k === selKey; return ( ); })}

{/* Sticky header strip, YW name + sel name, with the collapse toggle. Sits above the row list. */}

{/* Toggle / title cell */} {/* YachtWay column header */}

{yw.name}

{/* Competitor column header */}

{sel.name}

{/* Comparison rows, one row per capability: [ label | YW cell | Comp cell ] The 1fr / 64 / 64 grid keeps both YES/NO cells perfectly aligned vertically, so the wall of YW checks vs. the gaps in the competitor column reads as the headline visual. */} {/* Comparison rows, one row per capability: [ label | YW cell | Comp cell ] Single parent grid (subgrid via display: contents on row wrappers) so the YW + competitor columns align across every row, while the label column sizes to the widest label content (no wasted whitespace between label and YW column). */} {open &&

{ROWS.map((r, ri) => {/* Label */}

{r.f} {r.learn ? : r.tip && i }

{/* YachtWay cell */}

{/* Competitor cell */}

)}

}

); }; return (

{/* Header row - sticks to the top of the viewport while the user scrolls through the rows so they always know which platform each column belongs to. */}

Capability

{COLS.map((c, i) => { const isYw = i === 0; return (

{c.name}

{c.sub || "\u00A0"}

); })}

{/* Data rows */} {ROWS.map((r, ri) => { const isLast = ri === ROWS.length - 1; return (

setHoverFeature(ri)} onMouseLeave={() => setHoverFeature(-1)} style={{ display: "grid", gridTemplateColumns: gridCols, borderTop: ri ? `1px solid ${T.border}` : "none", borderBottomLeftRadius: isLast ? 16 : 0, borderBottomRightRadius: isLast ? 16 : 0, background: hoverFeature === ri ? T.bgAlt : "transparent", transition: "background .12s", // Keep overflow visible so absolute-positioned hover // tooltips can escape the row. The bottom-corner radius // on the last row still works because the row's own // background is the only thing that needs clipping, and // child cells either match the radius (no fill) or are // contained within the rounded shape visually. overflow: "visible" }}> {r.f} {r.learn ? : r.tip && i } {COLS.map((c, ci) => { const isYw = ci === 0; return (

); })}

); })()}

Sources: Public pricing pages and platform documentation, December 2025. Traffic, authority, and referring-domain figures from Semrush Domain Overview & Backlink List reports, April - May 2026 (yatco.com, yachtway.com, yachtr.com, marinesource.com, rightboat.com). YachtWorld, Boats.com, and BoatTrader are operated by the same parent company; pricing/feature columns shown once. MarineSource, Yachtr, Rightboat, and Yatco listed individually.

{/* ── MEMBERS (DARK hall-of-fame) ───────────────────────────────────── A staggered 3D logo wall paying respect to early Members. Cards have: - Frosted glass treatment (rgba bg + subtle border + backdrop blur) - Variable size: a "size" prop on each member promotes anchor brands - Per-card scroll-reveal (IntersectionObserver, staggered by index) - Per-row floating breath animation (3 row-offset keyframes) - 3D hover: parent has perspective, card translateZ(32px) on hover Logo treatments per-image (white-on-light vs. native-white vs. has a saved gray card matte) are handled by per-tile className flags. */} {(() => { // Logos copied from uploads/. Treatments: // "default" , render as-is, white-ish logo on dark glass. // "invert" , image is dark-on-light → invert + brightness lift. // "screen" , image was saved with a gray "card matte"; mix-blend // screen drops the matte and lifts the white logo. // "selfbg" , image carries its own background (Autograph navy, // Merle Wood black). Do not pad; let it fill the tile. // size: "lg" → 1.4× span on desktop; "md" → 1×. const MEMBERS = [ { name: "Allied Marine", file: "allied-marine.svg", treat: "default", size: "md" }, { name: "Alpha Custom Yachts", file: "alpha.webp", treat: "whiten", size: "md" }, { name: "Autograph Yacht Group", file: "autograph.png", treat: "default", size: "lg" }, { name: "Azimut | Benetti Group", file: "azimut-benetti.png", treat: "invert", size: "lg" }, { name: "FGI Yacht Group", file: "fgi-yacht-group.png", treat: "default", size: "md" }, { name: "Fjord", file: "fjord.png", treat: "whiten", size: "md", maxH: 44 }, { name: "Formula Boats", file: "formula.png", treat: "invert-mono", size: "md" }, { name: "FYI Yachts", file: "fyi-yachts.png", treat: "default", size: "md" }, { name: "Hanse Yachts", file: "hanse.png", treat: "whiten", size: "md" }, { name: "Hargrave Custom Yachts", file: "hargrave.png", treat: "default", size: "md", maxH: 60 }, { name: "Horizon Yachts", file: "horizon.png", treat: "default", size: "md" }, { name: "Italian Yacht Group", file: "iyg.png", treat: "default", size: "md" }, { name: "Jeff Brown Yachts", file: "jeff-brown.png", treat: "default", size: "md" }, { name: "Lazzara Yachts", file: "lazzara.webp", treat: "invert-mono", size: "md" }, { name: "Lekker Boats", file: "lekker.png", treat: "default", size: "md" }, { name: "Majesty Yachts", file: "majesty.png", treat: "default", size: "md" }, { name: "MarineMax", file: "marinemax.png", treat: "default", size: "md" }, { name: "Merle Wood & Associates", file: "merle-wood.webp", treat: "default", size: "lg" }, { name: "The Moorings Yacht Brokerage", file: "moorings.webp", treat: "whiten", size: "md" }, { name: "Moran Yacht & Ship", file: "moran.png", treat: "default", size: "md" }, { name: "Newater", file: "newater.png", treat: "default", size: "md" }, { name: "Novamarine", file: "novamarine.png", treat: "default", size: "md" }, { name: "Sirena Yachts", file: "sirena.png", treat: "default", size: "md" }, { name: "Solaris Power", file: "solaris-power.png", treat: "default", size: "md" }, { name: "Stratos", file: "stratos.png", treat: "default", size: "md" }, { name: "Sunreef Yachts", file: "sunreef.webp", treat: "invert", size: "lg" }, { name: "Van der Valk Shipyard", file: "van-der-valk.webp", treat: "whiten", size: "md" }, { name: "Vanquish Yachts", file: "vanquish.png", treat: "default", size: "md", maxH: 84 }, { name: "Yachts360", file: "yachts360.webp", treat: "invert-mono", size: "md" }]; return (

{/* Soft texture: thin diagonal hairlines for "wall" feel */}

{/* Header ────────────────────────────────────────────────────── */}

YachtWay Members

The ones
who are here already.

450+ Brokerages, Dealers, and Shipyards across 27 countries. Every one of them free to list. Every one of them part of what comes next.

{/* Grid ──────────────────────────────────────────────────────── */}

{ if (!el || el.__ywMemObserved) return; el.__ywMemObserved = true; // Observe each card; stagger reveal by DOM order so the wave // moves left-to-right + top-to-bottom as the user scrolls in. const cards = el.querySelectorAll(".yw-mem-card"); cards.forEach((card, i) => { const row = Math.floor(i / 3); card.classList.add(`is-breath-${row % 3}`); card.style.animationDelay = `${i * 60}ms`; }); const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("is-in"); io.unobserve(entry.target); } }); }, { threshold: 0.15, rootMargin: "0px 0px -40px 0px" }); cards.forEach((card) => io.observe(card)); }}> {MEMBERS.map((m, i) =>

)} {/* Punchline */}

400+ More worldwide

{/* Closing dedication ───────────────────────────────────────── */}

To every Member building the future of yacht sales with us - on behalf of our entire Team, Thank you.

{/* CTA ─────────────────────────────────────────────────────── */}

Become a Member

); })()} {/* ── LEGACY PRICING CARDS removed per spec §3a/§3b — the static "Free / Paid" cards section was a duplicate pricing surface ahead of the configurator. Configurator below is now the single, unified pricing moment. */} {/* ── SERVICES & ADD-ONS — restored per design feedback (m0121). The configurator covers the recurring software subscription; this rail surfaces the à-la-carte production / financial services (Studio Pass, YachtWay LIVE, EasyFund, MasterCover, VATO, Connect, Dealer Website…). The earlier `id="pricing"` legacy duplicate stays hidden -- only the paid-cards grid is re-exposed below, reframed as Services rather than Pricing. */}

Pricing

Free to list.
Pay for what you need.

Always free

Every dealer, every listing.

{CONTENT.pricing.free.map((p, i) =>

{p}

)}

{CONTENT.pricing.paid.map((p, i) => )}

{/* end legacy pricing-cards hidden block */} {/* ── SERVICES RAIL (re-exposed per m0121) ───────────────────── Just the paid services grid; no $0 column, no "Pricing" H2 -- this section's job is to show the à-la-carte services that do NOT belong in the configurator (per-event production, loyalty program, finance products). Sits after the configurator so the recurring price story comes first. */}

Services & add-ons

Add only what moves the needle.

Optional services , like live broadcasts, professional shoots, and buyer financing , priced per use so they never inflate your monthly subscription. Tap any card to learn more.

{CONTENT.pricing.paid.map((p, i) => )}

{/* ── PLAN CONFIGURATOR (DARK, interactive) ───────────────────── */} {(() => { // ─── Pricing data ────────────────────────────────────────── const PLANS = { us_dealer: { region: "us", currency: "$", broker: 19, manager: 9, office: 69, brand: null, easySign: 269, vato: 99, api: 199, web: 250, live: 75, base: 0, label: "Dealership / Brokerage", regionLabel: "US (USD)" }, us_shipyard: { region: "us", currency: "$", broker: 19, manager: 9, office: null, brand: 99, easySign: 269, vato: 99, api: 199, web: 250, live: 75, base: 0, label: "Shipyard", regionLabel: "US (USD)" }, eu_dealer: { region: "eu", currency: "€", broker: 12, manager: 5, office: 49, brand: null, easySign: null, vato: 79, api: 69, web: 209, live: 60, base: 0, label: "Dealership / Brokerage", regionLabel: "EU (EUR)" }, eu_shipyard: { region: "eu", currency: "€", broker: 12, manager: 5, office: null, brand: 69, easySign: null, vato: 79, api: 69, web: 209, live: 60, base: 0, label: "Shipyard", regionLabel: "EU (EUR)" } }; // Competitor estimates (per-line monthly $/€). Sources: public pricing pages, // dealer interviews, and Semrush domain reports (Apr - May 2026). // Numbers reflect the LOW end of each range (kindest spin to competitors). const COMPETITORS = { us: [ { k: "ywld", name: "YachtWorld", sub: "incl. Boats.com, BoatTrader", base: 2500, broker: 50, manager: 0, office: 300, brand: 300, easySign: 0, vato: 0, api: 0, live: 0, note: "Avg $2,500/mo + $50/seat (varies by package)." }, { k: "rbt", name: "Rightboat", sub: "UK / EU focus", base: 0, broker: 0, manager: 0, office: 0, brand: 0, easySign: null, vato: null, api: null, live: null, note: "£25/lead. No monthly floor." }, { k: "ychr", name: "Yachtr", sub: "IYBA membership required", base: 399, broker: 25, manager: 0, office: 150, brand: 150, easySign: null, vato: null, api: null, live: null, note: "$399 - $1,199/mo + IYBA fees." }, { k: "ytco", name: "Yatco", sub: "Pricing not public", unknown: true, base: 0, broker: 0, manager: 0, office: 0, brand: 0, easySign: null, vato: null, api: null, live: null, note: "B2B MLS feed." }, { k: "msrc", name: "MarineSource", sub: "Pricing not public", unknown: true, base: 0, broker: 0, manager: 0, office: 0, brand: 0, easySign: null, vato: null, api: null, live: null, note: "Feed-based pricing, opaque." }], eu: [ { k: "ywld", name: "YachtWorld", sub: "incl. Boats.com", base: 2300, broker: 45, manager: 0, office: 260, brand: 260, easySign: 0, vato: 0, api: 0, live: 0, note: "Avg €2,300/mo + €45/seat (varies by package)." }, { k: "rbt", name: "Rightboat", sub: "UK / EU focus", base: 0, broker: 0, manager: 0, office: 0, brand: 0, easySign: null, vato: null, api: null, live: null, note: "£25/lead. No monthly floor." }, { k: "ychr", name: "Yachtr", sub: "IYBA membership required", base: 349, broker: 22, manager: 0, office: 130, brand: 130, easySign: null, vato: null, api: null, live: null, note: "€349 - €1,049/mo + IYBA fees." }, { k: "ytco", name: "Yatco", sub: "Pricing not public", unknown: true, base: 0, broker: 0, manager: 0, office: 0, brand: 0, easySign: null, vato: null, api: null, live: null, note: "B2B MLS feed." }, { k: "msrc", name: "MarineSource", sub: "Pricing not public", unknown: true, base: 0, broker: 0, manager: 0, office: 0, brand: 0, easySign: null, vato: null, api: null, live: null, note: "Feed-based pricing, opaque." }] }; const [region, setRegion] = useState("us"); const [persona, setPersona] = useState("dealer"); const [brokers, setBrokers] = useState(1); // 1 broker seat by default const [managers, setManagers] = useState(1); const [offices, setOffices] = useState(0); // additional offices beyond the 1 included const [brands, setBrands] = useState(0); // additional brands (Shipyard only) const [easySign, setEasySign] = useState(false); // off by default; user opts in const [vato, setVato] = useState(false); const [api, setApi] = useState(false); const [web, setWeb] = useState(false); const [liveSessions, setLiveSessions] = useState(0); const [freeListings, setFreeListings] = useState(false); // Floating plan-summary chip in the lower-right of the configure // section. Hidden by default; appears once the user scrolls down // to Step 2 (the first step that actually moves the price), and // hides again once the configure section has scrolled past. The // earlier sticky-bar lived at the top of the section and felt // like a header rather than a running total -- the floating chip // is more like the iOS "continue" pill: out of the way, never // covers the steps, only present while the user is configuring. const [floatVisible, setFloatVisible] = useState(false); useEffect(() => { const onScroll = () => { const s2 = document.getElementById('cfg-step2'); const sec = document.getElementById('configure'); if (!s2 || !sec) return; const s2Top = s2.getBoundingClientRect().top; const secBottom = sec.getBoundingClientRect().bottom; // Show when Step 2's top crosses ~60% of the viewport (the // user is clearly engaged with team-size at that point) and // keep it visible until the configure section scrolls past // the navbar. setFloatVisible(s2Top < window.innerHeight * 0.6 && secBottom > 96); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); // Per-competitor monthly overrides keyed by competitor key (ywld, msrc, ytco, etc.). // Lets dealers plug in their actual numbers for accurate savings. const [compOverrides, setCompOverrides] = useState({}); const ywldEditedRef = useRefD(false); const setCompOverride = (k, v) => { if (k === "ywld") ywldEditedRef.current = true; setCompOverrides((prev) => ({ ...prev, [k]: v })); }; // ── Seed from §2 cost calculator ───────────────────────── // On mount, pull dealership/broker/current-monthly values from the // shared deal store so the configurator continues the §2 conversation // instead of resetting it. Seats only seed once (so the user can // adjust here freely), but the YachtWorld competitor row stays // *live-synced* to the §2 monthly figure, so dragging the slider // up there updates the savings comparison down here in real time. // We track whether the user has edited the YachtWorld override // manually; once they do, we stop overwriting it from §2. // (`ywldEditedRef` is declared above next to `setCompOverride`.) useEffect(() => { if (!window.__YW_DEAL) return; const seed = window.__YW_DEAL.get(); if (seed.brokers && seed.brokers > 0) setBrokers(seed.brokers); if (seed.brokers && seed.brokers >= 4) { setManagers(Math.max(1, Math.round(seed.brokers / 4))); } if (seed.currentMonthly && seed.currentMonthly > 0) { setCompOverrides((prev) => ({ ...prev, ywld: prev.ywld || String(seed.currentMonthly), })); } // Live-sync: any change to currentMonthly in §2 flows here. return window.__YW_DEAL.on((s) => { if (ywldEditedRef.current) return; if (s.currentMonthly && s.currentMonthly > 0) { setCompOverrides((prev) => ({ ...prev, ywld: String(s.currentMonthly), })); } }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const planKey = `${region}_${persona}`; const P = PLANS[planKey]; const fmt = (n) => `${P.currency}${Math.round(n).toLocaleString("en-US")}`; // ─ YachtWay total ─ const ywBrokerCost = brokers * P.broker; const ywManagerCost = managers * P.manager; const ywOfficeCost = persona === "dealer" && P.office ? offices * P.office : 0; const ywBrandCost = persona === "shipyard" && P.brand ? brands * P.brand : 0; const ywEasySignCost = P.easySign && easySign ? P.easySign : 0; const ywVatoCost = P.vato && vato ? P.vato : 0; // Website includes API feed at no charge. When website is on, API is // forced on and its line item cost goes to 0. const apiEffective = web || api; const ywApiCost = P.api && api && !web ? P.api : 0; const ywWebCost = P.web && web ? P.web : 0; // YachtWay LIVE was removed from the configurator (m0093) -- it is // a per-event production service, not a monthly subscription line. // It now lives as a dedicated services card alongside Studio Pass. // We keep `ywLiveCost = 0` so any downstream math that still // references it stays a no-op. const ywLiveCost = 0; const ywMonthly = ywBrokerCost + ywManagerCost + ywOfficeCost + ywBrandCost + ywEasySignCost + ywVatoCost + ywApiCost + ywWebCost; // ─ Competitor totals ─ // Note: YachtWay LIVE is excluded from competitor comparison. It is a // YachtWay-only product (no equivalent on the other platforms), so we // compare like-for-like on broker seats, offices, brands, EasySign, // VATO, and API feed only. The LIVE line is shown separately on the // YachtWay breakdown. const compRegion = COMPETITORS[region]; const compTotals = compRegion.map((c) => { const seats = (brokers + managers) * (c.broker || 0); const officeAdd = persona === "dealer" ? offices * (c.office || 0) : 0; const brandAdd = persona === "shipyard" ? brands * (c.brand || 0) : 0; const sign = easySign ? c.easySign || 0 : 0; const v = vato ? c.vato || 0 : 0; const a = api ? c.api || 0 : 0; // Per-competitor user overrides (numeric monthly TOTAL), if set. // When set, we use ov as-is, the dealer enters their actual all-in // cost, so we do NOT layer seats/add-ons on top. const ov = parseFloat(compOverrides[c.k]); const hasOv = !isNaN(ov) && ov > 0; // For unknown-priced competitors, only count the override (no add-ons). const monthly = hasOv ? ov : c.unknown ? null : c.base + seats + officeAdd + brandAdd + sign + v + a; // l (LIVE) intentionally excluded, not available on competitors. return { ...c, monthly, hasOv, unknown: c.unknown && !hasOv }; }); // Like-for-like total. With LIVE no longer in the configurator, // this is just the monthly itself -- kept as a named alias so // downstream references (savings line, breakdown table) keep // working without churn. const ywMonthlyLikeForLike = ywMonthly; // Headline comparison: sum across every priced competitor in the // user's region. Dealers typically pay several listing platforms // simultaneously, the savings figure reflects what they would // pay, in total, if they kept paying all of them. Unknown-pricing // platforms are excluded because we cannot estimate them honestly. const cheapest = compTotals.find((c) => c.k === "ywld") || compTotals[0]; const pricedComps = compTotals.filter((c) => !c.unknown); const sumCompMonthly = pricedComps.reduce((s, c) => s + (c.monthly || 0), 0); // Savings on a like-for-like basis (LIVE excluded, not on competitors). const annualSavings = (sumCompMonthly - ywMonthlyLikeForLike) * 12; // ─ Line items for the breakdown table ─ const yLines = [ { label: "Listings", amount: 0, free: true, alwaysShow: true }, { label: `${brokers} broker seat${brokers === 1 ? "" : "s"}`, amount: ywBrokerCost, alwaysShow: true }, { label: `${managers} manager seat${managers === 1 ? "" : "s"}`, amount: ywManagerCost, alwaysShow: true }, persona === "dealer" && P.office ? { label: `${offices} additional office${offices === 1 ? "" : "s"}`, amount: ywOfficeCost } : null, persona === "shipyard" && P.brand ? { label: `${brands} additional brand${brands === 1 ? "" : "s"}`, amount: ywBrandCost } : null, P.easySign ? { label: "EasySign", amount: ywEasySignCost, optional: true, on: easySign } : null, P.vato ? { label: "VATO valuation", amount: ywVatoCost, optional: true, on: vato } : null, P.web ? { label: "Website", amount: ywWebCost, optional: true, on: web } : null, P.api ? { label: web ? "API feed (included with Website)" : "API feed", amount: ywApiCost, optional: true, on: apiEffective } : null]. filter(Boolean); // ─ Reusable bits ─ const SegBtn = ({ active, onClick, children }) => ; const InfoTip = ({ tip }) => { if (!tip) return null; // Lightweight CSS-only tooltip, sits inline next to the label. // Hover/focus the (?) circle to reveal the bubble. Pure CSS so it // works without extra state and stays accessible via tab/focus. return ( { const b = e.currentTarget.querySelector(".yw-infotip-bubble"); if (b) b.style.opacity = 1, b.style.transform = "translate(-50%, -4px)", b.style.pointerEvents = "auto"; }} onMouseLeave={(e) => { const b = e.currentTarget.querySelector(".yw-infotip-bubble"); if (b) b.style.opacity = 0, b.style.transform = "translate(-50%, 0)", b.style.pointerEvents = "none"; }} onFocus={(e) => { const b = e.currentTarget.querySelector(".yw-infotip-bubble"); if (b) b.style.opacity = 1, b.style.transform = "translate(-50%, -4px)", b.style.pointerEvents = "auto"; }} onBlur={(e) => { const b = e.currentTarget.querySelector(".yw-infotip-bubble"); if (b) b.style.opacity = 0, b.style.transform = "translate(-50%, 0)", b.style.pointerEvents = "none"; }}> ? ); }; const Stepper = ({ label, value, set, min = 0, max = 99, sub, tip }) =>

{label}

{sub ?

{sub}

: null}

{value}

; const Toggle = ({ label, value, set, price, sub, disabled, tip }) =>

{label}

{sub ?

{sub}

: null}

{price}

; // ── Step header (Apple-style numbered chapters) ───────────── const StepHead = ({ n, kicker, title, sub }) =>

{n}

{kicker ?

{kicker}

: null}

{title}

{sub ?

{sub}

: null}

; // ── Card chrome (every step lives in one of these) ───────── const stepCard = { background: "rgba(255,255,255,.03)", border: "1px solid rgba(255,255,255,.10)", borderRadius: 24, padding: 36 }; // Plain-English plan summary, used in Step 4. const planSummary = (() => { const parts = []; parts.push(`${brokers} broker${brokers === 1 ? "" : "s"}`); if (managers > 0) parts.push(`${managers} manager${managers === 1 ? "" : "s"}`); if (persona === "dealer" && offices > 0) parts.push(`${offices} extra office${offices === 1 ? "" : "s"}`); if (persona === "shipyard" && brands > 0) parts.push(`${brands} extra brand${brands === 1 ? "" : "s"}`); if (easySign && P.easySign) parts.push("EasySign"); if (vato && P.vato) parts.push("VATO"); if (web && P.web) parts.push("Website"); if (apiEffective && !web && P.api) parts.push("API feed"); if (liveSessions > 0) parts.push(`${liveSessions} LIVE / mo`); return parts.join(" · "); })(); // Competitor rows for Step 5. Keep them in the source order // declared in COMPETITORS[region] so that editing a price live // does NOT re-shuffle the list under the user's cursor (the // earlier "largest overpay first" sort caused rows to leapfrog // each other as soon as the user typed, which felt jumpy). We // still annotate each row with its delta for the verdict copy. const overpayRows = [...compTotals]. map((c) => ({ ...c, delta: c.unknown ? null : c.monthly - ywMonthlyLikeForLike })); return (

{/* Header */}

Build your plan

Three answers.
One honest price.

Tell us about your team. We will show you exactly what you would pay on YachtWay , and exactly how much you are overpaying everywhere else.

{/* §5 named dealer quote — removed per design feedback (m0078). */}

{/* Floating running total -- moved out of the sticky-top position into a fixed lower-right chip per design feedback (m0099). Visibility gated on `floatVisible`, which flips true once Step 2 enters the upper half of the viewport. Hidden on phone via mobile.css. */}

Your plan {fmt(ywMonthly)} /mo

{/* §3e pre-fill pill removed per design feedback. */} {/* STEP 0 (Anchor your numbers) — removed per design feedback (m0079). YachtWorld baseline now uses the published market average; users can still override per-platform inline in the comparison table below. */} {/* ───────── STEP 1, Who are you? ───────── */}

setRegion("us")}>US (USD) setRegion("eu")}>EU (EUR)

setPersona("dealer")}>Dealership / Brokerage setPersona("shipyard")}>Shipyard

{/* ───────── STEP 2, Team size ───────── id is the trigger anchor for the floating plan-summary chip in the lower-right (see floatVisible effect). */}

{persona === "dealer" && P.office ? : null} {persona === "shipyard" && P.brand ? : null} {/* LIVE-sessions stepper removed (m0093). LIVE is a per-event production service, not a recurring subscription line -- it lives as its own services card next to Studio Pass below. */}

{/* ───────── STEP 3, Add-ons ───────── */}

{} : setApi} price={web ? "Included with Website" : P.api ? `${fmt(P.api)} / mo` : "-"} sub={web ? "API feed to your site, included free with Website add-on." : "Inventory synced to your site automatically. Included free with Website add-on."} disabled={web} />

{/* ───────── STEP 4, Your YachtWay plan ───────── */}

{fmt(ywMonthly)}/mo

{planSummary}

{fmt(ywMonthly * 12)} / year · cancel anytime.

{/* Itemized breakdown, collapsed by default */}

See line-by-line breakdown

{yLines.filter((l) => !(l.optional && !l.on)).map((l, i) =>

{l.label} {l.free ? "Free" : l.amount > 0 ? fmt(l.amount) : "-"}

)}

Monthly total {fmt(ywMonthly)}

{/* ───────── STEP 5, Here is what you save ───────── */}

Below are the platforms most dealers already pay for.{" "} Tap any price and enter what you actually pay each month.{" "} We will add it up against your YachtWay plan and show your real savings , the verdict lands at the bottom. } /> {/* §3d Post-result CTAs were here; moved BELOW the list per design feedback (m0131) so the verdict and the next step both land after the user has plugged in their actual prices. */}

{overpayRows.map((row) => { const unknown = row.unknown; const delta = row.delta; return (

{/* Name + verdict */}

{row.name}

{row.sub || "\u00A0"}

{unknown ?

Pricing not public , tap their price to plug in your own.

: delta > 0 ?

You overpay {fmt(delta)}/mo to {row.name}.

: delta < 0 ?

{fmt(Math.abs(delta))}/mo less , but YachtWay includes far more.

Same price as YachtWay.

}

{/* Their price (editable) */}

Their price

setCompOverride(row.k, v)} />

{/* Your YachtWay price (locked) */}

On YachtWay

{fmt(ywMonthlyLikeForLike)} /mo

); })}

{/* Verdict + CTAs, moved here per m0131 so the headline "$X overpaying" lands after the user has entered their actual numbers above. */}

0 ? `linear-gradient(135deg, ${rgba(A, .14)}, ${rgba(A, .04)})` : "rgba(255,255,255,.025)", border: `1.5px solid ${annualSavings > 0 ? rgba(A, .35) : "rgba(255,255,255,.10)"}`, }}>

Reality check

{annualSavings > 0 ? You are overpaying {fmt(annualSavings)} a year. : "You are pricing right with the market."}

{/* Sign-post line removed per design feedback (m0146); verdict stands on its own without nudging copy. */}

{/* ───────── STEP 6, Take it with you ───────── */}

{e.currentTarget.style.background = "rgba(255,255,255,.06)";}} onMouseOut={(e) => {e.currentTarget.style.background = "transparent";}}> 20-min walkthrough

); })()} {/* Ask Sarah and standalone "As Seen In" credibility strip removed , press logos now live merged into the members wall above, and the AI concierge module was removed per design feedback. */} {/* ── TRUST & COMPLIANCE (DARK hero with animated padlock) ─────── */} {(() => { const TrustHero = () => { const sectionRef = useRefD(null); const [locked, setLocked] = useStateD(false); React.useEffect(() => { const el = sectionRef.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && e.intersectionRatio > 0.35) { setLocked(true); } }); }, { threshold: [0, 0.35, 0.6] }); io.observe(el); return () => io.disconnect(); }, []); return (

{/* Soft accent glow behind the lock */}

{/* Eyebrow */}

Trust & Compliance

{/* Animated padlock - serious 3D, dark purple Built up in layers: cast shadow → back rim → body slab with chamfer/edge highlights → side bevels → top face highlight → recessed keyhole well → keyhole. Shackle is brushed dark metal, drops in on lock. */}

{/* H1 Title - the impactful one */}

Your data, locked down.

{/* Sub-headline */}

The only global yacht listing platform with trackable audits, certified compliance, and enterprise-grade privacy.

{/* Body copy */}

Every Contract is logged. Every Listing and Purchase Agreement signed with DocuSign. Every buyer record is handled under the same privacy frameworks Fortune 500 vendors are held to. When deals get scrutinized, your paper trail holds up.

{/* Certification badges - inline strip */}

{[ { badge: "SOC 2", type: "Type II · Audited by Prescient Assurance, 2025", desc: "Audited controls for data security, availability, and confidentiality. Summary report on request.", peers: ["Amazon AWS", "Stripe", "Salesforce"] }, { badge: "GDPR", type: "Compliant · Reviewed Apr 2026", desc: "EU buyer and dealer data handled under GDPR. Export and deletion on request.", peers: ["Microsoft", "Apple", "Booking.com"] }, { badge: "CCPA", type: "Aligned · Reviewed Apr 2026", desc: "California Consumer Privacy Act rights honored for US-based buyers.", peers: ["Google", "Meta", "Netflix"] }, { badge: "Audit Trail", type: "Every action logged", desc: "Listing edits, lead handoffs, and EasySign contracts timestamped and exportable.", peers: ["DocuSign", "Workday", "Okta"] }]. map((c, i) =>

{c.badge}

{c.type}

{c.desc}

{/* Peer list - shows recognizable companies that also hold this certification, so the dealer knows what tier they are in. */}

Also held by

{c.peers.map((p, j) => {p} )}

)}

{/* CTA */} Visit Trust Center →

); }; return ; })()} {/* ── FINAL CTA (DARK, asymmetric) ─────────────────────────────── */}

{ if (!el || el.dataset.ioBound) return; el.dataset.ioBound = "1"; if (typeof IntersectionObserver === "undefined") { el.classList.add("is-revealed"); return; } const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("is-revealed"); io.unobserve(entry.target); } }); }, { threshold: 0.4, rootMargin: "0px 0px -10% 0px" }); io.observe(el); }} style={{ fontFamily: T.fDisplay, fontSize: 88, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.95, margin: 0, marginBottom: 24 }}> Your Yacht.
Your Way.
YachtWay.

Start free. Add tools as you grow. 450+ professionals in 27 countries already have.

Become a Member, Free Book a walkthrough

No credit card required to list

{/* Tweaks panel */} setTweak({ accent: v, accentHover: v, accentLight: v })} /> setTweak('accentHover', v)} /> setTweak('accentLight', v)} /> setTweak('purpleIntensity', v / 100)} /> setTweak('gradientHeadline', v)} /> setTweak('animateStats', v)} /> setTweak({ accent: "#4A2C8A", accentHover: "#3A2070", accentLight: "#4A2C8A", purpleIntensity: 0.55, gradientHeadline: false, animateStats: true })} /> {/* Footer (DARK) */} {/* ─── Lead-capture modal: gate PDF export behind dealer name + work email ─── */} {exportModalOpen &&

{if (e.target === e.currentTarget) setExportModalOpen(false);}} style={{ position: "fixed", inset: 0, zIndex: 9000, background: "rgba(10, 10, 12, 0.72)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20, fontFamily: T.fBody, animation: "ywFadeIn 180ms ease-out" }}>

{/* Close */} {/* Header */}

One quick step

Get your personalized proposal

We will prepare a PDF with your numbers, your team size, and your exact savings across every platform you are currently paying for.

{/* Name */} Dealer name {exportNameTouchedRef.current = true; setExportName(e.target.value);if (exportError) setExportError("");}} placeholder="e.g. Riviera Yacht Group" autoFocus style={{ width: "100%", padding: "12px 14px", borderRadius: 10, border: `1.5px solid ${T.border}`, fontSize: 15, fontFamily: T.fBody, color: T.fg, outline: "none", transition: "border-color 120ms ease", boxSizing: "border-box" }} onFocus={(e) => {e.currentTarget.style.borderColor = T.accent;}} onBlur={(e) => {e.currentTarget.style.borderColor = T.border;}} /> {/* Email */} Work email {setExportEmail(e.target.value);if (exportError) setExportError("");}} placeholder="you@yourdealership.com" style={{ width: "100%", padding: "12px 14px", borderRadius: 10, border: `1.5px solid ${exportError ? "#dc2626" : T.border}`, fontSize: 15, fontFamily: T.fBody, color: T.fg, outline: "none", transition: "border-color 120ms ease", boxSizing: "border-box" }} onFocus={(e) => {e.currentTarget.style.borderColor = exportError ? "#dc2626" : T.accent;}} onBlur={(e) => {e.currentTarget.style.borderColor = exportError ? "#dc2626" : T.border;}} /> Use your dealership email, Gmail, Yahoo, and other personal addresses are not accepted. {/* Error */} {exportError &&

{exportError}

} {/* Submit */}

Your proposal opens in a new tab, ready to print or save as PDF.

} {/* EngagementToast removed per design feedback */}

); }; window.DirectionD = DirectionD;

Monthly cost comparison

Your YachtWay breakdown

3-year cost projection

Why this configuration costs less

Feature comparison, the platforms you selected

Reach & distribution metrics

Platforms in this comparison

Onboarding & rollout

Free to list.
Pay for what you need.

Stop paying
to list your
own inventory.

One platform.
Listings, contracts, global reach and tools you need.

Every tool a dealer needs,
in one platform.

{data.title}

The ones
who are here already.

Free to list.
Pay for what you need.

Add only what moves the needle.

{title}

Three answers.
One honest price.

Your data, locked down.

Get your personalized proposal

Send to your team.

On its way.

Monthly cost comparison

Your YachtWay breakdown

3-year cost projection

Why this configuration costs less

Feature comparison, the platforms you selected

Reach & distribution metrics

Platforms in this comparison

Onboarding & rollout