/* ============================================================ Soy Marinero — Landing page · NIGHT-context sections Nav, hero, ranks, bottom CTA, footer. ============================================================ */ const SMN = window.SoyMarineroDesignSystem_4bcf40; const { Badge: NBadge, Button: NButton, Pill: NPill, EmailForm, Compass, StarField, RankBadge, CapitanBanner } = SMN; /* ---- DaySea — the daylight hero backdrop: a Mediterranean afternoon sea, a sleek monohull surfing the horizon under a terracotta spinnaker, and gently animated wave crests. Sea is a stretch-to-fit SVG (aspect-ratio proof); the boat is a fixed-size SVG pinned relative to the band so it never distorts. Drift/shimmer keyframes live in index.html. ---- */ function DaySea({ height = '40vh', fadeOnScroll = true, fadeDistance = 560, style }) { const [opacity, setOpacity] = React.useState(1); React.useEffect(() => { if (!fadeOnScroll) return; const onScroll = () => setOpacity(Math.max(0, 1 - window.scrollY / fadeDistance)); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, [fadeOnScroll, fadeDistance]); const boatX = '72%'; return (
{/* warm haze sitting on the horizon */}
{/* the boat — sleek monohull, heeled, spinnaker drawing; sits ON the horizon */} {/* sea */}
); } const wrap = { maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }; /* ---- 1 · NAV (fixed) ---- */ function Nav() { const [bg, setBg] = React.useState(null); /* { r,g,b, dark } — null = transparent (top of page) */ React.useEffect(() => { const parseColor = (str) => { if (!str) return null; const m = str.match(/rgba?\(([^)]+)\)/); if (m) { const p = m[1].split(',').map((v) => parseFloat(v)); if (p.length >= 3 && !(p.length === 4 && p[3] === 0)) return [p[0], p[1], p[2]]; return null; } const h = str.match(/#([0-9a-fA-F]{6})/); if (h) { const n = parseInt(h[1], 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; } return null; }; const sectionColor = (el) => { const cs = getComputedStyle(el); return parseColor(cs.backgroundImage) || parseColor(cs.backgroundColor); }; const onScroll = () => { if (window.scrollY <= 40) { setBg(null); return; } const probe = 70; /* px down from viewport top — just under the nav */ let best = null; document.querySelectorAll('section').forEach((s) => { const r = s.getBoundingClientRect(); if (r.top <= probe && r.bottom > probe) best = s; }); if (!best) return; const rgb = sectionColor(best); if (!rgb) return; const dark = (0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]) < 130; setBg({ r: rgb[0], g: rgb[1], b: rgb[2], dark }); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const grad = bg ? `linear-gradient(to bottom, rgba(${bg.r},${bg.g},${bg.b},0.95) 0%, rgba(${bg.r},${bg.g},${bg.b},0.78) 62%, rgba(${bg.r},${bg.g},${bg.b},0) 100%)` : 'transparent'; const ink = bg && bg.dark ? '#FFFFFF' : 'var(--text-day-primary)'; /* Tools dropdown — Knots + the rank test, which are their own pages */ const [toolsOpen, setToolsOpen] = React.useState(false); React.useEffect(() => { if (!toolsOpen) return; const close = () => setToolsOpen(false); window.addEventListener('click', close); return () => window.removeEventListener('click', close); }, [toolsOpen]); /* language selector */ const [lang, setLang] = React.useState('EN'); const [langOpen, setLangOpen] = React.useState(false); React.useEffect(() => { if (!langOpen) return; const close = () => setLangOpen(false); window.addEventListener('click', close); return () => window.removeEventListener('click', close); }, [langOpen]); return ( ); } /* ---- 2 · HERO (100vh, Mediterranean daylight) — sky, sea, spinnaker run ---- */ function Hero() { return (

Learn to sail — and actually be useful crew.

Yo no soy marinero...

Bite-size cards, 10 modules, at your own pace — 10 minutes a day. Charter booked or not: own it forever.

{ window.location.href = 'https://app.soymarinero.com'; }} style={{ fontSize: '16px', padding: '16px 40px' }}>Start free What’s your sailing rank? Take the 2-min test →
window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })} style={{ position: 'absolute', bottom: '30px', left: '50%', transform: 'translateX(-50%)', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px', cursor: 'pointer', fontSize: '11px', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)', }} > Scroll
); } /* ---- 6 · RANKS — sunlit-shallows azure, dark ink, escalating staircase ---- */ /* boat silhouettes — ink + linen sails, growing with rank */ const BI = 'rgba(8,40,52,0.60)'; /* ink stroke */ const BH = 'rgba(8,40,52,0.62)'; /* hull fill */ const BS = '#F4EFE3'; /* sail fill */ const BSk = 'rgba(8,40,52,0.35)'; /* sail stroke */ const BW = 'rgba(255,255,255,0.55)'; /* wave stroke */ const RANKS = [ { name: 'Turista', lvl: 1, ink: 'rgba(10,46,58,0.55)', label: 13, xpSize: 11, cls: 'Optimist', boat: ( ) }, { name: 'Marinero', lvl: 2, ink: 'rgba(10,46,58,0.65)', label: 14, xpSize: 11.5, cls: 'Laser', boat: ( ) }, { name: 'Navegante', lvl: 3, ink: 'rgba(10,46,58,0.78)', label: 15, xpSize: 12, cls: 'Day sailer', boat: ( ) }, { name: 'Piloto', lvl: 4, ink: 'rgba(10,46,58,0.88)', label: 16, xpSize: 13, cls: '35ft cruiser', boat: ( ) }, { name: 'Oficial', lvl: 5, ink: '#0A2E3A', label: 17.5, xpSize: 14, cls: '50ft cruiser', boat: ( ) }, { name: 'Capitán ♪', lvl: 6, ink: '#7A5208', label: 20, xpSize: 16, capitan: true, cls: 'Tall ship', boat: ( ) }, ]; function Ranks() { return (
{/* caustic light ripples near the surface */} {/* small school of fish — deeper-toned accents */} {/* anchor in corals — bottom left, deeper tones */}

Earn your keep

Yo no soy marinero — soy capitán.

Climb the ranks, grow your boat, all the way to Capitán.

{/* the fleet — strictly horizontal, boats grow with rank */}
{RANKS.map((r) => (
{r.boat} {r.name} LEVEL{r.lvl}
))}
); } /* ---- 13 · BOTTOM CTA (night, mirrors hero) ---- */ function BottomCta() { return (
{/* star sparkle on the firmament */}
{/* —— Riviera night · sleek marina, left —— */} {/* —— Riviera night · catamaran docked in the marina, right —— */}

Your charter is booked.
Are you ready?

Yo no soy marinero — prove them wrong.

{ window.location.href = 'https://app.soymarinero.com'; }} style={{ fontSize: '16px', padding: '17px 44px' }}>Sign up free →

Free · No credit card · Works in your browser

); } /* ---- 14 · FOOTER ---- */ function Footer() { return ( ); } /* ---- 5 · KEEL WAVE — day → sea transition with sailboat cross-section ---- */ function KeelWave() { return ( ); } Object.assign(window, { Nav, Hero, Ranks, KeelWave, BottomCta, Footer });