/* global React, useT, SectionLabel, Badge, Logo, Icon, ThemeToggle, LangToggle, InstallSnippet, Terminal, FeatureCard */ const { useState } = React; // ───────────────────────────────────────────────────────────────────────────── // Header (sticky, top of page) // ───────────────────────────────────────────────────────────────────────────── function Header({ theme, onThemeChange, lang, onLangChange }) { const t = useT(); return (
roll {t.HERO.version}
); } // ───────────────────────────────────────────────────────────────────────────── // Hero // ───────────────────────────────────────────────────────────────────────────── function Hero({ animate = true }) { const t = useT(); const h = t.HERO; return (
{t.UI.cycleStatus}

{h.tagline} {h.sub2}

{h.sub}

{h.ctas.map((c) => ( {c.label} ))}
    {h.meta.map((m) =>
  • {m}
    • )}
~/projects/roll · {t.UI.heroCaption}
); } // ───────────────────────────────────────────────────────────────────────────── // Why Roll // ───────────────────────────────────────────────────────────────────────────── function Why() { const t = useT(); const w = t.WHY; return (
{w.label}

{w.title}

{w.sub}

{w.cards.map((c) => (

{c.title}

{c.body}

))}
“ {w.quote}
); } // ───────────────────────────────────────────────────────────────────────────── // How It Works — three layers // ───────────────────────────────────────────────────────────────────────────── function How() { const t = useT(); const h = t.HOW; return (
{h.label}

{h.title}

{h.sub}

{h.layers.map((l, i) => (
L{i + 1}
{l.name}
{l.sub}

{l.body}

    {l.owns.map((o) =>
  • {o}
    • )}
))}
); } // ───────────────────────────────────────────────────────────────────────────── // Features — grouped grid with sticky group nav // ───────────────────────────────────────────────────────────────────────────── function Features() { const t = useT(); const head = t.FEATURES_HEADING; const groups = t.FEATURE_GROUPS; const [active, setActive] = useState(groups[0].id); const onJump = (id) => { setActive(id); const el = document.getElementById(`fg-${id}`); if (el) { const offset = 92; window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - offset, behavior: "smooth" }); } }; return (
{head.label}

{head.title}

{head.sub}{" "} · {t.UI.tagsLegend}:{" "} {" "}{" "}

{groups.map((g) => (

{g.title}

{g.blurb}
{g.features.map((f) => ( ))}
))}
); } // ───────────────────────────────────────────────────────────────────────────── // Journey — six-step timeline // ───────────────────────────────────────────────────────────────────────────── function Journey() { const t = useT(); const j = t.JOURNEY; return (
{j.label}

{j.title}

{j.sub}

    {j.steps.map((s, i) => (
  1. {s.time} {s.tag}
    {i < j.steps.length - 1 && }

    {s.title}

    {s.body}

    2. ))}
); } // ───────────────────────────────────────────────────────────────────────────── // Numbers // ───────────────────────────────────────────────────────────────────────────── function Numbers() { const t = useT(); const n = t.NUMBERS; return (
{n.label}
{n.stats.map((s) => (
{s.value}
{s.label}
))}
); } // ───────────────────────────────────────────────────────────────────────────── // Guides — doc tiles // ───────────────────────────────────────────────────────────────────────────── function Guides() { const t = useT(); const g = t.GUIDES; const glyphs = ["book", "cycle", "moon", "swap", "list", "gear"]; return (
{g.label}

{g.title}

{g.sub}

{g.tiles.map((tile, i) => ( {tile.name} {tile.desc} ))}
); } // ───────────────────────────────────────────────────────────────────────────── // Footer // ───────────────────────────────────────────────────────────────────────────── function Footer() { const t = useT(); return ( ); } Object.assign(window, { Header, Hero, Why, How, Features, Journey, Numbers, Guides, Footer });