// Hi-fi shared primitives — Evveland Direction A const { useState, useEffect, useRef } = React; function LogoMark({ size = 32 }) { // Isometric hexagon wireframe with nodes — redrawn in gold/violet palette. // Hex is drawn with lines connecting 6 outer vertices + a center node; gold primary, violet secondary. return ( {/* Hexagon edges */} {/* Internal "Y" linking to center */} {/* Nodes */} {[[24,4],[42,14],[42,34],[24,44],[6,34],[6,14],[24,24]].map(([cx,cy],i) => ( ))} ); } function Wordmark({ height = 22 }) { // Stencil-style wordmark "EVVELAND" — gold→violet gradient, consistent E and closing bracket D const w = height * 7.2; return ( EVVELAND ); } function Logo({ onClick }) { return ( { e.preventDefault(); onClick && onClick(); }} style={{ gap: 12 }}> ); } function Nav({ page, setPage }) { const t = useT(); const links = [ ['home', 'nav.home'], ['create', 'nav.create'], ['work', 'nav.work'], ['services', 'nav.services'], ['contact', 'nav.contact'], ['blog', 'nav.blog'], ]; const [mobileOpen, setMobileOpen] = useState(false); // Lock scroll while mobile drawer is open useEffect(() => { if (mobileOpen) { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; } }, [mobileOpen]); // Close drawer when page changes useEffect(() => { setMobileOpen(false); }, [page]); return ( ); } // Breadcrumbs — shown at top of internal pages const PAGE_TITLES = { home: 'Home', create: 'GrowthPad', work: 'Work', services: 'Services', about: 'About', contact: 'Contact', blog: 'Blog', post: 'Post', }; function Breadcrumbs({ setPage, items = [], current }) { const t = useT(); // items: optional array of [label, pageKey] for intermediate crumbs (e.g. Blog → Post) return ( ); } // Cartridge card function Cartridge({ color = 'var(--accent)', tag, tagClass = 'tag', title, subtitle, meta = [], screen, href, compact }) { return (
MINIAPP /{meta[0] || 'live'} {tag}
{screen}

{title}

{subtitle}
{meta.slice(1).map((m) => {m}).reduce((acc, el, i) => i === 0 ? [el] : [...acc, ·, el], [])}
OPEN →
); } // Miniapp phone screen — real screenshot inside phone frame function PhoneShot({ src, alt }) { return (
{alt}
); } function IncaverseScreen() { return ; } function IncaverseHeroScreen() { return ; } function ChipsyScreen() { return ; } function PlumpScreen() { return ; } function SpinScreen() { return (
SPIN THE WHEEL
COMING SOON
SPIN
NOTIFY ME
); } function Metric({ num, label, sub, gold }) { return (
{num}
{label}
{sub &&
{sub}
}
); } function Ticker({ items }) { const row = items.map((t, i) => ( {t} )); return (
{row}{row}{row}
); } function Reveal({ children, delay = 0, style, className = '' }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; let done = false; const markIn = () => { if (!done) { done = true; el.classList.add('in'); } }; // Always schedule a guaranteed reveal after delay + 500ms const fallback = setTimeout(markIn, delay + 500); // Also try IntersectionObserver for a nicer staggered effect when scrolled into view try { const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setTimeout(markIn, delay); io.disconnect(); } }, { threshold: 0.05 }); io.observe(el); return () => { io.disconnect(); clearTimeout(fallback); }; } catch (e) { return () => clearTimeout(fallback); } }, [delay]); return
{children}
; } function Footer({ setPage }) { const t = useT(); const siteLinks = [ ['home', 'nav.home'], ['create', 'nav.create'], ['work', 'nav.work'], ['services', 'nav.services'], ['about', 'nav.about'], ['contact', 'nav.contact'], ['blog', 'nav.blog'], ]; return ( ); } Object.assign(window, { Logo, LogoMark, Nav, Breadcrumbs, Cartridge, Metric, Ticker, Reveal, Footer, IncaverseScreen, IncaverseHeroScreen, ChipsyScreen, PlumpScreen, SpinScreen, });