# 🎬 Nixi - Plateforme de Streaming

Une plateforme de streaming moderne pour films et séries, construite avec **Astro** et un système de composants UI réutilisables.

## ✨ Fonctionnalités

- 🎨 **Design System complet** avec thème sombre et couleurs violet pastel
- 📱 **Responsive** avec système de grille flexbox (Bootstrap-like)
- 🧩 **Composants UI modulaires** et réutilisables
- ⚡ **Performance optimisée** avec Astro
- 🎭 **Composants spécialisés** pour le streaming (MovieCard, SearchBar)

## 🏗️ Architecture du Projet

```
/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── ui/              # Composants UI réutilisables
│   │       ├── Button.astro
│   │       ├── Card.astro
│   │       ├── Input.astro
│   │       ├── Modal.astro
│   │       ├── MovieCard.astro
│   │       ├── Navbar.astro
│   │       ├── Row.astro
│   │       ├── Col.astro
│   │       └── ...
│   ├── layouts/
│   │   └── Layout.astro     # Layout principal
│   ├── pages/
│   │   └── index.astro      # Page d'accueil
│   └── styles/
│       ├── variables.css    # Variables CSS (couleurs, espacements)
│       ├── grid.css         # Système de grille flexbox
│       └── components/      # Styles par composant
│           ├── button.css
│           ├── card.css
│           ├── input.css
│           └── ...
└── package.json
```

## 🎨 Design System

### Couleurs
- **Couleur principale** : Violet pastel (`--primary-*`)
- **Thème sombre** avec nuances de gris
- **Couleurs sémantiques** : success, warning, error, info

### Composants disponibles

#### Composants de base
- **Button** - Boutons avec variantes (primary, secondary, outline, ghost)
- **Badge** - Badges colorés
- **Alert** - Alertes contextuelles
- **Spinner** - Indicateurs de chargement
- **Progress** - Barres de progression

#### Composants de formulaire
- **Input** - Champs de saisie
- **Textarea** - Zones de texte
- **Select** - Listes déroulantes
- **FormGroup/FormLabel/FormError** - Éléments de formulaire

#### Composants de mise en page
- **Container** - Conteneur responsive
- **Row/Col** - Système de grille avec breakpoints (xs, sm, md, lg, xl, xxl)
- **Card** - Cartes avec header/body/footer

#### Composants de navigation
- **Navbar** - Barre de navigation
- **Modal** - Modales avec backdrop
- **Dropdown** - Menus déroulants

#### Composants spécialisés streaming
- **MovieCard** - Cartes pour films/séries avec poster, titre, rating
- **SearchBar** - Barre de recherche avec icône

## 🚀 Utilisation des Composants

### Exemple basique
```astro
---
import Button from '../components/ui/Button.astro';
import Card from '../components/ui/Card.astro';
import CardBody from '../components/ui/CardBody.astro';
---

<Card>
  <CardBody>
    <h3>Titre du film</h3>
    <p>Description du film...</p>
    <Button variant="primary">Regarder</Button>
  </CardBody>
</Card>
```

### Système de grille
```astro
---
import Container from '../components/ui/Container.astro';
import Row from '../components/ui/Row.astro';
import Col from '../components/ui/Col.astro';
---

<Container>
  <Row>
    <Col md={6} lg={4}>
      <!-- Contenu colonne 1 -->
    </Col>
    <Col md={6} lg={8}>
      <!-- Contenu colonne 2 -->
    </Col>
  </Row>
</Container>
```

### MovieCard pour le streaming
```astro
---
import MovieCard from '../components/ui/MovieCard.astro';
---

<MovieCard
  title="Titre du Film"
  poster="/path/to/poster.jpg"
  year={2024}
  genre="Action"
  rating={8.5}
  href="/film/titre-du-film"
/>
```

## 🧞 Commandes

Toutes les commandes sont exécutées depuis la racine du projet :

| Commande                  | Action                                           |
| :------------------------ | :----------------------------------------------- |
| `npm install`             | Installe les dépendances                        |
| `npm run dev`             | Démarre le serveur de dev sur `localhost:4321`  |
| `npm run build`           | Build le site pour la production dans `./dist/` |
| `npm run preview`         | Prévisualise le build en local                  |
| `npm run astro ...`       | Exécute des commandes CLI Astro                 |
| `npm run astro -- --help` | Aide pour la CLI Astro                          |

## 🎯 Développement

### Ajouter un nouveau composant
1. Créer le fichier CSS dans `src/styles/components/`
2. Créer le composant Astro dans `src/components/ui/`
3. Importer le CSS dans `src/layouts/Layout.astro`

### Variables CSS disponibles
- `--primary-*` : Couleurs principales (violet pastel)
- `--bg-*` : Couleurs de fond (thème sombre)
- `--text-*` : Couleurs de texte
- `--spacing-*` : Espacements (1 à 32)
- `--radius-*` : Rayons de bordure
- `--shadow-*` : Ombres

### Breakpoints responsive
- `xs` : < 576px
- `sm` : ≥ 576px
- `md` : ≥ 768px
- `lg` : ≥ 992px
- `xl` : ≥ 1200px
- `xxl` : ≥ 1400px

## 📚 Ressources

- [Documentation Astro](https://docs.astro.build)
- [Guide des composants Astro](https://docs.astro.build/en/core-concepts/astro-components/)
- [CSS Variables MDN](https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties)

## 🚀 Déploiement

Ce projet peut être déployé sur n'importe quelle plateforme supportant les sites statiques :
- Vercel
- Netlify  
- GitHub Pages
- Cloudflare Pages

Voir la [documentation de déploiement Astro](https://docs.astro.build/en/guides/deploy/) pour plus de détails.