/* AUREN — Landing page part 2: how it works, use cases, token, roadmap, stats, CTA, footer + assembly */ const D2 = window.AURENData; /* ---------------- How it works ---------------- */ function HowItWorks() { const steps = [ { n: '01', icon: 'gpu', title: 'Connect capacity', desc: 'Providers onboard GPU clusters. Each node joins the mesh with unified addressing and live telemetry.' }, { n: '02', icon: 'route', title: 'Route workloads', desc: 'The routing engine matches inference and compute jobs to the lowest-latency, lowest-cost capacity in real time.' }, { n: '03', icon: 'scale', title: 'Scale autonomously', desc: 'Capacity expands and contracts against demand. Failover and balancing happen without operators.' }, { n: '04', icon: 'settle', title: 'Settle instantly', desc: 'Execution is metered and settled through Idle-powered rails. Providers earn automatically, per job.' }, ]; return (
{steps.map((s, i) => (
{s.n}

{s.title}

{s.desc}

 ))}
); } /* ---------------- Use cases ---------------- */ function UseCases() { const [active, setActive] = useState(0); const uc = D2.useCases; return (
{uc.map((u, i) => ( ))}
); } function UseCaseVisual({ idx }) { const ref = useThreeScene((c) => window.AURENThree.orbitNode(c), []); return ( <>
USE CASE {String(idx + 1).padStart(2, '0')}
{D2.useCases[idx].k}
); } /* ---------------- Token section + price chart ---------------- */ function PriceChart({ data, w = 560, h = 240 }) { const [hover, setHover] = useState(null); const pad = { l: 0, r: 0, t: 16, b: 16 }; const { pts, area, line, min, max } = useMemo(() => { const min = Math.min(...data), max = Math.max(...data); const rng = max - min || 1; const iw = w - pad.l - pad.r, ih = h - pad.t - pad.b; const pts = data.map((v, i) => [pad.l + (i / (data.length - 1)) * iw, pad.t + ih - ((v - min) / rng) * ih]); const line = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' '); const area = line + ` L${w - pad.r} ${h - pad.b} L${pad.l} ${h - pad.b} Z`; return { pts, area, line, min, max }; }, [data, w, h]); function onMove(e) { const r = e.currentTarget.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width * w; const idx = Math.round((x / w) * (data.length - 1)); if (idx >= 0 && idx < data.length) setHover({ idx, p: pts[idx] }); } return ( setHover(null)} preserveAspectRatio="none"> {[0.25, 0.5, 0.75].map(g => )} {hover && ( ${data[hover.idx].toFixed(3)} )} ); } function TokenSection() { const t = D2.tokenInfo; return (
AUREN / USDC
$ —.———
Pre-launch
{/* Coming-soon chart placeholder */}
{/* ghost gridlines */} {[0.25, 0.5, 0.75].map(g => )}
Live market data — Coming soon
Price, charts and on-chain metrics go live at the $AUREN token launch. Follow the roadmap for the listing date.
{['Market Cap', '24h Vol', 'Circulating', 'Total Supply'].map((k, i) => (
{k}
{i === 3 ? D2.fmt.compact(t.totalSupply) : 'TBA'}
))}
{D2.tokenUtility.map((u, i) => { const icons = ['staking', 'workloads', 'route', 'mesh', 'settle', 'governance']; return ( 0{i + 1}
{u.k}
{u.d}
 ); })}
); } /* ---------------- Roadmap ---------------- */ function Roadmap() { const colorFor = (s) => s === 'done' ? 'green' : s === 'active' ? 'cyan' : 'gray'; const labelFor = (s) => s === 'done' ? 'Shipped' : s === 'active' ? 'In progress' : 'Planned'; return (
{D2.roadmap.map((p, i) => (
{p.phase} {labelFor(p.status)}

{p.name}

{p.items.map((it, j) => (
{it}
))}
))}
); } /* ---------------- Live network band ---------------- */ function LiveBand() { const s = D2.networkStats; const items = [ { v: s.tps, label: 'Settlement TPS', dec: 0, suffix: '' }, { v: s.avgLatency, label: 'Avg latency (ms)', dec: 0 }, { v: s.utilization, label: 'Mesh utilization', dec: 1, suffix: '%' }, { v: s.uptime, label: 'Network uptime', dec: 3, suffix: '%' }, ]; return (
{items.map((it, i) => (
{it.label}
 ))}
); } function LiveNum({ v, dec, suffix = '' }) { const n = useCountUp(v, 2000, dec); return
{n.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec })}{suffix}
; } /* ---------------- CTA + Footer ---------------- */ function CTASection({ go }) { return (

Plug into the mesh

Onboard GPUs, route autonomous workloads, and settle compute instantly. The infrastructure layer for AI is open.

); } function Footer({ go }) { const cols = [ ['Product', ['Compute Mesh', 'GPU Coordination', 'Routing Engine', 'Settlement']], ['Network', ['Explorer', 'Nodes', 'Staking', 'Governance']], ['Resources', ['Docs', 'Guide', 'FAQ', 'Brand kit']], ['Protocol', ['Idle Protocol', 'Tokenomics', 'Audits', 'Security']], ]; return ( ); } /* ---------------- Assembled Landing ---------------- */ function Landing({ go }) { useEffect(() => { window.scrollTo(0, 0); }, []); return (
); } Object.assign(window, { HowItWorks, UseCases, TokenSection, PriceChart, Roadmap, LiveBand, CTASection, Footer, Landing });