# 🎬 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 auto-contenus.

## ✨ Fonctionnalités

- 🎨 **Design System complet** avec thème sombre et couleurs violet pastel
- 📱 **Responsive** avec système de grille flexbox (Bootstrap-like)
- 🧩 **Composants UI auto-contenus** avec styles scoped
- ⚡ **Performance optimisée** avec styles scoped par composant
- 🎭 **Composants spécialisés** pour le streaming (MovieCard, SearchBar)
- 🔄 **Architecture modulaire** avec réutilisation et composition
- 🛠️ **Classes utilitaires** Bootstrap-like pour styling rapide

## 🏗️ Architecture du Projet

```
/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── ui/              # Composants UI auto-contenus
│   │       ├── Button.astro        # Avec styles intégrés
│   │       ├── Card.astro          # Avec styles intégrés
│   │       ├── Input.astro         # Avec styles intégrés
│   │       ├── Modal.astro         # Avec styles + JS intégrés
│   │       ├── MovieCard.astro     # Compose avec Card.astro
│   │       ├── SearchBar.astro     # Compose avec Input.astro
│   │       ├── Row.astro           # Avec support style prop
│   │       ├── Col.astro           # Responsive breakpoints
│   │       └── ...
│   ├── layouts/
│   │   └── Layout.astro     # Variables + Grid seulement
│   ├── pages/
│   │   └── index.astro      # Page de démo complète
│   └── styles/
│       ├── variables.css    # Variables + Form base + Utilitaires globales
│       └── grid.css         # Grille + Classes utilitaires responsive
└── 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

## 🏗️ Architecture des Composants

### Composition et réutilisation

Les composants sont conçus pour être composés ensemble :

- **SearchBar** utilise le composant **Input** avec des styles personnalisés
- **MovieCard** compose avec le composant **Card** de base
- **ModalHeader** utilise le composant **Button** pour la fermeture
- Classes `.form-control-base` partagées entre Input, Select et Textarea

### Styles scoped

Chaque composant contient ses propres styles avec `<style>` scoped :

- Isolation CSS automatique par Astro
- Utilisation de `:global()` pour styler les composants importés
- Variables CSS globales disponibles dans tous les composants

## 🚀 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 composant Astro dans `src/components/ui/`
2. Intégrer les styles directement dans le composant avec `<style>`
3. Utiliser les variables CSS globales et classes utilitaires disponibles
4. Composer avec les composants existants quand possible

### 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.