// Custom SVG illustrations for Growcept — abstract, on-brand, animated. // ── Hero data showcase ────────────────────────────────────────────────── // Three layouts available via `variant` prop: // "stacked" (default) — open, no card chrome; KPI on top, chart below, footnote // "ribbon" — vertical sidebar list of all stats, active one expands // "ticker" — single big KPI with chart, dot indicators below const HERO_STATS = [ { kpi: "+34%", headline: "Team adoption", sub: "Active AI use across piloted workflows in 90 days.", icon: "users", chart: "bars", data: [22, 28, 31, 38, 44, 52, 58, 64, 71, 78, 84, 90], caption: "Weekly active users · 12-week cohort", }, { kpi: "+500%", headline: "Productivity lift", sub: "Tickets resolved per agent in support and ops workflows.", icon: "zap", chart: "compare", before: { label: "Before AI", value: 100 }, after: { label: "After integration", value: 600 }, caption: "Tickets resolved per agent · per week", }, { kpi: "72%", headline: "Faster decisions", sub: "Reduction in time-to-decision for managers using AI-augmented briefs.", icon: "gauge", chart: "gauge", value: 72, caption: "Median across 6 management cohorts", }, { kpi: "9.2×", headline: "ROI on training", sub: "Cumulative value returned vs. training cost in the first 12 months.", icon: "trending-up", chart: "line", data: [10, 14, 22, 30, 42, 58, 76, 92], caption: "Tracked across 18 organizations", }, { kpi: "240+", headline: "Learners trained", sub: "Across executives, managers, builders, marketing, HR and finance tracks.", icon: "badge-check", chart: "roles", caption: "All cohorts since 2021", }, { kpi: "12wk", headline: "Time to AI-native", sub: "Median engagement length from kickoff to operational handoff.", icon: "calendar-check", chart: "stages", stages: ["Listen", "Frame", "Pilot", "Embed"], caption: "Across full three-pillar engagements", }, ]; function HeroDataShow({ variant = "stacked" }) { if (variant === "ribbon") return ; if (variant === "ticker") return ; return ; } // ── Layout 1 — Stacked (default) ───────────────────────────────────────── // Open, no card chrome. KPI on top, chart below, segment dots, no floating cards. function StackedLayout() { const [i, setI] = React.useState(0); const [paused, setPaused] = React.useState(false); React.useEffect(() => { if (paused) return; const t = setInterval(() => setI(p => (p + 1) % HERO_STATS.length), 4200); return () => clearInterval(t); }, [paused]); const s = HERO_STATS[i]; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ position: "relative", width: "100%", maxWidth: 560, padding: "8px 4px" }} > {/* Soft halo behind */}
{/* Eyebrow line */}
Outcomes from real engagements
{/* KPI */}
{s.kpi}
{s.headline}

{s.sub}

{/* Chart */}
{s.caption}
{/* Indicator track */}
{HERO_STATS.map((_, j) => ( ))}
); } // ── Layout 2 — Ribbon ──────────────────────────────────────────────────── // Vertical list of all stats, active one expands with a chart inline. function RibbonLayout() { const [i, setI] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setI(p => (p + 1) % HERO_STATS.length), 4500); return () => clearInterval(t); }, []); return (
Receipts
{HERO_STATS.map((s, j) => { const active = j === i; return ( ); })}
); } // ── Layout 3 — Ticker ──────────────────────────────────────────────────── // Centered single big KPI, chart below, dots underneath. Compact + bold. function TickerLayout() { const [i, setI] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setI(p => (p + 1) % HERO_STATS.length), 4200); return () => clearInterval(t); }, []); const s = HERO_STATS[i]; return (
{/* Top icon row */}
{HERO_STATS.map((_, j) => ( ))}
{s.headline}
{s.kpi}

{s.sub}

{s.caption}
); } // ── Charts ─────────────────────────────────────────────────────────────── function ChartFor({ stat, compact }) { const accent = "var(--accent)"; if (stat.chart === "bars") return ; if (stat.chart === "compare") return ; if (stat.chart === "gauge") return ; if (stat.chart === "line") return ; if (stat.chart === "roles") return ; if (stat.chart === "stages") return ; return null; } function BarsChart({ data, accent }) { const max = Math.max(...data); return ( {data.map((v, i) => { const h = (v / max) * 78; const x = i * 30 + 6; return ( ); })} ); } function CompareChart({ before, after, accent }) { return (
{before.value}
{before.label}
{after.value}
{after.label}
); } function GaugeChart({ value, accent }) { const r = 38, c = 2 * Math.PI * r; const off = c - (value / 100) * c; return (
{value}%
{["Briefs prepped in seconds","Cross-team alignment","Decisions logged with rationale"].map((l, i) => (
{l}
))}
); } function LineChart({ data, accent }) { const max = Math.max(...data), min = Math.min(...data); const pts = data.map((v, i) => { const x = (i / (data.length - 1)) * 340 + 10; const y = 80 - ((v - min) / (max - min || 1)) * 70; return [x, y]; }); const path = pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" "); const area = path + ` L 350 86 L 10 86 Z`; return ( {pts.map(([x, y], i) => ( ))} ); } function RolesChart({ accent }) { // Bars showing learner distribution across role tracks const roles = [ { label: "Executives", count: 38 }, { label: "Managers", count: 64 }, { label: "Builders", count: 52 }, { label: "Marketing", count: 28 }, { label: "HR / People", count: 32 }, { label: "Finance/Legal", count: 26 }, ]; const max = Math.max(...roles.map(r => r.count)); return (
{roles.map((r, i) => (
{r.label}
{r.count}
))}
); } function StagesChart({ stages, accent }) { return (
{stages.map((label, i) => (
{i + 1}
{label}
{i < stages.length - 1 && (
)} ))}
); } // ── Other illustrations ───────────────────────────────────────────────── function MaturityLadder() { return ( {[ { x: 80, y: 220, label: "Curious", sub: "Stage 0" }, { x: 280, y: 170, label: "Piloting", sub: "Stage 1" }, { x: 460, y: 110, label: "Integrated", sub: "Stage 2" }, { x: 720, y: 32, label: "AI-native", sub: "Stage 3" }, ].map((s, i) => ( {s.label} {s.sub} ))} ); } function PillarDiagram() { return ( {[ { y: 80, label: "Train" }, { y: 160, label: "Integrate" }, { y: 240, label: "Govern" }, ].map((p, i) => ( {p.label} ))} AI-native org ); } Object.assign(window, { HeroDataShow, MaturityLadder, PillarDiagram });