/* global React */ // Hero — Ajaia AI Training for Enterprises // · LEFT: copy + CTAs + enhanced stats strip // · RIGHT: central glowing network orb + small light-glass widgets // · Motion: orb breathes, edges & travelling packets pulse, widgets float gently. // No mouse parallax on widgets (user request). const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React; // ──────────────────────────────────────────────────────────────────── // Hook: dampened mouse parallax (used by the orb only) // ──────────────────────────────────────────────────────────────────── function useParallax() { const [target, setTarget] = useStateH({ x: 0, y: 0 }); const [value, setValue] = useStateH({ x: 0, y: 0 }); const reduced = useRefH(false); useEffectH(() => { reduced.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced.current) return; const onMove = (e) => { const w = window.innerWidth,h = window.innerHeight; setTarget({ x: (e.clientX / w - 0.5) * 2, y: (e.clientY / h - 0.5) * 2 }); }; window.addEventListener("mousemove", onMove, { passive: true }); return () => window.removeEventListener("mousemove", onMove); }, []); useEffectH(() => { if (reduced.current) return; let raf; const loop = () => { setValue((v) => ({ x: v.x + (target.x - v.x) * 0.08, y: v.y + (target.y - v.y) * 0.08 })); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, [target]); return value; } // ──────────────────────────────────────────────────────────────────── // Hook: count-up animation when element enters view // ──────────────────────────────────────────────────────────────────── function useCountTo(target, duration = 1600) { const ref = useRefH(null); const [val, setVal] = useStateH(0); useEffectH(() => { let raf,startedAt = 0,started = false; const io = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && !started) { started = true; const step = (t) => { if (!startedAt) startedAt = t; const p = Math.min(1, (t - startedAt) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(target * eased); if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); } }, { threshold: 0.4 }); if (ref.current) io.observe(ref.current); return () => {io.disconnect();cancelAnimationFrame(raf);}; }, [target, duration]); return [ref, val]; } // ──────────────────────────────────────────────────────────────────── // Central network-graph orb // ──────────────────────────────────────────────────────────────────── function NetworkOrb({ parallax }) { const nodes = [ { x: 130, y: 170, r: 8, active: false, delay: 0 }, { x: 130, y: 215, r: 8, active: false, delay: 0.3 }, { x: 130, y: 260, r: 8, active: false, delay: 0.6 }, { x: 175, y: 192, r: 8, active: false, delay: 0.9 }, { x: 175, y: 238, r: 8, active: false, delay: 1.2 }, { x: 230, y: 192, r: 16, active: true, delay: 0 }, { x: 230, y: 238, r: 16, active: true, delay: 0.6 }, { x: 285, y: 215, r: 10, active: true, delay: 1.0 }, { x: 290, y: 170, r: 7, active: false, delay: 1.5 }, { x: 290, y: 260, r: 7, active: false, delay: 1.8 }]; const edges = [ [0, 5], [1, 5], [2, 6], [3, 5], [3, 6], [4, 6], [5, 7], [6, 7], [5, 8], [6, 9], [7, 8], [7, 9]]; const ox = parallax.x * 6; const oy = parallax.y * 6; return (
{edges.map(([a, b], i) => )} {/* Traveling glow packets along edges */} {edges.map(([a, b], i) => { const nA = nodes[a],nB = nodes[b]; const delay = i * 0.45 % 3.6; const dur = 2.4 + i % 3 * 0.4; return ( ); })} {nodes.map((n, i) => {n.active ? <> : } )} {/* Decorative outline triangles */}
); } // ──────────────────────────────────────────────────────────────────── // Floating widget shell — light glassmorphic. NO mouse parallax. // ──────────────────────────────────────────────────────────────────── function FloatWidget({ style, delay = 0, floatClass = "float-1", children }) { return (
{children}
); } // ──────────────────────────────────────────────────────────────────── // Widget contents — smaller, light glass styles // ──────────────────────────────────────────────────────────────────── function LiveWorkshopWidget() { const avatars = [ { bg: "#3B6DF5", initial: "S" }, { bg: "#5683FF", initial: "M" }, { bg: "#1E3FCE", initial: "K" }]; return (
Learners online
327
{avatars.map((a, i) =>
{a.initial}
)}
+12
Live in Claude for Ops
); } function AdoptionWidget() { const bars = [9, 12, 10, 15, 19, 23, 28]; return (
Weekly adoption
+38%
vs. last
{bars.map((h, i) =>
)}
); } function LiteracyScoreWidget() { return (
Module check
TRACK-02
12
/ 12
cleared
); } function ModuleChipWidget() { return (
Module 04 · Done
); } // ──────────────────────────────────────────────────────────────────── // Enhanced stats strip — dividers, count-up, mini accents // ──────────────────────────────────────────────────────────────────── function StatCell({ value, suffix, label, accent, isLast, stars = false }) { // value is the formatted final string (e.g. "25k", "4.8"); we drive count-up // by parsing the numeric portion and re-formatting per cell. const parsed = parseFloat(String(value).replace(/[^0-9.]/g, "")); const isFloat = String(value).includes("."); const isK = String(value).toLowerCase().includes("k"); const [ref, current] = useCountTo(parsed, 1500); const display = isFloat ? current.toFixed(1) : isK ? Math.round(current) + "k" : Math.round(current).toString(); return (
{/* Accent dot */}
{label}
{/* Number */}
{display} {suffix}
{/* Mini sparkline OR star row */} {stars ? : }
); } // Star rating renderer — 5 stars filled to a target value (e.g. 4.8) function StarRow({ value = 4.8, size = 13, color = "#FFC857" }) { const pct = Math.max(0, Math.min(1, value / 5)); return (
{/* Base outline row */}
{[0, 1, 2, 3, 4].map((i) => )}
{/* Filled row clipped to pct */}
{[0, 1, 2, 3, 4].map((i) => )}
); } function StatsStrip() { const stats = [ { value: "25k", suffix: "+", label: "Employees Trained", accent: "#97C2F8" }, { value: "100", suffix: "+", label: "Enterprises Supported", accent: "#5683FF" }, { value: "4.8", suffix: "", label: "Avg. Feedback", accent: "#FFC857", stars: true }]; return (
{/* Subtle inner accent strip */}
{stats.map((s, i) => )}
); } // ──────────────────────────────────────────────────────────────────── // HERO // ──────────────────────────────────────────────────────────────────── function Hero() { return (
{/* LEFT — Copy + CTAs + stats */}
AI training & workforce enablement

AI Training for Enterprises

Build enterprise-wide AI training programs for Claude, ChatGPT Enterprise, Microsoft Copilot, Gemini, GitHub Copilot, and internal tools — with role-based labs, governance, and adoption support that turns access into capability.

{ e.preventDefault(); const f = e.currentTarget; const email = f.elements.email.value.trim(); if (!email) return; // For now: route to mail compose with the work email prefilled. window.location.href = `mailto:contact@ajaia.ai?subject=Enterprise%20AI%20training%20enquiry&body=Work%20email%3A%20${encodeURIComponent(email)}%0D%0A%0D%0AI%27d%20like%20to%20talk%20about%20enterprise%20AI%20training%20for%20my%20team.`; }} style={{ marginTop: 36, display: "flex", alignItems: "stretch", gap: 0, maxWidth: 560, background: "linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%)", border: "1px solid rgba(255,255,255,0.22)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)", boxShadow: "0 18px 40px -18px rgba(0,12,55,0.55), inset 0 1px 0 rgba(255,255,255,0.10)", padding: 6, position: "relative", }}>
{/* RIGHT — Training console with the AI platform stack orbiting in */}
); } Object.assign(window, { Hero });