// Crianex Hub — Shared icons + small UI atoms const Icon = ({ name, size = 16, ...props }) => { const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }; const paths = { arrow: <>, arrowUp: <>, arrowDown: <>, plus: <>, minus: <>, check: , x: <>, search: <>, menu: <>, sparkle: <>, layers: <>, cube: <>, bolt: , bot: <>, radio: <>, dashboard: <>, users: <>, folder: , file: <>, settings: <>, bell: <>, chart: <>, pie: <>, monitor: <>, desktop: <>, tablet: <>, mobile: <>, lock: <>, eye: <>, mail: <>, linkedin: <>, github: , twitter: , pin: <>, play: , pause: <>, moreH: <>, moreV: <>, filter: , download: <>, headset: <>, cart: <>, whatsapp: <>, phone: , merge: <> }; return {paths[name] || null}; }; // Pixel-distortion image frame: a small mock used in product cards and screenshots // Renders a grid of colored cells that subtly drift on hover (CSS only) const PixelMock = ({ palette = ["#7f3fe5", "#e71f84", "#66df7a"], seed = 0, cols = 14, rows = 9 }) => { // Pseudo-random but deterministic const cells = []; let s = seed * 9301 + 49297; for (let i = 0; i < cols * rows; i++) { s = (s * 9301 + 49297) % 233280; const r = s / 233280; let bg; if (r < 0.55) bg = "transparent"; else if (r < 0.78) bg = palette[0] + "33"; else if (r < 0.9) bg = palette[1] + "33"; else bg = palette[2] + "44"; cells.push(bg); } return (
{cells.map((c, i) => (
))}
); }; // ─── Crianex logomark (from brand SVG) ────────────────── // Uses currentColor so it adapts to surface (light/dark). const LogoMark = ({ size = 28, style, ...rest }) => ( ); // On-dark variant — color follows surrounding text color; force a light tone if needed 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 ; }; // ─── Static animated grid for non-hero spaces (subtle tech texture) ─ const TechGrid = ({ color = "rgba(127, 63, 229, 0.18)" }) => { return (