/* global React */
// Hero RIGHT visual — Ajaia AI Training (editorial illustration)
// ─────────────────────────────────────────────────────────────────
// A single, simple SVG illustration that reads as a SERVICE — not
// a product mockup. Composition:
// · A glowing AI emblem (hexagon with internal knowledge graph)
// · Three cohort figures (silhouettes) arranged in a gentle arc
// beneath it, connected by thin "knowledge transfer" lines
// · A soft navy halo backdrop with the brand 18×18 squares accent
// · Small platform mini-badges (Claude, ChatGPT, Gemini, Copilot,
// GitHub Copilot) floating around the perimeter as accents —
// they communicate "all major AI platforms" without dominating.
// No fake UI, no fake numbers, no widgets. Just an illustration.
const { useEffect: useEffectHV } = React;
// ─── Platform glyphs (small, used as floating mini-badges) ─────────
const PlatformGlyph = {
Claude: ({ size = 22 }) => (
),
ChatGPT: ({ size = 22 }) => (
),
Gemini: ({ size = 22 }) => (
),
Copilot: ({ size = 22 }) => (
),
GitHub: ({ size = 22 }) => (
),
};
// ─── Platform mini-badge ───────────────────────────────────────────
// Small, restrained — a frosted disc with the platform glyph inside.
// Outer wrapper handles absolute positioning; inner wrapper carries
// the float animation. This separation prevents transform conflicts
// (e.g. when we need translateX(-50%) for centering).
function PlatformBadge({ GlyphCmp, label, wrapperStyle, delay = 0, floatClass = "float-1" }) {
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
const t = setTimeout(() => setShown(true), delay);
return () => clearTimeout(t);
}, [delay]);
return (
{label}
);
}
function TrainingVisual() {
return (
{/* Soft backdrop halo */}
{/* Illustration */}
{/* ─── Platform mini-badges (Claude, ChatGPT, Gemini, Copilot, GitHub) ─── */}
{/* Positioned around the illustration as accent — communicates the
multi-tool scope of Ajaia's training without overpowering the
illustration. */}