{cells.map((c, i) => (

))}

); }; // ─── Crianex X logomark (matches uploaded asset) ──────── // 4 angled quadrants meeting near center, with brand colors const LogoMark = ({ size = 28, gap = 0, style, ...rest }) => ( ); // Inverted-on-dark variant: keeps brand colors but with black piece swapped to white const LogoMarkOnDark = ({ size = 28, style, ...rest }) => ( ); // Google G logo (SVG) const GoogleLogo = ({ size = 18 }) => ( ); // ─── Canvas particle field that resolves into the X logo ─ // Each particle has a target position inside one of the 4 polygons, // a brand color matching its quadrant, and a per-particle phase // for pulsing + drift. Mouse moves add subtle parallax/scatter. const LogoParticles = ({ density = 14, scatter = 1 }) => { const ref = React.useRef(null); const mouseRef = React.useRef({ x: 0, y: 0, active: false }); const stateRef = React.useRef({ scatter: scatter }); React.useEffect(() => { stateRef.current.scatter = scatter; }, [scatter]); React.useEffect(() => { const cnv = ref.current; if (!cnv) return; const ctx = cnv.getContext('2d'); let W = 0, H = 0; const DPR = Math.min(2, window.devicePixelRatio || 1); const polys = [ { color: '#e71f84', pts: [ [5, 5], [33, 5], [45, 37], [17, 37], ], }, { color: '#66df7a', pts: [ [57, 5], [85, 5], [73, 37], [45, 37], ], }, { color: '#060606', pts: [ [17, 43], [45, 43], [33, 75], [5, 75], ], }, { color: '#7f3fe5', pts: [ [45, 43], [73, 43], [85, 75], [57, 75], ], }, ]; const pointInPoly = (px, py, poly) => { let inside = false; for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) { const xi = poly[i][0], yi = poly[i][1]; const xj = poly[j][0], yj = poly[j][1]; if (yi > py !== yj > py && px < ((xj - xi) * (py - yi)) / (yj - yi) + xi) inside = !inside; } return inside; }; let particles = []; const build = () => { particles = []; // Logo region: centered, taking ~70% of canvas min-dimension const m = Math.min(W, H); const logoSize = m * 0.78; const logoW = logoSize, logoH = logoSize * (80 / 90); const x0 = (W - logoW) / 2, y0 = (H - logoH) / 2; const cell = Math.max(6, Math.floor(logoW / density / 3)); const cols = Math.floor(logoW / cell); const rows = Math.floor(logoH / cell); for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const u = (c + 0.5) / cols, v = (r + 0.5) / rows; const lx = u * 90, ly = v * 80; for (const poly of polys) { if (pointInPoly(lx, ly, poly.pts)) { const tx = x0 + c * cell + cell / 2; const ty = y0 + r * cell + cell / 2; const angle = Math.random() * Math.PI * 2; const dist = 60 + Math.random() * 200; particles.push({ tx, ty, x: tx + Math.cos(angle) * dist, y: ty + Math.sin(angle) * dist, vx: 0, vy: 0, color: poly.color, phase: Math.random() * Math.PI * 2, size: cell - 1.5, jx: (Math.random() - 0.5) * 2, jy: (Math.random() - 0.5) * 2, }); break; } } } } }; const resize = () => { const r = cnv.getBoundingClientRect(); W = r.width; H = r.height; cnv.width = W * DPR; cnv.height = H * DPR; ctx.setTransform(DPR, 0, 0, DPR, 0, 0); build(); }; resize(); const ro = new ResizeObserver(() => resize()); ro.observe(cnv); const onMove = (e) => { const r = cnv.getBoundingClientRect(); mouseRef.current = { x: (e.clientX - r.left) / r.width - 0.5, y: (e.clientY - r.top) / r.height - 0.5, active: true, }; }; const onLeave = () => { mouseRef.current.active = false; }; cnv.addEventListener('mousemove', onMove); cnv.addEventListener('mouseleave', onLeave); let t = 0, raf; const tick = () => { ctx.clearRect(0, 0, W, H); const m = mouseRef.current; const targetMx = m.active ? m.x : 0; const targetMy = m.active ? m.y : 0; const sc = stateRef.current.scatter || 1; for (const p of particles) { // ease toward target with slight noise const noiseX = Math.sin(t * 0.001 + p.phase) * 1.2; const noiseY = Math.cos(t * 0.0013 + p.phase * 1.3) * 1.2; const dx = p.tx + noiseX - p.x; const dy = p.ty + noiseY - p.y; p.vx = (p.vx + dx * 0.05) * 0.78; p.vy = (p.vy + dy * 0.05) * 0.78; p.x += p.vx; p.y += p.vy; // mouse parallax (gentle) const ox = -targetMx * 14 * p.jx; const oy = -targetMy * 14 * p.jy; // pulse const pulse = 0.55 + 0.45 * Math.sin(t * 0.0022 + p.phase); ctx.globalAlpha = pulse * 0.92; ctx.fillStyle = p.color; const s = p.size * (0.85 + pulse * 0.15); ctx.fillRect(p.x + ox - s / 2, p.y + oy - s / 2, s, s); } ctx.globalAlpha = 1; t += 16; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); ro.disconnect(); cnv.removeEventListener('mousemove', onMove); cnv.removeEventListener('mouseleave', onLeave); }; }, [density]); return