// ============================================================ // DEMIURGE — LANDING HERO // "Deploy Your Digital Workforce." // ============================================================ const HeroOrbital = () => (
{/* Outermost iridescent halo glow */} {/* OUTER BRASS RING — slow rotation */} {Array.from({length: 60}).map((_, i) => { const a = (i * 6) * Math.PI / 180; const r1 = i % 5 === 0 ? 248 : 256; const r2 = 262; const x1 = 300 + Math.cos(a) * r1, y1 = 300 + Math.sin(a) * r1; const x2 = 300 + Math.cos(a) * r2, y2 = 300 + Math.sin(a) * r2; return ; })} {['N', 'E', 'S', 'W'].map((label, i) => { const a = (i * 90 - 90) * Math.PI / 180; const x = 300 + Math.cos(a) * 238, y = 300 + Math.sin(a) * 238; return {label}; })} {[['00°', 0], ['072°', 72], ['144°', 144], ['216°', 216], ['288°', 288]].map(([t, deg], i) => { const a = (deg - 90) * Math.PI / 180; const x = 300 + Math.cos(a) * 280, y = 300 + Math.sin(a) * 280; return {t}; })} {/* CHROME MIDDLE RING — counter-rotation */} {Array.from({length: 8}).map((_, i) => { const startAngle = (i * 45) * Math.PI / 180; const endAngle = ((i * 45) + 38) * Math.PI / 180; const r = 192; const x1 = 300 + Math.cos(startAngle) * r, y1 = 300 + Math.sin(startAngle) * r; const x2 = 300 + Math.cos(endAngle) * r, y2 = 300 + Math.sin(endAngle) * r; return ; })} {[0, 60, 120, 180, 240, 300].map((deg, i) => { const a = (deg - 90) * Math.PI / 180; const x = 300 + Math.cos(a) * 200, y = 300 + Math.sin(a) * 200; return ( ); })} {/* INNER BRASS RING with text */} DEMIURGE · SYSTEMS · v.II ··· DIGITAL · WORKFORCE · DEPLOYED ··· INTAKE · COHORT · 014 ··· {Array.from({length: 24}).map((_, i) => { const a = (i * 15) * Math.PI / 180; const x1 = 300 + Math.cos(a) * 140, y1 = 300 + Math.sin(a) * 140; const x2 = 300 + Math.cos(a) * 148, y2 = 300 + Math.sin(a) * 148; return ; })} {/* Stationary inner crosshair */} {/* Glowing core orb */} {/* Floating operator labels around the orbit — represents the live agents */} {[ { a: 28, label: 'ATLAS · 12' }, { a: 92, label: 'HERMES · 04' }, { a: 162, label: 'CALLIOPE · 07' }, { a: 232, label: 'VESTA · 09' }, { a: 302, label: 'ORION · 03' } ].map(({ a, label }, i) => { const rad = (a - 90) * Math.PI / 180; const x = 300 + Math.cos(rad) * 230, y = 300 + Math.sin(rad) * 230; return ( 0 ? 8 : -8)} y={y + 3} fill="#4be8ff" fontSize="7.5" fontFamily="Geist Mono" letterSpacing="1.4" opacity="0.85" textAnchor={Math.cos(rad) > 0 ? 'start' : 'end'}>{label} ); })}
); const HeroReadouts = () => { const [time, setTime] = React.useState(() => new Date()); React.useEffect(() => { const t = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(t); }, []); const fmt = (n) => String(n).padStart(2, '0'); return (
UTC{fmt(time.getUTCHours())}:{fmt(time.getUTCMinutes())}:{fmt(time.getUTCSeconds())}
Latency38 ms
Throughput14,802 /s
Confidence99.42 %
Cohort014 / Q2-26
); }; // Live-ticking number — gives the metric capsules a heartbeat const TickingNumber = ({ base, range, decimals = 0, prefix = '', suffix = '' }) => { const [val, setVal] = React.useState(base); React.useEffect(() => { const t = setInterval(() => { setVal(b => { const delta = (Math.random() - 0.3) * range; const next = Math.max(base * 0.95, b + delta); return next; }); }, 2200); return () => clearInterval(t); }, [base, range]); const formatted = decimals === 0 ? Math.round(val).toLocaleString() : val.toFixed(decimals); return {prefix}{formatted}{suffix}; }; const HeroMetricCapsules = () => { const caps = [ { lbl: 'Meetings booked / 30d', v: , hue: 'cy', sub: 'across all operators' }, { lbl: 'Influenced pipeline', v: £M, hue: 'brass', sub: 'live, 90-day window' }, { lbl: 'Trial → client', v: 87%, hue: 'ok', sub: 'measured at 14 days' }, { lbl: 'Autonomous operators', v: 8 / live, hue: 'cy', sub: 'tuned per deployment' } ]; return (
{caps.map((c, i) => (
{c.lbl}
{c.v}
{c.sub}
))}
); }; const HeroTicker = () => { const items = [ { sym: 'ATLAS', d: '41 meetings booked today', dir: 'up' }, { sym: 'HERMES', d: '2,847 calls handled · avg 22.4s pickup', dir: 'up' }, { sym: 'CALLIOPE', d: '184 assets shipped · 4 channels', dir: 'up' }, { sym: 'VESTA', d: '12,402 leads scored · ICP fit 92%', dir: 'up' }, { sym: 'ORION', d: 'ROAS 6.2x · CPM -34% · auto-scaling', dir: 'up' }, { sym: 'IRIS', d: 'CSAT 4.91 / 5 · deflection 96%', dir: 'up' }, { sym: 'NET', d: '£487M processed · 30d · 99.97% SLA', dir: 'up' }, { sym: 'INTAKE', d: 'Cohort 014 · 47 of 200 seats remain', dir: 'dn' } ]; return (
{[...items, ...items, ...items].map((it, i) => ( {it.sym} · {it.d} {it.dir === 'up' ? '▲' : '▼'} ))}
); }; const LandingHero = () => (
DMG-OS · v.II / Intake · Cohort 014 / System Online

Deploy your digital{" "} workforce.

Autonomous operators that acquire customers, book meetings, run campaigns, answer calls, and scale your business — without adding headcount.

Trusted operator systems for clinics · law firms · property · trades · recruitment · agencies
Limited onboarding slots each month — Cohort 014 · 47 of 200 seats remaining
OPERATOR · NEXUS
LIVE TELEMETRY
5 OPERATORS · ORBIT-SYNC
RENDER · 60fps
); window.LandingHero = LandingHero;