// Card components used across the marketing site. const { useState: useState_C } = React; function CategoryMotif({ motif, active, icon, accent }) { const color = active ? 'var(--sa-yellow-mid)' : 'var(--sa-purple)'; if (motif === 'sparkle') return ; if (motif === 'pinwheel') return ; if (motif === 'burst') return ; return ( ); } // ── ValueCard — used on Home + About "What We Stand For" ─────────── function ValueCard({ icon, title, body }) { return (

{title}

{body}

); } // ── PrincipleCard — used in About "Built On Principles" ───────── function PrincipleCard({ icon, title, body, active = false, onHover, onLeave }) { return (

{title}

{body}

); } // ── StepCard — for the "How It Works" purple cards on yellow bg ──── function StepCard({ icon, title, body, num }) { return (

{title}

{body}

); } // ── CategoryCard — Personalised Support trio (Home) ──────────────── function CategoryCard({ icon, title, active = false, accent = '#A181F9', motif, onHover, onLeave, href }) { const isPurple = active; return (

{title}

 ); } // ── FAQRow — toggleable Q/A row ──────────────────────────────────── function FAQRow({ q, a, defaultOpen, color = 'purple' }) { const [open, setOpen] = useState_C(!!defaultOpen); const qColor = color === 'purple' ? 'var(--sa-purple)' : '#000'; return (

A: {a}

); } // ── ProgramSummaryCard (Services page top section) ──────────────── function ProgramSummaryCard({ image, title, subtitle, body, sessions, level, audience, mode, onView }) { return (
{image ? ( {title} ) : (
)}

{title}

{body}

{sessions} {level} {audience} {mode}
View Details Register your Interest
); } // ── CourseCard — for Services page service grids ────────────────── function CourseCard({ image, title, price, body, points = [], duration, audience, mode, cta = 'Book a Session', onClick, ctaHref }) { return (
{image ? {title} :
}

{title}

{price}

{body}

{points.length > 0 && (
    {points.map((p, i) => (
  • ✓ {p}
    • ))}
)}
{duration} {audience} {mode}
{cta}
); } // ── ServiceCategoryCard — used on Services proofreading section ─── function ProofreadingCard({ image, title, body, points = [], audience, support }) { return (
{image ? {title} :
}

{title}

{body}

    {points.map((p, i) => (
  • ✓ {p}
    • ))}
{audience} {support}
Get in Touch
); } // ── StatChartCard — gauge arc (animated) ─────────────────────────── function StatChartCard({ percent = 100, label = 'Satisfaction Rate' }) { const [ref, vis] = useInView(); const [draw, setDraw] = useState_C(0); React.useEffect(() => { if (!vis) return; let t0 = performance.now(); const dur = 1200; let raf; const tick = (t) => { const p = Math.min(1, (t - t0) / dur); setDraw(p); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [vis]); const total = 300; // approx arc length return (
{label}
); } // ── UsersCard — stacked avatars + caption ────────────────────────── function UsersCard({ caption = 'More than 80+ students mentored around the world' }) { const avatars = [ { img: HOME_AVATARS.stat1, bg: '#E4E7EC', color: '#98A2B3' }, { img: HOME_AVATARS.stat2, bg: '#D6BBFB', color: '#fff' }, { img: HOME_AVATARS.stat3, bg: '#FECDD3', color: '#fff' }, ]; return (
{avatars.map((a, i) => ( {a.img ? null : } ))}

{caption}

); } // ── Avatar bubble (for "Still Have Questions" CTAs) ─────────────── function AvatarBubble({ image, size = 64, style }) { return ( ); } Object.assign(window, { ValueCard, PrincipleCard, StepCard, CategoryCard, FAQRow, ProgramSummaryCard, CourseCard, ProofreadingCard, StatChartCard, UsersCard, AvatarBubble, });