clean

App.tsx

@@ -19,6 +19,7 @@ import Resources from './pages/Resources';
 import Podcast from './pages/Podcast';
 import ArticleDetail from './pages/ArticleDetail';
 import WebinarDetail from './pages/WebinarDetail';
+import DesignSystem from './pages/design-system';
 
 const ScrollToTop = () => {
   const { pathname } = useLocation();
@@ -53,6 +54,7 @@ const App: React.FC = () => {
             <Route path="/about" element={<About />} />
             <Route path="/jobs" element={<Jobs />} />
             <Route path="/jobs/:id" element={<JobDetail />} />
+            <Route path="/design-system" element={<DesignSystem />} />
             <Route path="*" element={<Home />} />
           </Routes>
         </main>

_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*

_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