// HeroGraphic.jsx — four hero graphic options, switchable via tweaks function HeroGraphic({ variant }) { if (variant === 'monitor') return ; if (variant === 'dotring') return ; if (variant === 'flowloop') return ; return ; } // ── 1. Monitor with target + arrow + Align/Focus/Deliver/Learn pipeline ─────── function MonitorGraphic() { return (
{/* Monitor frame */} {/* Stand */} {/* Target (dartboard) */} {/* Arrow through target */} {/* Flow arrows with labels */} {['Align', 'Focus', 'Deliver', 'Learn'].map((label, i) => ( {label} ))}
); } // ── 2. Animated dot ring (echoing logo) with phase labels ───────────────────── function DotRingGraphic() { const [t, setT] = React.useState(0); React.useEffect(() => { let raf, start = performance.now(); const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); const dots = 28; const radius = 130; const cx = 200, cy = 200; const labels = [ { name: 'Align', angle: -Math.PI / 2, color: 'var(--brand-fern)' }, { name: 'Focus', angle: 0, color: 'var(--brand-ocean)' }, { name: 'Deliver', angle: Math.PI / 2, color: 'var(--brand-spruce)' }, { name: 'Learn', angle: Math.PI, color: 'var(--brand-cta)' }, ]; return (
{/* dots */} {Array.from({ length: dots }).map((_, i) => { const a = (i / dots) * Math.PI * 2 - Math.PI / 2; const phase = (i / dots + t * 0.15) % 1; const size = 4 + 5 * (0.5 + 0.5 * Math.sin(phase * Math.PI * 2)); const greenish = i < dots / 2; const col = greenish ? 'var(--brand-spruce)' : 'var(--brand-fern)'; return ( ); })} {/* labels on cardinals */} {labels.map((l, i) => { const x = cx + Math.cos(l.angle) * (radius + 52); const y = cy + Math.sin(l.angle) * (radius + 52); return ( {l.name} ); })} {/* center */} PPM4AGILE operating system
); } // ── 3. Horizontal flow loop: 4 stages connected with curved return ──────────── function FlowLoopGraphic() { const stages = [ { name: 'Align', sub: 'Portfolio', color: 'var(--brand-fern)' }, { name: 'Focus', sub: 'Planning', color: 'var(--brand-ocean)' }, { name: 'Deliver', sub: 'Execution', color: 'var(--brand-spruce)' }, { name: 'Learn', sub: 'Feedback', color: 'var(--brand-cta)' }, ]; return (
{/* return arc */} {stages.map((s, i) => { const x = 40 + i * 120; return ( {s.name} {s.sub} {i < 3 && ( )} ); })}
); } // ── 4. Placeholder ───────────────────────────────────────────────────────────── function PlaceholderGraphic() { return (
[ hero illustration ]
); } window.HeroGraphic = HeroGraphic;