// Variation 1: Orbit - big headline, floating pastel widgets, bento features // With hero entrance animation, floating drift, and scroll-reveal sections. const { useEffect: useEffectVO, useRef: useRefVO } = React; // Hook: reveal element when it scrolls into view function useReveal() { const ref = useRefVO(null); useEffectVO(() => { const el = ref.current; if (!el) return; if (typeof IntersectionObserver === "undefined") { el.classList.add("is-in"); return; } const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }); io.observe(el); return () => io.disconnect(); }, []); return ref; } function Reveal({ as: Tag = "div", className = "", stagger = false, children, ...rest }) { const ref = useReveal(); const cls = (stagger ? "vo-reveal-stagger " : "vo-reveal ") + className; return {children}; } function SeamlessTextLoop({ texts, interval = 3000 }) { const [index, setIndex] = React.useState(0); React.useEffect(() => { const timer = setInterval(() => { setIndex(prev => (prev + 1) % texts.length); }, interval); return () => clearInterval(timer); }, [texts.length, interval]); return ( {texts.map((text, i) => { const isActive = i === index; const isPrev = i === (index - 1 + texts.length) % texts.length; let yPos = "150%"; if (isActive) yPos = "0%"; else if (isPrev) yPos = "-150%"; const words = text.split(" "); return ( {words.map((word, wIdx) => { const delay = wIdx * 0.05; return ( {word} ); })} ); })} ); } function OrbitVariant({ t, onJoin, joinState, waitlistCount }) { return ( <> {/* HERO */}
{t.hero_eyebrow}

{t.hero_title_1}

{t.hero_sub}

{waitlistCount.toLocaleString("en-US")} {t.waitlist_count}
{/* BENTO FEATURES */}
{t.section_features_eyebrow}

{t.section_features_title}

{t.section_features_sub}

 {/* 01 · Timers - big tile */}
01 · Timers

{t.f1_title}

{t.f1_body}

{/* 02 · Invoices */}
02 · Invoicing

{t.f2_title}

{t.f2_body}

{/* 03 · Projects & tasks calendar */}
03 · Projects

{t.f3_title}

{t.f3_body}

{/* 04 · Analytics */}
04 · Analytics

{t.f4_title}

{t.f4_body}

{/* 05 · App detection */}
05 · Detection

{t.f5_title}

{t.f5_body}

{/* 06 · AFK reclaim - FULL ROW */}
06 · Time reclaim

{t.f6_title}

{t.f6_body}
{/* HOW IT WORKS */}
{t.how_eyebrow}

{t.how_title}
STEP 01
{t.step1_title}
{t.step1_body}
{["rose","butter","mint","sky","lavender"].map(c => (
))}
STEP 02
{t.step2_title}
{t.step2_body}
00:42:18
STEP 03
{t.step3_title}
{t.step3_body}
{/* FOCUS GUARDRAILS */}
{t.focus_eyebrow}

{t.focus_title}

{t.focus_body}

● {t.focus_tag1} ● {t.focus_tag2} ● {t.focus_tag3}
{/* FINAL CTA */}

{t.final_title_1 ? ( <>{t.final_title_1} {t.final_title_accent} ) : ( t.final_title )}

{t.final_sub}
); } window.OrbitVariant = OrbitVariant;