// ============================================ // BELERATE — Main App // ============================================ const { useState, useEffect, useRef, useCallback, Fragment } = React; // ---------- Magnetic Button wrapper (disabled per feedback) ---------- function Magnetic({ children }) { return <>{children}; } // ---------- Scroll Reveal ---------- function useReveal(loaded, lang) { useEffect(() => { if (!loaded) return; document.documentElement.classList.add('js-reveal-ready'); const check = () => { const vh = window.innerHeight; document.querySelectorAll('.reveal:not(.in), .reveal-stagger:not(.in), .split-reveal:not(.in)').forEach(el => { const r = el.getBoundingClientRect(); // Trigger when top is within 1.2× viewport (pre-trigger just below fold) if (r.top < vh * 1.2 && r.bottom > -200) el.classList.add('in'); }); }; // Initial pass — reveal everything near or above viewport check(); // Run a few times in case layout shifts from fonts/images const timers = [50, 200, 500, 1000].map(d => setTimeout(check, d)); let rafId; const onScroll = () => { if (rafId) return; rafId = requestAnimationFrame(() => { rafId = 0; check(); }); }; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); timers.forEach(clearTimeout); }; }, [loaded, lang]); } // ---------- Counter animation ---------- function Counter({ to, duration = 1800, suffix = '' }) { const [val, setVal] = useState(0); const ref = useRef(null); const started = useRef(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { if (entries[0].isIntersecting && !started.current) { started.current = true; const start = performance.now(); const step = (t) => { const p = Math.min((t - start) / duration, 1); const eased = 1 - Math.pow(1 - p, 3); setVal(Math.round(to * eased)); if (p < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); io.disconnect(); } }, { threshold: 0.5 }); io.observe(el); return () => io.disconnect(); }, [to, duration]); return {val}{suffix}; } // ---------- Loader ---------- function Loader({ done }) { return (
Belerate
Belerate / Studio
); } // ---------- Nav ---------- function Nav({ lang, setLang, t }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } // ---------- Hero ---------- function Hero({ t, lang }) { const [time, setTime] = useState(''); useEffect(() => { const update = () => { const d = new Date(); const h = d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Berlin' }); setTime(h + ' MUC'); }; update(); const id = setInterval(update, 30000); return () => clearInterval(id); }, []); return (
{t.hero.status}
{t.hero.location} {time}

{lang === 'de' ? ( <>Websites, die verkaufen.
Nicht nur gefallen. ) : ( <>Websites that sell.
Not just look nice. )}

{t.hero.lead}

{t.hero.cta1} {t.hero.cta2}
{t.hero.scroll}
); } // ---------- Marquee ---------- function Marquee({ items }) { const track = (
{items.map((item, i) =>
{item}
)}
); return (
{track} {track} {track}
); } // ---------- Section Head ---------- function SectionHead({ label, title, intro }) { return (
{label}

{title}

{intro &&

{intro}

}
); } // ---------- Services ---------- function Services({ t }) { return (
{t.services.items.map((s, i) => (
/{s.num}

{s.title}

{s.desc}

{s.tags.map((tag, j) => {tag})}
))}
); } // ---------- Cases ---------- function Cases({ t }) { return (
{t.cases.items.map((c, i) => { if (c.isNew) { return (
+
Your project / 2026

{c.title}

{c.sub}
{c.year}
 ); } const cls = 'case reveal' + (c.wide ? ' case--wide' : c.tall ? ' case--tall' : ''); return (
{c.title}
{(c.url || '').replace(/^https?:\/\//, '').replace(/\/$/, '')}
{t.cases.viewCase}

{c.title}

{c.sub}
{c.tags.map((tag, j) => {tag})}
{c.year}
 ); })}
); } // ---------- Process ---------- function Process({ t }) { return (
{t.process.steps.map((s, i) => (
{s.num}

{s.title}

{s.desc}

{s.scope} {s.duration}
))}
); } // ---------- FAQ ---------- function FAQ({ t }) { const [open, setOpen] = useState(0); return (
{t.faq.items.map((item, i) => (
setOpen(open === i ? -1 : i)}>
{item.q}
+
{item.a}
))}
); } // ---------- CTA ---------- function CTA({ t }) { const [email, setEmail] = useState(''); const [sent, setSent] = useState(false); return (
— {t.cta.label} —

{t.cta.headline}

{t.cta.sub}

{t.cta.book}
{t.cta.status1} {t.cta.status2}
); } // ---------- Footer ---------- function Footer({ t }) { return ( ); } // ---------- Tweaks Panel ---------- function Tweaks({ active, settings, setSettings }) { if (!active) return null; const setTheme = (v) => { setSettings({ ...settings, theme: v }); window.parent.postMessage({type:'__edit_mode_set_keys', edits:{theme: v}}, '*'); }; const setTypo = (v) => { setSettings({ ...settings, typo: v }); window.parent.postMessage({type:'__edit_mode_set_keys', edits:{typo: v}}, '*'); }; const setGrain = (v) => { setSettings({ ...settings, grain: v }); window.parent.postMessage({type:'__edit_mode_set_keys', edits:{grain: v}}, '*'); }; return (

Tweaks

Theme
setTheme('green')}/>
setTheme('cream')}/>
setTheme('black')}/>
Display Type
Grain Texture
); } // ---------- App ---------- function App({ defaults }) { const [lang, setLang] = useState(() => localStorage.getItem('belerate-lang') || 'de'); const [loaded, setLoaded] = useState(false); const [settings, setSettings] = useState(defaults); const [tweakActive, setTweakActive] = useState(false); useEffect(() => { localStorage.setItem('belerate-lang', lang); }, [lang]); useEffect(() => { const timer = setTimeout(() => setLoaded(true), 1800); return () => clearTimeout(timer); }, []); useEffect(() => { document.documentElement.setAttribute('data-theme', settings.theme); document.documentElement.setAttribute('data-typo', settings.typo); document.body.classList.toggle('grain', settings.grain); }, [settings]); useEffect(() => { const handle = (e) => { if (e.data?.type === '__activate_edit_mode') setTweakActive(true); if (e.data?.type === '__deactivate_edit_mode') setTweakActive(false); }; window.addEventListener('message', handle); window.parent.postMessage({type: '__edit_mode_available'}, '*'); return () => window.removeEventListener('message', handle); }, []); useReveal(loaded, lang); const t = CONTENT[lang]; return ( <>