``` --- ## Component Composition ### Metrics Grid Slide ```tsx

Evaluation Metrics

``` ### Workflow Slide ```tsx

Data Processing Pipeline

{/* Info boxes */}

``` ### Comparison Slide ```tsx

Feature Comparison

``` --- ## SectionHeader Centered icon with decorative gradient lines flanking it, plus a heading. Used at the top of content slides. ### Props ```typescript interface SectionHeaderProps { icon: React.ComponentType; // Phosphor icon component color: string; // Chapter accent color children: React.ReactNode; // Heading text } ``` ### Structure ``` ─────── [icon] ─────── Section Heading ``` ### Example ```tsx import { SectionHeader } from '../components'; import { Funnel } from '@phosphor-icons/react'; 95% of AI Deployments Show No ROI ``` --- ## GradientCard Rounded card with subtle gradient background, left accent bar, and optional icon container. The workhorse component for content grouping. ### Props ```typescript interface GradientCardProps { color: string; // Accent color (border, gradient, icon bg) icon?: React.ComponentType; // Optional Phosphor icon children: React.ReactNode; className?: string; // Additional classes (e.g., "flex-1") } ``` ### Structure ``` ┌──────────────────────────────────┐ │▌ [icon] │ │▌ Card Title │ │▌ Card body text... │ └──────────────────────────────────┘ ``` ### Example — Grid of distinct-colored cards ```tsx

Investigative

Cross-reference thousands of documents.

Fact-Check

Verify claims against your archive.

``` ### Gotchas - In grids of 3+ cards, use **distinct colors** per card (see `design-system.md` > Card Color Strategy) - Do NOT add `flex-1` to cards unless you want them to stretch vertically to fill remaining space --- ## StatsBar In-flow stats footer displaying key metrics. Designed to sit at the bottom of a flex column. ### Props ```typescript interface StatsBarProps { stats: { value: string; label: string; color: string }[]; } ``` ### Structure ``` ┌─────────────────────────────────────────┐ │ 95% 52 5% │ │ No ROI Executives Production │ └─────────────────────────────────────────┘ ``` ### Example ```tsx

Title

{/* Main content */}

``` ### Gotchas - **CRITICAL**: Use `mt-auto` (in-flow). NEVER use `absolute bottom-0 left-0 right-0` — it extends beyond the card bounds. - Match StatsBar stat colors to the corresponding GradientCard accent colors on the same slide. --- ## GlowBadge Inline metric callout with glow shadow. Used for highlighting key numbers within body text or as standalone callouts. ### Props ```typescript interface GlowBadgeProps { color: string; children: React.ReactNode; size?: 'sm' | 'md'; // 'sm' for inline, 'md' for standalone } ``` ### Example — Inline in body text ```tsx

Media & Telecom is 1 of 2 sectors showing transformation.

``` ### Example — Standalone callout ```tsx 95% of enterprise AI pilots deliver zero return. ``` ### Gotchas - **CRITICAL**: Use `size="sm"` for inline badges within body text. Default `size="md"` uses `text-base` (16px) which looks disproportionate inside `text-xs` (12px) body text. --- ## TOC Navigation Pattern Interactive Table of Contents with clickable cards that scroll to target slides. ### Data Structure ```tsx const descriptions: Record = { '01': { slides: '3–4', firstSlide: 3, desc: 'Who is building AI' }, '02': { slides: '5–6', firstSlide: 5, desc: 'Four key AI concepts' }, // ... }; ``` ### Click Handler ```tsx onClick={() => { const slideEl = document.querySelectorAll('.slide')[info.firstSlide - 1]; if (slideEl) slideEl.scrollIntoView({ behavior: 'smooth' }); }} ``` ### Card Centering Pattern Wrap the title in a flex container to vertically center within variable-height cards: ```tsx

{label}

```

Data Processing Overview