From 5324a6ba16f86b24dd7a44176929c6d26c69570e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?j=C3=A9r=C3=B4me=20boileux?= Date: Mon, 12 Jan 2026 23:01:14 +0100 Subject: [PATCH 01/21] feat(design-system): Add comprehensive design system specification Create initial design system specification for Ocobo, defining core design tokens, component architecture, and foundational UI components. Includes color palette, typography, spacing, and component prop standards to ensure design consistency. Key additions: - Semantic color tokens - Comprehensive typography scale - Standardized component composition pattern - Core component interface definitions - Modular card component structure --- _bmad-output/analysis/action-plan.md | 198 +++++++++++ .../brainstorming-session-2026-01-12.md | 153 +++++++++ _bmad-output/analysis/design-system-spec.md | 316 ++++++++++++++++++ .../analysis/tailwind-config-example.js | 106 ++++++ .../bmm-workflow-status.yaml | 3 +- 5 files changed, 775 insertions(+), 1 deletion(-) create mode 100644 _bmad-output/analysis/action-plan.md create mode 100644 _bmad-output/analysis/brainstorming-session-2026-01-12.md create mode 100644 _bmad-output/analysis/design-system-spec.md create mode 100644 _bmad-output/analysis/tailwind-config-example.js diff --git a/_bmad-output/analysis/action-plan.md b/_bmad-output/analysis/action-plan.md new file mode 100644 index 0000000..e53e3c9 --- /dev/null +++ b/_bmad-output/analysis/action-plan.md @@ -0,0 +1,198 @@ +# Plan d'Action - Rationalisation Design System Ocobo + +**Date:** 2026-01-12 +**Projet:** Prototype Ocobo → Design System +**Statut:** Planifié + +--- + +## Vue d'ensemble + +| Métrique | Valeur | +|----------|--------| +| Décisions prises | 22 | +| Phases | 4 | +| Composants à créer | ~15-20 | +| Pages à refactorer | 15 | + +--- + +## Contraintes Projet + +| Contrainte | Statut | +|------------|--------| +| Ne pas modifier la stack (React 19 + Vite + TS) | ✅ Accepté | +| Ne pas migrer vers Panda CSS | ✅ Hors scope | +| Conserver toutes les animations | ✅ Accepté | +| Garder Tailwind inline (pas de recipes) | ✅ Accepté | +| Pas de tests automatisés | ⚠️ Validation visuelle manuelle | +| Refactoring progressif | ✅ Une étape à la fois | + +--- + +## PHASE 1: FONDATIONS + +**Objectif:** Centraliser tous les tokens dans `tailwind.config.js` + +### Tâches + +| # | Tâche | Priorité | Dépendance | Statut | +|---|-------|----------|------------|--------| +| 1.1 | Installer Tailwind CSS localement (`npm install -D tailwindcss postcss autoprefixer`) | 🔴 Critique | - | ⬜ | +| 1.2 | Créer `tailwind.config.js` | 🔴 Critique | 1.1 | ⬜ | +| 1.3 | Créer `postcss.config.js` | 🔴 Critique | 1.1 | ⬜ | +| 1.4 | Définir tokens couleurs (primitifs + sémantiques) | 🔴 Critique | 1.2 | ⬜ | +| 1.5 | Définir tokens radius (sm, md, lg, xl) | 🔴 Critique | 1.2 | ⬜ | +| 1.6 | Définir tokens shadows (sm, md, lg, hero) | 🔴 Critique | 1.2 | ⬜ | +| 1.7 | Définir tokens typography (12 tailles) | 🔴 Critique | 1.2 | ⬜ | +| 1.8 | Mettre à jour `index.css` avec directives Tailwind | 🔴 Critique | 1.3 | ⬜ | +| 1.9 | Supprimer CDN Tailwind de `index.html` | 🔴 Critique | 1.8 | ⬜ | +| 1.10 | Validation visuelle globale | 🟡 Important | 1.9 | ⬜ | + +### Livrable Phase 1 + +``` +/tailwind.config.js +├── theme.extend.colors +│ ├── ocobo (dark, yellow, mint, sky, coral, gray) +│ └── semantic tokens +├── theme.extend.borderRadius (sm, md, lg, xl, full) +├── theme.extend.boxShadow (sm, md, lg, hero) +├── theme.extend.fontSize (12 tailles) +└── theme.extend.fontFamily (sans, display) + +/postcss.config.js +└── plugins: [tailwindcss, autoprefixer] +``` + +--- + +## PHASE 2: CORE COMPONENTS + +**Objectif:** Créer les 5 composants essentiels avec architecture Park UI + +### Tâches + +| # | Composant | Priorité | Fichier(s) | Statut | +|---|-----------|----------|------------|--------| +| 2.1 | Container | 🔴 Critique | `components/Container.tsx` | ⬜ | +| 2.2 | Button (refacto) | 🔴 Critique | `components/Button.tsx` | ⬜ | +| 2.3 | Badge | 🟠 Haute | `components/Badge.tsx` | ⬜ | +| 2.4 | Input | 🟠 Haute | `components/Input.tsx` | ⬜ | +| 2.5 | Card (primitives) | 🔴 Critique | `components/Card/*.tsx` | ⬜ | + +### Structure Card + +``` +components/Card/ +├── index.ts (exports) +├── CardRoot.tsx +├── CardHeader.tsx +├── CardTitle.tsx +├── CardDescription.tsx +├── CardBody.tsx +├── CardFooter.tsx +├── CardMedia.tsx +├── CardBadge.tsx +└── CardAvatar.tsx +``` + +### Props Uniformes (tous composants) + +```typescript +interface CommonProps { + variant?: 'default' | 'outlined' | 'ghost' | 'filled' | 'elevated' + size?: 'sm' | 'md' | 'lg' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} +``` + +--- + +## PHASE 3: SECTION COMPONENTS + +**Objectif:** Créer les composants de section réutilisables + +### Tâches + +| # | Composant | Priorité | Usage (pages) | Statut | +|---|-----------|----------|---------------|--------| +| 3.1 | Section (base) | 🔴 Critique | Toutes | ⬜ | +| 3.2 | HeroSection | 🟠 Haute | 15 pages | ⬜ | +| 3.3 | CtaSection | 🟠 Haute | ~8 pages | ⬜ | +| 3.4 | FeatureSection | 🟡 Moyenne | ~10 pages | ⬜ | +| 3.5 | GridSection | 🟡 Moyenne | ~12 pages | ⬜ | +| 3.6 | TestimonialSection | 🟢 Basse | ~5 pages | ⬜ | +| 3.7 | StatsSection | 🟢 Basse | ~4 pages | ⬜ | +| 3.8 | DecorativeBlob | 🟢 Basse | ~10 pages | ⬜ | + +--- + +## PHASE 4: PAGES REFACTORING + +**Objectif:** Remplacer les patterns inline par les nouveaux composants + +### Ordre de priorité + +| # | Page | Taille | Priorité | Statut | +|---|------|--------|----------|--------| +| 4.1 | Home.tsx | Grande | 🔴 Critique | ⬜ | +| 4.2 | Services.tsx | Grande | 🟠 Haute | ⬜ | +| 4.3 | Stories.tsx | Grande | 🟠 Haute | ⬜ | +| 4.4 | About.tsx | Grande | 🟡 Moyenne | ⬜ | +| 4.5 | Jobs.tsx | Moyenne | 🟡 Moyenne | ⬜ | +| 4.6 | Partners.tsx | Moyenne | 🟡 Moyenne | ⬜ | +| 4.7 | Method.tsx | Moyenne | 🟡 Moyenne | ⬜ | +| 4.8 | Studio.tsx | Moyenne | 🟢 Basse | ⬜ | +| 4.9 | Contact.tsx | Petite | 🟢 Basse | ⬜ | +| 4.10 | Resources.tsx | Moyenne | 🟢 Basse | ⬜ | +| 4.11 | Podcast.tsx | Moyenne | 🟢 Basse | ⬜ | +| 4.12 | ArticleDetail.tsx | Petite | 🟢 Basse | ⬜ | +| 4.13 | JobDetail.tsx | Petite | 🟢 Basse | ⬜ | +| 4.14 | StoryDetail.tsx | Petite | 🟢 Basse | ⬜ | +| 4.15 | WebinarDetail.tsx | Petite | 🟢 Basse | ⬜ | + +### Process par page + +1. **Analyser** - Identifier les patterns à remplacer +2. **Remplacer** - Utiliser les composants Design System +3. **Valider** - Vérification visuelle avant/après +4. **Commit** - Un commit par page + +--- + +## Checklist Validation Visuelle + +Pour chaque étape de refactoring : + +- [ ] Layout intact (spacing, alignment) +- [ ] Couleurs correctes +- [ ] Typography correcte +- [ ] Responsive fonctionne (mobile, tablet, desktop) +- [ ] Hover states fonctionnent +- [ ] Animations préservées +- [ ] Pas de régression visuelle + +--- + +## Risques et Mitigations + +| Risque | Probabilité | Impact | Mitigation | +|--------|-------------|--------|------------| +| Régression visuelle | Moyenne | Élevé | Refactoring progressif + validation | +| Tokens mal mappés | Faible | Moyen | Tests sur page Home d'abord | +| Composants incomplets | Moyenne | Moyen | Itérations progressives | +| Navbar complexe (17KB) | Élevée | Moyen | Refactoring séparé en Phase 5 | + +--- + +## Notes + +- **Scope:** Rationalisation Tailwind uniquement, migration Panda CSS = projet séparé +- **Approche:** Progressive, une étape à la fois +- **Validation:** Manuelle (pas de tests automatisés) +- **Architecture:** Pattern Park UI (composition) pour faciliter migration future + +--- + +*Plan généré automatiquement - Session brainstorming 2026-01-12* diff --git a/_bmad-output/analysis/brainstorming-session-2026-01-12.md b/_bmad-output/analysis/brainstorming-session-2026-01-12.md new file mode 100644 index 0000000..a275457 --- /dev/null +++ b/_bmad-output/analysis/brainstorming-session-2026-01-12.md @@ -0,0 +1,153 @@ +--- +stepsCompleted: [1, 2] +inputDocuments: [] +session_topic: 'Rationalisation du prototype Ocobo pour extraction Design System' +session_goals: 'Extraction tokens, inventaire composants, consolidation, architecture claire, migration-readiness Panda CSS/Park UI' +selected_approach: 'ai-recommended' +techniques_used: ['SCAMPER Method', 'Morphological Analysis', 'Constraint Mapping', 'First Principles Thinking'] +ideas_generated: [] +context_file: '_bmad/bmm/data/project-context-template.md' +--- + +# Brainstorming Session Results + +**Facilitator:** jerome +**Date:** 2026-01-12 + +## Session Overview + +**Topic:** Rationalisation du prototype Ocobo pour extraction Design System + +**Goals:** +- Extraction des design tokens (couleurs, typographies, espacements) +- Inventaire exhaustif des composants existants +- Consolidation des composants similaires (ex: variantes de cards) +- Architecture et hiérarchie claire des composants +- Préparation migration Tailwind → Panda CSS/Park UI + +### Context Guidance + +Session orientée développement produit/logiciel avec focus sur: +- Architecture technique et patterns de composants +- Expérience développeur pour la migration +- Maintenabilité et scalabilité du Design System + +### Session Setup + +**Contexte projet:** +- Prototype généré par Google AI Studio (résultat visuel validé) +- Stack actuelle: React 19 + TypeScript + Vite + Tailwind CSS +- Stack cible production: Panda CSS + Park UI +- Contrainte: Ne pas modifier la stack du prototype + +**Approche sélectionnée:** Techniques recommandées par l'IA + +## Technique Selection + +**Approach:** AI-Recommended Techniques +**Selected Techniques:** + +1. **SCAMPER Method** - Examiner chaque composant via 7 lenses systématiques pour consolidation +2. **Morphological Analysis** - Mapper tous les paramètres de composants pour identification des tokens +3. **Constraint Mapping** - Visualiser les contraintes de migration Tailwind → Panda CSS/Park UI +4. **First Principles Thinking** - Déconstruire jusqu'aux fondamentaux pour architecture claire + +**Selection Rationale:** Combinaison optimisée pour un projet de rationalisation Design System nécessitant analyse systématique, extraction de patterns, et préparation migration. + +## Technique 1: SCAMPER Method - Results + +### S - Substitute +- **#1** 7 types de cards identifiés (Article, Profile, Job, Callout, Section Item, Tool, Contact Form) +- **#2** Architecture Composition choisie vs Monolithique vs Spécialisé +- **#3** Pattern Composition validé: primitives + composants assemblés +- **#4** CardContainer variants: `default`, `outlined`, `ghost`, `filled`, `elevated` + +### C - Combine +- **#5** Border-radius: 12+ valeurs → 4 tokens (`radius-sm`, `radius-md`, `radius-lg`, `radius-xl`) +- **#6** Architecture Tokens 2 niveaux: Primitifs + Sémantiques +- **#7** Scope séparé: Rationalisation Tailwind ≠ Migration Panda CSS +- **#8** Audit Tailwind réalisé: inventaire incohérences (radius, shadows, couleurs inline) +- **#9** Scale Border-Radius validée: 4 tokens +- **#10** Scale Shadows validée: 4 tokens (`shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-hero`) + +### A - Adapt +- **#11** Nomenclature Park UI adoptée: `ComponentRoot`, `ComponentHeader`, `ComponentBody`, etc. +- **#12** Système de props unifié: `variant`, `size`, `colorPalette` + +### M - Modify +- **#13** Tailwind inline préservé - pas de recipes/abstractions +- **#14** 6 types de sections identifiés: Hero, CTA, Feature, Grid, Testimonial, Stats +- **#15** Composants Section validés + primitives `Container`, `Section` + +### P - Put to Other Uses +- **#16** DecorativeBlob: composant réutilisable pour éléments décoratifs flous + +### E - Eliminate +- **#17** Typography chaos identifié: 15 tailles différentes +- **#18** Scale Typography validée: 12 tailles harmonieuses + +### R - Reverse +- **#19** Core 5 identifiés: `Button`, `Card`, `Badge`, `Input/Form`, `Container` = 80% des besoins + +**SCAMPER Total: 19 idées/décisions générées** + +## Technique 2: Constraint Mapping - Results + +### Contraintes Levées +- **#20** Tailwind Config Local possible → débloque centralisation tokens +- **#21** Mapping Migration hors scope → simplifie livrable + +### Contraintes Actives +- Stack React 19 + TS + Vite (compatible Park UI) +- Scope: ne pas modifier stack, ne pas migrer Panda CSS, conserver animations, Tailwind inline +- Code: Navbar 17KB, pages monolithiques +- Tests: aucun → validation visuelle requise + +### Décisions +- **#22** Refactoring progressif: une page/composant à la fois avec validation visuelle + +### Phases de Travail Validées +1. **Phase 1**: Fondations (tokens + config) +2. **Phase 2**: Core Components (5 essentiels) +3. **Phase 3**: Section Components +4. **Phase 4**: Pages Refactoring + +**Constraint Mapping Total: 3 décisions + 4 phases définies** + +--- + +## PLAN D'ACTION PRIORISÉ + +### Phase 1: Fondations (Tokens + Config) +| # | Tâche | Priorité | Statut | +|---|-------|----------|--------| +| 1.1 | Créer `tailwind.config.js` | 🔴 Critique | ⏳ | +| 1.2 | Définir tokens couleurs (primitifs + sémantiques) | 🔴 Critique | ⏳ | +| 1.3 | Définir tokens radius (sm, md, lg, xl) | 🔴 Critique | ⏳ | +| 1.4 | Définir tokens shadows (sm, md, lg, hero) | 🔴 Critique | ⏳ | +| 1.5 | Définir tokens typography (12 tailles) | 🔴 Critique | ⏳ | +| 1.6 | Migrer config CDN → config locale | 🔴 Critique | ⏳ | +| 1.7 | Validation visuelle globale | 🟡 Important | ⏳ | + +### Phase 2: Core Components (5 essentiels) +- Container, Button (refacto), Badge, Input/Form, Card (primitives) +- Props uniformes: `variant`, `size`, `colorPalette` +- Architecture Park UI: `ComponentRoot`, `ComponentHeader`, etc. + +### Phase 3: Section Components +- Section, HeroSection, CtaSection, FeatureSection, GridSection +- TestimonialSection, StatsSection, DecorativeBlob + +### Phase 4: Pages Refactoring +- Ordre: Home → Services → Stories → About → Jobs → Partners → Method → autres +- Process: identifier patterns → remplacer → validation visuelle → commit + +--- + +## Session Summary + +**Date:** 2026-01-12 +**Techniques utilisées:** SCAMPER, Constraint Mapping +**Total décisions:** 22 +**Phases définies:** 4 +**Statut:** Plan validé, Phase 1 en cours diff --git a/_bmad-output/analysis/design-system-spec.md b/_bmad-output/analysis/design-system-spec.md new file mode 100644 index 0000000..dd93a18 --- /dev/null +++ b/_bmad-output/analysis/design-system-spec.md @@ -0,0 +1,316 @@ +# Ocobo Design System Specification + +**Date:** 2026-01-12 +**Source:** Brainstorming Session - Rationalisation Prototype + +--- + +## 1. Design Tokens + +### 1.1 Couleurs + +#### Primitifs + +``` +colors: + ocobo: + dark: '#212323' + yellow: + DEFAULT: '#F1CF25' + light: '#FFFCEE' + mint: + DEFAULT: '#9ADBBA' + light: '#EBFDF5' + sky: + DEFAULT: '#99D1DF' + light: '#F0F9FB' + coral: + DEFAULT: '#FE9C87' + light: '#FFF5F2' + gray: + 50: '#FAFAFA' + 100: '#F5F5F5' + 200: '#E5E5E5' + 300: '#D4D4D4' + 400: '#A3A3A3' + 500: '#737373' + 600: '#525252' + 700: '#404040' + 800: '#262626' + 900: '#171717' + white: '#FFFFFF' + black: '#000000' +``` + +#### Sémantiques + +``` +semantic: + color-primary: '{colors.ocobo.yellow.DEFAULT}' + color-primary-light: '{colors.ocobo.yellow.light}' + color-accent: '{colors.ocobo.coral.DEFAULT}' + color-success: '{colors.ocobo.mint.DEFAULT}' + color-info: '{colors.ocobo.sky.DEFAULT}' + color-surface: '{colors.gray.50}' + color-background: '{colors.white}' + color-text: '{colors.ocobo.dark}' + color-text-muted: '{colors.gray.600}' + color-border: '{colors.gray.200}' +``` + +--- + +### 1.2 Border Radius + +| Token | Valeur | Usage | +|-------|--------|-------| +| `radius-sm` | `0.5rem` (8px) | Petits éléments, badges, inputs | +| `radius-md` | `1rem` (16px) | Cards standard, boutons | +| `radius-lg` | `1.5rem` (24px) | Cards hero, sections | +| `radius-xl` | `2.5rem` (40px) | Cards premium, modals | +| `radius-full` | `9999px` | Pills, avatars | + +--- + +### 1.3 Shadows + +| Token | Valeur | Usage | +|-------|--------|-------| +| `shadow-sm` | `0 1px 2px 0 rgb(0 0 0 / 0.05)` | Cards au repos | +| `shadow-md` | `0 4px 6px -1px rgb(0 0 0 / 0.1)` | Cards hover | +| `shadow-lg` | `0 10px 15px -3px rgb(0 0 0 / 0.1)` | Modals, dropdowns | +| `shadow-hero` | `0 40px 100px -20px rgb(0 0 0 / 0.08)` | Hero sections, CTAs majeurs | + +--- + +### 1.4 Typography + +| Token | Taille | Line Height | Usage | +|-------|--------|-------------|-------| +| `text-micro` | 10px | 1.4 | Badges, labels uppercase | +| `text-xs` | 12px | 1.4 | Captions, metadata | +| `text-sm` | 14px | 1.5 | Body small, UI elements | +| `text-base` | 16px | 1.5 | Body default | +| `text-lg` | 18px | 1.6 | Body large, lead | +| `text-xl` | 20px | 1.5 | Subheadings | +| `text-2xl` | 24px | 1.4 | H4 | +| `text-3xl` | 30px | 1.3 | H3 | +| `text-4xl` | 36px | 1.2 | H2 | +| `text-5xl` | 48px | 1.1 | H1 | +| `text-6xl` | 60px | 1.1 | Hero mobile | +| `text-7xl` | 72px | 1.0 | Hero desktop | + +#### Font Families + +``` +fontFamily: + sans: ['Bornia', 'Inter', 'sans-serif'] + display: ['Bermia', 'Inter', 'sans-serif'] +``` + +--- + +## 2. Architecture Composants + +### 2.1 Pattern Composition (Style Park UI) + +Tous les composants suivent le pattern de composition : + +```tsx + + + + + + + +``` + +### 2.2 Props Uniformes + +| Prop | Valeurs | Description | +|------|---------|-------------| +| `variant` | `default`, `outlined`, `ghost`, `filled`, `elevated` | Style visuel | +| `size` | `sm`, `md`, `lg` | Dimensions (padding, fonts) | +| `colorPalette` | `yellow`, `mint`, `sky`, `coral`, `dark` | Thème couleur | + +--- + +## 3. Composants Core (5 essentiels) + +### 3.1 Container + +```tsx +interface ContainerProps { + size?: 'sm' | 'md' | 'lg' | 'full' + children: React.ReactNode +} + +// Sizes +sm: max-w-3xl +md: max-w-5xl +lg: max-w-7xl +full: max-w-full +``` + +### 3.2 Button + +```tsx +interface ButtonProps { + variant?: 'primary' | 'secondary' | 'outline' | 'ghost' + size?: 'sm' | 'md' | 'lg' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} +``` + +### 3.3 Badge + +```tsx +interface BadgeProps { + variant?: 'solid' | 'outline' | 'subtle' + size?: 'sm' | 'md' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} +``` + +### 3.4 Input / Form + +```tsx +interface InputProps { + variant?: 'outline' | 'filled' | 'flushed' + size?: 'sm' | 'md' | 'lg' +} +``` + +### 3.5 Card (Primitives) + +``` +components/Card/ +├── index.ts +├── CardRoot.tsx +├── CardHeader.tsx +├── CardTitle.tsx +├── CardDescription.tsx +├── CardBody.tsx +├── CardFooter.tsx +├── CardMedia.tsx +├── CardBadge.tsx +└── CardAvatar.tsx +``` + +```tsx +interface CardRootProps { + variant?: 'default' | 'outlined' | 'ghost' | 'filled' | 'elevated' + size?: 'sm' | 'md' | 'lg' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} +``` + +--- + +## 4. Composants Section + +### 4.1 Section (Base) + +```tsx +interface SectionProps { + spacing?: 'sm' | 'md' | 'lg' // py-16, py-24, py-32 + background?: 'white' | 'gray' | 'dark' | 'yellow' | 'mint' | 'sky' +} +``` + +### 4.2 HeroSection + +```tsx +interface HeroSectionProps { + variant?: 'centered' | 'split' | 'animated' + background?: 'white' | 'dark' +} +``` + +### 4.3 CtaSection + +```tsx +interface CtaSectionProps { + colorPalette?: 'yellow' | 'dark' | 'mint' | 'sky' + variant?: 'simple' | 'with-form' +} +``` + +### 4.4 FeatureSection + +```tsx +interface FeatureSectionProps { + background?: 'dark' | 'light' + withBlobs?: boolean +} +``` + +### 4.5 GridSection + +```tsx +interface GridSectionProps { + columns?: 2 | 3 | 4 + gap?: 'md' | 'lg' +} +``` + +### 4.6 TestimonialSection + +```tsx +interface TestimonialSectionProps { + variant?: 'single' | 'carousel' +} +``` + +### 4.7 StatsSection + +```tsx +interface StatsSectionProps { + columns?: 3 | 4 +} +``` + +### 4.8 DecorativeBlob + +```tsx +interface DecorativeBlobProps { + position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' + size?: 'sm' | 'md' | 'lg' + opacity?: 10 | 20 | 30 +} +``` + +--- + +## 5. Inventaire Cards Existantes + +| Type | Usage | Composant cible | +|------|-------|-----------------| +| Article cards | Blog, Podcast, Stories | `CardRoot variant="default"` + `CardMedia` | +| Profile cards | Team, Authors | `CardRoot` + `CardAvatar` | +| Job cards | Offres emploi | `CardRoot variant="outlined"` | +| Callouts | Mise en valeur | `CardRoot variant="filled"` | +| Section items | Grilles 3-4 cols | `CardRoot variant="ghost"` | +| Tool cards | Outils/Features | `CardRoot variant="elevated"` | +| Contact form | Formulaires | `CardRoot` + Form components | + +--- + +## 6. Migration Notes (Panda CSS / Park UI) + +### Compatibilité confirmée +- React 19 ✅ +- TypeScript ✅ +- Nomenclature Park UI adoptée ✅ +- Props système aligné ✅ + +### À faire lors migration +- Mapping tokens Tailwind → Panda CSS +- Conversion classes inline → CSS-in-JS +- Adoption recipes `cva()` + +--- + +*Document généré automatiquement - Session brainstorming 2026-01-12* diff --git a/_bmad-output/analysis/tailwind-config-example.js b/_bmad-output/analysis/tailwind-config-example.js new file mode 100644 index 0000000..7e5c0ca --- /dev/null +++ b/_bmad-output/analysis/tailwind-config-example.js @@ -0,0 +1,106 @@ +/** @type {import('tailwindcss').Config} */ +// EXEMPLE DE CONFIGURATION - À adapter lors de l'implémentation Phase 1 + +export default { + content: [ + "./index.html", + "./**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: { + // ============================================ + // FONT FAMILIES + // ============================================ + fontFamily: { + sans: ['Bornia', 'Inter', 'sans-serif'], + display: ['Bermia', 'Inter', 'sans-serif'], + }, + + // ============================================ + // COLORS - PRIMITIFS + // ============================================ + colors: { + ocobo: { + dark: '#212323', + yellow: { + DEFAULT: '#F1CF25', + light: '#FFFCEE', + }, + mint: { + DEFAULT: '#9ADBBA', + light: '#EBFDF5', + }, + sky: { + DEFAULT: '#99D1DF', + light: '#F0F9FB', + }, + coral: { + DEFAULT: '#FE9C87', + light: '#FFF5F2', + }, + }, + // Gray scale pour complément + gray: { + 50: '#FAFAFA', + 100: '#F5F5F5', + 200: '#E5E5E5', + 300: '#D4D4D4', + 400: '#A3A3A3', + 500: '#737373', + 600: '#525252', + 700: '#404040', + 800: '#262626', + 900: '#171717', + }, + }, + + // ============================================ + // BORDER RADIUS - 4 TOKENS + // ============================================ + borderRadius: { + 'sm': '0.5rem', // 8px - Petits éléments, badges + 'md': '1rem', // 16px - Cards standard + 'lg': '1.5rem', // 24px - Cards hero + 'xl': '2.5rem', // 40px - Cards premium + 'full': '9999px', // Pills, avatars + }, + + // ============================================ + // SHADOWS - 4 TOKENS + // ============================================ + boxShadow: { + 'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)', + 'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', + 'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', + 'hero': '0 40px 100px -20px rgb(0 0 0 / 0.08)', + }, + + // ============================================ + // TYPOGRAPHY - 12 TAILLES + // ============================================ + fontSize: { + 'micro': ['0.625rem', { lineHeight: '1.4' }], // 10px + 'xs': ['0.75rem', { lineHeight: '1.4' }], // 12px + 'sm': ['0.875rem', { lineHeight: '1.5' }], // 14px + 'base': ['1rem', { lineHeight: '1.5' }], // 16px + 'lg': ['1.125rem', { lineHeight: '1.6' }], // 18px + 'xl': ['1.25rem', { lineHeight: '1.5' }], // 20px + '2xl': ['1.5rem', { lineHeight: '1.4' }], // 24px + '3xl': ['1.875rem', { lineHeight: '1.3' }], // 30px + '4xl': ['2.25rem', { lineHeight: '1.2' }], // 36px + '5xl': ['3rem', { lineHeight: '1.1' }], // 48px + '6xl': ['3.75rem', { lineHeight: '1.1' }], // 60px + '7xl': ['4.5rem', { lineHeight: '1' }], // 72px + }, + + // ============================================ + // SPACING (optionnel - pour standardiser) + // ============================================ + spacing: { + // Utiliser les valeurs Tailwind par défaut + // ou ajouter des tokens custom si nécessaire + }, + }, + }, + plugins: [], +} diff --git a/_bmad-output/planning-artifacts/bmm-workflow-status.yaml b/_bmad-output/planning-artifacts/bmm-workflow-status.yaml index 1e37357..cb044d9 100644 --- a/_bmad-output/planning-artifacts/bmm-workflow-status.yaml +++ b/_bmad-output/planning-artifacts/bmm-workflow-status.yaml @@ -39,10 +39,11 @@ workflow_status: note: "User-selected discovery workflows" workflows: brainstorm-project: - status: optional + status: _bmad-output/analysis/brainstorming-session-2026-01-12.md agent: analyst command: /bmad:core:workflows:brainstorming note: "Creative exploration and ideation" + completed: 2026-01-12 research: status: skipped agent: analyst From ebaccdc9af78470fc80d8eddf5d2f51ccf1fd003 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?j=C3=A9r=C3=B4me=20boileux?= Date: Tue, 13 Jan 2026 00:23:25 +0100 Subject: [PATCH 02/21] feat(prd): Add Product Requirements Document for Design System Rationalization Create PRD for prototype cleanup and design system rationalization - Define project scope, objectives, and success criteria - Document key deliverables and technical requirements - Establish MVP phases for token centralization and component extraction - Add workflow status and completion date for PRD process --- .../bmm-workflow-status.yaml | 11 +- _bmad-output/planning-artifacts/prd.md | 426 ++++++++++++++++++ 2 files changed, 433 insertions(+), 4 deletions(-) create mode 100644 _bmad-output/planning-artifacts/prd.md diff --git a/_bmad-output/planning-artifacts/bmm-workflow-status.yaml b/_bmad-output/planning-artifacts/bmm-workflow-status.yaml index cb044d9..3e36dc8 100644 --- a/_bmad-output/planning-artifacts/bmm-workflow-status.yaml +++ b/_bmad-output/planning-artifacts/bmm-workflow-status.yaml @@ -57,25 +57,28 @@ workflow_status: name: "Planning" workflows: prd: - status: required + status: _bmad-output/planning-artifacts/prd.md agent: pm command: /bmad:bmm:workflows:prd output: "Product Requirements Document with FRs and NFRs" + completed: 2026-01-12 create-ux-design: - status: conditional + status: skipped condition: if_has_ui agent: ux-designer command: /bmad:bmm:workflows:create-ux-design - note: "Determined after PRD - user/agent decides if needed" + note: "Skipped - existing design validated, only rationalization needed" phase_3_solutioning: name: "Solutioning" + next_workflow: create-architecture workflows: create-architecture: - status: required + status: ready agent: architect command: /bmad:bmm:workflows:create-architecture output: "System architecture document" + note: "NEXT - Define component structure, file organization, DS patterns" create-epics-and-stories: status: required agent: pm diff --git a/_bmad-output/planning-artifacts/prd.md b/_bmad-output/planning-artifacts/prd.md new file mode 100644 index 0000000..7df0e30 --- /dev/null +++ b/_bmad-output/planning-artifacts/prd.md @@ -0,0 +1,426 @@ +--- +stepsCompleted: [step-01-init, step-02-discovery, step-03-success, step-04-journeys, step-05-domain-skipped, step-06-innovation, step-07-project-type, step-08-scoping, step-09-functional, step-10-nonfunctional, step-11-polish] +classification: + projectType: "Web App (SPA React) - Design System Rationalization" + domain: "General (Agency Website)" + complexity: "Medium" + projectContext: "Brownfield - Cleanup AI-generated prototype" + objective: "Blueprint pour refactoring repo prod" +inputDocuments: + - _bmad-output/analysis/brainstorming-session-2026-01-12.md + - _bmad-output/analysis/design-system-spec.md + - _bmad-output/analysis/action-plan.md + - docs/index.md + - docs/project-overview.md + - docs/architecture.md + - docs/component-inventory.md + - docs/data-models.md + - docs/api-architecture.md + - docs/source-tree-analysis.md + - docs/development-guide.md +documentCounts: + briefs: 0 + research: 0 + brainstorming: 1 + analysis: 2 + projectDocs: 8 +workflowType: 'prd' +--- + +# Product Requirements Document - prototype + +**Author:** jerome +**Date:** 2026-01-12 + +## Executive Summary + +**Project:** Design System Rationalization for Ocobo Prototype +**Objective:** Clean up AI-generated prototype to create an AI-readable blueprint for production migration + +**What:** Rationalize the Ocobo prototype by extracting tokens, consolidating components, and refactoring pages to use a consistent Design System. + +**Why:** Enable agentic migration to production stack (Panda CSS / Park UI) by making the codebase clean, consistent, and AI-readable. + +**Who:** Primary user is an AI agent that will read and convert the code. Secondary user is Jerome for review and validation. + +**Key Deliverables:** +- Rationalized prototype with centralized tokens in `tailwind.config.js` +- Reusable component library (Card, Button, Badge, Section components, etc.) +- 15 pages refactored using DS components only +- CLAUDE.md + DS documentation for AI navigation +- Design System Showcase page (hors navigation) présentant tous les composants + +**Out of Scope:** +- Migration to Panda CSS / Park UI (separate project) +- Automated tests +- Production repo refactoring +- Wording extraction for localization +- Accessibility (deferred to migration project) +- Performance optimization + +## Success Criteria + +### User Success (Developer Experience) + +**When opening the rationalized prototype, the developer sees:** +- A clear component catalog with well-defined, reusable components +- Documented and limited design tokens (colors, radius, shadows, typography) +- Pages that compose Design System components (no inline/page-specific declarations) +- Visual result very similar to current prototype (minor intentional adjustments acceptable: border radius harmonization, card consolidation) + +**Success "aha!" moment:** "This is clean, I can work with this for the prod repo refactoring." + +### Business Success (Project Goals) + +| Metric | Target | +|--------|--------| +| Card components | 1 CardRoot with composition primitives (from ~7 variants) | +| Border-radius tokens | 4 (sm, md, lg, xl) - down from 12+ | +| Shadow tokens | 4 (sm, md, lg, hero) | +| Typography scale | 12 sizes (harmonized) | +| Pages refactored | 15/15 (100%) | +| Component documentation | Clean code + inventory with props (nice-to-have) | + +### Technical Success + +- **Visual validation:** Manual page-by-page comparison with current prototype +- **Build:** Passes without errors +- **No regressions:** All pages render correctly with new components + +### Measurable Outcomes + +**Zero tolerance (failure if present):** +- Inline hardcoded colors remaining +- Buttons implemented in different ways +- Multiple card component variants (should be 1 composable Card) +- Tokens not centralized in tailwind.config.js + +## Product Scope + +### MVP - Minimum Viable Product + +1. **Phase 1 - Foundations:** Centralized tokens in `tailwind.config.js` + - Colors (primitives + semantic) + - Border-radius (4 tokens) + - Shadows (4 tokens) + - Typography (12 sizes) + - Migrate from CDN to local Tailwind config + +2. **Phase 2 - Core Components:** All reusable components extracted + - Card (composition architecture) + - Button (rationalized) + - Badge, Input, Container + - Section components (Hero, CTA, Feature, Grid, etc.) + +3. **Phase 3 - Pages Refactoring:** All 15 pages using DS components + - No inline declarations + - Consistent component usage + +4. **Deliverables:** + - Rationalized prototype (code) + - Component inventory with props (nice-to-have) + +### Vision (Future) + +- Use this rationalized prototype as blueprint for prod repo refactoring +- Future migration to Panda CSS / Park UI will be simplified + +## User Journeys + +**Primary User:** AI Agent (for automated migration to prod stack) +**Secondary User:** Jerome (for review and validation) + +**Key Insight:** The prototype must be optimized for AI readability - clean structure, consistent patterns, no ambiguity. + +### Journey 1: AI Agent - Component Extraction + +**Context:** An AI agent analyzes the prototype to extract and convert components to the prod stack (Panda CSS / Park UI). + +**Opening Scene:** The agent receives instructions to convert the `Card` component to Panda CSS. + +**Rising Action:** +1. Agent opens `components/Card/index.ts` and finds a clear export +2. Reads `CardRoot.tsx` and identifies typed props: `variant`, `size`, `colorPalette` +3. Finds well-structured Tailwind classes mapped to config tokens +4. Understands the composition pattern (CardHeader, CardBody, etc.) + +**Climax:** Agent generates the equivalent Panda CSS recipe without ambiguity. + +**Resolution:** Component converted cleanly, ready for Jerome's review. + +### Journey 2: AI Agent - Page Conversion + +**Context:** An AI agent must convert a complete page. + +**Opening Scene:** Agent opens `pages/Home.tsx`. + +**Rising Action:** +1. Easily identifies sections (imported Section components) +2. Each section uses DS components (no complex inline JSX) +3. Props are explicit and typed +4. No business logic mixed with rendering + +**Climax:** Agent understands the page structure in seconds. + +**Resolution:** Page converted with the same visual rendering. + +### Journey 3: Jerome - Review & Validation + +**Context:** Jerome verifies the AI agent's work. + +**Opening Scene:** The agent has converted 3 pages. Jerome opens the diff. + +**Rising Action:** +1. Visual comparison between original prototype vs converted prod +2. Verifies token mapping is correct +3. Identifies minor adjustments needed + +**Climax:** Rendering is nearly identical, a few minor tweaks. + +**Resolution:** Jerome validates and moves to next pages. + +### Journey Requirements Summary + +| Requirement | For | Priority | +|-------------|-----|----------| +| Predictable file structure | AI Agent | Critical | +| Typed and explicit props | AI Agent | Critical | +| Tailwind tokens (no hardcoded values) | AI Agent | Critical | +| Clear composition pattern | AI Agent | High | +| Pages = DS component composition only | AI Agent | High | +| Human-readable code for review | Jerome | Medium | + +## Innovation: AI-Optimized Codebase + +### Concept + +**Objective:** Create a prototype with Markdown documentation that enables an AI agent to: +1. Quickly understand the Design System and its usage +2. Navigate efficiently through the codebase +3. Generate equivalents in the prod stack (Panda CSS / Park UI) +4. Map tokens to the prod stack + +### AI-Readability Strategy + +| Element | Role | +|---------|------| +| **CLAUDE.md / agent.md** | Main entry point for AI - navigation guide | +| **DS Documentation (Markdown)** | Explains Design System usage | +| **Clean, readable code** | Clear structure, explicit naming | +| **Documented tokens** | Clear mapping in config + docs | + +### Target Documentation Structure + +``` +docs/ +├── CLAUDE.md (or agent.md) # AI entry point +├── design-system/ +│ ├── tokens.md # Colors, radius, shadows, typography +│ ├── components.md # Catalog + usage +│ └── patterns.md # How to compose pages +``` + +**Focus:** AI must understand **how to use** the Design System, not just its technical structure. + +### Validation + +**Success if:** +- An AI agent reads CLAUDE.md and knows where to go +- Agent understands DS usage (not just code) +- Token mapping to Panda CSS / Park UI is obvious +- Little ambiguity about patterns to follow + +### Innovation Deliverables + +1. **Rationalized prototype** (clean code) +2. **Updated Markdown documentation** for AI consumption +3. **CLAUDE.md** as agent entry point + +## Web App (Design System) Specific Requirements + +### Project-Type Overview + +**Type:** SPA React - Design System Rationalization +**Focus:** Code cleanliness and AI-readability, not performance optimization + +### Technical Architecture Considerations + +| Aspect | Decision | +|--------|----------| +| **Browser Support** | Modern only (Chrome, Firefox, Safari, Edge - latest versions) | +| **Responsive Design** | All breakpoints covered | +| **Mobile Strategy** | Mobile-first conserved | +| **Breakpoints** | Keep current prototype breakpoints (rationalization deferred to migration) | +| **Accessibility** | Deferred to AI migration project | +| **Performance** | Not a priority - focus on code cleanliness | + +### Responsive Design Requirements + +**Components must:** +- Work across all existing breakpoints +- Follow mobile-first CSS patterns +- Use Tailwind responsive utilities consistently (`sm:`, `md:`, `lg:`, `xl:`) + +**Breakpoints (preserved from prototype):** +- Default (mobile) +- `sm` (640px) +- `md` (768px) +- `lg` (1024px) +- `xl` (1280px) + +### Implementation Considerations + +**In Scope:** +- Clean, well-structured components +- Consistent responsive patterns +- Mobile-first approach maintained +- AI-readable code structure + +**Deferred to Migration Project:** +- Accessibility (WCAG compliance) +- Performance optimization +- Breakpoint rationalization +- Browser polyfills (not needed for modern browsers) + +## Project Scoping & Phased Development + +### MVP Strategy & Philosophy + +**MVP Approach:** Complete Design System Rationalization +**Objective:** Clean, AI-readable prototype ready for agentic migration + +**Everything is MVP** - All 3 phases are interdependent: +- Without tokens → no coherent components +- Without components → no refactored pages +- Without AI docs → no agentic migration possible + +### MVP Feature Set + +**Phase 1 - Foundations (MVP)** +- Tokens centralized in `tailwind.config.js` +- CDN → local config migration +- Colors, radius, shadows, typography rationalized + +**Phase 2 - Core Components (MVP)** +- All components extracted and rationalized +- Card (composition architecture) +- Button, Badge, Input, Container +- Section components (Hero, CTA, Feature, Grid...) +- **Navbar refactored** (split into sub-components) + +**Phase 3 - Pages Refactoring (MVP)** +- 15 pages refactored with component approach +- No complex inline JSX +- DS component composition only + +**Phase 4 - AI Documentation (MVP)** +- CLAUDE.md as agent entry point +- DS documentation in Markdown (tokens, components, patterns) +- Clear structure for AI navigation +- **Design System Showcase page** (hidden route, hors navigation) presenting all tokens and components visually + +### Risk Mitigation Strategy + +| Risk | Impact | Mitigation | +|------|--------|------------| +| **Scope creep** | Refactor more than necessary | Clearly define "rationalized" vs "improved" | +| **Visual deviation** | Prototype validated by stakeholders | Systematic visual validation, minor changes only | +| **Complex Navbar** | 17KB, hard to split | Progressive split into sub-components, visual tests | +| **Over-engineering** | Create unnecessary abstractions | Keep it simple, Tailwind inline, no recipes | + +### Guardrails + +**What we DO:** +- Rationalize (reduce variants) +- Extract (create reusable components) +- Document (for AI) + +**What we DON'T do:** +- Improve design (except minor radius/shadow adjustments) +- Add features +- Change behavior + +## Functional Requirements + +### Token Management + +- **FR1:** Developer can access all color tokens from a centralized `tailwind.config.js` +- **FR2:** Developer can use 4 border-radius tokens (sm, md, lg, xl) consistently across components +- **FR3:** Developer can use 4 shadow tokens (sm, md, lg, hero) consistently across components +- **FR4:** Developer can use 12 typography size tokens consistently across components +- **FR5:** Developer can access semantic color tokens (not just primitive colors) + +### Core Component Extraction + +- **FR6:** Developer can import a single Card component with composition primitives (CardRoot, CardHeader, CardBody, CardFooter) +- **FR7:** Developer can import a rationalized Button component with consistent variants +- **FR8:** Developer can import Badge, Input, and Container components from the DS +- **FR9:** Developer can import Section components (Hero, CTA, Feature, Grid, etc.) +- **FR10:** All components use tokens from tailwind.config.js (no hardcoded values) + +### Navbar Rationalization + +- **FR11:** Developer can import Navbar as a composition of sub-components +- **FR12:** Navbar sub-components are reusable independently +- **FR13:** Navbar maintains current responsive behavior across breakpoints + +### Page Composition + +- **FR14:** Developer can compose pages using only DS components (no inline JSX) +- **FR15:** All 15 pages are refactored to use DS components +- **FR16:** Pages follow consistent import and composition patterns +- **FR17:** Pages maintain current responsive behavior (mobile-first) + +### AI Documentation + +- **FR18:** AI Agent can read CLAUDE.md and understand navigation entry points +- **FR19:** AI Agent can access tokens documentation in Markdown format +- **FR20:** AI Agent can access components catalog with props documentation +- **FR21:** AI Agent can understand DS usage patterns from documentation +- **FR22:** Documentation structure enables efficient AI navigation + +### Design System Showcase Page + +- **FR23:** Developer can access a dedicated page showcasing all DS components (route: `/design-system` ou similaire) +- **FR24:** Showcase page is NOT visible in navigation (hidden route, accessible by URL only) +- **FR25:** Showcase page displays all tokens (colors, radius, shadows, typography) with visual examples +- **FR26:** Showcase page displays all components with their variants and props +- **FR27:** Showcase page serves as living documentation for AI agent and developer reference + +### Visual Fidelity + +- **FR28:** Rationalized prototype renders visually similar to current prototype +- **FR29:** Minor adjustments (radius, shadow harmonization) are acceptable +- **FR30:** No functional or behavioral changes from current prototype + +## Non-Functional Requirements + +### Code Quality + +- **NFR1:** All components use tokens from tailwind.config.js (0 hardcoded values) +- **NFR2:** Consistent naming conventions across all components +- **NFR3:** TypeScript types defined for all component props +- **NFR4:** No duplicate component implementations (1 source of truth per component) +- **NFR5:** Build passes without errors or warnings + +### AI-Readability + +- **NFR6:** File structure follows predictable patterns (easy AI navigation) +- **NFR7:** Component names are explicit and descriptive +- **NFR8:** CLAUDE.md provides clear navigation entry points +- **NFR9:** Documentation uses consistent Markdown structure +- **NFR10:** Token-to-class mapping is unambiguous + +### Maintainability + +- **NFR11:** Component composition patterns are consistent across the codebase +- **NFR12:** Import patterns follow a single convention +- **NFR13:** Responsive utilities usage is consistent (sm:, md:, lg:, xl:) +- **NFR14:** Mobile-first approach consistently applied + +### Visual Fidelity + +- **NFR15:** Rationalized prototype is visually indistinguishable from current prototype at first glance +- **NFR16:** Only intentional minor adjustments (radius, shadow harmonization) are visible +- **NFR17:** No layout shifts or broken responsive behavior +- **NFR18:** All animations and transitions preserved From 09daf05b58b75b7d89d13be8d6eb01784040086b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?j=C3=A9r=C3=B4me=20boileux?= Date: Tue, 13 Jan 2026 00:44:59 +0100 Subject: [PATCH 03/21] feat(architecture): Create comprehensive architecture document Add initial architecture decision document detailing project context, technical constraints, and core architectural decisions for design system rationalization. Includes functional/non-functional requirements, technology stack, and migration path. --- .../planning-artifacts/architecture.md | 708 ++++++++++++++++++ .../bmm-workflow-status.yaml | 10 +- 2 files changed, 713 insertions(+), 5 deletions(-) create mode 100644 _bmad-output/planning-artifacts/architecture.md diff --git a/_bmad-output/planning-artifacts/architecture.md b/_bmad-output/planning-artifacts/architecture.md new file mode 100644 index 0000000..57ed0c2 --- /dev/null +++ b/_bmad-output/planning-artifacts/architecture.md @@ -0,0 +1,708 @@ +--- +stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8] +status: complete +completedAt: '2026-01-13' +inputDocuments: + - _bmad-output/planning-artifacts/prd.md + - _bmad-output/analysis/design-system-spec.md + - _bmad-output/analysis/brainstorming-session-2026-01-12.md + - _bmad-output/analysis/action-plan.md + - docs/index.md + - docs/project-overview.md + - docs/architecture.md + - docs/component-inventory.md + - docs/data-models.md + - docs/api-architecture.md + - docs/source-tree-analysis.md + - docs/development-guide.md +workflowType: 'architecture' +project_name: 'prototype' +user_name: 'jerome' +date: '2026-01-13' +--- + +# Architecture Decision Document + +_This document builds collaboratively through step-by-step discovery. Sections are appended as we work through each architectural decision together._ + +## Project Context Analysis + +### Requirements Overview + +**Functional Requirements (30 FRs):** +- Token Management (FR1-5): Centralized tokens in tailwind.config.js +- Core Components (FR6-10): Card composition, Button, Badge, Input, Container +- Navbar (FR11-13): Sub-component architecture +- Pages (FR14-17): 15 pages using DS components only +- AI Documentation (FR18-22): CLAUDE.md, token/component docs +- Showcase Page (FR23-27): Hidden route for DS visualization +- Visual Fidelity (FR28-30): Near-identical rendering + +**Non-Functional Requirements (18 NFRs):** +- Code Quality: TypeScript types, no hardcoded values, build passes +- AI-Readability: Predictable patterns, explicit naming, clear docs +- Maintainability: Consistent patterns, mobile-first approach +- Visual Fidelity: No layout shifts, animations preserved + +**Scale & Complexity:** +- Primary domain: Frontend (Design System) +- Complexity level: Medium +- Components to create: ~15-20 +- Pages to refactor: 15 + +### Technical Constraints & Dependencies + +| Constraint | Impact | +|------------|--------| +| Stack frozen (React 19 + TS + Vite) | No framework changes allowed | +| Tailwind inline only | No CSS-in-JS recipes or abstractions | +| Panda CSS migration out of scope | Architecture must facilitate future migration | +| Preserve all animations | Visual validation required | +| No automated tests | Manual visual comparison only | +| Navbar 17KB monolith | Progressive refactoring strategy needed | + +### Cross-Cutting Concerns + +1. **AI-Readability**: Every architectural decision must optimize for AI agent comprehension +2. **Visual Fidelity**: Zero-tolerance for visual regressions +3. **Token Consistency**: Single source of truth in tailwind.config.js +4. **Composition Pattern**: Park UI-style composition (Root/Header/Body/Footer) +5. **Props Uniformity**: variant, size, colorPalette across all components + +## Starter Template Evaluation + +### Primary Technology Domain + +**Brownfield Project** - Existing React 19 SPA with Design System rationalization focus + +### Existing Stack (Fixed) + +| Technology | Version | Purpose | +|------------|---------|---------| +| React | 19.2.3 | UI Framework | +| TypeScript | 5.8.2 | Type Safety | +| Vite | 6.2.0 | Build Tool | +| Tailwind CSS | Latest (CDN→Local) | Styling | +| React Router | 7.x | Client-side Routing | +| Lucide React | 0.561.0 | Icons | + +### Architectural Decisions Pre-Established + +**From Existing Codebase:** +- SPA architecture with HashRouter +- Component-based structure (components/ + pages/) +- TypeScript with strict mode +- Vite configuration with path aliases (@/*) +- Custom fonts loaded from CDN + +**From PRD Constraints:** +- Tailwind inline only (no CSS-in-JS) +- No state management library needed +- No automated testing (visual validation) +- Mobile-first responsive patterns preserved + +### Decisions Required by This Architecture + +1. **Component Organization**: DS folder structure +2. **Composition Pattern**: Park UI-style implementation +3. **Token Architecture**: tailwind.config.js structure +4. **AI Documentation**: CLAUDE.md and DS docs structure +5. **Showcase Page**: Route and component structure + +### Migration Path + +**Current State → Target State:** +- Tailwind CDN → Local tailwind.config.js +- Inline hardcoded values → Token references +- Monolithic components → Composition primitives +- Pages with inline JSX → DS component composition + +## Core Architectural Decisions + +### Decision Priority Analysis + +**Critical Decisions (Block Implementation):** +- Component folder structure +- Token architecture in tailwind.config.js +- Composition pattern implementation + +**Important Decisions (Shape Architecture):** +- Documentation structure for AI +- Showcase page organization + +**Deferred Decisions (Post-MVP):** +- None - all decisions made for DS rationalization scope + +### Component Organization + +**Decision:** Folder-per-component with centralized index.ts exports + +**Structure:** +``` +components/ +├── Button/ +│ ├── index.ts +│ └── Button.tsx +├── Card/ +│ ├── index.ts +│ ├── CardRoot.tsx +│ ├── CardHeader.tsx +│ ├── CardTitle.tsx +│ ├── CardDescription.tsx +│ ├── CardBody.tsx +│ └── CardFooter.tsx +├── Section/ +│ ├── index.ts +│ ├── Section.tsx +│ ├── HeroSection.tsx +│ ├── CtaSection.tsx +│ └── ... +└── Showcase/ + ├── index.ts + ├── TokensShowcase.tsx + ├── ComponentsShowcase.tsx + └── SectionsShowcase.tsx +``` + +**Rationale:** Clear for AI navigation, Park UI compatible, centralized exports + +### Token Architecture + +**Decision:** Hierarchical structure with DEFAULT variants + +**Structure in tailwind.config.js:** +```js +theme: { + extend: { + colors: { + ocobo: { + dark: '#212323', + yellow: { DEFAULT: '#F1CF25', light: '#FFFCEE' }, + mint: { DEFAULT: '#9ADBBA', light: '#EBFDF5' }, + sky: { DEFAULT: '#99D1DF', light: '#F0F9FB' }, + coral: { DEFAULT: '#FE9C87', light: '#FFF5F2' }, + gray: { 50: '#FAFAFA', 100: '#F5F5F5', ... } + } + }, + borderRadius: { sm: '0.5rem', md: '1rem', lg: '1.5rem', xl: '2.5rem' }, + boxShadow: { sm: '...', md: '...', lg: '...', hero: '...' }, + fontSize: { /* 12 sizes */ } + } +} +``` + +**Rationale:** Direct Panda CSS mapping, classes like `bg-ocobo-yellow`, `bg-ocobo-yellow-light` + +### Composition Pattern + +**Decision:** Context Provider + Compound Components with namespace + +**Implementation:** +```tsx + + + Title + Description + + Content + Actions + +``` + +**Export Pattern (index.ts):** +```tsx +import { CardRoot } from './CardRoot' +import { CardHeader } from './CardHeader' +import { CardTitle } from './CardTitle' +import { CardDescription } from './CardDescription' +import { CardBody } from './CardBody' +import { CardFooter } from './CardFooter' + +export const Card = { + Root: CardRoot, + Header: CardHeader, + Title: CardTitle, + Description: CardDescription, + Body: CardBody, + Footer: CardFooter, +} +``` + +**Context Interface:** +```tsx +interface CardContextValue { + variant: 'default' | 'outlined' | 'ghost' | 'filled' | 'elevated' + size: 'sm' | 'md' | 'lg' + colorPalette: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} +``` + +**Rationale:** +- Namespace explicite (`Card.X`) pour clarté AI +- Context pour héritage automatique des props +- Pattern Radix UI / Park UI compatible + +### AI Documentation Structure + +**Decision:** CLAUDE.md entry point + dedicated docs folder + +**Structure:** +``` +CLAUDE.md # Entry point, navigation guide +docs/design-system/ +├── tokens.md # Colors, radius, shadows, typography +├── components.md # Component catalog with props +└── patterns.md # Page composition patterns +``` + +**Rationale:** Modular, CLAUDE.md stays concise, easy AI navigation + +### Showcase Page Architecture + +**Decision:** Single page with imported section components + +**Structure:** +``` +pages/DesignSystem.tsx # Layout + internal navigation +components/Showcase/ +├── index.ts +├── TokensShowcase.tsx # Visual token display +├── ComponentsShowcase.tsx # Component variants demo +└── SectionsShowcase.tsx # Section components demo +``` + +**Route:** `/design-system` (hidden from Navbar) + +**Rationale:** Maintainable sections, single hidden route, living documentation + +## Implementation Patterns & Consistency Rules + +### Pattern Categories Defined + +**Critical Conflict Points Identified:** 6 areas standardized for AI agent consistency + +### Naming Patterns + +**File Naming:** +- Convention: `kebab-case.tsx` +- Examples: `card-root.tsx`, `card-header.tsx`, `hero-section.tsx` +- Index files: `index.ts` (lowercase) + +**Interface Naming:** +- Convention: `ComponentNameProps` +- Examples: `CardRootProps`, `ButtonProps`, `HeroSectionProps` + +**Component Naming:** +- Convention: PascalCase for components +- Examples: `CardRoot`, `CardHeader`, `HeroSection` + +### Export Patterns + +**Namespace Export (index.ts):** +```tsx +// components/Card/index.ts +import { CardRoot } from './card-root' +import { CardHeader } from './card-header' +import { CardTitle } from './card-title' +import { CardDescription } from './card-description' +import { CardBody } from './card-body' +import { CardFooter } from './card-footer' + +export const Card = { + Root: CardRoot, + Header: CardHeader, + Title: CardTitle, + Description: CardDescription, + Body: CardBody, + Footer: CardFooter, +} +``` + +**Usage:** +```tsx +import { Card } from '@/components/Card' + + + ... + +``` + +### Tailwind Class Patterns + +**Order Convention (grouped logically):** +```tsx +className=" + flex items-center gap-4 {/* 1. Layout */} + px-4 py-2 {/* 2. Spacing */} + bg-ocobo-yellow rounded-md {/* 3. Appearance */} + hover:bg-ocobo-yellow-light {/* 4. States */} + transition-colors {/* 5. Animation */} +" +``` + +**Token Usage:** +- Colors: `bg-ocobo-yellow`, `text-ocobo-dark`, `border-ocobo-mint` +- Radius: `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl` +- Shadows: `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-hero` + +### Props Patterns + +**Default Values (in destructuring):** +```tsx +interface CardRootProps { + variant?: 'default' | 'outlined' | 'ghost' | 'filled' | 'elevated' + size?: 'sm' | 'md' | 'lg' + colorPalette?: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' + children: React.ReactNode +} + +function CardRoot({ + variant = 'default', + size = 'md', + colorPalette = 'yellow', + children, +}: CardRootProps) { + // ... +} +``` + +### Context Patterns + +**Context Implementation:** +```tsx +// card-context.ts +import { createContext, useContext } from 'react' + +interface CardContextValue { + variant: 'default' | 'outlined' | 'ghost' | 'filled' | 'elevated' + size: 'sm' | 'md' | 'lg' + colorPalette: 'yellow' | 'mint' | 'sky' | 'coral' | 'dark' +} + +const CardContext = createContext(null) + +export function useCardContext() { + const context = useContext(CardContext) + if (!context) { + throw new Error('Card components must be used within Card.Root') + } + return context +} + +export const CardProvider = CardContext.Provider +``` + +### Enforcement Guidelines + +**All AI Agents MUST:** +- Use kebab-case for all new component files +- Export components via namespace pattern only +- Follow Tailwind class ordering convention +- Implement Context with explicit error on misuse +- Use `ComponentNameProps` for all interfaces + +**Anti-Patterns to Avoid:** +- ❌ PascalCase files: `CardRoot.tsx` +- ❌ Default exports: `export default Card` +- ❌ Inline hardcoded colors: `bg-[#F1CF25]` +- ❌ Context without error handling +- ❌ Mixed naming conventions + +## Project Structure & Boundaries + +### Complete Project Directory Structure + +``` +prototype/ +├── CLAUDE.md # AI entry point +├── tailwind.config.js # Design tokens (NEW) +├── postcss.config.js # PostCSS config (NEW) +├── index.html # Modified (remove CDN) +├── App.tsx # Add /design-system route +│ +├── components/ +│ ├── Button/ +│ │ ├── index.ts +│ │ └── button.tsx +│ ├── Badge/ +│ │ ├── index.ts +│ │ └── badge.tsx +│ ├── Input/ +│ │ ├── index.ts +│ │ └── input.tsx +│ ├── Container/ +│ │ ├── index.ts +│ │ └── container.tsx +│ ├── Card/ +│ │ ├── index.ts +│ │ ├── card-context.ts +│ │ ├── card-root.tsx +│ │ ├── card-header.tsx +│ │ ├── card-title.tsx +│ │ ├── card-description.tsx +│ │ ├── card-body.tsx +│ │ ├── card-footer.tsx +│ │ ├── card-media.tsx +│ │ └── card-avatar.tsx +│ ├── Section/ +│ │ ├── index.ts +│ │ ├── section.tsx +│ │ ├── hero-section.tsx +│ │ ├── cta-section.tsx +│ │ ├── feature-section.tsx +│ │ ├── grid-section.tsx +│ │ ├── testimonial-section.tsx +│ │ ├── stats-section.tsx +│ │ └── decorative-blob.tsx +│ ├── Navbar/ +│ │ ├── index.ts +│ │ ├── navbar.tsx +│ │ ├── navbar-menu.tsx +│ │ ├── navbar-logo.tsx +│ │ └── navbar-mobile.tsx +│ ├── Footer/ +│ │ ├── index.ts +│ │ └── footer.tsx +│ └── Showcase/ +│ ├── index.ts +│ ├── tokens-showcase.tsx +│ ├── components-showcase.tsx +│ └── sections-showcase.tsx +│ +├── pages/ +│ ├── Home.tsx +│ ├── About.tsx +│ ├── Services.tsx +│ ├── Method.tsx +│ ├── Partners.tsx +│ ├── Studio.tsx +│ ├── Stories.tsx +│ ├── Jobs.tsx +│ ├── Resources.tsx +│ ├── Podcast.tsx +│ ├── Contact.tsx +│ ├── ArticleDetail.tsx +│ ├── JobDetail.tsx +│ ├── StoryDetail.tsx +│ ├── WebinarDetail.tsx +│ └── DesignSystem.tsx # Hidden showcase (NEW) +│ +└── docs/design-system/ # AI documentation (NEW) + ├── tokens.md + ├── components.md + └── patterns.md +``` + +### Architectural Boundaries + +**Layer Architecture:** +1. **Pages Layer**: Compose sections, no inline JSX +2. **Section Components**: Compose core components +3. **Core Components**: Use tokens only, provide composition API +4. **Design Tokens**: Single source in tailwind.config.js + +**Component Communication:** +- Props for data passing (top-down) +- Context for composition inheritance (Card, Section) +- No global state management + +**Data Boundaries:** +- No database (frontend only) +- Existing Gemini API integration unchanged +- Static data in page components + +### Requirements to Structure Mapping + +| FR Category | Target Location | +|-------------|-----------------| +| FR1-5 (Tokens) | `tailwind.config.js` | +| FR6-10 (Core Components) | `components/Button/`, `Card/`, `Badge/`, `Input/`, `Container/` | +| FR11-13 (Navbar) | `components/Navbar/` | +| FR14-17 (Pages) | `pages/*.tsx` | +| FR18-22 (AI Docs) | `CLAUDE.md`, `docs/design-system/` | +| FR23-27 (Showcase) | `pages/DesignSystem.tsx`, `components/Showcase/` | + +### File Change Summary + +| Type | Count | Examples | +|------|-------|----------| +| New files | ~35 | Card primitives, Section components, Showcase | +| Modified files | ~18 | All pages, App.tsx, index.html | +| Deleted files | 1 | ServiceCard.tsx (replaced by Card) | +| Unchanged | ~10 | fonts/, most docs/, types.ts | + +## Architecture Validation Results + +### Coherence Validation ✅ + +**Decision Compatibility:** +All technology choices (React 19 + TypeScript 5.8 + Vite 6 + Tailwind local) are fully compatible and commonly used together. + +**Pattern Consistency:** +- Context + Namespace composition pattern is coherent with React best practices +- kebab-case files + PascalCase components is a valid, consistent convention +- Export patterns via namespace align with composition architecture + +**Structure Alignment:** +- Folder-per-component structure supports the namespace export pattern +- Layer architecture (Pages → Sections → Core → Tokens) is properly reflected in directories + +### Requirements Coverage Validation ✅ + +**Functional Requirements (30/30 covered):** +- Token Management (FR1-5): ✅ tailwind.config.js +- Core Components (FR6-10): ✅ Card, Button, Badge, Input, Container +- Navbar (FR11-13): ✅ Sub-component architecture +- Page Composition (FR14-17): ✅ Refactoring plan +- AI Documentation (FR18-22): ✅ CLAUDE.md + docs/design-system/ +- Showcase Page (FR23-27): ✅ DesignSystem.tsx + Showcase components +- Visual Fidelity (FR28-30): ✅ Manual visual validation + +**Non-Functional Requirements (18/18 covered):** +- Code Quality (NFR1-5): ✅ Token architecture, TypeScript +- AI-Readability (NFR6-10): ✅ Explicit patterns, documentation +- Maintainability (NFR11-14): ✅ Composition pattern +- Visual Fidelity (NFR15-18): ✅ Manual validation strategy + +### Implementation Readiness Validation ✅ + +**Decision Completeness:** +- All critical decisions documented with rationale +- Implementation patterns have concrete code examples +- Consistency rules are explicit and enforceable + +**Structure Completeness:** +- ~35 new files mapped to specific locations +- All integration points defined +- Requirements-to-structure mapping complete + +**Pattern Completeness:** +- 6 consistency patterns defined +- Anti-patterns documented +- Examples provided for all patterns + +### Gap Analysis Results + +**Critical Gaps:** None identified + +**Important Gaps:** None identified + +**Future Enhancements (Post-MVP):** +- Visual regression testing (Chromatic/Percy) +- Storybook documentation generation +- Automated linting for pattern enforcement + +### Architecture Completeness Checklist + +**✅ Requirements Analysis** +- [x] Project context thoroughly analyzed +- [x] Scale and complexity assessed (Medium) +- [x] Technical constraints identified (stack frozen) +- [x] Cross-cutting concerns mapped (AI-readability, visual fidelity) + +**✅ Architectural Decisions** +- [x] Critical decisions documented with versions +- [x] Technology stack fully specified +- [x] Integration patterns defined +- [x] Component boundaries established + +**✅ Implementation Patterns** +- [x] Naming conventions established (kebab-case files) +- [x] Structure patterns defined (namespace exports) +- [x] Communication patterns specified (Context) +- [x] Process patterns documented (defaults, error handling) + +**✅ Project Structure** +- [x] Complete directory structure defined +- [x] Component boundaries established (4 layers) +- [x] Integration points mapped +- [x] Requirements to structure mapping complete + +### Architecture Readiness Assessment + +**Overall Status:** READY FOR IMPLEMENTATION ✅ + +**Confidence Level:** HIGH + +**Key Strengths:** +- Clear AI-optimized architecture +- Explicit patterns prevent agent conflicts +- Complete requirements coverage +- Park UI-compatible composition + +**Areas for Future Enhancement:** +- Automated visual testing +- Storybook integration +- Pattern linting rules + +### Implementation Handoff + +**AI Agent Guidelines:** +- Follow all architectural decisions exactly as documented +- Use implementation patterns consistently across all components +- Respect project structure and boundaries +- Refer to this document for all architectural questions + +**Implementation Priority:** +1. Phase 1: Tokens (tailwind.config.js) +2. Phase 2: Core Components (Button, Badge, Input, Container, Card) +3. Phase 3: Section Components + Navbar refactoring +4. Phase 4: Page refactoring + Showcase + Documentation + +## Architecture Completion Summary + +### Workflow Completion + +**Architecture Decision Workflow:** COMPLETED ✅ +**Total Steps Completed:** 8 +**Date Completed:** 2026-01-13 +**Document Location:** `_bmad-output/planning-artifacts/architecture.md` + +### Final Architecture Deliverables + +**📋 Complete Architecture Document** +- All architectural decisions documented with specific versions +- Implementation patterns ensuring AI agent consistency +- Complete project structure with all files and directories +- Requirements to architecture mapping +- Validation confirming coherence and completeness + +**🏗️ Implementation Ready Foundation** +- 5 major architectural decisions made +- 6 implementation patterns defined +- ~35 new component files specified +- 30 FRs + 18 NFRs fully supported + +**📚 AI Agent Implementation Guide** +- Technology stack with verified versions +- Consistency rules that prevent implementation conflicts +- Project structure with clear boundaries +- Integration patterns and communication standards + +### Quality Assurance Checklist + +**✅ Architecture Coherence** +- [x] All decisions work together without conflicts +- [x] Technology choices are compatible +- [x] Patterns support the architectural decisions +- [x] Structure aligns with all choices + +**✅ Requirements Coverage** +- [x] All functional requirements are supported +- [x] All non-functional requirements are addressed +- [x] Cross-cutting concerns are handled +- [x] Integration points are defined + +**✅ Implementation Readiness** +- [x] Decisions are specific and actionable +- [x] Patterns prevent agent conflicts +- [x] Structure is complete and unambiguous +- [x] Examples are provided for clarity + +--- + +**Architecture Status:** READY FOR IMPLEMENTATION ✅ + +**Next Phase:** Begin implementation using the architectural decisions and patterns documented herein. + +**Document Maintenance:** Update this architecture when major technical decisions are made during implementation. diff --git a/_bmad-output/planning-artifacts/bmm-workflow-status.yaml b/_bmad-output/planning-artifacts/bmm-workflow-status.yaml index 3e36dc8..200da78 100644 --- a/_bmad-output/planning-artifacts/bmm-workflow-status.yaml +++ b/_bmad-output/planning-artifacts/bmm-workflow-status.yaml @@ -71,19 +71,19 @@ workflow_status: phase_3_solutioning: name: "Solutioning" - next_workflow: create-architecture + next_workflow: create-epics-and-stories workflows: create-architecture: - status: ready + status: _bmad-output/planning-artifacts/architecture.md agent: architect command: /bmad:bmm:workflows:create-architecture output: "System architecture document" - note: "NEXT - Define component structure, file organization, DS patterns" + completed: 2026-01-13 create-epics-and-stories: - status: required + status: ready agent: pm command: /bmad:bmm:workflows:create-epics-and-stories - note: "Break down PRD into implementable epics and stories" + note: "NEXT - Break down PRD into implementable epics and stories" test-design: status: optional agent: tea From 9a91223bbf68b1b378f9dfb4f10d2bb4ef4a19a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?j=C3=A9r=C3=B4me=20boileux?= Date: Tue, 13 Jan 2026 00:59:27 +0100 Subject: [PATCH 04/21] feat(design-system): Create epic breakdown for prototype rationalization Add comprehensive epic and story breakdown for the Design System Rationalization project, detailing functional and non-functional requirements from PRD, Architecture, and Design System Specification. Includes token management, component extraction, navbar rationalization, page composition, and AI documentation requirements. --- .../bmm-workflow-status.yaml | 6 +- _bmad-output/planning-artifacts/epics.md | 1005 +++++++++++++++++ 2 files changed, 1008 insertions(+), 3 deletions(-) create mode 100644 _bmad-output/planning-artifacts/epics.md diff --git a/_bmad-output/planning-artifacts/bmm-workflow-status.yaml b/_bmad-output/planning-artifacts/bmm-workflow-status.yaml index 200da78..493807e 100644 --- a/_bmad-output/planning-artifacts/bmm-workflow-status.yaml +++ b/_bmad-output/planning-artifacts/bmm-workflow-status.yaml @@ -71,7 +71,7 @@ workflow_status: phase_3_solutioning: name: "Solutioning" - next_workflow: create-epics-and-stories + next_workflow: implementation-readiness workflows: create-architecture: status: _bmad-output/planning-artifacts/architecture.md @@ -80,10 +80,10 @@ workflow_status: output: "System architecture document" completed: 2026-01-13 create-epics-and-stories: - status: ready + status: _bmad-output/planning-artifacts/epics.md agent: pm command: /bmad:bmm:workflows:create-epics-and-stories - note: "NEXT - Break down PRD into implementable epics and stories" + completed: 2026-01-13 test-design: status: optional agent: tea diff --git a/_bmad-output/planning-artifacts/epics.md b/_bmad-output/planning-artifacts/epics.md new file mode 100644 index 0000000..1240a93 --- /dev/null +++ b/_bmad-output/planning-artifacts/epics.md @@ -0,0 +1,1005 @@ +--- +stepsCompleted: [1, 2, 3, 4] +inputDocuments: + - _bmad-output/planning-artifacts/prd.md + - _bmad-output/planning-artifacts/architecture.md + - _bmad-output/analysis/design-system-spec.md +--- + +# prototype - Epic Breakdown + +## Overview + +This document provides the complete epic and story breakdown for prototype, decomposing the requirements from the PRD, Architecture, and Design System Specification into implementable stories for the Design System Rationalization project. + +## Requirements Inventory + +### Functional Requirements + +**Token Management (FR1-5):** +- FR1: AI Agent can read all colors, radius, shadows from centralized source +- FR2: AI Agent can read all typography sizes from centralized source +- FR3: AI Agent can access all design tokens in Tailwind format +- FR4: All design tokens are defined in tailwind.config.js only +- FR5: No hardcoded color/radius/shadow/font values in page code + +**Core Component Extraction (FR6-10):** +- FR6: Card component supports composition via primitives (Root, Header, Title, Description, Body, Footer, Media, Badge, Avatar) +- FR7: Button component supports variant, size, colorPalette props +- FR8: Badge component supports variant, size, colorPalette props +- FR9: Input component supports variant, size props +- FR10: Container component supports size prop for layout width + +**Navbar Rationalization (FR11-13):** +- FR11: Navbar split into sub-components (navbar, navbar-menu, navbar-logo, navbar-mobile) +- FR12: Navbar maintains current visual appearance +- FR13: Navbar sub-components are reusable + +**Page Composition (FR14-17):** +- FR14: All 15 pages use DS components only +- FR15: No inline JSX styling in page files (tokens via className) +- FR16: Pages compose Section components (HeroSection, CtaSection, etc.) +- FR17: Pages have consistent layout patterns + +**AI Documentation (FR18-22):** +- FR18: AI Agent can read CLAUDE.md and understand navigation entry points +- FR19: AI Agent can access tokens documentation in Markdown format +- FR20: AI Agent can access components catalog with props documentation +- FR21: AI Agent can understand DS usage patterns from documentation +- FR22: Documentation structure enables efficient AI navigation + +**Design System Showcase Page (FR23-27):** +- FR23: Developer can access a dedicated page showcasing all DS components (route: /design-system) +- FR24: Showcase page is NOT visible in navigation (hidden route, accessible by URL only) +- FR25: Showcase page displays all tokens (colors, radius, shadows, typography) with visual examples +- FR26: Showcase page displays all components with their variants and props +- FR27: Showcase page serves as living documentation for AI agent and developer reference + +**Visual Fidelity (FR28-30):** +- FR28: Rationalized prototype renders visually similar to current prototype +- FR29: Minor adjustments (radius, shadow harmonization) are acceptable +- FR30: No functional or behavioral changes from current prototype + +### NonFunctional Requirements + +**Code Quality (NFR1-5):** +- NFR1: All color values derive from tailwind.config.js tokens +- NFR2: All radius values derive from tailwind.config.js tokens +- NFR3: All shadow values derive from tailwind.config.js tokens +- NFR4: All component props have TypeScript types +- NFR5: Build passes with no type errors + +**AI-Readability (NFR6-10):** +- NFR6: Component patterns are predictable and consistent +- NFR7: Naming conventions are explicit and meaningful +- NFR8: CLAUDE.md provides clear navigation to DS documentation +- NFR9: DS documentation is structured for AI parsing +- NFR10: Composition patterns are documented with examples + +**Maintainability (NFR11-14):** +- NFR11: New page can be created using existing DS components only +- NFR12: Token changes propagate automatically to all components +- NFR13: Component variant patterns are consistent across all components +- NFR14: Mobile-first responsive patterns are applied consistently + +**Visual Fidelity (NFR15-18):** +- NFR15: All existing animations and transitions are preserved +- NFR16: No layout shifts or visual regressions +- NFR17: Color palette is visually identical +- NFR18: Typography hierarchy is visually identical + +### Additional Requirements + +**From Architecture Document:** +- Brownfield project - no starter template needed +- Folder-per-component structure with centralized index.ts exports +- Context Provider + Namespace pattern for composition (`Card.Root`, `Card.Header`, etc.) +- kebab-case file naming convention (e.g., `card-root.tsx`) +- Tailwind class ordering: Layout → Spacing → Appearance → States → Animation +- `ComponentNameProps` interface naming convention +- Export via named namespace only (e.g., `export const Card = { Root, Header, ... }`) + +**From Design System Specification:** +- 5 core components: Container, Button, Badge, Input, Card +- 8 section components: Section, HeroSection, CtaSection, FeatureSection, GridSection, TestimonialSection, StatsSection, DecorativeBlob +- Card composition: 9 primitives (Root, Header, Title, Description, Body, Footer, Media, Badge, Avatar) +- Typography scale: 12 sizes from text-micro (10px) to text-7xl (72px) +- Border radius: 5 tokens (sm, md, lg, xl, full) +- Shadows: 4 tokens (sm, md, lg, hero) +- 7 card variant use cases to support: Article, Profile, Job, Callout, Section item, Tool, Contact form + +### FR Coverage Map + +| FR | Epic | Description | +|----|------|-------------| +| FR1 | Epic 1 | AI Agent can read colors, radius, shadows from centralized source | +| FR2 | Epic 1 | AI Agent can read typography sizes from centralized source | +| FR3 | Epic 1 | AI Agent can access design tokens in Tailwind format | +| FR4 | Epic 1 | All design tokens defined in tailwind.config.js only | +| FR5 | Epic 1 | No hardcoded values in page code | +| FR6 | Epic 2 | Card component supports composition via primitives | +| FR7 | Epic 2 | Button component supports variant, size, colorPalette | +| FR8 | Epic 2 | Badge component supports variant, size, colorPalette | +| FR9 | Epic 2 | Input component supports variant, size | +| FR10 | Epic 2 | Container component supports size prop | +| FR11 | Epic 4 | Navbar split into sub-components | +| FR12 | Epic 4 | Navbar maintains current visual appearance | +| FR13 | Epic 4 | Navbar sub-components are reusable | +| FR14 | Epic 5 | All 15 pages use DS components only | +| FR15 | Epic 5 | No inline JSX styling in page files | +| FR16 | Epic 5 | Pages compose Section components | +| FR17 | Epic 5 | Pages have consistent layout patterns | +| FR18 | Epic 6 | AI Agent can read CLAUDE.md | +| FR19 | Epic 6 | AI Agent can access tokens documentation | +| FR20 | Epic 6 | AI Agent can access components catalog | +| FR21 | Epic 6 | AI Agent can understand DS usage patterns | +| FR22 | Epic 6 | Documentation enables efficient AI navigation | +| FR23 | Epic 7 | Developer can access DS showcase page | +| FR24 | Epic 7 | Showcase page NOT visible in navigation | +| FR25 | Epic 7 | Showcase displays all tokens | +| FR26 | Epic 7 | Showcase displays all components | +| FR27 | Epic 7 | Showcase serves as living documentation | +| FR28 | Epic 5 | Rationalized prototype visually similar | +| FR29 | Epic 5 | Minor adjustments acceptable | +| FR30 | Epic 5 | No functional or behavioral changes | + +## Epic List + +### Epic 1: Design Tokens Foundation + +AI Agent can access and understand all design tokens from a single source of truth (`tailwind.config.js`), enabling consistent styling across all components. + +**FRs covered:** FR1, FR2, FR3, FR4, FR5 +**NFRs covered:** NFR1, NFR2, NFR3 + +### Epic 2: Core UI Components + +AI Agent can compose user interfaces using Button, Badge, Input, Container, and the Card composition system with consistent props (variant, size, colorPalette). + +**FRs covered:** FR6, FR7, FR8, FR9, FR10 +**NFRs covered:** NFR4, NFR5, NFR6, NFR7, NFR13 + +### Epic 3: Section Components + +AI Agent can compose page sections using HeroSection, CtaSection, FeatureSection, GridSection, TestimonialSection, StatsSection, and DecorativeBlob components. + +**FRs covered:** None explicit (required by Architecture) +**Dependencies:** Epic 1 (tokens), Epic 2 (Card, Button) + +### Epic 4: Navbar Refactoring + +Navbar is maintainable and composed of reusable sub-components (navbar, navbar-menu, navbar-logo, navbar-mobile) while preserving visual appearance. + +**FRs covered:** FR11, FR12, FR13 +**Dependencies:** Epic 1 (tokens), Epic 2 (Button) + +### Epic 5: Page Refactoring + +All 15 pages exclusively use DS components with consistent layout patterns, visually identical to current prototype. + +**FRs covered:** FR14, FR15, FR16, FR17, FR28, FR29, FR30 +**NFRs covered:** NFR11, NFR12, NFR14, NFR15, NFR16, NFR17, NFR18 +**Dependencies:** Epic 1-4 + +### Epic 6: AI Documentation + +AI Agent can efficiently navigate and understand the entire Design System via CLAUDE.md entry point and dedicated documentation in docs/design-system/. + +**FRs covered:** FR18, FR19, FR20, FR21, FR22 +**NFRs covered:** NFR8, NFR9, NFR10 +**Dependencies:** Documents Epic 1-5 + +### Epic 7: Design System Showcase + +Developers can preview all tokens and components on a dedicated hidden page (/design-system) that serves as living documentation. + +**FRs covered:** FR23, FR24, FR25, FR26, FR27 +**Dependencies:** Displays Epic 1-5 + +--- + +## Epic 1: Design Tokens Foundation + +AI Agent can access and understand all design tokens from a single source of truth (`tailwind.config.js`), enabling consistent styling across all components. + +### Story 1.1: Migrate Tailwind Configuration from CDN to Local + +As an **AI Agent**, +I want the Tailwind configuration to be local in `tailwind.config.js`, +So that I can read and understand all design tokens from a single file. + +**Acceptance Criteria:** + +**Given** the project uses Tailwind via CDN in index.html +**When** I create a local tailwind.config.js with PostCSS configuration +**Then** all existing styles continue to work identically +**And** the CDN script is removed from index.html +**And** `npm run dev` and `npm run build` work without errors + +### Story 1.2: Define Color Tokens + +As an **AI Agent**, +I want all color values defined as tokens in tailwind.config.js, +So that I can reference colors consistently using `bg-ocobo-yellow`, `text-ocobo-dark`, etc. + +**Acceptance Criteria:** + +**Given** the design system specification defines color primitives and semantics +**When** I define colors in tailwind.config.js under `theme.extend.colors.ocobo` +**Then** all colors (dark, yellow, mint, sky, coral, gray scale) are accessible +**And** light variants use DEFAULT pattern (e.g., `yellow.light`) +**And** classes like `bg-ocobo-yellow-light` work correctly + +### Story 1.3: Define Spacing, Radius, and Shadow Tokens + +As an **AI Agent**, +I want border-radius and box-shadow values defined as tokens, +So that I can use consistent `rounded-md`, `shadow-hero` classes. + +**Acceptance Criteria:** + +**Given** the DS spec defines 5 radius tokens and 4 shadow tokens +**When** I define these in tailwind.config.js under `theme.extend` +**Then** `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-full` are available +**And** `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-hero` are available +**And** existing UI renders identically + +### Story 1.4: Define Typography Tokens + +As an **AI Agent**, +I want typography scale defined as tokens, +So that I can use consistent text sizes from `text-micro` to `text-7xl`. + +**Acceptance Criteria:** + +**Given** the DS spec defines 12 typography sizes +**When** I define fontSize tokens in tailwind.config.js +**Then** all sizes from `text-micro` (10px) to `text-7xl` (72px) are available +**And** font families `font-sans` (Bornia) and `font-display` (Bermia) are configured +**And** existing typography renders identically + +### Story 1.5: Create Token Documentation + +As an **AI Agent**, +I want tokens documented in `docs/design-system/tokens.md`, +So that I can quickly reference all available tokens. + +**Acceptance Criteria:** + +**Given** all tokens are defined in tailwind.config.js +**When** I create docs/design-system/tokens.md +**Then** the document lists all colors with hex values +**And** all radius tokens with pixel values +**And** all shadow tokens with CSS values +**And** all typography sizes with line heights + +--- + +## Epic 2: Core UI Components + +AI Agent can compose user interfaces using Button, Badge, Input, Container, and the Card composition system with consistent props (variant, size, colorPalette). + +### Story 2.1: Create Container Component + +As an **AI Agent**, +I want a Container component with size variants, +So that I can control page width consistently across all pages. + +**Acceptance Criteria:** + +**Given** I need to wrap page content with consistent max-width +**When** I use `` +**Then** content is centered with appropriate max-width +**And** sizes `sm` (max-w-3xl), `md` (max-w-5xl), `lg` (max-w-7xl), `full` are available +**And** the component follows kebab-case file naming (`container.tsx`) +**And** exports via namespace pattern `export const Container = ...` + +### Story 2.2: Create Button Component + +As an **AI Agent**, +I want a Button component with variant, size, and colorPalette props, +So that I can create consistent buttons throughout the application. + +**Acceptance Criteria:** + +**Given** I need interactive buttons with different styles +**When** I use ` @@ -275,7 +275,7 @@ const Home: React.FC = () => { -
+
{/* Massive Yellow Quote Mark - More visible */}
“ @@ -291,7 +291,7 @@ const Home: React.FC = () => {
-
+
AM
@@ -326,7 +326,7 @@ const Home: React.FC = () => { Résultat : une cacophonie, des stacks qui débordent et des organisations qui avancent à tâtons.

-
+
Nous refusons ce flou
@@ -339,8 +339,8 @@ const Home: React.FC = () => { { title: "Fiabiliser", desc: "la donnée", icon: , color: "ocobo-sky", lightColor: "ocobo-sky-light" }, { title: "Piloter", desc: "la croissance", icon: , color: "ocobo-mint", lightColor: "ocobo-mint-light" } ].map((item, i) => ( -
-
+
+
{item.icon} @@ -412,7 +412,7 @@ const Home: React.FC = () => {
-
+

Ce n’est pas un hasard.
C’est une méthode.

@@ -525,7 +525,7 @@ const Home: React.FC = () => {
- @@ -564,7 +564,7 @@ const Home: React.FC = () => {

- +
diff --git a/pages/JobDetail.tsx b/pages/JobDetail.tsx index fbf22e1..a980158 100644 --- a/pages/JobDetail.tsx +++ b/pages/JobDetail.tsx @@ -248,7 +248,7 @@ const JobDetail: React.FC = () => {
{/* FORMULAIRE CANDIDATURE (Style Newsletter Blog) */} -
+
{/* Motif architectural discret */}
diff --git a/pages/Jobs.tsx b/pages/Jobs.tsx index 17940f6..b831365 100644 --- a/pages/Jobs.tsx +++ b/pages/Jobs.tsx @@ -24,7 +24,7 @@ const VideoStoryCard = ({ episode, title, pitch, consultant, role, quote, icon,
{/* Video Placeholder Card */} -
+
{/* Play Button Overlay */}
-
+
@@ -217,15 +217,15 @@ const Jobs: React.FC = () => {
-
+
Intelligence Collective
- +
- -
+ +
100%
Impact
@@ -273,7 +273,7 @@ const Jobs: React.FC = () => {
{values.map((val, idx) => ( -
+
{val.icon}
@@ -298,7 +298,7 @@ const Jobs: React.FC = () => {
{jobs.map((job) => ( -
+
{/* Hover Highlight Bar */}
@@ -327,7 +327,7 @@ const Jobs: React.FC = () => { {/* 5. Processus de recrutement */}
-
+
@@ -403,17 +403,17 @@ const Jobs: React.FC = () => {
-
+
-
+
-
+
-
+
Venez prendre
un café.

On adore parler RevOps, même si vous ne cherchez pas de job tout de suite.

diff --git a/pages/Method.tsx b/pages/Method.tsx index 163921d..e7f442d 100644 --- a/pages/Method.tsx +++ b/pages/Method.tsx @@ -282,7 +282,7 @@ const Method: React.FC = () => {
{/* Card 1: Alignment */} -
+
@@ -294,7 +294,7 @@ const Method: React.FC = () => { Avant de toucher aux outils, nous alignons les hommes. Nous cassons les silos entre Marketing, Sales et CS pour créer une seule équipe Revenue avec des objectifs communs.

-
+
LIVRABLES CLÉS
@@ -323,7 +323,7 @@ const Method: React.FC = () => {
{/* Card 2: Technologie */} -
+
@@ -335,7 +335,7 @@ const Method: React.FC = () => { Nous construisons une stack connectée et épurée. Pas d'usine à gaz. Juste les bons outils, connectés au bon moment, pour servir les process.

-
+
LIVRABLES CLÉS
@@ -364,7 +364,7 @@ const Method: React.FC = () => {
{/* Card 3: Performance */} -
+
@@ -376,7 +376,7 @@ const Method: React.FC = () => { On ne pilote pas ce qu'on ne mesure pas. Nous alignons les indicateurs et les incitations (rémunération) sur vos objectifs stratégiques.

-
+
LIVRABLES CLÉS
@@ -405,7 +405,7 @@ const Method: React.FC = () => {
{/* Card 4: Enablement */} -
+
@@ -417,7 +417,7 @@ const Method: React.FC = () => { Le meilleur système ne vaut rien s'il n'est pas utilisé. Nous formons, coachons et documentons pour assurer l'adoption durable.

-
+
LIVRABLES CLÉS
@@ -459,7 +459,7 @@ const Method: React.FC = () => {
{/* Card 1 */} -
+
@@ -472,7 +472,7 @@ const Method: React.FC = () => {
{/* Card 2 */} -
+
@@ -485,7 +485,7 @@ const Method: React.FC = () => {
{/* Card 3 */} -
+
@@ -498,7 +498,7 @@ const Method: React.FC = () => {
{/* Card 4 */} -
+
@@ -511,7 +511,7 @@ const Method: React.FC = () => {
{/* Card 5 */} -
+
@@ -524,7 +524,7 @@ const Method: React.FC = () => {
{/* Card 6 */} -
+
diff --git a/pages/Partners.tsx b/pages/Partners.tsx index 1ec706e..b632107 100644 --- a/pages/Partners.tsx +++ b/pages/Partners.tsx @@ -40,7 +40,7 @@ const ModularStackGrid = () => { className={` aspect-square rounded-2xl border transition-all duration-500 flex items-center justify-center ${item.type === 'logo' - ? 'group bg-white border-gray-100 shadow-[0_8px_20px_-10px_rgba(0,0,0,0.08)] hover:shadow-xl hover:-translate-y-1 hover:border-ocobo-sky/30' + ? 'group bg-white border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 hover:border-ocobo-sky/30' : 'bg-gray-50/50 border-dashed border-gray-200 group/empty hover:bg-white hover:border-solid hover:border-ocobo-yellow/40'} animate-fade-in-up `} @@ -555,7 +555,7 @@ const Partners: React.FC = () => {
-
+
{/* Multi-color top bar */}
@@ -611,7 +611,7 @@ const Partners: React.FC = () => {

- +
diff --git a/pages/Podcast.tsx b/pages/Podcast.tsx index 699993a..09a327a 100644 --- a/pages/Podcast.tsx +++ b/pages/Podcast.tsx @@ -117,11 +117,11 @@ const Podcast: React.FC = () => { {/* SPOTLIGHT PLAYER CARD */}
-
+
-
+
Current Episode
@@ -179,13 +179,13 @@ const Podcast: React.FC = () => {
{filteredEpisodes.length > 0 ? filteredEpisodes.map((ep) => ( -
+
{/* Architectural Number Overlay */} -
+
{ep.number}
-
+
{ep.guest} {
)) : ( -
+

Aucun épisode trouvé pour cette recherche.

@@ -264,7 +264,7 @@ const Podcast: React.FC = () => { Ne manquez plus aucun
écho stratégique.
-
{/* Grid Container */} -
+
MARKETING @@ -260,7 +260,7 @@ const Services: React.FC = () => { Les entreprises qui passent à l’échelle ne misent pas sur l’empilement d’outils. Elles construisent un système de revenu clair, simple et pilotable.

- @@ -292,7 +292,7 @@ const Services: React.FC = () => { {/* MOBILE LAYOUT (List) */}
-
+
1
@@ -302,7 +302,7 @@ const Services: React.FC = () => {
  • • Manque de visibilité sur le business
    • -
    +
    2
    @@ -312,7 +312,7 @@ const Services: React.FC = () => {
  • • Prévisions instables
    • -
    +
    3
    @@ -322,7 +322,7 @@ const Services: React.FC = () => {
  • • Trop d’outils, pas assez de clarté
    • -
    +
    4
    @@ -391,12 +391,12 @@ const Services: React.FC = () => { {/* Service 1: Audit & Cadrage */}
    -
    1
    +
    1

    Immersion, cadrage et plan d’action RevOps

    La vision claire pour savoir où agir.

    -
    +
    • @@ -435,12 +435,12 @@ const Services: React.FC = () => { {/* Service 2: Déploiement */}
      -
      2
      +
      2

      Déploiement RevOps (Agile)

      Pour opérer et structurer la machine revenue en sprints de 2 semaines.

      -
      +
        {[ "Funnel complet : demand gen → closing → onboarding → expansion", @@ -468,12 +468,12 @@ const Services: React.FC = () => { {/* Service 3: Coaching */}
        -
        3
        +
        3

        Coaching & Formation

        Rendre vos équipes autonomes et capables de faire vivre le système.

        -
        +
        • @@ -537,9 +537,9 @@ const Services: React.FC = () => {
          {/* Levier 1: Méthode */} -
          +
          -
          +
          @@ -563,9 +563,9 @@ const Services: React.FC = () => { {/* Levier 2: Technologie */} -
          +
          -
          +
          @@ -593,9 +593,9 @@ const Services: React.FC = () => { {/* Levier 3: Équipe */} -
          +
          -
          +
          @@ -666,7 +666,7 @@ const Services: React.FC = () => { { title: "Intégrer l'IA", color: "purple-500", icon: , items: ["Agents IA prospection", "Automatisation CRM after-call", "Scoring prédictif"] }, { title: "Former & Itérer", color: "dark", icon: , items: ["Pipeline review, roleplay", "Playbooks et templates", "Roadmap d’itération"] } ].map((block, idx) => ( -
          +
          {block.icon}
          @@ -729,7 +729,7 @@ const Services: React.FC = () => {
          - diff --git a/pages/Stories.tsx b/pages/Stories.tsx index 51fba51..1bd1ccd 100644 --- a/pages/Stories.tsx +++ b/pages/Stories.tsx @@ -76,7 +76,7 @@ const StoriesIllustration = () => { {/* SATELLITE 1: ROI CARD (Coral) */} -
          +
          Impact @@ -88,7 +88,7 @@ const StoriesIllustration = () => { {/* SATELLITE 2: AUTOMATION CARD (Sky) */} -
          +
          Process @@ -100,7 +100,7 @@ const StoriesIllustration = () => { {/* SATELLITE 3: DATA CARD (Yellow) */} -
          +
          Data @@ -112,7 +112,7 @@ const StoriesIllustration = () => { {/* SATELLITE 4: USER EXPERIENCE (Mint) */} -
          +
          User Experience @@ -501,12 +501,12 @@ const Stories: React.FC = () => {
          -
          +
          {item.company} {
          {/* ROI Section */} -
          +
          Impact mesuré
          {item.roi} @@ -574,7 +574,7 @@ const Stories: React.FC = () => {
          - diff --git a/pages/StoryDetail.tsx b/pages/StoryDetail.tsx index 766e65e..82a2e3d 100644 --- a/pages/StoryDetail.tsx +++ b/pages/StoryDetail.tsx @@ -265,16 +265,16 @@ const StoryDetail: React.FC = () => {
          -
          +
          {story.company}
          -
          +
          {story.results.map((res: any, idx: number) => (
          -
          +
          {res.icon}
          @@ -301,7 +301,7 @@ const StoryDetail: React.FC = () => {
          {story.mission.objectives.map((obj: string, i: number) => ( -
          +

          {obj}

          @@ -323,7 +323,7 @@ const StoryDetail: React.FC = () => {
          0{idx+1}
          -
          +

          {phase.title}

          {phase.desc}

            @@ -365,8 +365,8 @@ const StoryDetail: React.FC = () => { ))}
          -
          -
          +
          +
          {story.name}
          @@ -382,12 +382,12 @@ const StoryDetail: React.FC = () => {
          -
          +

          Process & Outils

          -
          +
          @@ -396,7 +396,7 @@ const StoryDetail: React.FC = () => {
          -
          +
          @@ -405,7 +405,7 @@ const StoryDetail: React.FC = () => {
          -
          +
          @@ -420,7 +420,7 @@ const StoryDetail: React.FC = () => {
          -
          +

          Livrables de la mission

          @@ -438,7 +438,7 @@ const StoryDetail: React.FC = () => {

          Parlons de vos projets

          - @@ -448,14 +448,14 @@ const StoryDetail: React.FC = () => {
          -
          +
          Votre futur système

          Votre machine revenue mérite une architecture d'élite.

          - diff --git a/pages/Studio.tsx b/pages/Studio.tsx index a365c65..6f9cac2 100644 --- a/pages/Studio.tsx +++ b/pages/Studio.tsx @@ -32,29 +32,29 @@ const TeamPhotoIllustration = () => {
          {/* Main Photo Card */} -
          +
          {/* NOTE: Remplacer l'URL ci-dessous par le lien de votre photo une fois hébergée */} L'équipe Ocobo {/* Overlay Gradient for depth */}
          {/* Caption Badge */} -
          +
          La Squad Ocobo
          {/* Floating Architectural Icons */} -
          +
          -
          +
          @@ -224,7 +224,7 @@ const Studio: React.FC = () => { @@ -251,7 +251,7 @@ const Studio: React.FC = () => {
          -
          +
          @@ -260,7 +260,7 @@ const Studio: React.FC = () => { Nous déployons une squad pluridisciplinaire qui rejoint votre environnement de travail quotidien.

          -
          +
          @@ -269,7 +269,7 @@ const Studio: React.FC = () => { Pas de grands rapports théoriques. Nous délivrons des briques de système prêtes à l'emploi.

          -
          +
          @@ -312,7 +312,7 @@ const Studio: React.FC = () => { {filteredTeam.map((member, idx) => (
          {/* Left trait that lights up on hover */} @@ -365,7 +365,7 @@ const Studio: React.FC = () => {

          - +
          diff --git a/pages/WebinarDetail.tsx b/pages/WebinarDetail.tsx index 874130b..a955300 100644 --- a/pages/WebinarDetail.tsx +++ b/pages/WebinarDetail.tsx @@ -78,7 +78,7 @@ const WebinarDetail: React.FC = () => { {/* Video Player Section */}
          -
          +