// Hero — animated orbital diagram + nav const { useState, useEffect, useRef, useCallback } = React; // Global IntersectionObserver reveal — exposed for all sections function useReveal(rootMargin = '0px 0px -80px 0px') { useEffect(() => { const els = document.querySelectorAll('.reveal, .reveal-up, .reveal-scale'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { rootMargin, threshold: 0.05 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); // run once after full render } Object.assign(window, { useReveal }); function Nav() { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); const items = ['Platform', 'Hubs', 'Sectors', 'Insights', 'Company']; return ( <>
24 Hubs 24 Hubs™ {/* Desktop nav */}
Sign in Book a review → {/* Hamburger */}
{/* Mobile nav overlay */} ); } // Orbital hub visual — concentric rings with rotating nodes connecting to legacy system tiles function HeroVisual() { const ref = useRef(null); const [t, setT] = useState(0); useEffect(() => { let raf; const start = performance.now(); const tick = () => { setT((performance.now() - start) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const cx = 280, cy = 280; const rings = [80, 130, 190, 250]; const nodes = [ { ring: 0, count: 4, speed: 0.18, phase: 0, size: 8 }, { ring: 1, count: 6, speed: -0.12, phase: 0.3, size: 6 }, { ring: 2, count: 8, speed: 0.08, phase: 0.6, size: 5 }, { ring: 3, count: 12, speed: -0.05, phase: 0.9, size: 4 }, ]; // Legacy system labels positioned around the orbit const legacyTags = [ { x: 36, y: 80, label: 'SAP' }, { x: 470, y: 60, label: 'ORACLE' }, { x: 510, y: 220, label: 'Salesforce' }, { x: 480, y: 420, label: 'Workday' }, { x: 60, y: 440, label: 'Mainframe' }, { x: 18, y: 240, label: 'AS/400' }, ]; return (
{/* glow */} {/* concentric rings */} {rings.map((r, i) => ( ))} {/* connector spokes between core node and outer tags */} {legacyTags.map((tag, i) => { const angle = Math.atan2(tag.y + 20 - cy, tag.x + 30 - cx); const x1 = cx + Math.cos(angle) * 80; const y1 = cy + Math.sin(angle) * 80; const x2 = cx + Math.cos(angle) * 250; const y2 = cy + Math.sin(angle) * 250; return ( ); })} {/* orbiting nodes */} {nodes.flatMap((n, ni) => Array.from({ length: n.count }, (_, i) => { const a = (i / n.count) * Math.PI * 2 + n.phase + t * n.speed; const x = cx + Math.cos(a) * rings[n.ring]; const y = cy + Math.sin(a) * rings[n.ring]; const isAccent = (ni + i) % 5 === 0; return ( ); }) )} {/* core */} 24 {/* legacy tags */} {legacyTags.map((tag, i) => (
{tag.label}
))} {/* status chip */}
24 hubs · live · uk → west africa
); } function Hero({ headline, sub }) { return (
{/* Mesh gradient background */}
); } Object.assign(window, { Nav, Hero, HeroVisual });