// Vertical milestone timeline — the centerpiece const { useRef: useRefTL, useState: useStateTL, useEffect: useEffectTL } = React; function MilestoneCard({ m, idx, status, raised }) { const isLeft = idx % 2 === 0; const rowRef = useRefTL(null); const [shown, setShown] = useStateTL(false); useEffectTL(() => { if (!rowRef.current) return; const el = rowRef.current; const check = () => { const r = el.getBoundingClientRect(); if (r.top < window.innerHeight * 0.9) { setShown(true); return true; } return false; }; if (check()) return; const obs = new IntersectionObserver((es) => { es.forEach(e => { if (e.isIntersecting) { setShown(true); obs.disconnect(); } }); }, { threshold: 0.05, rootMargin: "0px 0px -10% 0px" }); obs.observe(el); // Fallback: show after 200ms regardless const t = setTimeout(() => setShown(true), 400); return () => { obs.disconnect(); clearTimeout(t); }; }, []); const animStyle = { opacity: shown ? 1 : 0, transform: shown ? "translateY(0)" : "translateY(24px)", transition: "opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1)", }; const statusLabel = { complete: { text: "Completed", color: "var(--moss-600)", dot: "var(--moss-500)" }, progress: { text: "In Progress", color: "var(--gold-500)", dot: "var(--gold-500)" }, locked: { text: "Upcoming", color: "rgba(47,51,29,0.5)", dot: "rgba(47,51,29,0.3)" }, }[status]; // compute progress within this phase let phasePct = 0; if (m.cumulative != null) { const prev = MILESTONES[idx - 1]; const prevCum = prev ? prev.cumulative : 0; phasePct = Math.max(0, Math.min(1, (raised - prevCum) / (m.cumulative - prevCum))); } return (
{/* Left cell */}
{/* corner phase number */}
{m.n}
{statusLabel.text}
Phase {m.n}

{m.title}

{m.goalLabel || formatMoney(m.goal, { compact: true })} {m.cumulative != null ? `to ${formatMoney(m.cumulative, { compact: true })} total` : "naming partnership"}

{m.blurb}

    {m.bullets.map((b, i) => (
  • {b}
    • ))}
{/* within-phase progress */} {m.cumulative != null && (
Phase progress {(phasePct * 100).toFixed(0)}%
)}
{/* Center node */}
{/* Opposite-side meta */}
Chapter {String(idx + 1).padStart(2, "0")}
{m.n}
{status === "progress" && (
We are here.
)}
); } function Timeline({ raised }) { const ref = useRefTL(null); const [fillPct, setFillPct] = useStateTL(0); // Spine fill tracks how many milestones have progress-or-complete based on raised useEffectTL(() => { const reached = MILESTONES.reduce((acc, m, i) => { const s = statusFor(m, raised); if (s === "complete") return i + 1; if (s === "progress") { const prev = MILESTONES[i - 1]; const prevCum = prev ? prev.cumulative : 0; const p = m.cumulative ? (raised - prevCum) / (m.cumulative - prevCum) : 0; return i + Math.max(0, Math.min(1, p)); } return acc; }, 0); setFillPct(Math.max(0, Math.min(1, reached / MILESTONES.length)) * 100); }, [raised]); return (
The Journey · Eight Phases

From a single seed
to a full academy.

Each chapter of New Eden unlocks when the community gives together. Follow the line — see where we are, and where we're going.

{/* spine */}
{/* Starting node */}
Today · {formatMoney(raised, { compact: true })} raised
{MILESTONES.map((m, i) => ( ))} {/* End node */}
The vision, complete.
); } Object.assign(window, { Timeline });