/* global React */ const { useState, useEffect, useRef } = React; //// ── Linary "l." mark ───────────────────────────────────────── function LinaryMark({ size = 32, color }) { return ( ); } // ── Linary wordmark ───────────────────────────────────────── // Inline-SVG component: schakelt automatisch mee met thema via currentColor. // Een kán de fill niet overschrijven — daarom hier inline. function LinaryWordmark({ size = 60, color = 'currentColor', style, className, ...rest }) { return ( ); } // ── Reveal hook ───────────────────────────────────────────── function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); } else if (e.boundingClientRect.top > 0) { e.target.classList.remove('in'); } }); }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' }); el.querySelectorAll('.reveal').forEach((n) => io.observe(n)); return () => io.disconnect(); }, []); return ref; } // ── Soft organic blob (random-shaped) ─────────────────────── // Pre-defined organic blob paths — hand-tuned, not random. const BLOB_PATHS = [ 'M160,40 C220,30 280,80 290,150 C300,220 250,280 180,295 C110,310 40,260 30,190 C20,120 100,50 160,40 Z', 'M200,30 C270,40 320,110 310,180 C300,250 230,300 160,290 C90,280 40,210 50,140 C60,70 130,20 200,30 Z', 'M170,20 C240,20 310,80 305,160 C300,240 230,300 150,295 C70,290 20,220 25,140 C30,60 100,20 170,20 Z', 'M180,40 C260,30 310,100 300,180 C290,260 220,310 140,295 C60,280 30,200 50,130 C70,60 110,50 180,40 Z', ]; function Blob({ shape = 0, color, size = 320, style, className = '' }) { return ( ); } // Field of drifting blobs scoped to a scene function BlobField({ items }) { return (
{items.map((b, i) => (
))}
); } // ── Nav ───────────────────────────────────────────────────── // Favicon (LinaryMark) verschijnt links pas wanneer de hero-wordmark // voorbij de header is gescrold — zelfde gedrag als v1. function Nav() { const [scrolled, setScrolled] = useState(false); const [showMark, setShowMark] = useState(false); const [lang, setLang] = useState('NL'); const [langOpen, setLangOpen] = useState(false); const langRef = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { const heroWordmark = document.querySelector('#top .reveal'); if (!heroWordmark) return; const io = new IntersectionObserver( ([entry]) => setShowMark(!entry.isIntersecting), { rootMargin: '-80px 0px 0px 0px', threshold: 0 } ); io.observe(heroWordmark); return () => io.disconnect(); }, []); useEffect(() => { const onClick = (e) => { if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false); }; document.addEventListener('mousedown', onClick); return () => document.removeEventListener('mousedown', onClick); }, []); const langs = [ { code: 'NL', label: 'Nederlands' }, { code: 'EN', label: 'English' }, { code: 'DE', label: 'Deutsch' }, { code: 'ES', label: 'Español' }, { code: 'FR', label: 'Français' }, ]; const headerStyle = { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50, padding: scrolled ? '10px 0' : '20px 0', backdropFilter: scrolled ? 'blur(18px) saturate(140%)' : 'none', background: scrolled ? 'color-mix(in srgb, var(--cream) 80%, transparent)' : 'transparent', borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent', transition: 'all 0.3s ease', }; const containerStyle = { display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', }; const navHiddenStyle = ` @media (max-width: 900px) { .nav-header-grid { grid-template-columns: 1fr auto !important; } .nav-header-grid > .nav-spacer { display: none !important; } } `; const markLinkStyle = { position: 'absolute', left: 16, top: '50%', display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'var(--ink)', opacity: showMark ? 1 : 0, transform: showMark ? 'translateY(-50%)' : 'translateY(calc(-50% - 4px))', pointerEvents: showMark ? 'auto' : 'none', transition: 'opacity 0.4s ease, transform 0.4s ease', }; return (
{langOpen && (
{langs.map((l) => ( ))}
)}
Probeer gratis
); } // ── Phone frame ───────────────────────────────────────────── // Aspect ratio matcht moderne iPhones (iPhone 15/16 Pro: 393×852pt = 0.461). // Hoogte = breedte / 0.461, dus 305 × 661 ≈ correct. function PhoneFrame({ children, scale = 1, tilt = '0deg' }) { return (
{children}
); } // ── Mock: Today screen ────────────────────────────────────── // Toont een screenshot van de echte home_screen.dart i.p.v. een nagebouwde mock, // zodat de hero exact synchroon loopt met de werkelijke app-UI. // Screenshot moet content-only zijn (geen iOS status bar, geen device frame) — // PhoneFrame tekent zelf de notch en de buitenrand. function PhoneTodayScreen() { return (
Linary home screen
); } // ── Mock: Composer screen (writing in progress) ───────────── // Toont een screenshot van de echte editor_screen.dart i.p.v. een nagebouwde mock, // zodat de Meet-sectie exact synchroon loopt met de werkelijke app-UI. // Screenshot moet content-only zijn (geen iOS status bar, geen device frame) — // PhoneFrame tekent zelf de notch en de buitenrand. function PhoneComposerScreen() { return (
Linary editor screen
); } // ── Mock: Stats screen ────────────────────────────────────── function PhoneStatsScreen() { const days = [1, 2, 1, 0, 1, 1, 1, 2, 1, 1, 0, 1, 1, 1, 2, 0, 1, 1, 1, 2, 1, 0, 1, 1, 2, 1, 1, 0, 1, 1, 2]; return (
Mei 2026
Jouw maand
{[ { l: 'Entries', v: '38' }, { l: 'Streak', v: '14d' }, ].map((c, i) => (
{c.l}
{c.v}
))}
Activiteit
{days.map((v, i) => (
))}
Stemming
{[ { n: 'Rustig', v: 11, c: 'var(--clay)' }, { n: 'Blij', v: 9, c: 'var(--peach-deep)' }, { n: 'Moe', v: 6, c: 'var(--peach)' }, ].map((m, i) => (
{m.n} {m.v}×
))}
); } Object.assign(window, { LinaryMark, LinaryWordmark, Nav, PhoneFrame, PhoneTodayScreen, PhoneComposerScreen, PhoneStatsScreen, useReveal, Blob, BlobField, });