xpeditis2.0/apps/frontend/DESIGN_QUICK_START.md

# Xpeditis Design System - Guide Rapide

## 🎨 Couleurs à utiliser

```tsx
// Couleurs principales
className="bg-brand-navy"        // Navy Blue (#10183A) - Headers
className="bg-brand-turquoise"   // Turquoise (#34CCCD) - CTAs
className="bg-brand-green"       // Green (#067224) - Success
className="bg-brand-gray"        // Light Gray (#F2F2F2) - Backgrounds
className="bg-white"             // White (#FFFFFF) - Cards

// Texte
className="text-brand-navy"      // Texte principal foncé
className="text-accent"          // Liens et highlights (turquoise)
className="text-success"         // Messages de succès
className="text-neutral-600"     // Texte secondaire
```

## 🔤 Typographies

```tsx
// Titres (Manrope)
<h1>Titre Principal</h1>              // 40px, font-heading
<h2>Titre Section</h2>                // 32px, font-heading
<h3>Titre Carte</h3>                  // 24px, font-heading

// Corps de texte (Montserrat)
<p className="text-body-lg">...</p>   // 18px, paragraphe large
<p className="text-body">...</p>      // 16px, paragraphe normal
<p className="text-body-sm">...</p>   // 14px, texte secondaire

// Labels
<span className="label">STATUT</span> // 12px, uppercase, bold
```

## 🎯 Composants Pré-stylés

### Boutons

```tsx
<button className="btn-primary">Rechercher</button>
<button className="btn-secondary">Annuler</button>
<button className="btn-success">Confirmer</button>
<button className="btn-outline">En savoir plus</button>
```

### Cards

```tsx
<div className="card">
  <h3 className="card-header">Titre de la carte</h3>
  <p>Contenu...</p>
</div>
```

### Badges

```tsx
<span className="badge-success">CONFIRMÉ</span>
<span className="badge-info">EN COURS</span>
<span className="badge-warning">EN ATTENTE</span>
<span className="badge-error">ANNULÉ</span>
```

### Formulaires

```tsx
<label className="label">Port d'origine</label>
<input className="input" placeholder="FRFOS - Le Havre" />
```

### Liens

```tsx
<a href="#" className="link">Documentation</a>
```

## 📋 Exemples Complets

### Card de Booking

```tsx
<div className="card">
  <h3 className="card-header">Réservation WCM-2024-ABC123</h3>

  <div className="space-y-3">
    <div>
      <span className="label">STATUT</span>
      <span className="badge-success ml-2">CONFIRMÉ</span>
    </div>

    <div>
      <span className="label">ROUTE</span>
      <p className="text-body mt-1">Le Havre → Shanghai</p>
    </div>

    <div>
      <span className="label">PRIX TOTAL</span>
      <p className="text-h3 text-accent mt-1">1 245 USD</p>
    </div>

    <button className="btn-primary w-full mt-4">
      Voir les détails
    </button>
  </div>
</div>
```

### Formulaire de Recherche

```tsx
<div className="bg-white rounded-lg p-8 shadow-md">
  <h2 className="mb-6">Rechercher un tarif</h2>

  <form className="space-y-4">
    <div>
      <label className="label">Port d'origine</label>
      <input
        className="input w-full"
        placeholder="Ex: FRFOS - Le Havre"
      />
    </div>

    <div>
      <label className="label">Port de destination</label>
      <input
        className="input w-full"
        placeholder="Ex: CNSHA - Shanghai"
      />
    </div>

    <div className="grid grid-cols-2 gap-4">
      <div>
        <label className="label">Volume (CBM)</label>
        <input className="input w-full" type="number" />
      </div>
      <div>
        <label className="label">Poids (KG)</label>
        <input className="input w-full" type="number" />
      </div>
    </div>

    <button type="submit" className="btn-primary w-full">
      Rechercher
    </button>
  </form>
</div>
```

### Section Hero

```tsx
<section className="section-navy">
  <div className="container mx-auto px-8 text-center">
    <h1 className="text-white mb-6">
      Fret Maritime Simplifié
    </h1>

    <p className="text-body-lg text-neutral-200 max-w-2xl mx-auto mb-8">
      Réservez, suivez et gérez vos expéditions LCL avec des tarifs
      en temps réel des principales compagnies maritimes.
    </p>

    <div className="flex gap-4 justify-center">
      <button className="bg-brand-turquoise text-white font-heading font-semibold px-8 py-4 rounded-lg hover:bg-brand-turquoise/90">
        Commencer
      </button>
      <button className="bg-white text-brand-navy font-heading font-semibold px-8 py-4 rounded-lg hover:bg-neutral-100">
        Voir la démo
      </button>
    </div>
  </div>
</section>
```

### Dashboard KPI Card

```tsx
<div className="card">
  <div className="flex items-center justify-between mb-2">
    <span className="label">RÉSERVATIONS ACTIVES</span>
    <span className="badge-info">+12%</span>
  </div>

  <p className="text-display-sm text-brand-navy">247</p>

  <p className="text-body-sm text-neutral-600 mt-2">
    32 en attente de confirmation
  </p>
</div>
```

### Table Row

```tsx
<tr className="border-b hover:bg-brand-gray transition-colors">
  <td className="py-3 px-4">
    <span className="font-heading font-semibold text-brand-navy">
      WCM-2024-ABC123
    </span>
  </td>
  <td className="py-3 px-4">
    <span className="text-body">FRFOS → CNSHA</span>
  </td>
  <td className="py-3 px-4">
    <span className="badge-success">CONFIRMÉ</span>
  </td>
  <td className="py-3 px-4">
    <span className="text-body font-semibold">1 245 USD</span>
  </td>
  <td className="py-3 px-4">
    <button className="link text-sm">Détails →</button>
  </td>
</tr>
```

## 🎨 Palette de couleurs complète

### Couleurs de marque
- **Navy**: `bg-brand-navy` / `text-brand-navy` (#10183A)
- **Turquoise**: `bg-brand-turquoise` / `text-brand-turquoise` (#34CCCD)
- **Green**: `bg-brand-green` / `text-brand-green` (#067224)
- **Gray**: `bg-brand-gray` (#F2F2F2)

### Échelle de gris (neutre)
- `bg-neutral-50` à `bg-neutral-900`
- `text-neutral-50` à `text-neutral-900`

### Couleurs sémantiques
- **Success**: `bg-success` / `text-success` (#067224)
- **Accent**: `bg-accent` / `text-accent` (#34CCCD)
- **Primary**: `bg-primary` / `text-primary` (#10183A)

## 📱 Responsive Design

```tsx
// Mobile first
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards */}
</div>

// Texte responsive
<h1 className="text-h2 md:text-h1 lg:text-display-sm">
  Titre responsive
</h1>

// Padding responsive
<section className="py-8 md:py-12 lg:py-16 px-4 md:px-8">
  {/* Contenu */}
</section>
```

## 🚀 Voir la démo

Pour voir tous les composants en action:

```tsx
import { DesignSystemShowcase } from '@/components/examples/DesignSystemShowcase';

export default function DemoPage() {
  return <DesignSystemShowcase />;
}
```

## 📚 Documentation complète

Voir [DESIGN_SYSTEM.md](DESIGN_SYSTEM.md) pour:
- Guidelines d'accessibilité
- Configuration Tailwind complète
- Exemples avancés
- Best practices