Initial project setup with Astro framework, including configuration files, a comprehensive .gitignore, and a variety of UI components for a streaming platform. Added essential styles and layout structure, along with a README detailing project features and development guidelines.

2025-07-30 19:14:23 +00:00
parent 0e4a09f9fc
commit 159cff7f77
49 changed files with 3749 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -1,2 +1,187 @@
-# nixi-web
+# 🎬 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.