// Shared site components: Nav, Footer, Logo, HelixRibbon, ThemeBadge. // Every page imports this file and uses these directly. const { useEffect, useRef } = React; // Theme colors for animations const THEME_COLOR_LIST = ['#2ea043', '#1f6feb', '#f59e0b', '#db2777', '#8250df']; // ──────────────────────────────────────────────────────────── // Logo — Binary helix leaf (Logo B from exploration) // ──────────────────────────────────────────────────────────── function Logo({ size = 44 }) { return ( ); } // ──────────────────────────────────────────────────────────── // Helix ribbon — animated canvas for hero // ──────────────────────────────────────────────────────────── function HelixRibbon() { const ref = useRef(null); useEffect(() => { const c = ref.current; if (!c) return; const ctx = c.getContext('2d'); let raf, t = 0, alive = true; const resize = () => { const r = c.getBoundingClientRect(); c.width = r.width * devicePixelRatio; c.height = r.height * devicePixelRatio; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.scale(devicePixelRatio, devicePixelRatio); }; resize(); const draw = () => { if (!alive) return; const { width: W, height: H } = c.getBoundingClientRect(); ctx.clearRect(0, 0, W, H); const cy = H * 0.55, amp = H * 0.22; THEME_COLOR_LIST.forEach((color, i) => { ctx.beginPath(); ctx.lineWidth = 1.5; ctx.strokeStyle = color + '55'; for (let x = 0; x <= W; x += 4) { const phase = t * 0.0006 + i * 0.9; const y = cy + Math.sin(x * 0.005 + phase) * amp * (1 - i * 0.12); if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); }); t += 16; raf = requestAnimationFrame(draw); }; draw(); window.addEventListener('resize', resize); return () => { alive = false; cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, []); return