diff --git a/README copy.md b/README copy.md
deleted file mode 100644
index 480954cf..00000000
--- a/README copy.md	
+++ /dev/null
@@ -1,709 +0,0 @@
-![Description de l'image](logo.svg)
-
-# Nexy
-
-> *Un framework Python moderne qui transforme le développement web en une expérience agréable et productive, construit sur la puissance de FastAPI.*
-
-## 📖 Table des Matières
-
-- [Introduction](#-introduction)
-- [Installation](#-installation)
-- [Concepts Fondamentaux](#-concepts-fondamentaux)
-- [Routing](#-routing)
-- [Controllers](#-controllers)
-- [Vues et Templates](#-vues-et-templates)
-- [Actions et Interactivité](#-actions-et-interactivité)
-- [Organisation du Code](#-organisation-du-code)
-- [Déploiement](#-déploiement)
-- [Bonnes Pratiques](#-bonnes-pratiques)
-- [FAQ](#-faq)
-
-## 🌟 Introduction
-
-### Le Contexte
-
-Le développement web en Python a toujours oscillé entre deux extrêmes :
-- Des frameworks très complets mais complexes (comme Django)
-- Des micro-frameworks flexibles mais nécessitant beaucoup de configuration (comme Flask)
-
-FastAPI a révolutionné l'écosystème en apportant performance et typage moderne. Cependant, les développeurs font toujours face à des défis :
-
-- Organisation complexe des projets grandissants
-- Configuration répétitive des routes
-- Manque de conventions claires
-- Difficulté à gérer l'interface utilisateur
-
-### La Vision de Nexy
-
-Nexy est né d'une idée simple : **et si nous pouvions combiner la puissance de FastAPI avec une expérience développeur exceptionnelle ?**
-
-Nos principes :
-1. **Convention over Configuration** : Les bonnes pratiques par défaut
-2. **Intuitivité** : La structure doit être naturelle et évidente
-3. **Productivité** : Moins de code répétitif, plus de fonctionnalités
-4. **Évolutivité** : De la petite API au projet d'entreprise
-
-## 🚀 Installation
-
-### Prérequis
-
-- Python 3.12 ou supérieur
-- pip (gestionnaire de paquets Python)
-
-### Installation Simple
-
-```bash
-pip install nexy inquirerpy=="0.3.4"
-```
-
-### Création d'un Projet
-
-```bash
-nexy new mon-projet
-cd mon-projet
-```
-
-### Structure Initiale
-
-```plaintext
-mon-projet/
- ├── app/
- │   ├── controller.py    # Point d'entrée principal
- │   └── view.html       # Vue principale (optionnelle)
- ├── public/             # Fichiers statiques
- └── nexy-config.py      # Configuration de l'application
-```
-
-## 🎯 Concepts Fondamentaux
-
-### Le Routing Automatique
-
-Nexy introduit un système de routing basé sur la structure des dossiers, inspiré des meilleures pratiques modernes.
-
-#### Structure = Routes
-
-```plaintext
-app/
- ├── controller.py         # Route: /
- ├── users/
- │   ├── controller.py     # Route: /users
- │   └── [id]/            # Route dynamique
- │       └── controller.py # Route: /users/{id}
- └── blog/
-     ├── controller.py     # Route: /blog
-     └── posts/
-         └── controller.py # Route: /blog/posts
-```
-
-### Les Controllers
-
-Les controllers sont le cœur de votre application. Ils définissent comment votre application répond aux requêtes HTTP.
-
-#### Controller Simple
-
-```python
-# app/controller.py
-async def GET():
-    """Route principale : GET /"""
-    return {"message": "Bienvenue sur Nexy!"}
-
-async def POST(data: dict):
-    """Gestion des POST sur /"""
-    return {"received": data}
-```
-
-#### Controller avec Paramètres
-
-```python
-# app/users/[id]/controller.py
-async def GET(id: int):
-    """Récupère un utilisateur par ID"""
-    return {"user_id": id, "name": "Alice"}
-
-async def PUT(id: int, data: dict):
-    """Met à jour un utilisateur"""
-    return {"updated": id, "data": data}
-
-async def DELETE(id: int):
-    """Supprime un utilisateur"""
-    return {"deleted": id}
-```
-
-### Les Services
-
-Les services permettent d'isoler la logique métier des controllers.
-
-```python
-# app/users/service.py
-class UserService:
-    def __init__(self):
-        self.users = []
-    
-    def get_all(self):
-        return self.users
-    
-    def add_user(self, user):
-        self.users.append(user)
-        return user
-
-# app/users/controller.py
-from .service import UserService
-
-service = UserService()
-
-async def GET():
-    return {"users": service.get_all()}
-
-async def POST(data: dict):
-    return {"created": service.add_user(data)}
-```
-
-### Les Vues
-
-Nexy inclut un système de templates puissant pour créer des interfaces utilisateur dynamiques.
-
-#### Vue Simple
-
-```html
-<!-- app/view.html -->
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Mon App Nexy</title>
-</head>
-<body>
-    <h1>Bienvenue sur {{title}}</h1>
-    <ul>
-        {% for user in users %}
-            <li>{{user.name}}</li>
-        {% endfor %}
-    </ul>
-</body>
-</html>
-```
-
-#### Composants Réutilisables
-
-```html
-<!-- app/components/button.html -->
-{% macro Button(text, type="button") %}
-<button 
-    class="btn btn-{{type}}"
-    style="padding: 8px 16px; border-radius: 4px;">
-    {{text}}
-</button>
-{% endmacro %}
-
-<!-- Utilisation dans une vue -->
-{% from "app/components/button.html" import Button %}
-
-<div>
-    {{ Button(text="Connexion", type="primary") }}
-    {{ Button(text="Annuler", type="secondary") }}
-</div>
-```
-
-### Les Layouts
-
-Nexy supporte les layouts imbriqués pour une meilleure organisation des vues.
-
-```html
-<!-- app/layout.html -->
-<!DOCTYPE html>
-<html>
-<head>
-    <title>{% block title %}{% endblock %}</title>
-</head>
-<body>
-    <nav>
-        <!-- Navigation commune -->
-    </nav>
-    
-    <main>
-        {{children | safe}}
-    </main>
-    
-    <footer>
-        <!-- Footer commun -->
-    </footer>
-</body>
-</html>
-```
-
-[Suite dans la prochaine partie...]
-
-## 🌟 **Nexy**  
-
-> *Un framework Python conçu pour allier simplicité, performance et plaisir du développement.*  
-
----
-
-## **📢 Un message de l'équipe Nexy**  
-
-⚠️ *Cette documentation est en cours de création.*  
-L'équipe de développement travaille activement sur un **site dédié**, pour offrir une documentation complète, claire et accessible. Notre objectif est de vous fournir une **expérience développeur exceptionnelle**, adaptée aussi bien aux débutants qu'aux experts.
-
----
-
-## **🐍 La philosophie Python au cœur de Nexy**  
-
-Python est un langage qui se distingue par sa **simplicité, sa lisibilité** et sa grande efficacité. C'est cette philosophie qui a inspiré Nexy : rendre le développement **plus simple**, **plus rapide**, mais sans jamais sacrifier la performance.
-
-### **Un constat**
-
-Aujourd'hui, Python regorge de frameworks backend puissants, tels que :
-- **Flask**
-- **FastAPI**
-- **Starlette**, etc.
-
-Ces outils sont indéniablement **performants et modulaires**, mais leur **documentation** peut parfois être intimidante et les **configurations** complexes. Même un framework complet comme **Django** peut parfois sembler lourd et difficile à aborder, même pour les développeurs expérimentés.
-
-### **Nexy : simplicité et efficacité**  
-
-Chez Nexy, nous croyons que **simple ne signifie pas limité**.  
-Nous avons conçu Nexy pour que les développeurs puissent se concentrer sur l'essentiel sans avoir à se perdre dans des configurations complexes.
-
-**Ce que nous vous proposons :**  
-- **Démarrage rapide** : Pas de longue configuration. Vous êtes opérationnel en quelques lignes de code.
-- **Code propre et modulaire** : Organisez vos projets de manière fluide et maintenez un code lisible, même pour des projets de grande envergure.
-- **Performance optimale** : Profitez de la rapidité de Python tout en préservant la simplicité.
-
-**Le code, c'est de l'art**. Chez Nexy, chaque ligne doit être un plaisir à écrire, et votre expérience développeur compte autant que la performance du code.
-
----
-
-## **🎯 Nos Objectifs**  
-
-1. **Expérience développeur** : Rendre chaque étape du projet, du démarrage au déploiement, intuitive et agréable.
-2. **Performance** : Maximiser les performances sans sacrifier la simplicité.
-3. **Simplicité évolutive** : Débutez simplement et restez productif même lorsque votre projet se complexifie.
-
-### **Ce qui nous différencie :**
-
-- **Structure modulaire** : Organisez vos projets de manière claire et évolutive.
-- **Configuration automatique** : Nexy détecte automatiquement les routes et fichiers sans que vous ayez à vous en soucier.
-- **Philosophie "Plug & Play"** : Avancez rapidement sans perdre de temps dans des configurations compliquées.
-
----
-
-## **📂 Structure de Projet**  
-
-Voici un exemple d'organisation typique avec Nexy :
-
-```plaintext
-nexy/
- ├── app/
- │   ├── controller.py       # Contrôleur principal pour `/`
- │   ├── model.py            # Gestion des données pour `/`
- │   ├── service.py          # Logique métier pour `/`
- │   ├── documents/          # Endpoint `/documents`
- │   │   ├── controller.py   # Contrôleur pour `/documents`
- │   │   ├── model.py        # Gestion des données pour `/documents`
- │   │   ├── service.py      # Logique métier pour `/documents`
- │   │   └── [documentId]/   # Endpoint dynamique `/documents/{documentId}`
- │   │       ├── controller.py
- │   │       ├── model.py
- │   │       └── service.py
- │   └── users/
- │       ├── controller.py   # Contrôleur pour `/users`
- │       ├── model.py        # Gestion des données pour `/users`
- │       └── service.py      # Logique métier pour `/users`
- └── main.py                 # Point d'entrée de l'application
-```
-
-**💡 Astuce** : La structure des dossiers reflète vos routes, vous offrant ainsi une lisibilité immédiate et une organisation naturelle.
-
----
-
-# Pré-requis
-
-> Veuillez vous assurer que vous utilisez `Python >= 3.12`, car Nexy n'est **pas compatible** avec les versions `Python < 3.12`.
-
-## Comment vérifier votre version de Python ?
-Exécutez cette commande dans votre terminal :
-
-```shell
-    python --version
-
-```
-
-
-
-----
-## **🚀 Installation et Démarrage**  
-
-### Étape 1 : Créez un répertoire pour votre projet et placez-vous dedans 
-
- 
-1. Installez Nexy et ses dépendances :
-   ```shell
-   pip install nexy inquirerpy=="0.3.4"
-   ```
-
-Votre API est maintenant accessible sur **http://127.0.0.1:8000** 🎉  
-
-Une fois que l'application est en cours d'exécution, tu peux accéder à la documentation Swagger en naviguant vers **http://localhost:8000/docs** dans ton navigateur.
-
----
-
-## **🧩 Concepts Clés avec des Exemples**  
-
-### 1. **Contrôleur de Base**  
-
-Chaque route est définie dans un fichier `controller.py`. Exemple :  
-```python
-# app/controller.py
-async def GET():
-    return {"message": "Hello, world"}
-
-async def POST(data: dict):
-    return {"message": "Voici vos données", "data": data}
-```  
-
-### 2. **Routes Dynamiques**  
-
-Les routes dynamiques sont automatiquement détectées :  
-```plaintext
-app/documents/[documentId]/controller.py
-```  
-```python
-# app/documents/[documentId]/controller.py
-async def GET(documentId: int):
-    return {"documentId": documentId, "message": "Document trouvé"}
-```  
-
-### 3. **Architecture Modulaire avec `model` et `service`**  
-
-Séparez la logique métier et la gestion des données :  
-```python
-# app/users/controller.py
-from .service import get_users, add_user
-
-async def GET():
-    users = get_users()
-    return {"users": users}
-
-async def POST(user: dict):
-    return add_user(user)
-```  
-
-```python
-# app/users/service.py
-from .model import User
-
-def get_users():
-    return User.all()
-
-def add_user(data: dict):
-    user = User(**data)
-    user.save()
-    return {"message": "Utilisateur ajouté", "user": user}
-```  
-
----
-
-
-
-## **📚 Pourquoi Nexy ?**  
-
-- **Pour les débutants** : Vous trouverez une approche simple, sans surcharge de concepts, pour apprendre à coder rapidement.
-- **Pour les experts** : La structure modulaire et la performance vous permettront de réaliser des projets de grande envergure tout en gardant un code propre et bien organisé.
-- **Pour tous les développeurs** : Profitez de la facilité d'utilisation tout en écrivant un code performant et élégant.
-
-Avec Nexy, vous allez découvrir un framework **simple, puissant et agréable à utiliser**. Ce n'est pas seulement un framework : c'est un outil pour **libérer votre créativité**, **accélérer votre développement**, et surtout, **vous faire apprécier chaque ligne de code**.
-
----
-
-
-## **📢 Contribuez à Nexy !**  
-
-🚀 Nexy est open-source et vous attend sur [GitHub](https://github.com/NexyPy/Nexy). Partagez vos idées, améliorez le framework et faites partie de la révolution backend Python.  
-
-**💡 Nexy : Plus qu'un framework, un outil pour vous.**  
----
-
-
-## 🔄 Actions et Interactivité
-
-### Le Système d'Actions
-
-Nexy introduit un système d'actions puissant qui permet de créer des interfaces interactives sans écrire de JavaScript complexe.
-
-#### Actions Simples
-
-```html
-<!-- Bouton qui déclenche une action -->
-<button action="increment">
-    Augmenter le compteur
-</button>
-
-<!-- Zone qui se met à jour automatiquement -->
-<div response="counter">
-    Compteur: {{count}}
-</div>
-```
-
-```python
-# app/actions.py
-count = 0
-
-def increment():
-    global count
-    count += 1
-    return count
-```
-
-#### Actions avec Paramètres
-
-```html
-<form action="add_user" method="post">
-    <input type="text" name="name">
-    <button type="submit">Ajouter</button>
-</form>
-
-<ul response="users">
-    {% for user in users %}
-        <li>
-            {{user.name}}
-            <button action="delete_user" data-id="{{user.id}}">❌</button>
-        </li>
-    {% endfor %}
-</ul>
-```
-
-### Gestion d'État
-
-Nexy permet de gérer l'état de votre application de manière simple et efficace.
-
-```python
-# app/state.py
-from nexy import State
-
-users = State([])  # État initial
-
-def add_user(name: str):
-    users.set([*users.get(), {"name": name}])
-    return users.get()
-
-def remove_user(id: int):
-    users.set([u for u in users.get() if u.id != id])
-    return users.get()
-```
-
-## 📦 Organisation du Code
-
-### Structure Recommandée
-
-```plaintext
-mon-projet/
- ├── app/
- │   ├── controller.py      # Contrôleur principal
- │   ├── view.html         # Vue principale
- │   ├── actions.py        # Actions globales
- │   ├── components/       # Composants réutilisables
- │   │   ├── Button.html
- │   │   └── Card.html
- │   ├── users/           # Module Users
- │   │   ├── controller.py
- │   │   ├── view.html
- │   │   ├── actions.py
- │   │   └── service.py
- │   └── blog/            # Module Blog
- │       ├── controller.py
- │       ├── view.html
- │       └── [slug]/
- │           └── controller.py
- ├── public/              # Fichiers statiques
- │   ├── css/
- │   ├── js/
- │   └── images/
- ├── tests/              # Tests
- └── nexy-config.py      # Configuration
-```
-
-### Bonnes Pratiques
-
-#### 1. Organisation Modulaire
-
-Regroupez les fonctionnalités liées dans des modules :
-
-```plaintext
-app/users/
- ├── controller.py    # Gestion des requêtes
- ├── service.py       # Logique métier
- ├── view.html        # Interface utilisateur
- └── actions.py       # Interactions utilisateur
-```
-
-#### 2. Séparation des Responsabilités
-
-```python
-# app/users/controller.py
-from .service import UserService
-
-service = UserService()
-
-async def GET():
-    return service.get_users()
-
-# app/users/service.py
-class UserService:
-    def get_users(self):
-        # Logique métier isolée
-        return [...]
-```
-
-## 🛠️ Outils de Développement
-
-### CLI Nexy
-
-```bash
-# Création
-nexy new mon-projet     # Nouveau projet
-nexy g co users        # Nouveau controller
-nexy g s users         # Nouveau service
-
-# Développement
-nexy dev              # Serveur de développement
-nexy build            # Construction pour production
-```
-
-### Hot Reload
-
-Nexy inclut un système de rechargement automatique en développement :
-- Modifications de code Python
-- Changements dans les templates
-- Mise à jour des fichiers statiques
-
-## 🚀 Déploiement
-
-### Construction pour Production
-
-```bash
-nexy build
-```
-
-### Configuration de Production
-
-```python
-# nexy-config.py
-from nexy import Nexy
-
-app = Nexy(
-    production=True,
-    static_cache=True
-)
-```
-
-### Plateformes Supportées
-
-- Vercel
-- Heroku
-- Docker
-- VPS classique
-
-## 🎯 Exemples Complets
-
-### 1. Application Todo
-
-```python
-# app/todos/controller.py
-from nexy import HTMLResponse, CustomResponse
-
-todos = []
-
-@CustomResponse(type=HTMLResponse)
-async def GET():
-    return {"todos": todos}
-
-async def POST(data: dict):
-    todos.append(data)
-    return {"status": "success"}
-```
-
-```html
-<!-- app/todos/view.html -->
-{% from "app/components/button.html" import Button %}
-
-<div class="todos">
-    <form action="add" method="post">
-        <input type="text" name="task" placeholder="Nouvelle tâche">
-        {{ Button(text="Ajouter") }}
-    </form>
-
-    <ul response="todos">
-        {% for todo in todos %}
-            <li>
-                {{todo.task}}
-                <button action="delete" data-id="{{loop.index}}">
-                    Supprimer
-                </button>
-            </li>
-        {% endfor %}
-    </ul>
-</div>
-```
-
-### 2. API REST
-
-```python
-# app/api/users/controller.py
-from typing import List
-from pydantic import BaseModel
-
-class User(BaseModel):
-    id: int
-    name: str
-    email: str
-
-users: List[User] = []
-
-async def GET():
-    return {"users": users}
-
-async def POST(user: User):
-    users.append(user)
-    return {"status": "created", "user": user}
-```
-
-## 🤝 Contribution
-
-1. Fork le projet
-2. Créez votre branche (`git checkout -b feature/AmazingFeature`)
-3. Committez vos changements (`git commit -m 'Add AmazingFeature'`)
-4. Push vers la branche (`git push origin feature/AmazingFeature`)
-5. Ouvrez une Pull Request
-
-## 📚 Ressources
-
-- [Documentation Officielle](https://docs.nexy.py)
-- [Guide de Démarrage](https://docs.nexy.py/getting-started)
-- [Exemples](https://github.com/nexy/examples)
-- [Discord Community](https://discord.gg/nexy)
-
-## ❓ FAQ
-
-### Q: Nexy est-il prêt pour la production ?
-R: Oui ! Nexy est construit sur FastAPI et suit les meilleures pratiques de développement.
-
-### Q: Puis-je utiliser Nexy pour des APIs uniquement ?
-R: Absolument ! Bien que Nexy excelle dans les applications full-stack, il est parfait pour les APIs REST.
-
-### Q: Comment contribuer à Nexy ?
-R: Consultez notre guide de contribution et rejoignez notre Discord !
-
-## 🌟 Pour Finir
-
-Nexy est plus qu'un framework - c'est une nouvelle façon de penser le développement web en Python. Simple mais puissant, il vous permet de vous concentrer sur ce qui compte vraiment : créer des applications exceptionnelles.
-
----
-
-*Fait avec ❤️ par la communauté Python*
-
-![Version](https://img.shields.io/badge/version-1.0.0-%2337FCCB)
-
-## ✨ Features Clés
-- 🚀 Routing automatique basé sur la structure de fichiers
-- ⚡ Réactivité native sans JavaScript
-- 🔒 Sécurité intégrée avec JWT/OAuth2
-- 📦 Architecture modulaire prête pour l'entreprise
\ No newline at end of file
diff --git a/README.md b/README.md
index 40bc8941..552e437b 100644
--- a/README.md
+++ b/README.md
@@ -1,41 +1,16 @@
 # Nexy
 
-Nexy is a modern, fast, and secure framework for building web applications with Python. It is a full-stack framework that allows you to build web applications with Python. 
-
+Nexy is a modern, fast, and secure framework for building web applications with Python. It combines the power of Python with modern web development practices to create high-performance, scalable applications. With built-in support for async operations, type safety, and a rich ecosystem of plugins, Nexy makes it easy to build robust web applications.
 
+## Features
 
+- 🚀 **Fast**: Built on top of modern Python async capabilities
+- 🛡️ **Secure**: Built-in security features and best practices
+- 🔧 **Extensible**: Rich plugin ecosystem
+- 📦 **Full-stack**: Integrated frontend and backend solutions
+- 🎯 **Type-safe**: First-class TypeScript-like type support
+- 🔥 **Hot Reload**: Automatic reloading during development
 
 ## Getting Started
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+First, create a new Nexy project:
diff --git a/bun.lockb b/bun.lockb
index 3c1b39fd..deacbd68 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/nexy.vs.others.md b/nexy.vs.others.md
deleted file mode 100644
index b88949e1..00000000
--- a/nexy.vs.others.md
+++ /dev/null
@@ -1,454 +0,0 @@
-# Nexy vs Autres Frameworks Python
-
-## Table des Matières
-
-1. [Routing & Réponses](#1-routing--réponses)
-2. [Templates & Layouts](#2-templates--layouts)
-3. [État & Réactivité](#3-état--réactivité)
-4. [WebSockets & Temps Réel](#4-websockets--temps-réel)
-5. [Formulaires & Validation](#5-formulaires--validation)
-6. [Middleware & Hooks](#6-middleware--hooks)
-7. [CLI & Développement](#7-cli--développement)
-8. [Sécurité & Performance](#8-sécurité--performance)
-9. [Déploiement & Production](#9-déploiement--production)
-
-## 1. Routing & Réponses
-
-### Django
-```python
-# urls.py
-urlpatterns = [
-    path('users/', views.user_list),
-    path('users/<int:id>/', views.user_detail),
-]
-
-# views.py
-def user_list(request):
-    users = User.objects.all()
-    return render(request, 'users/list.html', {'users': users})
-```
-➡️ **Limitations**:
-- Configuration manuelle des URLs
-- Séparation URLs/Vues
-- Pas de layouts imbriqués natifs
-
-
-
-
-
-### FastAPI
-```python
-@app.get("/users", response_class=HTMLResponse)
-async def get_users():
-    return """<html>...</html>"""
-
-@app.get("/users/{id}")
-async def get_user(id: int):
-    return {"user": get_user(id)}
-```
-➡️ **Limitations**:
-- Pas de système de templates intégré
-- Gestion manuelle du type de réponse
-
-### Nexy
-```python
-# app/users/controller.py
-from nexy import CustomResponse, HTMLResponse, JSONResponse
-
-@CustomResponse(type=HTMLResponse)  # Cherche view.html automatiquement
-async def GET():
-    """Route: /users"""
-    return {"users": get_users()}
-
-@CustomResponse(type=JSONResponse)
-async def API():
-    """Route: /users/api"""
-    return {"users": get_users()}
-
-# app/users/[id]/controller.py
-from fastapi import Depends
-from .dependencies import get_user_or_404
-
-async def GET(
-    id: int,
-    user = Depends(get_user_or_404)  # Fonctionnalités FastAPI
-):
-    return {"user": user}
-```
-
-### Layouts Imbriqués Nexy
-```html
-<!-- app/layout.html -->
-<!DOCTYPE html>
-<html>
-<head>
-    <title>{% block title %}{% endblock %}</title>
-</head>
-<body>
-    <nav>{% include "components/nav.html" %}</nav>
-    <main>{{ children | safe }}</main>
-</body>
-</html>
-
-<!-- app/users/layout.html -->
-{% extends "app/layout.html" %}
-<div class="users-layout">
-    <aside>{% include "components/users-sidebar.html" %}</aside>
-    <section>{{ children | safe }}</section>
-</div>
-
-<!-- app/users/[id]/layout.html -->
-{% extends "app/users/layout.html" %}
-<div class="user-detail">
-    <header>{% include "components/user-header.html" %}</header>
-    {{ children | safe }}
-</div>
-```
-
-### Structure des Fichiers Nexy
-```plaintext
-app/
- ├── layout.html           # Layout principal
- ├── controller.py         # GET /
- ├── view.html            # Vue principale
- ├── users/
- │   ├── layout.html      # Layout users
- │   ├── controller.py    # GET /users
- │   ├── view.html       # Vue liste users
- │   └── [id]/
- │       ├── layout.html  # Layout détail user
- │       ├── controller.py # GET /users/{id}
- │       └── view.html   # Vue détail user
-```
-
-### Avantages Nexy
-1. **Convention Over Configuration**
-   - Routes basées sur les dossiers
-   - Détection automatique des templates
-   - Types de réponses intelligents
-
-2. **Héritage FastAPI**
-   - Dépendances
-   - Validation Pydantic
-   - OpenAPI/Swagger
-
-3. **Layouts Puissants**
-   - Imbrication illimitée
-   - Composants réutilisables
-   - Héritage flexible
-
-[Suite dans la prochaine partie...]
-
-## La Révolution Nexy
-
-Nexy réinvente le développement web Python en combinant :
-- La **simplicité** que les développeurs méritent
-- La **performance** dont les applications modernes ont besoin
-- La **réactivité** que les utilisateurs attendent
-
-### 1. Routing Intelligent
-
-**Avant (Django/Flask/FastAPI)**
-```python
-# Django
-urlpatterns = [
-    path('users/', views.users),
-    path('users/<int:id>/', views.user_detail),
-]
-
-# Flask
-@app.route('/users/<id>')
-def user_detail(id):
-    pass
-
-# FastAPI
-@app.get('/users/{id}')
-def user_detail(id: int):
-    pass
-```
-
-**Avec Nexy**
-```python
-# app/users/[id]/controller.py
-async def GET(id: int):
-    return {"user": get_user(id)}
-```
-
-### 2. Templates Réactifs
-
-**Avant**
-```html
-<!-- Django/Flask - Mise à jour manuelle -->
-<div id="users">
-    {% for user in users %}
-        <li>{{ user.name }}</li>
-    {% endfor %}
-</div>
-<script>
-    // JavaScript nécessaire pour la réactivité
-</script>
-```
-
-**Avec Nexy**
-```html
-<!-- Réactivité native -->
-<div response="users">
-    {% for user in users %}
-        <li>{{ user.name }}</li>
-    {% endfor %}
-</div>
-```
-
-### 3. Actions Serveur
-
-**Avant**
-```javascript
-// JavaScript traditionnel
-async function deleteUser(id) {
-    await fetch(`/api/users/${id}`, {
-        method: 'DELETE'
-    });
-    await updateUI();
-}
-```
-
-**Avec Nexy**
-```html
-<!-- HTML simple + action serveur -->
-<button action="delete_user" data-id="{{user.id}}">
-    Supprimer
-</button>
-```
-
-### 4. Performance
-
-```plaintext
-Benchmark: 1000 requêtes simultanées
-
-Framework | Temps de Réponse | Mémoire
-----------|-----------------|----------
-Django    | 180ms          | 512MB
-Flask     | 120ms          | 128MB
-FastAPI   | 45ms           | 64MB
-Nexy      | 45ms           | 64MB
-```
-
-## Pourquoi Nexy ?
-
-### Pour les Startups
-- Développement rapide
-- De l'idée à la production en minutes
-- Scaling sans effort
-
-### Pour les Entreprises
-- Code maintenable
-- Performance optimale
-- Sécurité intégrée
-
-### Pour les Développeurs
-- DX exceptionnelle
-- Moins de code
-- Plus de fonctionnalités
-
-## L'Innovation Nexy
-
-1. **File-based Routing**
-   - Structure intuitive
-   - Zéro configuration
-   - Routes dynamiques automatiques
-
-2. **Réactivité Native**
-   - Pas de JavaScript complexe
-   - État synchronisé automatiquement
-   - Performance optimale
-
-3. **Actions Serveur**
-   - Communication client-serveur simplifiée
-   - Sécurité par défaut
-   - Réactivité instantanée
-
-## En Résumé
-
-Nexy n'est pas juste un nouveau framework - c'est une nouvelle façon de penser le développement web en Python :
-
-- **Plus Rapide** que Django
-- **Plus Structuré** que Flask
-- **Plus Complet** que FastAPI
-- **Plus Moderne** que tous
-
-C'est le premier framework Python qui comprend vraiment les besoins des développeurs modernes.
-
----
-
-*"Nexy : Le framework Python qui aurait dû exister depuis le début."* 
-
-## 2. Templates & Réactivité
-
-### Django
-```html
-<!-- templates/users.html -->
-{% extends "base.html" %}
-{% block content %}
-    <div id="userList">
-        {% for user in users %}
-            <div>{{ user.name }}</div>
-        {% endfor %}
-    </div>
-    
-    <script>
-        // JavaScript nécessaire pour la réactivité
-        function refreshUsers() {
-            fetch('/api/users')
-                .then(res => res.json())
-                .then(data => {
-                    // Mise à jour manuelle du DOM
-                })
-        }
-    </script>
-{% endblock %}
-```
-
-### Flask avec HTMX
-```html
-<!-- templates/users.html -->
-{% extends "base.html" %}
-{% block content %}
-    <div hx-get="/users" hx-trigger="every 2s">
-        {% for user in users %}
-            <div>{{ user.name }}</div>
-        {% endfor %}
-    </div>
-{% endblock %}
-```
-
-### Nexy
-```html
-<!-- app/users/view.html -->
-{% from "components/user-card.html" import UserCard %}
-
-<div response="users">
-    {% for user in users %}
-        {{ UserCard(user=user) }}
-    {% endfor %}
-</div>
-
-<form action="add_user">
-    <input type="text" name="name" required>
-    <button type="submit">Ajouter</button>
-</form>
-```
-
-```python
-# app/users/actions.py
-from nexy import State
-
-users = State([])
-
-def add_user(name: str):
-    """Action appelée par le formulaire"""
-    current = users.get()
-    new_user = {"id": len(current) + 1, "name": name}
-    users.set([*current, new_user])
-    return users.get()  # Mise à jour automatique des zones 'response'
-
-def delete_user(id: int):
-    """Action appelée par les boutons de suppression"""
-    current = users.get()
-    users.set([u for u in current if u['id'] != id])
-    return users.get()
-```
-
-### Composants Réutilisables
-```html
-<!-- components/user-card.html -->
-{% macro UserCard(user) %}
-<div class="user-card">
-    <h3>{{ user.name }}</h3>
-    <div class="actions">
-        <button action="edit_user" data-id="{{ user.id }}">
-            Éditer
-        </button>
-        <button action="delete_user" 
-                data-id="{{ user.id }}"
-                confirm="Supprimer cet utilisateur ?">
-            Supprimer
-        </button>
-    </div>
-</div>
-{% endmacro %}
-
-<!-- components/modal.html -->
-{% macro Modal(id) %}
-<div id="{{ id }}" class="modal" response="modal_{{ id }}">
-    {% if content %}
-        <div class="modal-content">
-            {{ content | safe }}
-            <button action="close_modal" data-id="{{ id }}">
-                Fermer
-            </button>
-        </div>
-    {% endif %}
-</div>
-{% endmacro %}
-```
-
-### État Réactif
-```python
-# state/users.py
-from nexy import State
-from typing import List, Optional
-from pydantic import BaseModel
-
-class User(BaseModel):
-    id: int
-    name: str
-    email: Optional[str] = None
-
-class UsersState:
-    def __init__(self):
-        self.users: State[List[User]] = State([])
-        self.selected_user: State[Optional[User]] = State(None)
-        self.loading: State[bool] = State(False)
-    
-    def select_user(self, id: int):
-        self.loading.set(True)
-        user = self.users.get().find(lambda u: u.id == id)
-        self.selected_user.set(user)
-        self.loading.set(False)
-        return {
-            "user": self.selected_user.get(),
-            "loading": self.loading.get()
-        }
-
-users_state = UsersState()
-```
-
-### Avantages de la Réactivité Nexy
-
-1. **Réactivité Native**
-   - Pas de JavaScript nécessaire
-   - Mise à jour automatique du DOM
-   - État synchronisé serveur/client
-
-2. **Actions Serveur**
-   - Communication bidirectionnelle simple
-   - Validation côté serveur
-   - Retour d'erreurs intégré
-
-3. **Composants**
-   - Réutilisables
-   - Paramétrables
-   - Réactifs
-
-4. **État**
-   - Géré côté serveur
-   - Type-safe avec Pydantic
-   - Mises à jour atomiques
-
-[Suite dans la prochaine partie...] 
-Je continue avec la partie sur les WebSockets et le temps réel ? 
-
-| Caractéristique | Nexy | FastAPI | Django | Flask |
-|----------------|------|---------|--------|-------|
-| **Setup Rapide** | 🚀✅ | ⚠️ | ❌ | ✅ |
-| **Performance** | 🚀✅ | 🚀✅ | ⚠️ | ⚠️ |
\ No newline at end of file
diff --git a/package.json b/package.json
index 51ddd0fd..1e886e5a 100644
--- a/package.json
+++ b/package.json
@@ -4,36 +4,37 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
-    "build": "next build",
+    "build": "next build --turbopack",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.1.6",
-    "@tailwindcss/postcss": "^4.0.0",
-    "@tailwindcss/typography": "latest",
-    "@types/dompurify": "^3.0.5",
+    "@next/mdx": "^15.3.1",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/dompurify": "^3.2.0",
     "@types/mdx": "^2.0.13",
-    "dompurify": "^3.2.4",
+    "@vercel/analytics": "^1.5.0",
+    "dompurify": "^3.2.5",
     "install": "^0.13.0",
-    "motion": "^12.0.11",
-    "next": "15.1.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "motion": "^12.9.2",
+    "next": "^15.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.2.0",
-    "@types/node": "^20.17.17",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "eslint": "^9.19.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@types/node": "^20.17.31",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "eslint": "^9.25.1",
     "eslint-config-next": "15.1.6",
-    "postcss": "^8.5.1",
-    "shiki": "^2.3.1",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.7.3"
+    "postcss": "^8.5.3",
+    "shiki": "^2.5.0",
+    "tailwindcss": "^4.1.4",
+    "typescript": "^5.8.3"
   }
 }
diff --git a/public/ai.png b/public/ai.png
new file mode 100644
index 00000000..5c988be7
Binary files /dev/null and b/public/ai.png differ
diff --git a/public/maskot.png b/public/maskot.png
new file mode 100644
index 00000000..2a3fd2d3
Binary files /dev/null and b/public/maskot.png differ
diff --git a/read.md b/read.md
deleted file mode 100644
index 7585725c..00000000
--- a/read.md
+++ /dev/null
@@ -1,535 +0,0 @@
-# Nexy Framework
-
-> Un framework Python moderne qui transforme le développement web en une expérience agréable et productive, construit sur la puissance de FastAPI.
-
-## Table des Matières
-
-1. [Introduction](#introduction)
-2. [Installation](#installation)
-3. [Guide de Démarrage](#guide-de-démarrage)
-4. [Architecture](#architecture)
-5. [Fonctionnalités Principales](#fonctionnalités-principales)
-6. [Fonctionnalités Avancées](#fonctionnalités-avancées)
-7. [Sécurité](#sécurité)
-8. [Performance](#performance)
-9. [Déploiement](#déploiement)
-10. [Contribution](#contribution)
-11. [Ressources](#ressources)
-
-## Introduction
-
-### La Vision de Nexy
-
-Nexy est né d'une vision simple mais ambitieuse : créer un framework web Python qui allie la puissance de FastAPI avec une expérience développeur exceptionnelle. Notre objectif est de permettre aux développeurs de se concentrer sur la création de valeur plutôt que sur la configuration technique.
-
-### Pourquoi Nexy ?
-
-- **Simplicité d'Utilisation** : Architecture intuitive et conventions claires
-- **Performance Optimale** : Basé sur FastAPI et ses fondations asynchrones
-- **Productivité Maximale** : Génération automatique de code et outils CLI puissants
-- **Flexibilité** : S'adapte aussi bien aux petits projets qu'aux applications d'entreprise
-- **Sécurité Intégrée** : Bonnes pratiques de sécurité par défaut
-- **Documentation Complète** : Guides détaillés et exemples pratiques
-
-### Comparaison avec d'Autres Frameworks
-
-| Caractéristique | Nexy | FastAPI | Django | Flask |
-|----------------|------|----------|---------|-------|
-| Setup Rapide | ✅ | ⚠️ | ❌ | ✅ |
-| Performance | ✅ | ✅ | ⚠️ | ⚠️ |
-| Batteries Included | ✅ | ❌ | ✅ | ❌ |
-| Courbe d'Apprentissage | Faible | Moyenne | Élevée | Faible |
-
-## Installation
-
-### Prérequis Détaillés
-
-- Python 3.12 ou supérieur
-- pip version 21.0 ou supérieure
-- Virtualenv (recommandé)
-- Git (pour le contrôle de version)
-
-### Installation Pas à Pas
-
-```bash
-# 1. Créer un environnement virtuel
-python -m venv venv
-source venv/bin/activate  # Linux/Mac
-venv\Scripts\activate     # Windows
-
-# 2. Installer Nexy et ses dépendances
-pip install nexy inquirerpy=="0.3.4"
-
-# 3. Créer un nouveau projet
-nexy new mon-projet
-
-# 4. Initialiser Git (optionnel mais recommandé)
-cd mon-projet
-git init
-```
-
-### Structure Initiale Détaillée
-
-```plaintext
-mon-projet/
-├── app/
-│   ├── controller.py    # Contrôleur principal
-│   ├── view.html       # Vue principale
-│   ├── models/         # Modèles de données
-│   │   └── __init__.py
-│   ├── services/       # Services métier
-│   │   └── __init__.py
-│   └── utils/         # Utilitaires
-│       └── __init__.py
-├── public/             # Fichiers statiques
-│   ├── css/
-│   ├── js/
-│   └── images/
-├── tests/             # Tests unitaires et d'intégration
-│   └── __init__.py
-├── .env               # Variables d'environnement
-├── .gitignore        # Configuration Git
-└── nexy-config.py    # Configuration de l'application
-```
-
-## Guide de Démarrage
-
-### Premier Contrôleur
-
-```python
-# app/controller.py
-from typing import Dict, Optional
-from pydantic import BaseModel
-
-class Response(BaseModel):
-    status: str
-    message: str
-    data: Optional[Dict] = None
-
-async def GET():
-    """
-    Point d'entrée principal - GET /
-    
-    Returns:
-        Response: Message de bienvenue avec statut
-    """
-    return Response(
-        status="success",
-        message="Bienvenue sur Nexy!",
-        data={"version": "1.0.0"}
-    )
-
-async def POST(data: dict):
-    """
-    Gestion des requêtes POST sur /
-    
-    Args:
-        data (dict): Données reçues dans la requête
-        
-    Returns:
-        Response: Confirmation de réception des données
-    """
-    return Response(
-        status="success",
-        message="Données reçues avec succès",
-        data=data
-    )
-```
-
-### Première Vue
-
-```html
-<!-- app/view.html -->
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title | default("Mon Application Nexy") }}</title>
-    <link rel="stylesheet" href="/static/css/style.css">
-</head>
-<body>
-    <header>
-        <nav>
-            <ul>
-                <li><a href="/">Accueil</a></li>
-                <li><a href="/users">Utilisateurs</a></li>
-                <li><a href="/about">À propos</a></li>
-            </ul>
-        </nav>
-    </header>
-
-    <main>
-        <h1>{{ title }}</h1>
-        
-        <div response="content">
-            {% block content %}
-                <p>{{ message }}</p>
-            {% endblock %}
-        </div>
-    </main>
-
-    <footer>
-        <p>&copy; {{ year }} Mon Application Nexy</p>
-    </footer>
-
-    <script src="/static/js/main.js"></script>
-</body>
-</html>
-```
-
-## Architecture
-
-### Système de Routing Détaillé
-
-Le routing dans Nexy est basé sur la structure des dossiers, avec plusieurs options avancées :
-
-#### Routes Statiques
-
-```plaintext
-app/
-├── controller.py         # /
-├── about/
-│   └── controller.py     # /about
-└── contact/
-    └── controller.py     # /contact
-```
-
-#### Routes Dynamiques
-
-```python
-# app/users/[id]/controller.py
-from typing import Union
-from nexy import NotFoundError
-
-async def GET(id: int):
-    """
-    Récupère un utilisateur par son ID
-    
-    Args:
-        id (int): ID de l'utilisateur
-        
-    Raises:
-        NotFoundError: Si l'utilisateur n'existe pas
-        
-    Returns:
-        dict: Données de l'utilisateur
-    """
-    user = await get_user_by_id(id)
-    if not user:
-        raise NotFoundError(f"Utilisateur {id} non trouvé")
-    return user
-
-async def PUT(id: int, data: dict):
-    """
-    Met à jour un utilisateur
-    
-    Args:
-        id (int): ID de l'utilisateur
-        data (dict): Nouvelles données
-        
-    Returns:
-        dict: Utilisateur mis à jour
-    """
-    return await update_user(id, data)
-
-async def DELETE(id: int):
-    """
-    Supprime un utilisateur
-    
-    Args:
-        id (int): ID de l'utilisateur
-        
-    Returns:
-        dict: Confirmation de suppression
-    """
-    await delete_user(id)
-    return {"status": "success", "message": f"Utilisateur {id} supprimé"}
-```
-
-#### Routes avec Middleware
-
-```python
-# app/admin/middleware.py
-from nexy import Middleware
-from .auth import verify_admin_token
-
-class AdminMiddleware(Middleware):
-    async def process_request(self, request):
-        token = request.headers.get("Authorization")
-        if not await verify_admin_token(token):
-            raise UnauthorizedError("Accès non autorisé")
-```
-
-### Services et Logique Métier
-
-```python
-# app/services/user_service.py
-from typing import List, Optional
-from .database import Database
-from ..models.user import User
-
-class UserService:
-    def __init__(self):
-        self.db = Database()
-    
-    async def get_all(self) -> List[User]:
-        """Récupère tous les utilisateurs"""
-        users = await self.db.query("SELECT * FROM users")
-        return [User(**user) for user in users]
-    
-    async def get_by_id(self, user_id: int) -> Optional[User]:
-        """Récupère un utilisateur par son ID"""
-        user = await self.db.query_one(
-            "SELECT * FROM users WHERE id = ?",
-            [user_id]
-        )
-        return User(**user) if user else None
-    
-    async def create(self, user_data: dict) -> User:
-        """Crée un nouvel utilisateur"""
-        user_id = await self.db.insert("users", user_data)
-        return await self.get_by_id(user_id)
-    
-    async def update(self, user_id: int, user_data: dict) -> Optional[User]:
-        """Met à jour un utilisateur"""
-        success = await self.db.update(
-            "users",
-            user_data,
-            {"id": user_id}
-        )
-        return await self.get_by_id(user_id) if success else None
-    
-    async def delete(self, user_id: int) -> bool:
-        """Supprime un utilisateur"""
-        return await self.db.delete("users", {"id": user_id})
-```
-
-## Fonctionnalités Principales
-
-### Système de Templates Avancé
-
-#### Layouts
-
-```html
-<!-- app/layouts/base.html -->
-<!DOCTYPE html>
-<html>
-<head>
-    <title>{% block title %}{% endblock %} - MonApp</title>
-    {% block head %}{% endblock %}
-</head>
-<body>
-    <header>
-        {% include "components/nav.html" %}
-    </header>
-    
-    <main>
-        {% block content %}{% endblock %}
-    </main>
-    
-    <footer>
-        {% include "components/footer.html" %}
-    </footer>
-</body>
-</html>
-```
-
-#### Composants Réutilisables
-
-```html
-<!-- app/components/button.html -->
-{% macro Button(text, type="button", class="", disabled=false) %}
-<button 
-    type="{{ type }}"
-    class="btn {{ class }}"
-    {% if disabled %}disabled{% endif %}
-    {% block attributes %}{% endblock %}
->
-    {{ text }}
-</button>
-{% endmacro %}
-
-<!-- Utilisation -->
-{% from "components/button.html" import Button %}
-{{ Button("Envoyer", type="submit", class="btn-primary") }}
-```
-
-### Gestion d'État
-
-```python
-# app/state.py
-from nexy import State, StateManager
-
-# État global
-app_state = StateManager()
-
-# États spécifiques
-users = State([])
-settings = State({
-    "theme": "light",
-    "language": "fr"
-})
-
-# Actions
-@app_state.action
-def add_user(state, user):
-    users.set([*users.get(), user])
-    return users.get()
-
-@app_state.action
-def update_settings(state, new_settings):
-    settings.set({**settings.get(), **new_settings})
-    return settings.get()
-```
-
-## Fonctionnalités Avancées
-
-### Validation des Données
-
-```python
-# app/models/user.py
-from pydantic import BaseModel, EmailStr, Field
-from typing import Optional
-from datetime import datetime
-
-class UserBase(BaseModel):
-    email: EmailStr
-    username: str = Field(..., min_length=3, max_length=50)
-    full_name: Optional[str] = None
-
-class UserCreate(UserBase):
-    password: str = Field(..., min_length=8)
-
-class UserUpdate(UserBase):
-    password: Optional[str] = Field(None, min_length=8)
-
-class User(UserBase):
-    id: int
-    created_at: datetime
-    updated_at: datetime
-    is_active: bool = True
-    
-    class Config:
-        from_attributes = True
-```
-
-### WebSockets
-
-```python
-# app/websockets/chat.py
-from nexy import WebSocket
-from typing import List, Set
-from .models import Message
-
-class ChatWebSocket(WebSocket):
-    clients: Set[WebSocket] = set()
-    
-    async def connect(self):
-        await self.accept()
-        self.clients.add(self)
-        await self.broadcast({"type": "join", "user": self.user.username})
-    
-    async def disconnect(self, close_code):
-        self.clients.remove(self)
-        await self.broadcast({"type": "leave", "user": self.user.username})
-    
-    async def receive_json(self, content):
-        message = Message(**content)
-        await self.broadcast({
-            "type": "message",
-            "user": self.user.username,
-            "content": message.content
-        })
-    
-    @classmethod
-    async def broadcast(cls, message: dict):
-        for client in cls.clients:
-            await client.send_json(message)
-```
-
-### Tâches en Arrière-plan
-
-```python
-# app/tasks/scheduler.py
-from nexy import Task
-from datetime import timedelta
-
-@Task.periodic(timedelta(minutes=15))
-async def cleanup_sessions():
-    """Nettoie les sessions expirées toutes les 15 minutes"""
-    await db.delete_expired_sessions()
-
-@Task.delayed
-async def send_welcome_email(user_id: int):
-    """Envoie un email de bienvenue de façon asynchrone"""
-    user = await User.get(user_id)
-    await mailer.send(
-        to=user.email,
-        template="welcome",
-        context={"user": user}
-    )
-```
-
-## Sécurité
-
-### Authentification
-
-```python
-# app/auth/jwt.py
-from nexy import JWT, JWTConfig
-from datetime import timedelta
-
-jwt = JWT(
-    config=JWTConfig(
-        secret_key="votre-clé-secrète",
-        algorithm="HS256",
-        access_token_expire=timedelta(minutes=15),
-        refresh_token_expire=timedelta(days=7)
-    )
-)
-
-# Middleware d'authentification
-from nexy import Middleware
-
-class AuthMiddleware(Middleware):
-    async def process_request(self, request):
-        token = request.headers.get("Authorization")
-        if not token:
-            raise UnauthorizedError()
-        
-        try:
-            payload = jwt.decode(token)
-            request.user = await User.get(payload["user_id"])
-        except JWTError:
-            raise UnauthorizedError()
-```
-
-### CORS
-
-```python
-# nexy-config.py
-from nexy import Nexy, CORSConfig
-
-app = Nexy(
-    cors=CORSConfig(
-        allow_origins=["https://monapp.com"],
-        allow_methods=["GET", "POST", "PUT", "DELETE"],
-        allow_headers=["Authorization"],
-        max_age=3600
-    )
-)
-```
-
-## Performance
-
-### Cache
-
-```python
-# app/cache.py
-from nexy import Cache
-from datetime import timedelta
-
-cache = Cache()
-
-@cache.cached(ttl=timedelta(minutes=
\ No newline at end of file
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
deleted file mode 100644
index 75fbfad6..00000000
--- a/src/app/(home)/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { redirect } from "next/navigation";
-
-const HomePage = () => {
-    const isServer = typeof window === "undefined";
-
-    if (isServer) {
-            redirect("/docs/started");
-    }
-    return null;
-};
-
-export default HomePage;
diff --git a/src/app/docs/(Introduction)/page.mdx b/src/app/docs/(Introduction)/page.mdx
new file mode 100644
index 00000000..7d5bb022
--- /dev/null
+++ b/src/app/docs/(Introduction)/page.mdx
@@ -0,0 +1,55 @@
+# Introduction
+
+Dans l'écosystème du développement moderne, un framework efficace doit répondre à un défi majeur : 
+<span className='text-[#A9FFEA]'>comment accélérer le développement tout en maintenant des standards de qualité élevés ?</span>
+
+<Badge>Nexy</Badge> répond à cette problématique en combinant la puissance de FastAPI avec une approche simplifiée du développement web. Notre framework repose sur deux piliers essentiels : **des performances exceptionnelles** et **une expérience développeur optimisée**.
+
+___
+
+## Qu'est-ce que Nexy ?
+
+<Badge>Nexy</Badge> est un framework web moderne basé sur <a href="https://fastapi.tiangolo.com/" className='text-yellow-300 italic' target="_blank">FastAPI</a>, conçu pour démocratiser le développement d'applications web hautes performances.
+
+### Pourquoi Nexy ?
+
+<Mark>
+- <Badge>Rapidité</Badge> de développement : Une architecture intuitive pour lancer vos projets efficacement
+- <Badge>Performances</Badge> natives : L'excellence technique de FastAPI, enrichie d'optimisations avancées
+- <Badge>Simplicité</Badge> d'usage : Une expérience développeur fluide et accessible
+- <Badge>Flexibilité</Badge> : Une adaptabilité totale, du projet personnel aux architectures complexes
+</Mark>
+Que vous construisiez une API REST, une application web complète ou un microservice, <Badge>Nexy</Badge> vous accompagne avec des outils conçus pour maximiser votre productivité.
+
+___
+
+## Avant de commencer
+
+Pour une expérience optimale avec cette documentation, nous recommandons de maîtriser :
+
+- <span className="text-amber-50/50 text-sm ">① </span> **Python** (niveau intermédiaire) - Syntaxe, programmation orientée objet
+- <span className="text-amber-50/50 text-sm ">② </span> **FastAPI** (notions de base) - Concepts des API REST et décorateurs Python
+
+> **Note importante :** Débutant avec <a href="https://fastapi.tiangolo.com/" className='text-yellow-300 italic' target="_blank">FastAPI</a> ? Notre documentation détaillée vous guidera à travers chaque concept essentiel.
+
+___
+
+## Ce que vous allez apprendre
+
+Cette documentation vous permettra de :
+
+- Maîtriser l'installation et la configuration de Nexy rapidement
+- Comprendre les principes architecturaux fondamentaux
+- Développer vos premières applications avec des exemples concrets
+- Adopter les meilleures pratiques de développement
+
+<SwitchPage
+    prev = { {
+        label: "Guide de construction",
+        href: "/started/"
+    }}
+    next ={ {
+        label: "Installation",
+        href: "/started/"
+    }}
+/>
\ No newline at end of file
diff --git a/src/app/docs/(Introduction)/template.tsx b/src/app/docs/(Introduction)/template.tsx
new file mode 100644
index 00000000..9e97e07d
--- /dev/null
+++ b/src/app/docs/(Introduction)/template.tsx
@@ -0,0 +1,12 @@
+import { TemplateEffect } from "@/components/(home)/docs/templateEffect";
+
+type TemplateProps = {
+    children: React.ReactNode;
+}
+const Template = ({ children }: TemplateProps) => (
+    <TemplateEffect>
+        {children}
+    </TemplateEffect>
+)
+
+export default Template
\ No newline at end of file
diff --git a/src/app/docs/[...slug]/page.tsx b/src/app/docs/[...slug]/page.tsx
deleted file mode 100644
index f42be41d..00000000
--- a/src/app/docs/[...slug]/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import Build from "@/components/Build";
-
-export default function DocPage() {
-    return (
-        <Build/>
-    )
-}
diff --git a/src/app/docs/authentification/[...slug]/page.mdx b/src/app/docs/authentification/[...slug]/page.mdx
new file mode 100644
index 00000000..7858710d
--- /dev/null
+++ b/src/app/docs/authentification/[...slug]/page.mdx
@@ -0,0 +1,3 @@
+authentication:
+  - github
+---
\ No newline at end of file
diff --git a/src/app/docs/authentification/page.tsx b/src/app/docs/authentification/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/basics/[...slug]/page.mdx b/src/app/docs/basics/[...slug]/page.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/basics/controllers/main.py b/src/app/docs/basics/controllers/main.py
new file mode 100644
index 00000000..7bed3244
--- /dev/null
+++ b/src/app/docs/basics/controllers/main.py
@@ -0,0 +1,13 @@
+from nexy import Request, Depends
+from .service import AppService
+
+async def POST(
+    userId: int,
+    service: Depends(AppService),
+    request: Request,
+  ) -> Dict[str, str]:
+
+  comment_data = await request.json()
+  data = await service.add_comment(userId, comment_data)
+
+  return data
diff --git a/src/app/docs/basics/controllers/page.mdx b/src/app/docs/basics/controllers/page.mdx
new file mode 100644
index 00000000..af4ab7fd
--- /dev/null
+++ b/src/app/docs/basics/controllers/page.mdx
@@ -0,0 +1,297 @@
+# Contrôleurs
+
+Les contrôleurs sont responsables du traitement des demandes entrantes et de l'envoi des réponses au client.
+
+Le rôle d'un contrôleur est de gérer des requêtes spécifiques pour l'application. Le mécanisme de routage détermine quel contrôleur traitera chaque requête. 
+
+<Mark>
+    Dans <Badge>Nexy</Badge>, un contrôleur est simplement tout fichier <Badge>controller.py</Badge> situé dans le répertoire <Badge>app</Badge> ou ses sous-répertoires. 
+</Mark>
+
+<CodeCard fileName="Structure">
+  <Structure>
+    <Folder folderName="app">
+      <Folder folderName="users">
+        <File fileName="controller.py"/>
+      </Folder>
+      <Folder folderName="articles"> 
+        <File fileName="controller.py"/>
+      </Folder>
+      <File fileName="controller.py"/>
+    </Folder>
+  </Structure>
+</CodeCard>
+
+___
+
+## Route
+
+Une route est une association entre un chemin URL et une action dans l'application. Lorsqu'un utilisateur accède à une URL spécifique, la route correspondante est identifiée et exécutée pour traiter la demande.
+ 
+Dans <Badge>Nexy</Badge>, une route est définie par la structure de répertoires dans le dossier <Badge>app</Badge>. Le répertoire <Badge>app</Badge> lui-même représente la route principale, et chaque sous-répertoire définit une route imbriquée.
+
+<CodeCard fileName="Structure">
+  <Structure>
+    <Folder folderName="app">
+      <Folder folderName="users"/>
+      <Folder folderName="articles"/> 
+    </Folder>
+  </Structure>
+</CodeCard>
+
+### Route dynamique
+
+Les routes dynamiques permettent d'identifier des ressources spécifiques en utilisant des paramètres de route. Ces paramètres sont définis dans le chemin de la route et peuvent être extraits par la fonction de traitement de la route.
+
+Dans <Badge>Nexy</Badge>, une route devient dynamique lorsque le nom du répertoire ou dossier est encadré par des crochets, comme ceci : <Badge>[dossier]</Badge>.
+
+<CodeCard fileName="Structure">
+  <Structure>
+    <Folder folderName="app">
+      <Folder folderName="users">
+        <Folder folderName="[userId]"/>
+      </Folder>
+      <Folder folderName="articles">
+        <Folder folderName="[articleId]"/>
+      </Folder>
+        <Folder folderName="[blog]"/>
+    </Folder>
+  </Structure>
+</CodeCard>
+
+<Mark>
+  Les routes dynamiques fonctionnent de la même manière pour tous les types d'endpoints.
+</Mark>
+
+___
+
+## Endpoint
+
+Un endpoint représente un point d'interface complet exposé par l'application qui permet l'interaction avec des services, des ressources ou des fonctionnalités spécifiques. Il comprend :
+
+- <span className="text-amber-50/50 text-sm">① </span> Le chemin d'accès URL qui identifie la ressource
+- <span className="text-amber-50/50 text-sm">② </span> Le protocole de communication (HTTP ou WebSocket)
+- <span className="text-amber-50/50 text-sm">③ </span> La fonction de traitement qui gère les requêtes entrantes
+
+Dans <Badge>Nexy</Badge>, le framework prend en charge deux types d'endpoints principaux :
+
+- <span className="text-amber-50/50 text-sm">① </span> Les endpoints HTTP
+- <span className="text-amber-50/50 text-sm">② </span> Les endpoints WebSocket
+
+___
+
+## Endpoints HTTP 
+
+Les endpoints HTTP suivent le modèle requête-réponse traditionnel et sont utilisés pour effectuer des opérations CRUD (Create, Read, Update, Delete) sur des ressources.
+<Mark>
+  Pour créer un endpoint HTTP dans <Badge>Nexy</Badge>, il suffit de définir une fonction ( asynchrone ou pas comme dans <MDXLink href="https://fastapi.tiangolo.com/async/#concurrent-burgers">FastAPI</MDXLink> ) dont le nom correspond à la méthode HTTP souhaitée (<Badge>GET</Badge>, <Badge>POST</Badge>, <Badge>PUT</Badge>, <Badge>DELETE</Badge>, etc.) dans un fichier <Badge>controller.py</Badge>.
+</Mark>
+
+### GET
+
+La méthode GET est la méthode fondamentale de récupération de données. Elle permet de lire des informations sans modifier l'état du serveur, 
+ce qui en fait la méthode la plus sécurisée et la plus utilisée. 
+
+Son utilisation principale concerne l'affichage des pages et la consultation des ressources comme les profils utilisateurs ou les listes de produits.
+
+
+<CodeCard fileName="app/**/controller.py">
+<Code language="python"
+theme="catppuccin-mocha"
+code = {
+`from typing import Dict
+
+def GET() -> Dict[str, str] :
+    return {"message":"Salut Espoir Loém"}
+`
+}
+/>
+
+</CodeCard>
+
+Dans une route dynamique, il est possible d'extraire les paramètres de la route en utilisant le nom de la route dynamique comme paramètre de la fonction .
+
+<CodeCard fileName="app/users/[userId]/controller.py">
+<Structure>
+    <Folder folderName="app">
+      <Folder folderName="users">
+        <Folder folderName="[userId]">
+          <File fileName="controller.py"/>
+        </Folder>
+      </Folder>
+    </Folder>
+  </Structure>
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from typing import Dict
+
+def GET(userId : int) -> Dict[str, str] :
+    users = ["Espoir Loém", "Force Espoir","LOEMBA PACKA"]
+    return {"user": users[userId]}
+`
+}
+/>
+</CodeCard>
+
+### POST
+
+Complémentaire à GET, la méthode POST est dédiée à la création de nouvelles ressources. Elle assure un transfert sécurisé des données vers le serveur, avec une validation systématique avant sauvegarde. 
+
+Cette méthode est essentielle pour toutes les opérations d'ajout, que ce soit la création de comptes utilisateurs ou la publication de nouveaux contenus.
+
+<CodeCard fileName="app/**/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from typing import Dict, List
+
+userList : List[Dict[str, str]] = None
+
+def POST() -> List[Dict[str, str]] :
+    userList.append({"name":"Espoir Loém", "nationality":"Congolese"})
+    return userList
+`
+}
+/>
+</CodeCard>
+
+Dans une route dynamique 
+
+<CodeCard fileName="app/users/[userId]/controller.py">
+<Structure>
+    <Folder folderName="app">
+      <Folder folderName="users">
+        <Folder folderName="[userId]">
+          <File fileName="controller.py"/>
+        </Folder>
+      </Folder>
+    </Folder>
+  </Structure>
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request, Depends
+from .service import AppService
+
+async def POST(
+      userId: int,
+      service: Depends(AppService),
+      request: Request,
+    ) -> Dict[str, str]:
+
+    comment_data = await request.json()
+    data = await service.add_comment(userId, comment_data)
+
+    return data
+`
+}
+/>
+</CodeCard>
+
+
+<Mark>
+  Noté que Nexy supporte les Methode HTTP suivant :
+  <MDXLink href="https://developer.mozilla.org/docs/Web/HTTP/Methods/GET"><Badge>GET</Badge></MDXLink>
+  <MDXLink href="https://developer.mozilla.org/docs/Web/HTTP/Methods/POST"><Badge>POST</Badge></MDXLink>
+  <MDXLink href="https://developer.mozilla.org/docs/Web/HTTP/Methods/PUT"><Badge>PUT</Badge></MDXLink>
+  <MDXLink href="https://developer.mozilla.org/docs/Web/HTTP/Methods/DELETE"><Badge>DELETE</Badge></MDXLink>
+  <MDXLink href="https://developer.mozilla.org/docs/Web/HTTP/Methods/OPTIONS"><Badge>OPTIONS</Badge></MDXLink>
+  <MDXLink href="https://developer.mozilla.org/docs/Web/HTTP/Methods/HEAD"><Badge>HEAD</Badge></MDXLink>
+  <MDXLink href="https://developer.mozilla.org/docs/Web/HTTP/Methods/PATCH"><Badge>PATCH</Badge></MDXLink>
+  <MDXLink href="https://developer.mozilla.org/docs/Web/HTTP/Methods/TRACE"><Badge>TRACE</Badge></MDXLink>
+
+</Mark>
+Chaque endpoint HTTP est caractérisé par :
+- <span className="text-amber-50/50 text-sm">① </span> une communication ponctuelle et sans état
+- <span className="text-amber-50/50 text-sm">② </span> l'utilisation d'une méthode HTTP spécifique
+- <span className="text-amber-50/50 text-sm">③ </span> une structure de données d'entrée et de sortie bien définie
+
+___
+
+## Endpoints WebSocket
+
+Les endpoints WebSocket établissent une connexion persistante et bidirectionnelle entre le client et le serveur, permettant des communications en temps réel.
+
+Ces endpoints sont particulièrement adaptés pour :
+- <span className="text-amber-50/50 text-sm">① </span> Les applications nécessitant des mises à jour instantanées
+- <span className="text-amber-50/50 text-sm">② </span> Les fonctionnalités de chat et de messagerie
+- <span className="text-amber-50/50 text-sm">③ </span> Les tableaux de bord en temps réel
+- <span className="text-amber-50/50 text-sm">④ </span> Les notifications push
+
+Un endpoint WebSocket dans <Badge>Nexy</Badge> maintient un état de connexion et permet l'envoi de messages dans les deux sens à tout moment, contrairement aux endpoints HTTP qui suivent un strict modèle de requête-réponse.
+
+### Comment créer un endpoint WebSocket ?
+Tout comme pour les endpoints HTTP, il suffit de créer une fonction asynchrone nommée <Badge>SOCKET</Badge>  dans un fichier <Badge>controller.py</Badge>.
+
+
+<CodeCard fileName="app/**/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import WebSocket
+
+async def SOCKET(ws: WebSocket):
+    await ws.accept()  # Accept the WebSocket connection
+    
+    try:
+        while True:
+            # Receive message from client
+            message = await ws.receive_text()
+            
+            # Echo the message back
+            await ws.send_text(f"Server received: {message}")
+            
+    except Exception:
+        await ws.close()
+`
+}
+/>
+
+
+</CodeCard>
+
+
+
+Tout comme pour les endpoints HTTP, il est possible d'extraire les paramètres de la route en utilisant le nom de la route dynamique comme paramètre de la fonction.
+
+<CodeCard fileName="app/users/[userId]/controller.py">
+<Structure>
+    <Folder folderName="app">
+      <Folder folderName="users">
+        <Folder folderName="[userId]">
+          <File fileName="controller.py"/>
+        </Folder>
+      </Folder>
+    </Folder>
+  </Structure>
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import WebSocket
+
+async def SOCKET(userId: int, ws: WebSocket):  
+    await ws.accept()
+    await ws.send_text(f"Hello user {userId}")
+    await ws.close()
+` 
+}
+/>
+</CodeCard>
+
+___
+
+## 👌 Bravo !
+Maintenant que vous avez appris à propos des contrôleurs et des endpoints, vous pouvez commencer à construire la structure API de votre application !
+Découvrons comment faire cela dans la section suivante.
+<SwitchPage
+    prev = { {
+        label: "Guidee de contruction",
+        href: "/started/"
+    }}
+    next ={ {
+        label: "Installation",
+        href: "/started/"
+    }}
+
+/>
\ No newline at end of file
diff --git a/src/app/docs/basics/middleware/page.mdx b/src/app/docs/basics/middleware/page.mdx
new file mode 100644
index 00000000..011ca63d
--- /dev/null
+++ b/src/app/docs/basics/middleware/page.mdx
@@ -0,0 +1,7 @@
+# Middleware
+
+Middleware is a powerful feature in Nexy that allows you to intercept and modify requests before they reach your route handlers. This gives you fine-grained control over request processing and enables common functionality like authentication, logging, and request transformation.
+
+## Basic Usage
+
+To create middleware, define a function that takes a `Request` object and returns a modified request or response:
diff --git a/src/app/docs/basics/page.mdx b/src/app/docs/basics/page.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/basics/request/page.mdx b/src/app/docs/basics/request/page.mdx
new file mode 100644
index 00000000..77a8e69a
--- /dev/null
+++ b/src/app/docs/basics/request/page.mdx
@@ -0,0 +1,604 @@
+# Request
+
+L'objet de la classe <Badge>Request</Badge> dans Nexy est votre interface principale pour accéder aux données des requêtes HTTP entrantes. Héritant directement de FastAPI, il vous offre un accès complet et simplifié aux en-têtes, paramètres, corps de requête et fichiers téléchargés.
+
+### Compatibilité FastAPI
+
+La classe <Badge>Request</Badge> dans Nexy hérite intégralement de FastAPI, garantissant une compatibilité totale avec l'écosystème FastAPI existant.
+
+<Mark>
+  💡 Astuce : Un objet de la classe <Badge>Request</Badge>  est automatiquement injecté dans vos contrôleurs. Déclarez-le simplement comme paramètre typé !
+</Mark>
+
+---
+
+## Accéder à `Request`
+
+Pour utiliser <Badge>Request</Badge> , il vous suffit de l'ajouter comme paramètre dans la définition de votre fonction de contrôleur. Voici comment faire :
+
+<CodeCard fileName="app/**/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+
+async def GET(request: Request):
+    # Vous pouvez maintenant utiliser l'objet 'request' ici
+    return {"message": "Requête reçue !"}
+`
+}
+/>
+</CodeCard>
+
+
+
+
+
+___
+
+## Accéder à l'URL de la Requête
+
+Vous pouvez obtenir l'URL complète de la requête en utilisant <Badge>request.url</Badge>.
+
+<CodeCard fileName="app/url/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    return {"url_complete": str(request.url)}
+`
+}
+/>
+</CodeCard>
+
+___
+
+## Connaître la Méthode HTTP
+
+La méthode HTTP utilisée pour la requête (GET, POST, etc.) est disponible via <Badge>request.method</Badge>.
+
+<CodeCard fileName="app/method/controller.py">
+
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    return {"methode_http": request.method}
+`
+}
+/>
+</CodeCard>
+
+___
+
+## Obtenir l'Adresse IP du Client
+
+L'adresse IP du client qui a envoyé la requête est accessible via <Badge>request.client.host</Badge>.
+
+<CodeCard fileName="app/client/controller.py">
+
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    client_host = request.client.host if request.client else "Inconnu"
+    return {"adresse_ip_client": client_host}
+`
+}
+/>
+</CodeCard>
+
+
+
+___
+
+## Récupérer les Paramètres de Chemin
+
+Les paramètres de chemin sont des valeurs qui font partie de l'URL elle-même (par exemple, <Badge>/utilisateurs/123</Badge> où <Badge>123</Badge> est un paramètre). Nexy vous permet de les récupérer directement en les déclarant comme des paramètres de votre fonction de contrôleur.
+
+<CodeCard fileName="app/users/[userId]/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from typing import Dict
+
+def GET(userId: int) -> Dict[str, str]:
+    # userId est automatiquement extrait de l'URL
+    users = {
+        1: "Espoir Loém",
+        2: "Force Espoir",
+        3: "LOEMBA PACKA"
+    }
+    return {"user": users.get(userId, "Utilisateur non trouvé")}
+`
+}
+/>
+</CodeCard>
+
+___
+
+## Récupérer les Paramètres de Requête (Query Parameters)
+
+Les paramètres de requête sont des paires clé-valeur ajoutées à la fin de l'URL après un point d'interrogation (par exemple, <Badge>/items?name=chaise&quantity=2</Badge>). Vous pouvez y accéder via l'objet <Badge>request.query_params</Badge>.
+
+<CodeCard fileName="app/items/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    name = request.query_params.get("name")
+    quantity = request.query_params.get("quantity")
+    return {"nom": name, "quantite": quantity}
+`
+}
+/>
+</CodeCard>
+
+Il est également possible de récupérer les paramètres de requête en les déclarant directement comme paramètres dans votre fonction de contrôleur.
+
+<CodeCard fileName="app/items/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from typing import Dict
+
+def GET(name: str, quantity: int) -> Dict[str, str]:
+    return {"nom": name, "quantite": quantity}
+` 
+}
+/>
+</CodeCard>
+
+
+___
+
+## Lire le Corps de la Requête (JSON)
+
+Pour les requêtes <Badge>POST</Badge>, <Badge>PUT</Badge>, <Badge>PATCH</Badge> qui envoient des données au format JSON, vous pouvez lire le corps de la requête de manière asynchrone en utilisant <Badge>await request.json()</Badge>.
+
+<CodeCard fileName="app/data/controller.py">
+
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+async def POST(request: Request) -> Dict[str, str]:
+    data = await request.json() # Lit le corps de la requête comme du JSON
+    return {"message": "Données JSON reçues !", "donnees": data}
+`}/>
+</CodeCard>
+
+___
+
+## Lire le Corps de la Requête (Données de Formulaire)
+
+Pour les requêtes qui envoient des données de formulaire (par exemple,<br/> <Badge>application/x-www-form-urlencoded</Badge> ou <Badge>multipart/form-data</Badge>), vous pouvez utiliser <Badge>await request.form()</Badge>.
+
+<CodeCard fileName="app/form/controller.py">
+
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+async def POST(request: Request) -> Dict[str, str]:
+    # Lit le corps de la requête comme des données de formulaire
+    form_data = await request.form() 
+    username = form_data.get("username")
+    password = form_data.get("password")
+    return {
+        "message": "Données de formulaire reçues !",
+        "username": username,
+        "password": password
+    }
+`
+}
+/>
+</CodeCard>
+
+___
+
+## Accéder aux En-têtes de Requête
+
+Les en-têtes HTTP sont accessibles via <Badge>request.headers</Badge>. C'est un dictionnaire insensible à la casse.
+
+<CodeCard fileName="app/headers/controller.py">
+
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    user_agent = request.headers.get("user-agent")
+    content_type = request.headers.get("content-type")
+    return {"user_agent": user_agent, "content_type": content_type}
+`
+}
+/>
+</CodeCard>
+
+___
+
+## Accéder aux Cookies
+
+Les cookies envoyés avec la requête sont accessibles via <Badge>request.cookies</Badge>. C'est un dictionnaire simple.
+
+<CodeCard fileName="app/cookies/controller.py">
+
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    session_id = request.cookies.get("session_id")
+    return {"session_id": session_id}
+`
+}
+/>
+</CodeCard>
+
+___
+
+## Gérer les Fichiers Téléchargés
+
+Pour gérer les fichiers téléchargés via un formulaire <Badge>multipart/form-data</Badge>, vous pouvez accéder aux fichiers via l'objet <Badge>form_data</Badge> retourné par <Badge>await request.form()</Badge>.
+<CodeCard fileName="app/upload/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+async def POST(request: Request) -> Dict[str, str]:
+    form_data = await request.form()
+    upload_file = form_data.get("upload_file")
+
+    if upload_file and upload_file.filename:
+        # Pour un fichier, vous pouvez lire son contenu
+        content = await upload_file.read()
+        filename = upload_file.filename
+        return {"nom": filename, "taille": len(content)}
+    return {"message": "Aucun fichier n'a été téléchargé"}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Accéder au Contexte de la Requête ( request.scope )
+
+L'attribut <Badge>request.scope</Badge> est un dictionnaire qui contient le contexte de la requête ASGI (Asynchronous Server Gateway Interface). Il inclut des informations de bas niveau sur la connexion, telles que le type de protocole, l'adresse du client et du serveur, etc.
+
+<CodeCard fileName="app/scope/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    # Par exemple, vous pouvez obtenir le type de scope
+    scope_type = request.scope.get("type")
+    return {"scope_type": scope_type}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Accéder à l'Application ASGI ( request.app )
+
+L'attribut <Badge>request.app</Badge> fait référence à l'application ASGI principale qui gère la requête. Dans la plupart des cas, il s'agit de votre instance d'application Nexy.
+
+<CodeCard fileName="app/app_instance/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    # Vous pouvez vérifier si l'objet app est présent
+    app_present = bool(request.app)
+    return {"app_instance_present": app_present}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Obtenir l'URL de Base ( request.base_url )
+
+L'attribut <Badge>request.base_url</Badge> fournit l'URL de base de l'application, sans le chemin spécifique de la requête. C'est utile pour construire des URLs absolues.
+
+<CodeCard fileName="app/base_url/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    base_url = str(request.base_url)
+    return {"base_url": base_url}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Accéder aux Informations du Client (`request.client`)
+
+L'attribut <Badge>request.client</Badge> est un objet <Badge>Host</Badge> contenant l'adresse IP et le port du client. Nous avons déjà vu <Badge>request.client.host</Badge>.
+
+<CodeCard fileName="app/client_info/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    client_port = request.client.port if request.client else "Inconnu"
+    return {"client_port": client_port}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Gérer les Sessions ( request.session )
+
+Si vous utilisez une gestion de session (par exemple, via des middlewares), l'attribut <Badge>request.session</Badge> vous permet d'accéder aux données de la session en cours. Notez que cela nécessite une configuration de session.
+
+<CodeCard fileName="app/session/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    # Accéder aux données de la session
+    user_id = request.session.get("user_id", "Non connecté")
+    return {"session_user_id": user_id}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Informations d'Authentification (request.auth et request.user)
+
+Si vous utilisez un système d'authentification, <Badge>request.auth</Badge> et <Badge>request.user</Badge> contiendront les informations d'authentification et l'objet utilisateur authentifié, respectivement. Ces attributs sont généralement définis par des middlewares d'authentification.
+
+<CodeCard fileName="app/auth_user/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    # Vérifier si un utilisateur est authentifié
+    username = request.user.display_name if request.user else "Invité"
+    return {"current_user": username}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## État de la Requête ( request.state )
+
+L'attribut <Badge>request.state</Badge> est un dictionnaire que vous pouvez utiliser pour stocker des informations arbitraires liées à la requête, accessibles tout au long de son cycle de vie (par exemple, dans les middlewares ou les dépendances).
+
+<CodeCard fileName="app/state/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    # Définir une valeur dans l'état de la requête
+    request.state.custom_data = "Ceci est une donnée personnalisée"
+    # Récupérer une valeur de l'état de la requête
+    data = request.state.get("custom_data")
+    return {"request_state_data": data}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Recevoir des Données Brutes ( request.receive )
+
+La méthode <Badge>request.receive()</Badge> est une coroutine de bas niveau utilisée pour recevoir des événements ASGI. Elle est principalement utilisée en interne par Nexy / FastAPI / Starlette pour lire le corps de la requête, mais vous pouvez l'utiliser pour des cas d'utilisation avancés.
+
+<CodeCard fileName="app/receive/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+async def POST(request: Request) -> Dict[str, str]:
+    # Exemple très bas niveau de lecture du corps de la requête
+    # Préférer request.json() ou request.form() pour la plupart des cas
+    body_chunks = []
+    async for chunk in request.stream():
+        body_chunks.append(chunk)
+    raw_body = b"".join(body_chunks).decode("utf-8")
+    return {"raw_body_received": raw_body}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Générer des URLs ( request.url_for )
+
+La méthode <Badge>request.url_for()</Badge> permet de générer des URLs pour des routes nommées. C'est très utile pour construire des liens dynamiques dans votre application.
+
+<CodeCard fileName="app/url_for/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+def GET(request: Request) -> Dict[str, str]:
+    # Générer une URL pour une route nommée
+    profile_url = request.url_for("user_profile", user_id=123)
+    # profile_url = "/users/123"  Exemple statique pour l'illustration
+    return {"user_profile_url": profile_url}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Lire le Corps de la Requête en Streaming ( request.stream )
+
+La méthode <Badge>request.stream()</Badge> est une coroutine asynchrone qui renvoie un itérateur asynchrone sur les morceaux (chunks) du corps de la requête. C'est utile pour gérer de très gros fichiers ou des flux de données.
+
+<CodeCard fileName="app/stream/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+async def POST(request: Request) -> Dict[str, str]:
+    total_size = 0
+    async for chunk in request.stream():
+        total_size += len(chunk)
+    return {"bytes_received_via_stream": total_size}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Accéder au Corps de la Requête Brute ( request.body )
+
+La méthode <Badge>request.body()</Badge> est une coroutine qui lit l'intégralité du corps de la requête et le renvoie sous forme d'octets. 
+Une fois lu, le corps ne peut pas être relu par d'autres méthodes comme <Badge>request.json()</Badge> ou <Badge>request.form()</Badge>.
+
+<CodeCard fileName="app/body/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+async def POST(request: Request) -> Dict[str, str]:
+    raw_body = await request.body()
+    reponse = {
+        "raw_body_length": len(raw_body), 
+        "raw_body_preview": raw_body.decode("utf-8")[:50]
+    }
+    return  reponse
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Vérifier la Déconnexion du Client ( request.is_disconnected )
+
+La méthode <Badge>request.is_disconnected()</Badge> permet de vérifier si le client s'est déconnecté pendant le traitement de la requête. C'est utile pour les opérations longues.
+
+<CodeCard fileName="app/disconnected/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+import asyncio
+
+async def GET(request: Request) -> Dict[str, str]:
+    await asyncio.sleep(1) # Simuler un travail long
+    if await request.is_disconnected():
+        return {"status": "Client déconnecté"}
+    return {"status": "Client toujours connecté"}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Fermer la Connexion ( request.close )
+
+La méthode <Badge>request.close()</Badge> est une coroutine qui peut être utilisée pour signaler que la connexion doit être fermée. Elle est rarement appelée directement par l'utilisateur.
+
+<CodeCard fileName="app/close/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import Request
+from typing import Dict
+
+async def GET(request: Request) -> Dict[str, str]:
+    La méthode request.close().
+    # Il est rare de devoir l'appeler manuellement 
+    # dans votre code d'application.
+    return {"message": "La méthode close est gérée par le serveur ASGI."}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## 👌 Bravo !
+
+Vous avez maintenant une compréhension très complète de l'objet <Badge>Request</Badge> et de toutes ses fonctionnalités dans Nexy, grâce à son héritage de FastAPI. Vous êtes prêt à manipuler les données entrantes de vos applications de manière avancée !
+
+Pour aller plus loin : Consultez la <MDXLink href="https://fastapi.tiangolo.com/tutorial/request/">documentation FastAPI</MDXLink> pour découvrir toutes les fonctionnalités héritées disponibles dans Nexy.
+
+<SwitchPage
+    prev = { {
+        label: "Contrôleurs",
+        href: "/basics/controllers/"
+    }}
+    next ={ {
+        label: "Réponses",
+        href: "/basics/response"
+    }}
+
+/>
+
diff --git a/src/app/docs/basics/response/page.mdx b/src/app/docs/basics/response/page.mdx
new file mode 100644
index 00000000..9356b19b
--- /dev/null
+++ b/src/app/docs/basics/response/page.mdx
@@ -0,0 +1,489 @@
+# Response
+
+Dans Nexy, l'objet de la classe <Badge>Response</Badge> est votre outil principal pour construire et envoyer des réponses HTTP personnalisées au client. Il vous offre un contrôle total sur le contenu, les en-têtes, les cookies et le code de statut de vos réponses.
+
+### Compatibilité FastAPI
+
+Nexy utilise directement les classes de Response de FastAPI. Cela signifie que vous avez accès à toutes les classes de réponse standard comme <Badge>JSONResponse</Badge> , <Badge>HTMLResponse</Badge> , <Badge>PlainTextResponse</Badge> , <Badge>RedirectResponse</Badge> , <Badge>StreamingResponse</Badge> , et <Badge>FileResponse</Badge>.
+Vous pouvez vous référer à la documentation officielle de <MDXLink href="https://fastapi.tiangolo.com/learn/">FastAPI</MDXLink> pour explorer toutes les possibilités.
+
+<Mark>
+  Par défaut, si vous retournez un dictionnaire, une liste, ou un modèle Pydantic depuis votre fonction de contrôleur, Nexy le convertira automatiquement en une <Badge>JSONResponse</Badge> !
+</Mark>
+
+---
+
+## Réponse JSON Simple
+
+La méthode la plus courante pour retourner des données. Nexy convertit automatiquement les dictionnaires et listes en JSON.
+
+<CodeCard fileName="app/json/controller.py">
+
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from typing import Dict
+
+# Conversion automatique en JSON
+def GET() -> Dict[str, str]:
+    return {"message": "Bonjour le monde!", "status": "succès"}
+`
+}
+/>
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`# Ou explicitement avec JSONResponse
+from nexy.responses import JSONResponse
+
+def GET() -> JSONResponse:
+    content = {"message": "Données créées", "id": 123}
+    return JSONResponse(content=content, status_code=201)
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Réponse HTML
+
+Pour servir du contenu HTML directement depuis vos contrôleurs.
+
+<CodeCard fileName="app/html/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import HTMLResponse
+
+def GET() -> HTMLResponse:
+    html_content = """
+    <html>
+        <head>
+            <title>Page Nexy</title>
+        </head>
+        <body>
+            <h1>Bienvenue sur Nexy!</h1>
+            <p>Votre application fonctionne parfaitement.</p>
+        </body>
+    </html>
+    """
+    return HTMLResponse(content=html_content)
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Réponse Texte Brut
+
+Pour retourner du texte simple sans formatage HTML.
+
+<CodeCard fileName="app/text/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import PlainTextResponse
+
+def GET() -> PlainTextResponse:
+    return PlainTextResponse("Ceci est un message en texte brut.")
+
+def POST() -> PlainTextResponse:
+    return PlainTextResponse(
+        "Données reçues et traitées avec succès", 
+        status_code=201
+    )
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Redirection
+
+Pour rediriger les utilisateurs vers une autre URL.
+
+<CodeCard fileName="app/redirect/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import RedirectResponse
+
+def GET() -> RedirectResponse:
+    # Redirection temporaire (302)
+    return RedirectResponse(url="/dashboard", status_code=302)
+
+def POST() -> RedirectResponse:
+    # Redirection permanente (301)
+    return RedirectResponse(url="https://www.nexy.io", status_code=301)
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Téléchargement de Fichiers
+
+Pour permettre aux utilisateurs de télécharger des fichiers.
+
+<CodeCard fileName="app/download/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import FileResponse
+
+def GET() -> FileResponse:
+    # Assurez-vous que le fichier existe
+    file_path = "static/documents/rapport.pdf"
+    return FileResponse(
+        file_path, 
+        media_type='application/pdf',
+        filename="rapport_mensuel.pdf"
+    )
+`}/>
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import FileResponse
+
+def GET() -> FileResponse:
+    return FileResponse(
+        "static/images/logo.png",
+        media_type='image/png'
+    )
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Réponse en Streaming
+
+Pour envoyer de gros volumes de données ou des flux en temps réel.
+
+<CodeCard fileName="app/stream/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import StreamingResponse
+import asyncio
+import json
+
+async def generate_data():
+    """Génère des données en flux"""
+    for i in range(10):
+        data = {"item": i, "timestamp": f"2024-{i:02d}-01"}
+        yield f"data: {json.dumps(data)}\n\n"
+        await asyncio.sleep(0.5)
+
+def GET() -> StreamingResponse:
+    return StreamingResponse(generate_data(), media_type="text/plain")
+`}/>
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import StreamingResponse
+
+async def GET():
+    """Streaming d'un gros fichier CSV"""
+    def generate_csv():
+        yield "nom,email,age\n"
+        for i in range(1000):
+            yield f"User{i},user{i}@example.com,{20+i%50}\n"
+    
+    return StreamingResponse(generate_csv(), media_type="text/csv")
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Personnaliser les Codes de Statut
+
+Définir des codes de statut HTTP appropriés pour vos réponses.
+
+<CodeCard fileName="app/status/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import JSONResponse
+
+def POST() -> JSONResponse:
+    # Création réussie - 201 Created
+    return JSONResponse(
+        content={"message": "Ressource créée", "id": 123},
+        status_code=201
+    )
+
+def PUT() -> JSONResponse:
+    # Pas de contenu - 204 No Content
+    return JSONResponse(content=None, status_code=204)
+
+def GET() -> JSONResponse:
+    # Erreur client - 400 Bad Request
+    return JSONResponse(
+        content={"error": "Paramètres manquants"},
+        status_code=400
+    )
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Ajouter des En-têtes
+
+Personnaliser les en-têtes HTTP de vos réponses.
+
+<CodeCard fileName="app/headers/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import JSONResponse
+
+def GET() -> JSONResponse:
+    content = {"data": "informations sensibles"}
+    headers = {
+        "X-Custom-Header": "MaValeurPersonnalisée",
+        "Cache-Control": "no-cache, no-store, must-revalidate",
+        "X-Rate-Limit": "100",
+        "X-API-Version": "v1.2.0"
+    }
+    return JSONResponse(content=content, headers=headers)
+`}/>
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import JSONResponse
+
+def GET():
+    """Exemple avec en-têtes CORS"""
+    headers = {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
+        "Access-Control-Allow-Headers": "Content-Type, Authorization"
+    }
+
+    return JSONResponse(
+        content={"message": "CORS activé"},
+        headers=headers
+    )
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Gérer les Cookies
+
+Définir et supprimer des cookies dans vos réponses.
+
+<CodeCard fileName="app/cookies/controller.py">
+
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import JSONResponse
+
+def POST() -> JSONResponse:
+    """Connexion utilisateur - définir un cookie de session"""
+    response = JSONResponse(content={"message": "Connexion réussie"})
+    response.set_cookie(
+        key="session_id", 
+        value="abc123xyz789", 
+        httponly=True,  # Sécurité contre XSS
+        max_age=3600,   # 1 heure
+        samesite="lax", # Protection CSRF
+        secure=True     # HTTPS uniquement
+    )
+    return response
+
+def DELETE() -> JSONResponse:
+    """Déconnexion - supprimer le cookie de session"""
+    response = JSONResponse(content={"message": "Déconnexion réussie"})
+    response.delete_cookie("session_id")
+    return response
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Utiliser le Décorateur @HTTPResponse
+
+Le décorateur <Badge>@HTTPResponse</Badge> de Nexy simplifie la personnalisation des réponses et améliore la documentation automatique.
+
+<CodeCard fileName="app/decorator/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import HTTPResponse
+from nexy.responses import HTMLResponse
+
+@HTTPResponse(
+    type=HTMLResponse,
+    response_map={
+        200: {"description": "Page HTML retournée avec succès"},
+        404: {"description": "Template non trouvé"}
+    }
+)
+def GET():
+    return """
+    <html>
+        <body>
+            <h1>Page avec décorateur HTTPResponse</h1>
+            <p>Documentation automatique générée !</p>
+        </body>
+    </html>
+    """
+`}/>
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import HTTPResponse
+from pydantic import BaseModel, EmailStr
+
+class UserModel(BaseModel):
+  id: int
+  name: str
+  email: EmailStr
+  is_active: bool = True
+
+@HTTPResponse(
+    model=UserModel,
+    response_map={
+        200: {"description": "Utilisateur trouvé"},
+        404: {"description": "Utilisateur non trouvé"}
+    }
+)
+def GET(user_id: int):
+    # Simulation de récupération d'utilisateur
+    return {
+        "id": user_id, 
+        "name": "Jean Dupont", 
+        "email": "jean@example.com",
+        "is_active": True
+    }
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Gérer les Erreurs avec `HTTPException`
+
+La manière recommandée pour signaler des erreurs dans vos contrôleurs.
+
+<CodeCard fileName="app/errors/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy import HTTPException
+
+def GET(item_id: int):
+    # Validation des paramètres
+    if item_id <= 0:
+        raise HTTPException(
+            status_code=400,
+            detail="L'ID de l'item doit être supérieur à zéro",
+            headers={"X-Error-Code": "INVALID_ID"}
+        )
+    
+    # Vérification d'existence
+    if item_id == 999:  # Simulation d'un item non trouvé
+        raise HTTPException(
+            status_code=404,
+            detail=f"L'item avec l'ID {item_id} n'existe pas",
+            headers={"X-Error-Code": "ITEM_NOT_FOUND"}
+        )
+    
+    # Simulation d'erreur d'autorisation
+    if item_id == 666:
+        raise HTTPException(
+            status_code=403,
+            detail="Vous n'avez pas l'autorisation d'accéder à cet item",
+            headers={"X-Error-Code": "FORBIDDEN_ACCESS"}
+        )
+    
+    # Succès
+    return {"id": item_id, "name": f"Item {item_id}"}
+`
+}
+/>
+</CodeCard>
+
+---
+
+## Réponses Personnalisées Avancées
+
+Créer des réponses avec des comportements spécifiques.
+
+<CodeCard fileName="app/advanced/controller.py">
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import Response
+import json
+
+def GET():
+    """Réponse personnalisée avec type MIME spécifique"""
+    data = {"timestamp": "2024-01-01", "data": [1, 2, 3]}
+    content = json.dumps(data, indent=2)
+    
+    return Response(
+        content=content,
+        status_code=200,
+        headers={
+            "Content-Type": "application/vnd.api+json",
+            "X-Custom-Format": "API-JSON-V1"
+        }
+    )
+
+`}/>
+<Code language="python"
+ theme="catppuccin-mocha"
+code = {
+`from nexy.responses import Response
+
+def GET():
+    """Réponse avec contenu binaire"""
+    # Exemple : générer une image simple ou des données binaires
+    binary_data = b"\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR..." # Example
+    
+    return Response(
+        content=binary_data,
+        media_type="application/octet-stream",
+        headers={
+            "Content-Disposition": "attachment; filename=data.bin"
+        }
+    )
+`
+}
+/>
+</CodeCard>
+
+---
+
+## 👌 Parfait !
+
+Vous maîtrisez maintenant toutes les façons de créer et personnaliser des réponses dans Nexy. De la simple réponse JSON aux flux de données complexes, vous avez tous les outils pour construire des APIs robustes et flexibles !
+
+<SwitchPage
+    prev = { {
+        label: "Request",
+        href: "/docs/basics/request/"
+    }}
+    next ={ {
+        label: "Dépendances",
+        href: "/docs/basics/dependencies/"
+    }}
+/>
\ No newline at end of file
diff --git a/src/app/docs/basics/routing/page.mdx b/src/app/docs/basics/routing/page.mdx
new file mode 100644
index 00000000..f6853a47
--- /dev/null
+++ b/src/app/docs/basics/routing/page.mdx
@@ -0,0 +1,152 @@
+# Le Routage dans Nexy
+
+<Mark>
+    Le routage est la façon dont Nexy organise les différentes pages et fonctionnalités de votre application. C'est comme créer un plan pour votre maison, où chaque pièce (route) a son propre chemin d'accès !
+</Mark>
+
+## Comprendre le Routage
+
+Imaginez votre application comme une bibliothèque :
+- Chaque étagère représente un dossier
+- Chaque livre représente une page ou une fonctionnalité
+- Le chemin pour trouver un livre est votre route
+
+### Comment ça marche ?
+
+Nexy utilise un système de routage basé sur les fichiers. C'est très simple : **la structure de vos dossiers devient automatiquement les chemins de votre application** !
+
+### Structure de Base
+
+<CodeCard fileName="Structure">
+  <Structure>
+    <Folder folderName="app">
+      <File fileName="controller.py"/>
+      <Folder folderName="produits">
+        <File fileName="controller.py"/>
+      </Folder>
+    </Folder>
+  </Structure>
+</CodeCard>
+
+Quand vous créez cette structure :
+- `app/controller.py` devient votre page d'accueil (`/`)
+- `app/produits/controller.py` devient accessible via `/produits`
+
+## Les Types de Routes
+
+### 1. Routes Simples (Statiques)
+
+Ce sont les routes les plus basiques. Comme une adresse fixe !
+
+<CodeCard fileName="app/controller.py">
+<Code language="python" 
+code = {
+`class ProduitsController(Controller):
+    def get(self):
+        return {"message": "Voici la liste de nos produits !"}
+`}/>
+</CodeCard>
+
+**Résultat** : Quand quelqu'un visite `/produits`, il verra "Voici la liste de nos produits !"
+
+### 2. Routes Dynamiques
+
+Imaginez que vous voulez une page différente pour chaque produit. Les routes dynamiques sont là pour ça !
+
+#### a) Routes avec Paramètres `[param]`
+
+<CodeCard fileName="Structure de Route Dynamique">
+  <Structure>
+    <Folder folderName="app">
+      <Folder folderName="produits">
+        <Folder folderName="[id]">
+          <File fileName="controller.py"/>
+        </Folder>
+      </Folder>
+    </Folder>
+  </Structure>
+</CodeCard>
+
+<CodeCard fileName="Exemple de Route avec Paramètre">
+```python
+# app/produits/[id]/controller.py
+from nexy import Controller
+
+class ProduitDetailController(Controller):
+    def get(self, id: int):
+        # id sera automatiquement extrait de l'URL !
+        return {"message": f"Voici les détails du produit numéro {id}"}
+```
+</CodeCard>
+
+**Comment ça marche ?**
+- `/produits/1` affichera les détails du produit 1
+- `/produits/2` affichera les détails du produit 2
+- Et ainsi de suite !
+
+#### b) Routes Attrape-tout `![param]`
+
+Ces routes sont comme des filets qui attrapent tous les chemins possibles !
+
+<CodeCard fileName="Exemple de Route Attrape-tout">
+```python
+# app/blog/![slug]/controller.py
+from nexy import Controller
+
+class BlogController(Controller):
+    def get(self, slug: list):
+        # slug contiendra tous les segments de l'URL
+        return {"message": f"Blog : {'/'.join(slug)}"}
+```
+</CodeCard>
+
+**Exemples d'URLs capturées :**
+- `/blog/2023/janvier/article`
+- `/blog/technologie/python`
+
+#### c) Routes Privées `[_param]`
+
+Pour les parties de votre application qui nécessitent une authentification.
+
+<CodeCard fileName="Exemple de Route Privée">
+```python
+# app/admin/[_dashboard]/controller.py
+from nexy import Controller
+
+class AdminController(Controller):
+    def get(self):
+        # Vérification de l'authentification incluse automatiquement
+        return {"message": "Bienvenue dans le tableau de bord admin !"}
+```
+</CodeCard>
+
+##  Bonnes Pratiques
+
+<Mark>
+1. **Organisez Logiquement :**
+   - Gardez les routes liées ensemble (ex: tout ce qui concerne les produits dans `/produits`)
+   - Utilisez des noms clairs et descriptifs
+ 
+2. **Simplicité d'abord :**
+   - Commencez par des routes simples
+   - Ajoutez des routes dynamiques seulement quand nécessaire
+
+3. **Sécurité :**
+   - Utilisez les routes privées pour le contenu sensible
+   - Vérifiez toujours les permissions
+
+4. **Documentation :**
+   - Commentez vos contrôleurs
+   - Gardez une liste à jour de vos routes
+</Mark>
+
+<SwitchPage
+    prev = { {
+        label: "Concepts de Base",
+        href: "/docs/basics"
+    }}
+    next = { {
+        label: "Contrôleurs",
+        href: "/docs/basics/controllers"
+    }}
+/>
\ No newline at end of file
diff --git a/src/app/docs/basics/template.tsx b/src/app/docs/basics/template.tsx
new file mode 100644
index 00000000..9e97e07d
--- /dev/null
+++ b/src/app/docs/basics/template.tsx
@@ -0,0 +1,12 @@
+import { TemplateEffect } from "@/components/(home)/docs/templateEffect";
+
+type TemplateProps = {
+    children: React.ReactNode;
+}
+const Template = ({ children }: TemplateProps) => (
+    <TemplateEffect>
+        {children}
+    </TemplateEffect>
+)
+
+export default Template
\ No newline at end of file
diff --git a/src/app/docs/cli/[...slug]/page.mdx b/src/app/docs/cli/[...slug]/page.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/cli/page.tsx b/src/app/docs/cli/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/concepts/[...slug]/page.mdx b/src/app/docs/concepts/[...slug]/page.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/concepts/page.tsx b/src/app/docs/concepts/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/databases/[...slug]/page.mdx b/src/app/docs/databases/[...slug]/page.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/databases/page.tsx b/src/app/docs/databases/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/global-error.tsx b/src/app/docs/global-error.tsx
new file mode 100644
index 00000000..6b47d54c
--- /dev/null
+++ b/src/app/docs/global-error.tsx
@@ -0,0 +1,10 @@
+"use client"
+const DocsError = () => {
+    return (
+        <>
+            ddjhj
+        </>
+    )
+}
+
+export default DocsError;
\ No newline at end of file
diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx
index f9cebec4..bc6a42c6 100644
--- a/src/app/docs/layout.tsx
+++ b/src/app/docs/layout.tsx
@@ -1,36 +1,34 @@
-import { HeaderDocs } from "@/components/Header";
-import { SideBar } from "@/components/SideBar";
-import { MenuBottomSheet } from "@/components/Modal";
+import { SideBar } from "@/components/(home)/sideBar";
+import { dm_sans } from "@/font/google";
 
 const DocsLayout = ({ children }: { children: React.ReactNode }) => {
- 
-  return (
-    <>
-      <HeaderDocs />
-      <section className="md:flex gap-15 md:px-10 px-5 mt-8 w-full ">
-        <SideBar /> 
-        
-        <div className="flex-1 h-full ">{children}</div>
-        <div className=" sticky top-35.5 hidden md:flex flex-col gap-8 w-[190px] h-fit border-l border-teal-100/20 rounded-[1px]  p-6 pt-1 pr-0   mt-10">
-          <ul className="space-y-2 ">
-            <li className="text-sm font-normal text-teal-100">Introduction</li>
-            <li className="text-sm font-normal text-teal-100 opacity-50">Installation</li>
-            <li className="text-sm font-normal text-teal-100 opacity-50">Configuration</li>
+    return (
 
-            <li className="text-sm font-normal text-teal-100 opacity-50">Usage</li>
-            <li className="text-sm font-normal text-teal-100 opacity-50">API</li>
-            <li className="text-sm font-normal text-teal-100 opacity-50">Contributing</li>
-            <li className="text-sm font-normal text-teal-100 opacity-50">License</li>
-          </ul>
-        </div>
-      </section>
-      <MenuBottomSheet />
-    </>
+        <section className="sticky top-0  md:flex flex-row   md:mx-14 md:border-x border-dashed border-gray-50/15 ">
+            <SideBar hidden={true} />
+            <aside
+                className="relative p-3 md:p-15 md:flex-2   md:border-l border-dashed border-gray-50/15  mdx"
+            >
+                {/* <span className="  absolute left-2 -z-20 top-2 rounded-full blur-3xl  size-16 bg-white/50  "></span> */}
+                {/* <span className="  absolute -z-20  left-2 bottom-2 rounded-full blur-2xl  size-10 bg-gray-50 "></span> */}
 
-    
-  );
-};
+                {/* <span className="  absolute -z-20  right-2 top-2 rounded-full blur-2xl  size-10 bg-[#A9F5FF] "></span> */}
+                {/* <span className="  absolute -z-20  right-2 bottom-2 rounded-full blur-2xl  size-10 bg-yellow-100 "></span> */}
 
+                {children}
+            </aside>
 
+            <style>
+                {
+                    `
+                    h1,h2{
+                      font-family: ${dm_sans.style.fontFamily};
+                    }
+                    `
+                }
+            </style>
+        </section>
+    )
+}
 
 export default DocsLayout;
diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx
deleted file mode 100644
index 7c57075b..00000000
--- a/src/app/docs/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default function Redirect() {
-    const isServer = typeof window === "undefined";
-
-    if (isServer) {
-            redirect("/docs/started");
-    }
-    return null;
-}
diff --git a/src/app/docs/security/[...slug]/page.mdx b/src/app/docs/security/[...slug]/page.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/security/page.tsx b/src/app/docs/security/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/started/[slug]/page.tsx b/src/app/docs/started/[slug]/page.tsx
deleted file mode 100644
index f42be41d..00000000
--- a/src/app/docs/started/[slug]/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import Build from "@/components/Build";
-
-export default function DocPage() {
-    return (
-        <Build/>
-    )
-}
diff --git a/src/app/docs/started/_services/page.tsx b/src/app/docs/started/_services/page.tsx
deleted file mode 100644
index 9c955d30..00000000
--- a/src/app/docs/started/_services/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function ServicesPage() {
-    return (
-        <div>
-            <h1>Services</h1>
-        </div>
-    )
-}
diff --git a/src/app/docs/started/components/page.tsx b/src/app/docs/started/components/page.tsx
deleted file mode 100644
index eb7bbc15..00000000
--- a/src/app/docs/started/components/page.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { CodeBlock } from "@/components/CodeBlock";
-import Mark from "@/components/Mark";
-import Link from "next/link";
-
-export default function ComponentsPage() {
-    return (
-        <main className="flex-1 flex flex-col gap-5 pt-5 pb-10 text-white/80">
-            <h1 className="text-2xl font-bold">Votre premier composant</h1>
-
-            <Mark>
-                Les composants sont essentiels dans Nexy. Ils constituent la base de vos interfaces utilisateurs (UI), ce qui en fait un excellent point de départ pour apprendre Nexy !
-            </Mark>
-
-            <h2 className="text-xl font-semibold mt-4">Les composants : les blocs de construction de l&apos;UI</h2>
-            <p className="text-base font-light">
-                Sur le Web, HTML permet de créer des documents riches et structurés grâce à ses nombreuses balises comme <code>&lt;h1&gt;</code> et <code>&lt;li&gt;</code>. Nexy vous permet de combiner votre balisage avec CSS et JavaScript pour créer des composants personnalisés, réutilisables dans votre application.
-            </p>
-
-            <h2 className="text-xl font-semibold mt-6">Définir un composant</h2>
-            <p className="text-base font-light">
-                Traditionnellement, les développeurs web écrivent le balisage de leur contenu puis ajoutent de l&apos;interactivité avec JavaScript. Aujourd&apos;hui, c&apos;est une exigence de base pour de nombreux sites et applications. Nexy met l&apos;interactivité au premier plan tout en utilisant les mêmes technologies de base : un composant Nexy est une fonction Python que vous pouvez enrichir avec du balisage.
-            </p>
-            <CodeBlock
-                language="shell"
-                code={`📁 components/\n├── 📄 Button.py\n└── 📄 Button.html`}
-            />
-            <CodeBlock
-                language="python"
-                code={`from nexy import Component\n@Component()\ndef Button(label: str, onClick: Callable):\n\treturn { "label": label, "onClick": onClick }`}
-            />
-
-            <h3 className="text-lg font-medium mt-4">Structure du fichier HTML pour Button</h3>
-            <CodeBlock
-                language="html"
-                code={`<button onclick="{{onClick}}">{{label}}</button>\n<style>\n\tbutton {\n\t\tbackground-color: #4CAF50;\n\t\tborder: none;\n\t\tcolor: white;\n\t\tpadding: 10px 20px;\n\t\tborder-radius: 4px;\n\t\tcursor: pointer;\n\t\t&:hover {\n\t\t\tbackground-color: #45a049;\n\t\t}\n\t}\n</style>`}
-            />
-
-            <h3 className="text-lg font-medium mt-4">Utiliser un composant</h3>
-            <p className="text-base font-light">
-                Maintenant que vous avez défini votre composant Button, vous pouvez l&apos;imbriquer dans d&apos;autres composants. Par exemple, vous pouvez utiliser le composant Button dans une vue :
-            </p>
-            <CodeBlock
-                language="html"
-                code={`<Button \n\tlabel="Soumettre" \n\tonClick="submitForm()"\n/>`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">Composants avec contenu enfant</h2>
-            <p className="text-base font-light">
-                Le paramètre <code>caller</code> permet à un composant de recevoir et d&apos;afficher du contenu enfant, transformant le composant en une balise de type bloc.
-            </p>
-            <CodeBlock
-                language="shell"
-                code={`📁 components/\n├── 📄 Card.py\n└── 📄 Card.html`}
-            />
-            <CodeBlock
-                language="python"
-                code={`from nexy import Component\n@Component()\ndef Card(caller: Any):\n\tchildren = caller()\n\treturn { "children": children }`}
-            />
-
-            <h3 className="text-lg font-medium mt-4">Structure du fichier HTML pour Card</h3>
-            <p className="text-base font-light">
-                Le fichier HTML associé au composant Card utilise la variable <code>children</code> pour afficher le contenu capturé.
-            </p>
-            <CodeBlock
-                language="html"
-                code={`<div class="card">{{children}}</div>\n<style>\n\t.card {\n\t\tbackground-color: #c5d6d1;\n\t\tborder-radius: 8px;\n\t\tpadding: 16px;\n\t\twidth: clamp(300px, 100%, 500px);\n\t\tfont-family: 'Poppins', sans-serif;\n\t\tbox-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n\t}\n</style>`}
-            />
-
-            <h3 className="text-lg font-medium mt-4">Utiliser un composant avec contenu enfant</h3>
-            <CodeBlock
-                language="html"
-                code={`<Card>\n\t<h2>Titre de la carte</h2>\n\t<p>Contenu de la carte</p>\n</Card>`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">Composition de composants</h2>
-            <p className="text-base font-light">
-                Les composants peuvent être composés pour créer des interfaces complexes. L&apos;attribut <code>imports</code> permet d&apos;utiliser d&apos;autres composants à l&apos;intérieur d&apos;un composant.
-            </p>
-            <CodeBlock
-                language="shell"
-                code={`📁 components/\n├── 📄 Dashboard.py\n└── 📄 Dashboard.html`}
-            />
-            <CodeBlock
-                language="python"
-                code={`from nexy import Component\nfrom .Card import Card\nfrom .Button import Button\n\n@Component(\n\timports=[Card, Button]\n) \ndef Dashboard(user: User):\n\treturn { "user": user, "cards": get_user_cards(user.id) }`}
-            />
-
-            <h3 className="text-lg font-medium mt-4">Structure du fichier HTML pour Dashboard</h3>
-            <CodeBlock
-                language="html"
-                code={`<div class="dashboard">\n\t<h1>Bienvenue, {{user.name}}</h1>\n\t{% for card_data in cards %}\n\t\t<Card>\n\t\t\t<h2>{{card_data.title}}</h2>\n\t\t\t<p>{{card_data.content}}</p>\n\t\t\t<Button \n\t\t\t\tlabel="Voir détails" \n\t\t\t\tonClick="viewDetails({{card_data.id}})"\n\t\t\t/>\n\t\t</Card>\n\t{% endfor %}\n</div>`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">Composants conteneurs</h2>
-            <p className="text-base font-light">
-                Les composants conteneurs peuvent encapsuler d&apos;autres composants et du contenu, créant ainsi une structure hiérarchique.
-            </p>
-            <CodeBlock
-                language="shell"
-                code={`📁 components/\n├── 📄 Layout.py\n└── 📄 Layout.html`}
-            />
-            <CodeBlock
-                language="python"
-                code={`from nexy import Component\nfrom .Card import Card\nfrom .Button import Button\n\n@Component(\n\timports=[Card, Button]\n) \ndef Layout(caller: Any):\n\tchildren = caller()\n\treturn { "children": children, "title": "Mon Application" }`}
-            />
-
-            <h3 className="text-lg font-medium mt-4">Utiliser un composant conteneur</h3>
-            <CodeBlock
-                language="html"
-                code={`<main>\n\t<Card>\n\t\t<h2>Titre de la carte</h2>\n\t\t<p>Contenu de la carte</p>\n\t\t<Button \n\t\t\tlabel="Cliquez ici" \n\t\t\tonClick="handleClick()"\n\t\t/>\n\t</Card>\n</main>`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">Avantages du système de composants</h2>
-            <p className="text-base font-light">
-                Utiliser le système de composants de Nexy présente plusieurs avantages :
-            </p>
-            <ul className="list-disc list-inside text-base font-light ml-4 space-y-2">
-                <li>Réutilisation du code à travers différentes parties de l&apos;application</li>
-                <li>Séparation claire entre la logique et la présentation</li>
-                <li>Facilité de maintenance grâce à la modularité</li>
-                <li>Possibilité de créer des bibliothèques de composants pour une utilisation dans plusieurs projets</li>
-                <li>Syntaxe intuitive similaire aux frameworks frontend modernes</li>
-            </ul>
-
-            <div className="flex gap-5 justify-between mt-8">
-                <Link href="/docs/started/reponses" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal rounded-[12px] bg-[#A9FFEA]/2.5 border border-[#A9FFEA]/5 text-[#A9FFEA]`}>
-                    ← Réponses
-                </Link>
-                <Link href="/docs/started/views" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal rounded-[12px] bg-[#A9FFEA]/20 border border-[#A9FFEA]/25 text-[#A9FFEA]`}>
-                    Views →
-                </Link>
-            </div>
-        </main>
-    );
-}
\ No newline at end of file
diff --git a/src/app/docs/started/controllers/page.tsx b/src/app/docs/started/controllers/page.tsx
deleted file mode 100644
index 13a8bf47..00000000
--- a/src/app/docs/started/controllers/page.tsx
+++ /dev/null
@@ -1,395 +0,0 @@
-import { CodeBlock } from "@/components/CodeBlock";
-import Mark from "@/components/Mark";
-import Link from "next/link";
-const HTTP_CONTROLLER = [
-    {
-        method: "GET",
-        description: "La méthode GET est la méthode fondamentale de récupération de données. Elle permet de lire des informations sans modifier l&apos;état du serveur, ce qui en fait la méthode la plus sécurisée et la plus utilisée. Son utilisation principale concerne l&apos;affichage des pages et la consultation des ressources comme les profils utilisateurs ou les listes de produits.",
-        code: `# Exemple simple de GET pour récupérer un utilisateur
-from nexy import Request, Depends
-from .service import AppService
-
-async def GET(
-    request: Request, 
-    service: Depends(AppService)
-):
-    return await service.get_user()`
-    },
-    {
-        method: "POST",
-        description: "Complémentaire à GET, la méthode POST est dédiée à la création de nouvelles ressources. Elle assure un transfert sécurisé des données vers le serveur, avec une validation systématique avant sauvegarde. Cette méthode est essentielle pour toutes les opérations d&apos;ajout, que ce soit la création de comptes utilisateurs ou la publication de nouveaux contenus.",
-        code: `# Exemple de POST pour créer un nouvel utilisateur
-from nexy import Request, Depends
-from .service import AppService
-
-async def POST(
-    request: Request, 
-    service: Depends(AppService)
-):
-    new_user = await request.json()
-    return await service.create_user(new_user)`
-    },
-    {
-        method: "PUT",
-        description: "La méthode PUT s&apos;inscrit dans la logique de modification en permettant le remplacement complet d&apos;une ressource existante. Contrairement à POST, elle nécessite l&apos;envoi de l&apos;intégralité des données, même celles qui ne changent pas. Cette approche garantit la cohérence des données en évitant les mises à jour partielles.",
-        code: `# Exemple de PUT pour mettre à jour un profil complet
-from nexy import Request, Depends
-from .service import AppService
-
-async def PUT(
-    request: Request, 
-    service: Depends(AppService)
-):
-    updated_profile = await request.json()
-    return await service.update_profile(updated_profile)`
-    },
-    {
-        method: "DELETE",
-        description: "Dans la continuité des opérations de modification, la méthode DELETE assure la suppression définitive des ressources. Elle complète le cycle de vie des données en permettant leur retrait du système. Cette méthode requiert une attention particulière et souvent une confirmation de l&apos;utilisateur pour prévenir les suppressions accidentelles.",
-        code: `# Exemple de DELETE pour supprimer un compte
-from nexy import Request, Depends
-from .service import AppService
-
-async def DELETE(
-    request: Request, 
-    service: Depends(AppService)
-):
-    return await service.delete_account()`
-    },
-    {
-        method: "OPTIONS",
-        description: "La méthode OPTIONS joue un rôle crucial dans l&apos;architecture des API en fournissant des métadonnées sur les opérations disponibles. Elle est particulièrement importante pour la sécurité CORS et permet aux clients de découvrir les capacités d&apos;un endpoint. Les navigateurs l&apos;utilisent automatiquement pour vérifier les autorisations avant d&apos;effectuer certaines requêtes.",
-        code: `# Exemple d'OPTIONS avec configuration CORS
-from nexy import Request, Depends
-from .service import AppService
-
-async def OPTIONS(
-    request: Request, 
-    service: Depends(AppService)
-):
-    return await service.get_cors_config()`
-    },
-    {
-        method: "HEAD",
-        description: "La méthode HEAD est une variante optimisée de GET qui ne retourne que les en-têtes HTTP. Cette approche permet de vérifier l&apos;existence ou les métadonnées d&apos;une ressource sans transférer son contenu, optimisant ainsi la consommation de bande passante et les performances du système.",
-        code: `# Exemple de HEAD pour vérifier une ressource
-from nexy import Request, Depends
-from .service import AppService
-
-async def HEAD(
-    request: Request, 
-    service: Depends(AppService)
-):
-    return await service.get_resource_headers()`
-    },
-    {
-        method: "PATCH",
-        description: "Complétant les capacités de PUT, la méthode PATCH permet des modifications partielles et ciblées des ressources. Cette approche plus flexible optimise les performances en ne transmettant que les données nécessaires. Elle est particulièrement adaptée pour les mises à jour fréquentes de champs spécifiques.",
-        code: `# Exemple de PATCH pour modifier partiellement
-from nexy import Request, Depends
-from .service import AppService
-
-async def PATCH(
-    request: Request, 
-    service: Depends(AppService)
-):
-    changes = await request.json()
-    return await service.update_partial(changes)`
-    },
-    {
-        method: "TRACE",
-        description: "La méthode TRACE complète la suite des outils de diagnostic en permettant de suivre le parcours exact d&apos;une requête à travers le réseau. Cette fonctionnalité est essentielle pour le débogage des problèmes de routage et la compréhension des transformations appliquées aux requêtes.",
-        code: `# Exemple de TRACE pour suivre une requête
-from nexy import Request, Depends
-from .service import AppService
-
-async def TRACE(
-    request: Request, 
-    service: Depends(AppService)
-):
-    return await service.trace_request(request)`
-    }
-];
-
-const DYNAMIC_CONTROLLER = [
-    {
-        method: "GET",
-        description: "Dans une route dynamique, la méthode GET acquiert une dimension supplémentaire grâce au paramètre &apos;slug&apos;. Cette approche permet une identification précise des ressources, essentielle pour la récupération de contenus spécifiques comme des articles de blog ou des profils utilisateurs individuels.",
-        code: `# Exemple de GET dynamique pour un article de blog
-from nexy import Request, Depends
-from .service import AppService
-
-async def GET(
-    slug: str, 
-    request: Request, 
-    service: Depends(AppService)
-):
-    return await service.get_article(slug)`
-    },
-    {
-        method: "POST",
-        description: "La méthode POST en contexte dynamique permet la création de ressources dans des contextes spécifiques. Cette fonctionnalité est particulièrement utile pour l&apos;ajout d&apos;éléments liés à une ressource existante, comme des commentaires sur un article ou des sous-éléments dans une collection.",
-        code: `# Exemple de POST pour ajouter un commentaire
-from nexy import Request, Depends
-from .service import AppService
-
-async def POST(
-    slug: str, 
-    request: Request, 
-    service: Depends(AppService)
-):
-    comment_data = await request.json()
-    return await service.add_comment(slug, comment_data)`
-    }
-];
-
-const WEBSOCKET_CONTROLLER = [
-    {
-        method: "SOCKET",
-        description: "Le contrôleur WebSocket établit une communication bidirectionnelle persistante entre le client et le serveur. Cette technologie est fondamentale pour les applications nécessitant des mises à jour en temps réel, comme les systèmes de messagerie instantanée ou les tableaux de bord dynamiques.",
-        code: `# Exemple de WebSocket pour un chat en direct
-from nexy import WebSocket, Depends
-from .service import AppService
-
-async def SOCKET(
-    ws: WebSocket, 
-    service: Depends(AppService)
-):
-    await service.handle_websocket(ws)`
-    }
-];
-
-const WEBSOCKET_CONTROLLER_DYNAMIC = [
-    {
-        method: "SOCKET",
-        description: "Les WebSockets dynamiques étendent les capacités des WebSockets standards en permettant des connexions contextuelles via le paramètre slug. Cette approche permet la création de canaux de communication dédiés, particulièrement adaptés pour les salles de discussion privées ou les flux de données personnalisés.",
-        code: `# Exemple de WebSocket pour une salle de chat privée
-from nexy import WebSocket, Depends
-from .service import AppService
-
-async def SOCKET(
-    slug: str, 
-    ws: WebSocket, 
-    service: Depends(AppService)
-):
-    await service.handle_dynamic_websocket(slug, ws)`
-    }
-];
-
-const TEMPLATE_CONTROLLER = [
-    {
-        method: "VIEW",
-        description: "La méthode VIEW transforme les données en interfaces utilisateur structurées. Cette méthode, enrichie par le décorateur @component, permet la création de pages web dynamiques en combinant logique métier et présentation. Elle représente une évolution naturelle de la méthode GET en retournant du contenu HTML formaté.",
-        code: `# Exemple de VIEW pour une page de profil
-from nexy import component, Depends
-from .service import AppService
-from components import Profile, UserStats
-
-@component(
-    import = [Profile, UserStats]
-)
-def VIEW(
-    service: Depends(AppService)
-):
-    return service.get_profile_data()`
-    },
-    {
-        method: "LAYOUT",
-        description: "La méthode LAYOUT définit la structure globale de l&apos;application. Elle gère les éléments communs comme l&apos;en-tête, le pied de page et la navigation. Cette méthode, utilisée conjointement avec le décorateur @component, assure une cohérence visuelle à travers l&apos;application.",
-        code: `# Exemple de LAYOUT avec navigation et footer
-from nexy import component, Depends
-from .service import AppService
-from components import Navbar, Footer, Sidebar
-
-@component(
-    import = [Navbar, Footer, Sidebar]
-)
-def LAYOUT(
-    service: Depends(AppService)
-):
-    return service.get_layout_data()`
-    }
-];
-
-const TEMPLATE_CONTROLLER_DYNAMIC = [
-    {
-        method: "VIEW",
-        description: "La méthode VIEW en contexte dynamique permet la création de pages personnalisées basées sur le paramètre slug. Cette approche permet d&apos;adapter la présentation en fonction du contexte, idéale pour les profils utilisateurs ou les articles de contenu spécifiques.",
-        code: `# Exemple de VIEW pour un profil utilisateur spécifique
-from nexy import component, Depends
-from .service import AppService
-from components import UserProfile, ActivityFeed
-
-@component(
-    import = [UserProfile, ActivityFeed]
-)
-def VIEW(
-    slug: str, 
-    service: Depends(AppService)
-):
-    return service.get_dynamic_profile_data(slug)`
-    },
-    {
-        method: "LAYOUT",
-        description: "Le LAYOUT dynamique étend les capacités de mise en page en fonction du contexte fourni par le slug. Cette flexibilité permet d&apos;adapter la structure globale selon les besoins spécifiques, comme des thèmes personnalisés ou des dispositions sectorielles.",
-        code: `# Exemple de LAYOUT dynamique pour différentes sections
-from nexy import component, Depends
-from .service import AppService
-from components import DynamicNav, Footer
-
-@component(
-    import = [DynamicNav, Footer]
-)
-def LAYOUT(
-    slug: str, 
-    service: Depends(AppService)
-):
-    return service.get_dynamic_layout_data(slug)`
-    }
-];
-
-export default function ControllersPage() {
-    return (
-        <main className="flex-1 flex flex-col gap-5 pt-5 pb-10 text-white/80">
-            <h1 className="text-2xl font-bold">Les Contrôleurs</h1>
-            
-            <Mark>
-                Un contrôleur est simplement un fichier <code className="text-[#A9FFEA]">controller.py</code> qui gère les requêtes de votre application. Il en existe trois types : <code className="text-[#A9FFEA]">HTTP</code> pour les requêtes web classiques, <code className="text-[#A9FFEA]">WEBSOCKET</code> pour le temps réel, et <code className="text-[#A9FFEA]">TEMPLATE</code> pour vos vues. Petit conseil important : écrivez toujours vos fonctions de contrôleur en MAJUSCULES !
-            </Mark>
-
-            <h2 className="text-xl font-bold">Routes Statiques : Les Bases </h2>
-
-            <p className="text-base font-light">
-                Une route statique, c&apos;est comme une adresse fixe - par exemple <code className="text-[#A9FFEA] bg-[#A9FFEA]/5 border border-[#A9FFEA]/5 px-2 py-1 rounded-md">/</code> ou <code className="text-[#A9FFEA] bg-[#A9FFEA]/5 border border-[#A9FFEA]/5 px-2 py-1 rounded-md">/contact</code>. Son contrôleur vit dans un fichier controller.py bien rangé dans son dossier.
-            </p>
-            
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 MonProjet/\n├── 📁 app/\n│   ├── 📄 controller.py  # Pour la route /\n│   ├── 📄 service.py    # Services \n│   ├── 📁 blog/\n│   │   ├── 📄 controller.py  # Pour /blog\n│   │   ├── 📄 service.py    # Services du blog`}
-            />
-
-            <h2 className="text-xl font-bold">Le Contrôleur HTTP : Votre Boîte à Outils Web </h2>
-
-            <Mark>
-                Le contrôleur HTTP est comme un chef d&apos;orchestre qui dirige le trafic web avec ses méthodes :
-                <code className="text-[#A9FFEA]"> GET</code> (lecture),
-                <code className="text-[#A9FFEA]"> POST</code> (création),
-                <code className="text-[#A9FFEA]"> PUT</code> (mise à jour complète),
-                <code className="text-[#A9FFEA]"> DELETE</code> (suppression),
-                <code className="text-[#A9FFEA]"> PATCH</code> (mise à jour partielle),
-                <code className="text-[#A9FFEA]"> HEAD</code> (vérification),
-                <code className="text-[#A9FFEA]"> OPTIONS</code> (informations),
-                <code className="text-[#A9FFEA]"> TRACE</code> (débogage).
-            </Mark>
-
-            {HTTP_CONTROLLER.map(({ method, description, code }) => (
-                <article key={method} className="flex flex-col gap-4 my-6">
-                    <h2 className="text-xl font-bold">{method}</h2>
-                    <p className="text-base font-light mb-10">{description}</p>
-                    <CodeBlock
-                        language="python"
-                        code={code}
-                    />
-                </article>
-            ))}
-
-            <h2 className="text-xl font-bold">Le Contrôleur WebSocket : Communication en Temps Réel </h2>
-
-            <Mark>
-                Les WebSockets, c&apos;est la magie du temps réel ! Avec la méthode <code className="text-[#A9FFEA]">SOCKET</code>, créez des applications interactives qui réagissent instantanément.
-            </Mark>
-
-            {WEBSOCKET_CONTROLLER.map(({ method, description, code }) => (
-                <article key={method} className="flex flex-col gap-4 my-6">
-                    <h2 className="text-xl font-bold">{method}</h2>
-                    <p className="text-base font-light mb-10">{description}</p>
-                    <CodeBlock
-                        language="python"
-                        code={code}
-                    />
-                </article>
-            ))}
-
-            <h2 className="text-xl font-bold">Le Contrôleur Template : L&apos;Art de la Présentation </h2>
-
-            <Mark>
-                Les templates donnent vie à votre interface avec deux méthodes magiques : <code className="text-[#A9FFEA]">VIEW</code> pour vos pages et <code className="text-[#A9FFEA]">LAYOUT</code> pour la structure globale.
-            </Mark>
-
-            {TEMPLATE_CONTROLLER.map(({ method, description, code }) => (
-                <article key={method} className="flex flex-col gap-4 my-6">
-                    <h2 className="text-xl font-bold">{method}</h2>
-                    <p className="text-base font-light mb-10">{description}</p>
-                    <CodeBlock
-                        language="python"
-                        code={code}
-                    />
-                </article>
-            ))}
-
-            <h2 className="text-xl font-bold">Routes Dynamiques : La Flexibilité en Action </h2>
-            
-            <p className="text-base font-light">
-                Les routes dynamiques sont comme des variables dans votre URL ! Par exemple : <code className="text-[#A9FFEA] bg-[#A9FFEA]/5 border border-[#A9FFEA]/5 px-2 py-1 rounded-md">/utilisateurs/alice</code> ou <code className="text-[#A9FFEA] bg-[#A9FFEA]/5 border border-[#A9FFEA]/5 px-2 py-1 rounded-md">/produits/42</code>. Elles s&apos;adaptent à vos besoins !
-            </p>
-
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 MonProjet/\n├── 📁 app/\n│   ├── 📁 [slug]/\n│   │   ├── 📄 controller.py\n│   │   └── 📄 service.py\n│   └── 📁 produits/\n│       └── 📁 [id]/\n│           ├── 📄 controller.py\n│           └── 📄 service.py`}
-            />
-
-            {DYNAMIC_CONTROLLER.map(({ method, description, code }) => (
-                <article key={method} className="flex flex-col gap-4 my-6">
-                    <h2 className="text-xl font-bold">{method}</h2>
-                    <p className="text-base font-light mb-10">{description}</p>
-                    <CodeBlock
-                        language="python"
-                        code={code}
-                    />
-                </article>
-            ))}
-
-            <h2 className="text-xl font-bold">WebSockets Dynamiques : Communication Personnalisée </h2>
-
-            {WEBSOCKET_CONTROLLER_DYNAMIC.map(({ method, description, code }) => (
-                <article key={method} className="flex flex-col gap-4 my-6">
-                    <h2 className="text-xl font-bold">{method}</h2>
-                    <p className="text-base font-light mb-10">{description}</p>
-                    <CodeBlock
-                        language="python"
-                        code={code}
-                    />
-                </article>
-            ))}
-
-            <h2 className="text-xl font-bold">Templates Dynamiques : Interfaces Sur Mesure </h2>
-
-            {TEMPLATE_CONTROLLER_DYNAMIC.map(({ method, description, code }) => (
-                <article key={method} className="flex flex-col gap-4 my-6">
-                    <h2 className="text-xl font-bold">{method}</h2>
-                    <p className="text-base font-light mb-10">{description}</p>
-                    <CodeBlock
-                        language="python"
-                        code={code}
-                    />
-                </article>
-            ))}
-
-            <p className="text-base font-light">
-                Bravo ! 🎉 Vous venez de découvrir la puissance des contrôleurs Nexy. Rappelez-vous : les fonctions en MAJUSCULES, des routes bien organisées, et vous voilà prêt à créer des applications web incroyables ! Continuez votre voyage dans la documentation pour devenir un véritable maître de Nexy. 🚀
-            </p>
-
-            <div className="flex gap-5 justify-between mt-5">
-                <Link href="/docs/started/structures" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal rounded-[12px] bg-[#A9FFEA]/2.5 border border-[#A9FFEA]/5 text-[#A9FFEA]`}>
-                ← Structure 
-                </Link>
-
-                <Link href="/docs/started/reponses" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal rounded-[12px] bg-[#A9FFEA]/20 border border-[#A9FFEA]/25 text-[#A9FFEA]`}>
-                Réponses → 
-                </Link>
-            </div>
-        </main>
-    );
-}
diff --git a/src/app/docs/started/new_project/page.mdx b/src/app/docs/started/new_project/page.mdx
new file mode 100644
index 00000000..c471b17e
--- /dev/null
+++ b/src/app/docs/started/new_project/page.mdx
@@ -0,0 +1,81 @@
+# Créer un projet
+
+<Mark>
+  Avant de créer un projet, assurez-vous que <Badge>Nexy</Badge> est correctement installé.<br/>
+  Pour plus d'informations, consultez la section <MDXLink href="/docs/started" target={false}> Installation </MDXLink>. 
+  Si <Badge>Nexy</Badge> est déjà installé sur votre système, vous pouvez continuer avec les étapes suivantes.
+</Mark>
+
+pour créer un projet <Badge>Nexy</Badge> , exécutez la commande suivante :
+
+<CodeCard fileName="Terminal">
+<Code language="shell"
+ theme="catppuccin-mocha"
+code = {
+`nexy new [nom_du_projet]`
+}
+/>
+
+</CodeCard>
+
+<Mark>
+  Veillez à remplacer <Badge> [ nom_du_projet ]</Badge> par le nom que vous souhaitez donner à votre projet.
+</Mark>
+
+---
+## Exemple
+par exemple  si vous voulez créer un projet nommé <Badge> test_app </Badge>, vous pouvez exécuter la commande suivante :
+
+<CodeCard fileName="Terminal">
+<Code language="shell"
+ theme="catppuccin-mocha"
+code = {
+`nexy new test_app`
+}
+/>
+
+</CodeCard>
+
+Une fois que vous avez exécuté cette commande, veillez repondre aux questions qui vont s'en suivre selon vos besoin.
+Vos reponses permettront à <Badge>Nexy</Badge> de vous génerer un projet et de le configurer selon vos besoin .
+
+
+##  Lancement du serveur de développement
+
+Une fois le projet créé (<Badge> test_app dans cas </Badge>) , vous pouvez le lancer en exécutant la commande suivante :
+
+<CodeCard fileName="Terminal">
+<Code language="shell"
+ theme="catppuccin-mocha"
+code = {
+`cd test_app`
+}
+/>
+<Code language="shell"
+ theme="catppuccin-mocha"
+code = {
+`nexy dev`
+}
+/>
+
+</CodeCard>
+
+<Mark>
+   Une fois le serveur lancé, vous pouvez accéder à la documentation de l'API via l'URL suivante dans le cas d'un projet de type microservice : 
+   <MDXLink href="http://localhost:3000/docs">http://localhost:3000/docs</MDXLink>
+</Mark>
+---
+## 👌 Bravo !
+Maintenant que vous avez pu créer votre projet, vous pouvez commencer à analyser sa structure !<br/> Nous allons voir comment faire cela dans la section suivante.
+
+<SwitchPage
+    prev = { {
+        label: "Installation",
+        href: "/started"
+    }}
+    next ={ {
+        label: "Structure",
+        href: "/started/structure"
+    }}
+
+/>
\ No newline at end of file
diff --git a/src/app/docs/started/new_project/page.tsx b/src/app/docs/started/new_project/page.tsx
deleted file mode 100644
index 73129ea1..00000000
--- a/src/app/docs/started/new_project/page.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { CodeBlock } from "@/components/CodeBlock";
-import Mark from "@/components/Mark";
-import Link from "next/link";
-
-export default function InstallationPage() {
-    return (
-        <main className="flex-1 flex flex-col gap-5 pt-5 pb-10 text-white/80">
-            <h1 className="text-2xl font-bold">Créer un nouveau projet</h1>
-
-            <Mark>
-                Pour démarrer avec Nexy, assurez-vous d&apos;avoir <span className="font-normal text-[#37FCCB]">Python 3.12</span> ou une version plus récente. Cette version est nécessaire pour utiliser Nexy et profiter de toutes ses fonctionnalités modernes.
-            </Mark>
-
-            <h3 className="text-lg font-medium">1. Vérification de la version de Python</h3>
-            <p className="text-base font-light">
-                Vérifiez que votre version de Python est à jour avec cette commande. Une version récente de Python est essentielle pour garantir la compatibilité et les meilleures performances :
-            </p>
-            <CodeBlock
-                language="shell"
-                code={`python --version
-# Vous devriez voir Python 3.12.x ou supérieur`}
-            />
-            <p className="text-base font-light">
-                Si votre version de Python n&apos;est pas à jour, téléchargez la dernière version depuis le site officiel de Python : <a href="https://www.python.org/downloads/" className="text-[#37FCCB]">python.org/downloads</a>. Suivez les instructions d&apos;installation pour votre système d&apos;exploitation.
-            </p>
-
-            <h3 className="text-lg font-medium">2. Installation de Nexy</h3>
-            <p className="text-base font-light">
-                Installez Nexy avec pip, le gestionnaire de paquets Python. Nous installons aussi InquirerPy pour une meilleure interaction en ligne de commande lors de la création de projets :
-            </p>
-            <CodeBlock
-                language="shell"
-                code={`pip install nexy inquirerpy==0.3.4`}
-            />
-
-            <p className="text-base font-light">
-                Vérifiez que Nexy est correctement installé en exécutant la commande suivante. Cela vous permettra de voir la version installée et de confirmer que tout est en ordre :
-            </p>
-            <CodeBlock
-                language="shell"
-                code={`nexy --version`}
-            />
-
-            <h3 className="text-lg font-medium">3. Création d&apos;un nouveau projet Nexy</h3>
-            <p className="text-base font-light">
-                Créez et explorez votre nouveau projet avec ces commandes. Nexy va générer automatiquement une structure de projet optimisée avec tous les fichiers nécessaires pour démarrer rapidement :
-            </p>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`nexy new mon-projet
-cd mon-projet`}
-            />
-
-            <h3 className="text-lg font-medium">4. Explorer la Structure Initiale du Projet</h3>
-            <p className="text-base font-light">
-                Comprendre la structure initiale de votre projet est essentiel pour un développement efficace. Nexy propose deux modèles de projet principaux, chacun adapté à des besoins spécifiques. Voici un aperçu détaillé pour un projet fullstack et un projet de microservice.
-            </p>
-
-            <h4 className="text-md font-medium">Projet Fullstack</h4>
-            <p className="text-base font-light">
-                La structure d&apos;un projet fullstack gère à la fois le backend et le frontend. Cette configuration est idéale pour les applications web complètes qui nécessitent une interface utilisateur et une logique serveur intégrée. Chaque fichier a un rôle spécifique dans l&apos;architecture :
-            </p>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁mon-projet/
- ├── 📁 app/
- |  ├── 📄 __init__.py
- |  ├── 📄 controller.py    # Point d&apos;entrée principal
- |  ├── 📄 service.py       # Services de l&apos;application
- |  ├── 📄 layout.html      # Templates HTML
- |  ├── 📄 view.html        # Vue principale (optionnelle)
- ├── 📁 public/             # Fichiers statiques
- └── 📄 nexy-config.py      # Configuration de l&apos;application`}
-            />
-
-            <h4 className="text-md font-medium">Projet Microservice</h4>
-            <p className="text-base font-light">
-                La structure d&apos;un projet de microservice est optimisée pour des services spécifiques et autonomes. Cette architecture est parfaite pour construire des systèmes distribués ou pour isoler des fonctionnalités spécifiques. La structure est volontairement allégée pour se concentrer sur l&apos;essentiel :
-            </p>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 mon-projet/
- ├── 📁 app/
- |  ├── 📄 __init__.py
- |  ├── 📄 controller.py    # Point d&apos;entrée principal
- |  ├── 📄 service.py       # Configuration de l&apos;application
- ├── 📁 public/           # Fichiers statiques
- └── 📄 nexy-config.py    # Configuration de l&apos;application`}
-            />
-
-            <h3 className="text-lg font-medium">5. Lancement du serveur de développement</h3>
-            <p className="text-base font-light">
-                Lancez le serveur de développement pour tester votre projet. Le serveur de développement de Nexy inclut le rechargement automatique du code, ce qui signifie que vos modifications seront immédiatement visibles sans avoir à redémarrer le serveur :
-            </p>
-            <CodeBlock
-                language="shell"
-                code={`nexy dev  # Démarre le serveur de développement`}
-            />
-
-            <h3 className="text-lg font-medium">Prochaines étapes</h3>
-            <p className="text-base font-light">
-                Votre projet est maintenant prêt pour le développement. Pour tirer le meilleur parti de Nexy, voici quelques étapes suggérées pour continuer votre apprentissage et commencer à construire votre application :
-            </p>
-            <ul className="list-none space-y-2">
-                <li className="text-base font-light before:content-['①'] before:mr-2 before:text-[#37FCCB]">
-                    Explorez la structure du projet pour vous familiariser avec les fichiers et répertoires. Prenez le temps de comprendre comment chaque composant interagit avec les autres.
-                </li>
-                <li className="text-base font-light before:content-['②'] before:mr-2 before:text-[#37FCCB]">
-                    Créez votre première route pour ajouter des fonctionnalités à votre application. Commencez par quelque chose de simple comme une page d&apos;accueil ou une API basique.
-                </li>
-                <li className="text-base font-light before:content-['③'] before:mr-2 before:text-[#37FCCB]">
-                    Expérimentez avec les composants Nexy pour créer des interfaces utilisateur réutilisables et maintenables.
-                </li>
-                <li className="text-base font-light before:content-['④'] before:mr-2 before:text-[#37FCCB]">
-                    Explorez les fonctionnalités avancées comme les WebSockets et les actions serveur pour créer des applications interactives.
-                </li>
-            </ul>
-            <div className="flex  gap-5 justify-between mt-5">
-                <Link href="/docs/started" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal  rounded-[12px]  bg-[#A9FFEA]/2.5 border border-[#A9FFEA]/5 text-[#A9FFEA] `}>
-                ← Introduction 
-                </Link>
-
-                <Link href="/docs/started/structures" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal  rounded-[12px]  bg-[#A9FFEA]/20 border border-[#A9FFEA]/25 text-[#A9FFEA] `}>
-                    Structure →
-                </Link>
-
-            </div>
-        </main>
-    );
-}
\ No newline at end of file
diff --git a/src/app/docs/started/page.mdx b/src/app/docs/started/page.mdx
new file mode 100644
index 00000000..eb285885
--- /dev/null
+++ b/src/app/docs/started/page.mdx
@@ -0,0 +1,87 @@
+# Installation
+
+<Mark>
+   <Badge>Nexy</Badge> s'installe globalement sur votre système. Une fois installé, vous pouvez l'utiliser dans tous vos projets sans avoir à le réinstaller.
+</Mark>
+
+Avant de vouloir installer <Badge>Nexy</Badge> , veillez vous assurer que vous disposez d'une version de <br/><Badge>Python >= 3.12</Badge>
+Cette vérifiaction est nécessaire pour utiliser <Badge>Nexy</Badge> et profiter de toutes ses fonctionnalités modernes.
+
+---
+
+
+## Comment vérifier la version de Python ?
+Pour vérifier la version de Python, ouvrez votre terminal et exécutez la commande suivante :
+
+<CodeCard fileName="Terminal">
+<Code language="shell"
+ theme="catppuccin-mocha"
+code = {
+`Python --version`
+}
+/>
+<Code 
+language="txt"
+theme="catppuccin-mocha"
+canCopy={false}
+code = {
+`Python 3.12.0`
+}
+/>
+</CodeCard>
+
+<Mark>
+    Si votre version de Python n'est pas à jour, téléchargez la dernière version depuis le site officiel de Python : 
+    <MDXLink href="https://www.python.org/downloads/" >python.org/downloads </MDXLink>. Suivez les instructions d'installation pour votre système d'exploitation.
+</Mark>
+---- 
+
+## Comment installer Nexy ?
+Une fois que vous avez vérifié que vous disposez d'une version de <Badge>Python >= 3.12</Badge>, vous pouvez installer <Badge>Nexy</Badge> en utilisant la commande suivante :
+
+<CodeCard fileName="Terminal">
+<Code language="shell"
+ theme="catppuccin-mocha"
+code = {
+`pip install nexy`
+}/>
+</CodeCard>
+
+----
+
+## Verifier Nexy est bien installe ?
+
+Pour vérifier que <Badge>Nexy</Badge> est bien installé, ouvrez votre terminal et exécutez la commande suivante :
+
+<CodeCard fileName="Terminal">
+<Code language="shell"
+ theme="catppuccin-mocha"
+code = {
+`nexy --version`
+}/>
+<Code
+language="txt"
+theme="catppuccin-mocha"
+canCopy={false}
+code = {
+`Nexy 1.0.0`
+}/>
+</CodeCard>
+
+----
+## 👌 Bravo !
+Maintenant que <Badge>Nexy</Badge> est installé, vous pouvez commencer à créer vos premiers projets !<br/> Nous allons voir comment faire cela dans la section suivante.
+
+
+
+<SwitchPage
+    prev = { {
+        label: "Introduction",
+        href: "/"
+    }}
+    next ={ {
+        label: "Créer un projet",
+        href: "/started/new_project"
+    }}
+
+/>
diff --git a/src/app/docs/started/page.tsx b/src/app/docs/started/page.tsx
deleted file mode 100644
index 3c809d03..00000000
--- a/src/app/docs/started/page.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { CodeBlock } from "@/components/CodeBlock";
-import Mark from "@/components/Mark";
-import { Nexy } from "@/components/svg/nexy";
-import Link from "next/link";
-
-export default function DocsPage() {
-    return (
-        <main className="flex-1 flex flex-col gap-5 md:pt-5  pb-10 text-white/80">
-            <p className="mb-4 hidden md:block"><Nexy /></p>
-            <Mark>
-                Imaginez un monde où chaque ligne de code Python se transforme en une mélodie d&apos;efficacité. Un univers où la puissance de FastAPI rencontre l&apos;élégance du routing Next.js, créant une symphonie parfaite entre performance et simplicité. Cette vision n&apos;est plus un rêve. Bienvenue dans une nouvelle ère d&apos;excellence du développement web en Python, où chaque projet devient une aventure captivante et ultra-productive.
-            </Mark>
-            <h1 className="text-2xl font-bold">Introduction</h1>
-            <h3 className="text-lg font-medium">Le Contexte</h3>
-            <p className="text-base font-light">
-                Dans le vaste univers du développement web en Python, les solutions se situent souvent à l&apos;une de deux extrémités :
-            </p>
-            <ul className="list-none">
-                <li className="text-base font-light before:content-['①'] before:mr-2 before:text-[#37FCCB] before:text-sm">
-                    Des frameworks complets et puissants comme <span className="font-normal text-[#37FCCB]">Django</span>, dont la richesse se traduit parfois par une complexité qui freine l&apos;innovation.
-                </li>
-                <li className="text-base font-light before:content-['②'] before:mr-2 before:text-[#37FCCB] before:text-sm">
-                    Des micro-frameworks agiles, à l&apos;image de <span className="font-normal text-[#37FCCB]">Flask</span>, qui, malgré leur flexibilité, imposent une configuration répétitive et chronophage.
-                </li>
-            </ul>
-
-            <p className="text-base font-light">
-                <span className="font-normal text-[#37FCCB]">FastAPI</span> a certes révolutionné l&apos;écosystème avec des performances inégalées et un typage moderne, mais le chemin reste semé d&apos;embûches :
-            </p>
-            <ul className="flex flex-col gap-2">
-                <li className="text-base font-light before:content-['①'] before:mr-2 before:text-[#37FCCB]">
-                    Une organisation de projets qui se complexifie au fil de la croissance.
-                </li>
-                <li className="text-base font-light before:content-['②'] before:mr-2 before:text-[#37FCCB]">
-                    Des configurations de routes répétitives, qui grignotent un temps précieux.
-                </li>
-                <li className="text-base font-light before:content-['③'] before:mr-2 before:text-[#37FCCB]">
-                    Des conventions de développement souvent floues, freinant une harmonisation optimale du code.
-                </li>
-                <li className="text-base font-light before:content-['④'] before:mr-2 before:text-[#37FCCB]">
-                    Une gestion de l&apos;interface utilisateur qui demeure un défi pour maintenir l&apos;agilité et l&apos;innovation.
-                </li>
-            </ul>
-
-            <p className="text-base font-light">
-                C&apos;est dans ce contexte que <span className="font-normal text-[#37FCCB]">Nexy</span> fait son entrée, prêt à redéfinir les standards du développement web en Python. Nexy combine le meilleur des mondes : l&apos;efficacité et la robustesse de frameworks établis avec une simplicité et une flexibilité qui libèrent véritablement la créativité. Préparez-vous à transformer vos défis en opportunités et à redécouvrir le plaisir d&apos;innover sans compromis.
-            </p>
-
-            <h3 className="text-lg font-medium">La Vision de Nexy</h3>
-
-            <article className="space-y-6">
-                <Mark>
-                    <span className="font-normal text-[#37FCCB]">Nexy</span> est né d&apos;une réflexion profonde sur l&apos;évolution des frameworks Python. Python brille par sa simplicité, sa puissance et son écosystème riche, mais dans le paysage actuel, <span className="font-normal text-[#37FCCB]">Django</span> s&apos;impose presque comme un monopole, laissant peu de place à des alternatives comme <span className="font-normal text-[#37FCCB]">Flask</span> ou <span className="font-normal text-[#37FCCB]">FastAPI</span>. Est-ce uniquement une question de popularité, ou simplement parce qu&apos;aucun autre framework n&apos;offre une solution aussi complète pour le développement web moderne ?
-                </Mark>
-
-                <p className="text-base font-light">
-                    <span className="font-normal text-[#37FCCB]">Django</span> possède des fonctionnalités impressionnantes, mais sa complexité et sa lourdeur peuvent devenir un obstacle, surtout pour des projets qui n’ont pas besoin d’une telle infrastructure. Cela pose une question essentielle : pourquoi ne pas créer un framework inspiré des meilleures pratiques modernes comme dans <span className="text-yellow-300">«</span> <span className="text-yellow-300 ">Next.js</span>, <span className="text-yellow-300 ">NestJS</span> ou <span className="text-yellow-300 ">AdonisJS</span> <span className="text-yellow-300">»</span> tout en préservant la simplicité et l&apos;élégance de Python ?
-                </p>
-
-                <Mark>
-                    C&apos;est cette vision qui a donné naissance à <span className="font-normal text-[#37FCCB]">Nexy</span>. Pensé pour offrir une expérience développeur fluide et efficace, Nexy allie la puissance asynchrone de FastAPI à une structure modulaire intuitive, réduisant la configuration au strict minimum et simplifiant la maintenance. Il transforme la complexité des configurations lourdes en une opportunité d&apos;innovation, en restant fidèle à l&apos;essence même de Python : <span className="font-normal text-[#37FCCB]"> simple</span>, <span className="font-normal text-[#37FCCB]">performant</span> et <span className="font-normal text-[#37FCCB]">élégant</span>.
-                </Mark>
-
-                <p className="text-base font-light">
-                    Avec <span className="font-normal text-[#37FCCB]">Nexy</span>, vous choisissez un framework qui redéfinit les standards du développement web en Python. Concentrez-vous sur votre logique métier, sans vous laisser freiner par des contraintes techniques inutiles.
-                </p>
-            </article>
-
-            <h3 className="text-lg font-medium">Nos principes :</h3>
-            <ul className="list-none">
-                <li className="text-base font-light before:content-['①'] before:mr-2 before:text-[#37FCCB]">
-                    <span className="font-normal text-[#37FCCB]">Convention over Configuration</span> : Adoptez des standards éprouvés dès la base.
-                </li>
-                <li className="text-base font-light before:content-['②'] before:mr-2 before:text-[#37FCCB]">
-                    <span className="font-normal text-[#37FCCB]">Intuitivité</span> : Une structure naturelle, où tout se découvre sans effort.
-                </li>
-                <li className="text-base font-light before:content-['③'] before:mr-2 before:text-[#37FCCB]">
-                    <span className="font-normal text-[#37FCCB]">Productivité</span> : Réduisez le code répétitif pour maximiser vos fonctionnalités.
-                </li>
-                <li className="text-base font-light before:content-['④'] before:mr-2 before:text-[#37FCCB]">
-                    <span className="font-normal text-[#37FCCB]">Évolutivité</span> : Du projet minimaliste à l&apos;application d&apos;entreprise, Nexy grandit avec vous.
-                </li>
-            </ul>
-
-            <h3 className="text-lg font-medium">Pourquoi Nexy ?</h3>
-
-            <ul className="list-none space-y-5">
-                <li className="text-base font-light before:content-['①'] before:mr-2 before:text-[#37FCCB]">
-                    <Mark><span className="font-normal text-[#37FCCB]">Débutants</span> : Démarrez avec une approche fluide et intuitive, sans complexité superflue, pour apprendre Python et le développement web rapidement.</Mark>
-                </li>
-                <li className="text-base font-light before:content-['②'] before:mr-2 before:text-[#37FCCB]">
-                    <Mark><span className="font-normal text-[#37FCCB]">Experts</span> : Exploitez une architecture modulaire et performante, combinant la puissance de FastAPI et la simplicité d&apos;un routage intelligent pour des projets de grande envergure.</Mark>
-                </li>
-                <li className="text-base font-light before:content-['③'] before:mr-2 before:text-[#37FCCB]">
-                    <Mark><span className="font-normal text-[#37FCCB]">Tous les développeurs</span> : Profitez d&apos;un framework conçu pour maximiser la productivité, avec un code clair, réactif et élégant.</Mark>
-                </li>
-                <li className="text-base font-light before:content-['④'] before:mr-2 before:text-[#37FCCB]">
-                    <Mark>
-                        <span className="font-normal text-[#37FCCB]">Nexy</span>, c&apos;est bien plus qu&apos;un simple framework : c&apos;est une expérience de développement <span className="font-normal text-[#37FCCB]">fluide</span>, <span className="font-normal text-[#37FCCB]"> performante</span> et <span className="font-normal text-[#37FCCB]">intuitive</span>. Libérez votre <span className="font-normal text-[#37FCCB]">créativité</span>, <span className="font-normal text-[#37FCCB]"> boostez</span> votre productivité et redécouvrez le plaisir d&apos;écrire du code <span className="font-normal text-[#37FCCB]">efficace</span> et <span className="font-normal text-[#37FCCB]">élégant</span>.
-                    </Mark>
-                </li>
-            </ul>
-
-            <h3 className="text-lg font-medium">Nexy : L&apos;Aube d&apos;une Révolution</h3>
-
-            <Mark>
-                <span className="font-normal text-[#37FCCB]">Espoir Loém, </span>créateur de Nexy :<br /><br />
-                <span className="font-normal text-[#37FCCB]">« <br /></span>
-                Après des années à observer l&apos;écosystème Python et ses frameworks, j&apos;ai eu une révélation :<br />
-                nous pouvions faire tellement mieux.<br /><br />
-                Dans notre communauté technique, <span className="font-normal text-[#37FCCB]">Django</span> est un excellent outil qui a fait ses preuves, mais il est temps d&apos;innover pour répondre aux besoins modernes.<br /><br />
-                Je voyais de nombreux développeurs talentueux limités par des outils qui ne correspondaient plus à leurs attentes. Les fondations étaient solides, mais l&apos;expérience développeur méritait d&apos;être repensée.<br /><br />
-                C&apos;est ainsi qu&apos;est né Nexy, une nouvelle vision du développement web en Python. Notre objectif n&apos;était pas simplement d&apos;ajouter une couche d&apos;abstraction, mais de repenser l&apos;expérience complète du développeur.<br /><br />
-                Pourquoi devrions-nous choisir entre performance et simplicité ?<br /><br />
-                Python est un langage élégant et expressif. Il mérite des outils qui préservent sa clarté naturelle, plutôt que de la noyer dans des structures complexes.<br /><br />
-                Nexy incarne cette philosophie : rendre le développement web en Python aussi naturel et fluide que possible, à travers une évolution réfléchie de nos pratiques.<br /><br />
-                <span className="font-normal text-[#37FCCB]"> »</span>
-            </Mark>
-
-            <h1 className="text-2xl font-bold">Exemple de Code</h1>
-
-            <h3 className="text-lg font-medium">Controller</h3>
-            <CodeBlock
-                language="python"
-                code={`# app/controller.py
-
-def GET():
-    return {"Get": "Hello World"}
-
-async def POST():
-    return {"Post": "Hello New Post"}
-
-async def PUT():
-    return {"Put": "Hello Updated Post"}
-
-`}
-            />
-
-            <h3 className="text-lg font-medium">Sockets</h3>
-            <CodeBlock
-                language="python"
-                code={`# app/controller.py
-from nexy import WebSocket
-
-async def socket(websocket: WebSocket):
-    await websocket.accept()
-    while True:
-        data = await websocket.receive_text()
-        await websocket.send_text(f"Message received: {data}")
-`}
-            />
-
-
-            <h3 className="text-lg font-medium">Actions Serveur</h3>
-            <CodeBlock
-                language="python"
-                code={`# app/actions.py
-from nexy import action
-
-@action()
-async def delete_post(id: int):
-    return {"Delete": "Hello Deleted Post"}
-
-@action()
-async def update_post(id: int, post: Post):
-    return {"Update": "Hello Updated Post"}
-
-`}
-            />
-
-
-
-            <h3 className="text-lg font-medium">Composants</h3>
-            <CodeBlock
-                language="python"
-                code={`# components/__init__.py
-from nexy import Component
-@component(
-  imports=[]
-)
-def Button(label: str, on_click: Callable = None):
-    return {
-        "label": label,
-        "on_click": on_click,
-    }
-`}
-            />
-
-            <CodeBlock
-                language="html"
-                code={`<!-- components/Button.html -->
-<button onclick="{{use(on_click)}}"  >{{label}}</button>`}
-            />
-
-            <p className="text-sm">
-                Une Architecture Qui Respecte Votre Intelligence 🧠
-                <br /><br />
-                Un framework doit vous faire gagner du temps, pas vous en faire perdre.
-            </p>
-
-            <p className="text-sm">
-                Actions Serveur : La Réalité, Pas Les Promesses 🎭
-                <br />
-                Oui, on utilise encore JavaScript en 2024. Mais on peut le faire intelligemment :
-            </p>
-
-            <p className="text-sm">
-                Démarrage : Aussi Simple Que Prévu ⚡
-            </p>
-
-            <p className="text-sm">
-                Nexy est encore jeune, mais il a déjà un objectif clair : vous laisser coder en Python, proprement, sans vous prendre la tête.
-                <br />
-                Envie de contribuer à un framework qui respecte ses développeurs ? Rejoignez l&apos;aventure !
-            </p>
-
-            <p className="text-sm italic">
-                Nexy : Parce que le développement web en Python méritait mieux que des compromis constants.
-            </p>
-
-            <div className="flex  gap-5 justify-between mt-5">
-                <Link href="#" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal  rounded-[12px]  bg-[#A9FFEA]/2.5 border border-[#A9FFEA]/5 text-[#A9FFEA] `}>
-                    Contribuer à Nexy
-                </Link>
-
-                <Link href="/docs/started/new_project" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal  rounded-[12px]  bg-[#A9FFEA]/20 border border-[#A9FFEA]/25 text-[#A9FFEA] `}>
-                    Nouveau projet →
-                </Link>
-
-            </div>
-        </main>
-    );
-}
\ No newline at end of file
diff --git a/src/app/docs/started/reponses/page.tsx b/src/app/docs/started/reponses/page.tsx
deleted file mode 100644
index f00b00c2..00000000
--- a/src/app/docs/started/reponses/page.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import { CodeBlock } from "@/components/CodeBlock";
-import Mark from "@/components/Mark";
-import Link from "next/link";
-
-export default function ResponsesPage() {
-    return (
-        <main className="flex-1 flex flex-col gap-5 pt-5 pb-10 text-white/80">
-            <h1 className="text-2xl font-bold">Gestion des Réponses HTTP avec Nexy</h1>
-
-            <Mark>
-                Nexy, construit sur FastAPI, offre une gestion avancée des réponses HTTP. Il permet d&apos;utiliser toutes les réponses standard de FastAPI tout en ajoutant des fonctionnalités supplémentaires via le décorateur <code>@HTTPResponse</code>. Ce décorateur simplifie la personnalisation des réponses en encapsulant la logique de réponse dans une fonction unique.
-            </Mark>
-
-            <h2 className="text-xl font-semibold mt-4">Introduction aux Réponses HTTP</h2>
-            <p className="text-base font-light">
-                Les réponses HTTP sont essentielles pour la communication entre le client et le serveur. Elles permettent de transmettre des données, des statuts et des en-têtes. Nexy hérite de la flexibilité de FastAPI tout en introduisant des simplifications pour une gestion plus intuitive des réponses.
-            </p>
-
-            <h2 className="text-xl font-semibold mt-6">Utilisation de la Classe Response</h2>
-            <p className="text-base font-light">
-                La classe <code className="text-[#A9FFEA] bg-[#A9FFEA]/5 border border-[#A9FFEA]/5 px-2 py-1 rounded-md">Response</code> de Nexy étend celle de FastAPI, permettant une personnalisation facile des réponses :
-            </p>
-            <CodeBlock
-                language="python"
-                code={`from nexy import Response
-
-def GET():
-    return Response(
-        content={"message": "Hello World"},
-        status_code=200,
-        headers={"X-Custom-Header": "value"}
-    )`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">Réponses Standard de FastAPI</h2>
-            <p className="text-base font-light">
-                Nexy supporte toutes les réponses standard de FastAPI, telles que JSONResponse, HTMLResponse, et plus encore :
-            </p>
-            <CodeBlock
-                language="python"
-                code={`from fastapi.responses import (
-    JSONResponse,
-    HTMLResponse, 
-    PlainTextResponse,
-    RedirectResponse,
-    StreamingResponse,
-    FileResponse
-)`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">Personnalisation des Réponses avec HTTPResponse</h2>
-            <Mark>
-                Le décorateur <code>@HTTPResponse</code> de Nexy permet de personnaliser les réponses de manière élégante et efficace. Il encapsule la logique de réponse et offre une flexibilité accrue.
-            </Mark>
-            <CodeBlock
-                language="python"
-                code={`from nexy import HTTPResponse
-from typing import Any
-
-class CustomJSONResponse(Response):
-    media_type = "application/json"
-    
-    def render(self, content: Any) -> bytes:
-        # Logique de rendu personnalisée
-        data = {\n\t\t\t"data": content, \n\t\t\t"timestamp": datetime.now().isoformat()\n\t\t}
-        return json.dumps(data).encode("utf-8")
-
-@HTTPResponse(type=CustomJSONResponse)
-def GET():
-    return {"message": "Hello"}`}
-            />
-
-            <h2 className="text-xl font-semibold mt-4">HTMLResponse avec et sans Décorateur</h2>
-            <h3 className="text-lg font-medium mt-4">Avec Décorateur</h3>
-            <p className="text-base font-light">
-                Utiliser le décorateur <code>@HTTPResponse</code> pour enrichir votre endpoint avec une validation et une documentation automatiques :
-            </p>
-            <CodeBlock
-                language="python"
-                code={`from nexy import HTTPResponse
-from fastapi.responses import HTMLResponse
-
-@HTTPResponse(
-    type=HTMLResponse,
-    response_map={
-        200: {"description": "Page HTML réussie"},
-        404: {"description": "Template non trouvé"}
-    }
-)
-def GET():
-    return """
-        <html>
-            <body>
-                <h1>Bienvenue</h1>
-            </body>
-        </html>
-    """`}
-            />
-
-            <p className="text-base font-light mt-4">
-                Avantages du décorateur :
-            </p>
-            <ul className="list-disc list-inside text-base font-light ml-4 space-y-2">
-                <li>Documentation OpenAPI/Swagger automatique</li>
-                <li>Validation stricte du type de contenu</li>
-                <li>Gestion standardisée des erreurs</li>
-                <li>Meilleure maintenabilité du code</li>
-            </ul>
-
-            <h3 className="text-lg font-medium mt-4">Sans Décorateur</h3>
-            <p className="text-base font-light">
-                Approche directe pour des cas simples :
-            </p>
-            <CodeBlock
-                language="python"
-                code={`from fastapi.responses import HTMLResponse
-
-def GET():
-    html_content = """
-        <html>
-            <body>
-                <h1>Bienvenue</h1>
-            </body>
-        </html>
-    """
-    return HTMLResponse(
-        content=html_content,
-        status_code=200
-    )`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">JSONResponse avec et sans Décorateur</h2>
-            <Mark>
-                La réponse JSON est le format privilégié pour les API RESTful. Nexy facilite sa manipulation grâce à l&apos;intégration native de Pydantic.
-            </Mark>
-
-            <h3 className="text-lg font-medium mt-4">Avec Décorateur</h3>
-            <CodeBlock
-                language="python"
-                code={`from nexy import HTTPResponse
-from pydantic import BaseModel, EmailStr
-
-class UserModel(BaseModel):
-    id: int
-    name: str
-    email: EmailStr
-
-@HTTPResponse(
-    model=UserModel,
-    model_exclude={"password"},
-    model_by_alias=True,
-    response_map={
-        200: {"description": "Utilisateur trouvé"},
-        404: {"description": "Utilisateur non trouvé"}
-    }
-)
-def GET(user_id: int):
-    return {
-        "id": user_id,
-        "name": "John Doe",
-        "email": "john@example.com"
-    }`}
-            />
-
-            <h3 className="text-lg font-medium mt-4">Sans Décorateur</h3>
-            <CodeBlock
-                language="python"
-                code={`from fastapi.responses import JSONResponse
-
-def GET(user_id: int):
-    user_data = {
-        "id": user_id,
-        "name": "Espoir Loém",
-        "email": "espoir@example.com"
-    }
-    return JSONResponse(
-        content=user_data,
-        status_code=200
-    )`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">StreamingResponse avec et sans Décorateur</h2>
-            <h3 className="text-lg font-medium mt-4">Avec Décorateur</h3>
-            <CodeBlock
-                language="python"
-                code={`from nexy import HTTPResponse
-from fastapi.responses import StreamingResponse
-
-@HTTPResponse(
-    type=StreamingResponse,
-    response_map={
-        200: {"description": "Flux de données"},
-        503: {"description": "Service indisponible"}
-    }
-)
-async def GET():
-    async def generate():
-        for i in range(10):
-            yield f"data: {i}\\n\\n"
-            await asyncio.sleep(1)
-    
-    return generate()`}
-            />
-
-            <h3 className="text-lg font-medium mt-4">Sans Décorateur</h3>
-            <CodeBlock
-                language="python"
-                code={`from fastapi.responses import StreamingResponse
-
-async def GET():
-    async def generate():
-        for i in range(10):
-            yield f"data: {i}\\n\\n"
-            await asyncio.sleep(1)
-    
-    return StreamingResponse(
-        generate(),
-        media_type="text/event-stream"
-    )`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">Gestion des Erreurs</h2>
-            <p className="text-base font-light">
-                Nexy fournit des réponses d&apos;erreur standardisées :
-            </p>
-            <CodeBlock
-                language="python"
-                code={`from nexy import HTTPException, Response
-
-def GET(item_id: int):
-    if not item_exists(item_id):
-        raise HTTPException(
-            status_code=404,
-            detail="Item non trouvé",
-            headers={"X-Error-Code": "ITEM_NOT_FOUND"}
-        )
-    return Response(content=get_item(item_id))`}
-            />
-
-            <h2 className="text-xl font-semibold mt-6">Meilleures Pratiques pour les Réponses HTTP</h2>
-            <p className="text-base font-light">
-                Lors de la conception de vos API avec Nexy, gardez à l&apos;esprit les meilleures pratiques suivantes :
-            </p>
-            <ul className="list-disc list-inside text-base font-light ml-4 space-y-2">
-                <li>Utilisez des codes de statut HTTP appropriés pour indiquer le résultat de l&apos;opération.</li>
-                <li>Fournissez des messages d&apos;erreur clairs et concis pour aider les développeurs à comprendre les problèmes.</li>
-                <li>Utilisez des en-têtes HTTP pour transmettre des métadonnées importantes.</li>
-                <li>Assurez-vous que vos réponses sont sécurisées et ne divulguent pas d&apos;informations sensibles.</li>
-            </ul>
-
-            <div className="flex gap-5 justify-between mt-8">
-                <Link href="/docs/started/controllers" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal rounded-[12px] bg-[#A9FFEA]/2.5 border border-[#A9FFEA]/5 text-[#A9FFEA]`}>
-                    ← Controllers
-                </Link>
-                <Link href="/docs/started/components" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal rounded-[12px] bg-[#A9FFEA]/20 border border-[#A9FFEA]/25 text-[#A9FFEA]`}>
-                    Composants →
-                </Link>
-            </div>
-        </main>
-    );
-}
diff --git a/src/app/docs/started/structure/page.mdx b/src/app/docs/started/structure/page.mdx
new file mode 100644
index 00000000..beaccbb9
--- /dev/null
+++ b/src/app/docs/started/structure/page.mdx
@@ -0,0 +1,147 @@
+# Structure et organisation du projet
+
+<Mark>
+    Cette page fournit un aperçu des conventions de dossiers et de fichiers dans <Badge>Nexy</Badge> , ainsi que des conseils pour organiser votre projet de manière optimale.
+</Mark>
+
+___
+
+## Conventions de dossiers
+Les dossiers de niveau supérieur sont utilisés pour organiser le code et les ressources statiques de votre application.
+
+
+<CodeCard fileName="Structure">
+  <Structure>
+    <Folder folderName="app"/>
+    <Folder folderName="public"/>
+  </Structure>
+</CodeCard>
+
+le dossier <Badge>app</Badge> est le dossier de routage d'une application <Badge>Nexy</Badge>
+et un peu similaires à celui de <MDXLink href="https://nextjs.org/" >Next.js</MDXLink> ou <MDXLink href="https://docs.expo.dev/develop/file-based-routing/">Expo js </MDXLink>.
+
+le dossier <Badge>public</Badge> est le dossier qui contient les ressources statiques de votre application.
+
+---
+
+### Itinéraires imbriqués
+
+Les itinéraires imbriqués sont utilisés pour organiser le code et les ressources statiques de votre application.
+
+<CodeCard fileName="Structure">
+  <Structure>
+  <Folder folderName="dossier">
+      <Folder folderName="dossier "/>
+  </Folder>
+  <Folder folderName="dossier 1">
+    <Folder folderName="dossier"/>
+  </Folder>
+  </Structure>
+</CodeCard>
+
+---
+
+### Itinéraires dynamiques
+Un itinéraire dynamique est un itinéraire qui peut être généré à la demande. 
+Cela peut être utile pour générer des pages dynamiques, comme des pages de profil utilisateur ou des pages de produit.
+
+
+<CodeCard fileName="Structure">
+  <Structure>
+    <Folder folderName="[ dossier ]"/>
+    <Folder folderName="! [ dossier ]"/>
+    <Folder folderName="[ _dossier ]"/>
+    <Folder folderName="! [ _dossier ]"/>
+  </Structure>
+</CodeCard>
+
+
+### Dossiers privés
+
+Les dossiers privés sont utilisés pour organiser le code et les ressources statiques de votre application.
+
+<CodeCard fileName="Structure">
+  <Structure>
+    <Folder folderName="_ dossier"/>
+  </Structure>  
+</CodeCard>
+
+---
+## Conventions de fichiers
+Les fichiers de niveau supérieur sont utilisés pour configurer votre application, gérer les dépendances, exécuter des intergiciels, intégrer des outils de surveillance et définir des variables d'environnement.
+
+<CodeCard fileName="Structure">
+  <Structure>
+      <File fileName="nexyconfig.py"/>
+      <File fileName="middleware.py"/>
+      <File fileName="requirements.txt"/>
+      <File fileName=".env"/>
+      <File fileName=".gitignore"/>
+  </Structure>
+</CodeCard>
+
+
+### Fichiers de routage
+
+Les fichiers de routage sont utilisés pour organiser le code et les ressources statiques de votre application.
+
+<CodeCard fileName="Structure">
+  <Structure>
+    <File fileName="controller.py"/>
+  </Structure>
+</CodeCard>
+
+
+----
+
+## Organiser votre projet
+
+Outre les conventions relatives aux dossiers et aux fichiers, 
+<Badge>Nexy</Badge> n'a pas d'opinion sur la manière dont vous organisez et regroupez les fichiers de votre projet. 
+Cependant, il fournit plusieurs fonctionnalités pour vous aider à organiser votre projet.
+
+Dans le répertoire <Badge>app</Badge> , des dossiers imbriqués définissent la structure de l'itinéraire. 
+Chaque dossier représente un segment d'itinéraire mappé à un segment correspondant dans un chemin d'URL.
+
+<Mark>
+  Cependant, même si la structure de l'itinéraire est définie via des dossiers, 
+  un itinéraire n'est pas accessible publiquement tant qu'un fichier <Badge>controller.py</Badge> 
+  n'est pas ajouté à un segment d'itinéraire.
+</Mark>
+
+<CodeCard fileName="Structure">
+  <Structure>
+    <Folder folderName="app">
+      <Folder folderName="users">
+        <Folder folderName="[userId]">
+          <File fileName="controller.py"/>
+        </Folder>
+        <File fileName="controller.py"/>
+      </Folder>
+      <Folder folderName="blog"/>
+      <File fileName="controller.py"/>
+    </Folder>
+    <Folder folderName="public"/>
+  </Structure>
+
+  <Structure> 
+  dkdjkjk
+  </Structure>
+</CodeCard>
+
+
+
+## 👌 Bravo !
+Maintenant que vous avez pu créer votre projet, vous pouvez commencer à analyser sa structure !<br/> Nous allons voir comment faire cela dans la section suivante.
+
+<SwitchPage
+    prev = { {
+        label: "Créer un projet",
+        href: "/started/new_project"
+    }}
+    next ={ {
+        label: "Structure",
+        href: "/started/structure"
+    }}
+
+/>
\ No newline at end of file
diff --git a/src/app/docs/started/structures/page.tsx b/src/app/docs/started/structures/page.tsx
deleted file mode 100644
index 1d443c2f..00000000
--- a/src/app/docs/started/structures/page.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { CodeBlock } from "@/components/CodeBlock";
-import Mark from "@/components/Mark";
-import Link from "next/link";
-
-export default function StructurePage() {
-    return (
-        <main className="flex-1 flex flex-col gap-5 pt-5 pb-10 text-white/80">
-            <h1 className="text-2xl font-bold">Structure et organisation du projet</h1>
-
-            <Mark>
-                Cette page fournit un aperçu des conventions de dossiers et de fichiers dans Nexy, ainsi que des conseils pour organiser votre projet de manière optimale.
-            </Mark>
-
-            <h3 className="text-lg font-medium">Conventions de dossiers et de fichiers</h3>
-            <p className="text-base font-light">
-                Les dossiers de niveau supérieur sont utilisés pour organiser le code et les ressources statiques de votre application.
-            </p>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 app/         # Routeur d'application
-📁 public/      # Actifs statiques à servir
-.../
-`} />
-
-            <p className="text-base font-light">
-                Les fichiers de niveau supérieur sont utilisés pour configurer votre application, gérer les dépendances, exécuter des intergiciels, intégrer des outils de surveillance et définir des variables d&apos;environnement.
-            </p>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📄 nexy-config.py   # Fichier de configuration pour Nexy
-📄 requirements.txt # Dépendances et scripts du projet  
-📄 middleware.py    # Intergiciel de requête Nexy
-📄 .env             # Variables d&apos;environnement
-📄 .gitignore       # Fichiers et dossiers Git à ignorer`} />
-
-            <h3 className="text-lg font-medium">Fichiers de routage</h3>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📄 controller.py   # Le seul fichier routable dans Nexy
-📄 layout.html     # Mise en page
-📄 view.html       # Page de routage
-📄 not-found.html  # Interface utilisateur non trouvée
-📄 error.html      # Interface utilisateur d&apos;erreur
-`} />
-
-            <h3 className="text-lg font-medium">Itinéraires imbriqués</h3>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 app/
-├── 📁 dossier/         # Segment d';itinéraire
-│   └── 📁 dossier/     # Segment d'itinéraire imbriqué
-│       └── 📁 dossier/ # Segment d'itinéraire imbriqué
-└── 📁 autre/           # Autre segment d'itinéraire
-    └── 📁 dossier/     # Segment d'itinéraire imbriqué`} />
-
-            <h3 className="text-lg font-medium">Itinéraires dynamiques</h3>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 [dossier]/   #itinéraire dynamique
-📁 ![dossier]   #itinéraire dynamique facultatif
-📁 [_dossier]/  #itinéraire dynamique four tout
-📁 ![_dossier]/ #itinéraire dynamique facultatif et four tout 
-`} />
-
-            <h3 className="text-lg font-medium">Dossiers privés</h3>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 _dossier/ # Dossier privé
-`} />
-
-            <h3 className="text-lg font-medium">Organiser votre projet</h3>
-            <p className="text-base font-light">
-                Outre les conventions relatives aux dossiers et aux fichiers, Nexy n&apos;a pas d&apos;opinion sur la manière dont vous organisez et regroupez les fichiers de votre projet. Cependant, il fournit plusieurs fonctionnalités pour vous aider à organiser votre projet.
-            </p>
-
-            <h4 className="text-base font-medium">Colocation</h4>
-            <p className="text-base font-light">
-                Dans le répertoire <code className="bg-white/5 p-1 py-0.5 border border-white/10 rounded-md text-[#A9FFEA]">app</code>, des dossiers imbriqués définissent la structure de l&apos;itinéraire. Chaque dossier représente un segment d&apos;itinéraire mappé à un segment correspondant dans un chemin d&apos;URL.
-            </p>
-
-            <p className="text-base font-light">
-                Cependant, même si la structure de l&apos;itinéraire est définie via des dossiers, un itinéraire n&apos;est pas accessible publiquement tant qu&apos;un fichier <code className="bg-white/5 p-1 py-0.5 border border-white/10 rounded-md text-[#A9FFEA]">controller.py</code> n&apos;est pas ajouté à un segment d&apos;itinéraire.
-            </p>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 app/
-├── 📁 blog/
-│   ├── 📄 controller.py  # Pour le blog
-│   ├── 📄 service.py    # Services du blog
-│   └── 📁 [slug]/
-│       ├── 📄 controller.py  # Pour /blog/[slug]
-│       └── 📄 service.py     # Services des articles
-`} />
-
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`🌐 url = /       # n'est pas accessible publiquement
-🌐 url = /blog   # n'est pas accessible publiquement
-🌐 url = /blog/1 # n'est pas accessible publiquement
-`} />
-
-            <p className="text-base font-light">
-                Et, même lorsqu&apos;un itinéraire est rendu accessible au public, seul le contenu renvoyé par <code className="bg-white/5 p-1 py-0.5 border border-white/10 rounded-md text-[#A9FFEA]">controller.py</code> est envoyé au client.
-            </p>
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 project/
-├── 📁 app/
-│   ├── 📄 controller.py  
-│   ├── 📁 blog/  
-│   │   ├── 📄 controller.py 
-│   │   └── 📁 [slug]/     
-│   │       └── 📄 controller.py 
-│   ├── 📁 _docs/  
-│   ├── 📄 controller.py 
-│       └── 📁 [slug]/     
-│           └── 📄 controller.py 
-`} />
-
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`🌐 url = /        # accessible publiquement
-🌐 url = /blog    # accessible publiquement
-🌐 url = /blog/1  # accessible publiquement
-🌐 url = /docs    # n'est pas accessible , _docs/ est privé
-🌐 url = /docs/1  # n'est pas accessible, _docs/ est privé
-`} />
-
-            <h3 className="text-lg font-medium">Exemple de structure de projet</h3>
-            <p className="text-base font-light">
-                L&apos;architecture de base d&apos;un projet Nexy est une symphonie d&apos;organisation, orchestrée pour maximiser la clarté et l&apos;efficacité de votre code. Voici un exemple de cette structure harmonieuse et bien pensée :
-            </p>
-            
-            <CodeBlock
-                copyButton={false}
-                language="shell"
-                code={`📁 Projet/
-├── 📁 app/
-│   ├── 📄 controller.py  # Pour la route /
-│   ├── 📄 view.html
-│   ├── 📄 layout.html
-│   ├── 📁 components/
-│   ├── 📁 actions/
-│   ├── 📄 service.py    # Services
-│   ├── 📁 modals/
-│   ├── 📁 users/
-│   │   ├── 📄 controller.py  # Pour /users
-│   │   ├── 📄 view.html
-│   │   └── 📁 [id]/
-│   │       └── 📄 controller.py
-│   ├── 📁 blog/
-│   │   ├── 📄 controller.py  # Pour /blog
-│   │   └── 📁 [slug]/
-│   │       └── 📄 controller.py
-│   ├── 📁 projects/
-│   │   ├── 📁 [projectId]/
-│   │   │   ├── 📁 tasks/
-│   │   │   │   ├── 📄 controller.py
-│   │   │   │   └── 📁 [taskId]/
-│   │   │   │       └── 📄 controller.py
-├── 📁 public/
-├── 📁 tests/
-└── 📄 nexy-config.py`} />
-            
-            <ul className="list-none space-y-2">
-                <li className="text-base font-light before:content-['①'] before:mr-2 before:text-[#37FCCB]">
-                    Familiarisez-vous avec la structure du projet pour bien comprendre l&apos;organisation des fichiers et répertoires. Prenez le temps d&apos;analyser comment chaque composant interagit avec les autres.
-                </li>
-                <li className="text-base font-light before:content-['②'] before:mr-2 before:text-[#37FCCB]">
-                    Concevez votre première route pour ajouter des fonctionnalités à votre application. Commencez par une tâche simple, comme une page d&apos;accueil ou une API basique.
-                </li>
-                <li className="text-base font-light before:content-['③'] before:mr-2 before:text-[#37FCCB]">
-                    Expérimentez avec les composants Nexy pour créer des interfaces utilisateur réutilisables et maintenables.
-                </li>
-                <li className="text-base font-light before:content-['④'] before:mr-2 before:text-[#37FCCB]">
-                    Explorez les fonctionnalités avancées telles que les WebSockets et les actions serveur pour développer des applications interactives.
-                </li>
-            </ul>
-            <div className="flex  gap-5 justify-between mt-5">
-                <Link href="/docs/started/new_project" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal  rounded-[12px]  bg-[#A9FFEA]/2.5 border border-[#A9FFEA]/5 text-[#A9FFEA] `}>
-                ← nouveau projet
-                </Link>
-
-                <Link href="/docs/started/controllers" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal  rounded-[12px]  bg-[#A9FFEA]/20 border border-[#A9FFEA]/25 text-[#A9FFEA] `}>
-                    Controllers →
-                </Link>
-
-            </div>
-        </main>
-    );
-}
diff --git a/src/app/docs/started/template.tsx b/src/app/docs/started/template.tsx
index 7623ab95..9e97e07d 100644
--- a/src/app/docs/started/template.tsx
+++ b/src/app/docs/started/template.tsx
@@ -1,24 +1,12 @@
-"use client"
-import { motion } from "framer-motion";
-import React, { ReactNode } from 'react';
+import { TemplateEffect } from "@/components/(home)/docs/templateEffect";
 
-interface TemplateProps {
-    children: ReactNode;
+type TemplateProps = {
+    children: React.ReactNode;
 }
+const Template = ({ children }: TemplateProps) => (
+    <TemplateEffect>
+        {children}
+    </TemplateEffect>
+)
 
-const Template = ({ children }: TemplateProps) => {
-    return (
-                <motion.main
-                    initial={{ opacity: 0, y: 50 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -50 }}
-                    transition={{ duration: 0.4 }}
-                    className=""
-                >
-                    {children}
-                </motion.main>
-           
-    );
-};
-
-export default Template;
+export default Template
\ No newline at end of file
diff --git a/src/app/docs/started/views/page.tsx b/src/app/docs/started/views/page.tsx
deleted file mode 100644
index f6a00674..00000000
--- a/src/app/docs/started/views/page.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { CodeBlock } from "@/components/CodeBlock";
-import Mark from "@/components/Mark";
-import Link from "next/link";
-
-export default function ViewsPage() {
-    return (
-        <main className="flex-1 flex flex-col gap-5 pt-5 pb-10 text-white/80">
-            <h1 className="text-2xl font-bold">View</h1>
-
-            <section>
-                <Mark>
-                    Dans Nexy, une view est un composant essentiel qui se trouve dans le fichier <code className="text-[#A9FFEA]">controller.py</code>. Elle joue un rôle crucial en structurant et en présentant les données de manière claire et esthétique, facilitant ainsi l&apos;interaction utilisateur. Les views permettent de lier la logique métier à la présentation, offrant une expérience utilisateur fluide et intuitive.
-                </Mark>
-            </section>
-
-            <section>
-                <h2 className="text-xl font-semibold mt-4">Structure du dossier pour une view</h2><br/>
-                <CodeBlock
-                    language="shell"
-                    code={`📁 MonProjet/\n├── 📁 app/\n│   ├── 📄 controller.py  # Pour la view\n│   |── 📄 service.py    # Services associés\n│   │   ├── 📁 components/\n│   │   │   ├── 📄 Profile.py\n│   │   │   └── 📄 UserStats.py`}
-                />
-            </section>
-
-            <section>
-                <h2 className="text-xl font-semibold mt-4">Comment définir une view</h2>
-                <p className="text-base font-light">
-                    Une view dans Nexy est une fonction Python enrichie par le décorateur <code className="text-[#A9FFEA]">@component</code>. Elle intègre la logique métier et la présentation pour générer des pages web interactives et dynamiques. En utilisant des views, vous pouvez encapsuler des fonctionnalités complexes tout en gardant le code organisé et maintenable.
-                </p><br/>
-                <CodeBlock
-                    language="python"
-                    code={`from nexy import component, Depends\nfrom .service import AppService\nfrom components import Profile, UserStats\n\n@component(\n    imports=[Profile, UserStats]\n)\ndef VIEW(\n    service: Depends(AppService)\n):\n    user_data = service.get_profile_data()\n    return {\n        "user": user_data["user"],\n        "stats": user_data["stats"]\n    }`}
-                />
-            </section>
-
-            <section>
-                <h2 className="text-xl font-semibold mt-6">Exploiter une view</h2>
-                <p className="text-base font-light">
-                    Une fois créée, une view peut être utilisée pour afficher des données de manière structurée. Par exemple, une view de profil utilisateur peut intégrer divers composants pour présenter les détails de l&apos;utilisateur de façon cohérente. Cela permet de créer des interfaces utilisateur qui sont à la fois esthétiques et fonctionnelles, en tirant parti de la puissance des composants réutilisables.
-                </p><br/>
-                <CodeBlock
-                    language="html"
-                    code={`<div class="profile-container">\n    <Profile \n        user="{{user}}"\n    />\n    <UserStats \n        stats="{{stats}}"\n    />\n</div>`}
-                />
-            </section>
-
-            <section>
-                <h2 className="text-xl font-semibold mt-6">Pourquoi utiliser des views ?</h2>
-                <p className="text-base font-light">
-                    L&apos;utilisation des views offre de nombreux avantages :
-                </p>
-                <ul className="list-disc list-inside text-base font-light ml-4 space-y-2">
-                    <li>Code bien organisé et facile à comprendre, ce qui facilite la collaboration entre les développeurs.</li>
-                    <li>Réutilisation efficace des composants, permettant de réduire la duplication de code et d&apos;améliorer la cohérence de l&apos;application.</li>
-                    <li>Maintenance simplifiée grâce à une structure modulaire, rendant les mises à jour et les modifications plus faciles à gérer.</li>
-                    <li>Possibilité de créer des pages web dynamiques et interactives, offrant une expérience utilisateur enrichie et engageante.</li>
-                </ul>
-            </section>
-
-            <div className="flex gap-5 justify-between mt-8">
-                <Link href="/docs/started/components" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal rounded-[12px] bg-[#A9FFEA]/2.5 border border-[#A9FFEA]/5 text-[#A9FFEA]`}>
-                    ← Composants
-                </Link>
-                <Link href="/docs/started/server_actions" className={`cursor-pointer px-4 py-2 text-sm text-left font-normal rounded-[12px] bg-[#A9FFEA]/20 border border-[#A9FFEA]/25 text-[#A9FFEA]`}>
-                    Server actions →
-                </Link>
-            </div>
-        </main>
-    );
-}
diff --git a/src/app/docs/template.tsx b/src/app/docs/template.tsx
deleted file mode 100644
index 8e70b38a..00000000
--- a/src/app/docs/template.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-import { motion } from "framer-motion";
-import React, { ReactNode } from 'react';
-
-interface TemplateProps {
-    children: ReactNode;
-}
-
-const Template = ({ children }: TemplateProps) => {
-    return (
-                <motion.main
-                    initial={{ opacity: 0, y: 50 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -50 }}
-                    transition={{ duration: 0.4 }}
-                    className="h-full"
-                >
-                    {children}
-                </motion.main>
-           
-    );
-};
-
-export default Template;
diff --git a/src/app/docs/testing/[...slug]/page.mdx b/src/app/docs/testing/[...slug]/page.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/testing/page.tsx b/src/app/docs/testing/page.tsx
new file mode 100644
index 00000000..9559d558
--- /dev/null
+++ b/src/app/docs/testing/page.tsx
@@ -0,0 +1,9 @@
+const TestingPage = () => {
+  return (
+    <div>
+      <h1>Testing Page</h1>
+    </div>
+  );
+};
+
+export default TestingPage;
diff --git a/src/app/docs/views/[...slug]/page.mdx b/src/app/docs/views/[...slug]/page.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/docs/views/page.tsx b/src/app/docs/views/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/globals.css b/src/app/globals.css
index 4dcaf99c..648291a6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,22 +1,96 @@
 @import "tailwindcss";
+/* @plugin "@tailwindcss/typography"; */
 
 @source "../src/**/*.{js,ts,jsx,tsx,md}";
 @source "../src/components*.{js,ts,jsx,tsx,md}";
 
 /* Ajouter des variables CSS */
 :root {
-  --primary-color: #A9FFEA;
-  --background: color-mix(in srgb, #040807 60%, #0D1713 40%);
+
+    --primary-color: rgb(168, 255, 233);
+    --background: color-mix(in srgb, hsl(165, 33%, 2%) 60%, hsl(156, 28%, 7%) 40%);
+    --foreground : hsl(0, 0%, 96%);
+
+  @media (prefers-color-schem: light){
+    --primary-color: hsl(150, 58%, 40%);
+    --background: color-mix(in srgb, hsl(155, 20%, 84%) 60%, #EDEFF2 40%);
+    --foreground: hsl(164, 92%, 5%);
+  }
 }
 
-body {
-  /* background-color: #040807; */
-  /* background-color: #0D1713; */
-  
-  background: var(--background);
-  color: #F6F6F6;
-} 
 
+@custom-variant dark (&:where(.dark, .dark *));
 @theme {
   --color-background: var(--background);
+  --color-primary: var(--primary-color);
+  --color-foreground: var(--foreground);
+}
+
+@layer base {
+
+  * {
+    @apply outline-0;
+  }
+  body{
+    @apply bg-background text-foreground dark:bg-amber-100;
+  }
+  *:not(hr, .notscroll) {
+    scrollbar-width: thin;
+    scrollbar-color: #e6f3eaa6 transparent;
+    scrollbar-gutter: stable;
+
+    @media (prefers-color-scheme: light) {
+      scrollbar-color: #66696778 transparent;
+      
+    }
+
+  }
+
+  .mdx {
+    & h1 {
+      @apply text-4xl font-semibold mb-2;
+    }
+    & h2 {
+      @apply text-2xl font-semibold;
+    }
+    & h3{
+      @apply text-lg font-medium ;
+    }
+    & p{
+      @apply leading-[170%]  opacity-85 ;
+    }
+
+    & hr{
+      @apply border-gray-50/15 border-dotted my-5;
+    }
+    & ul:not(.folder){
+       @apply flex flex-col gap-1;
+    }
+    & li:not(.file,.line) {
+      @apply flex items-center gap-2 text-gray-50/70 text-sm;
+    }
+    
+    
+    
+
+  }
+}
+
+@layer components {
+  .active-link {
+    @apply text-yellow-300 relative flex items-center gap-2;
+
+    &::before {
+      content: '';
+      @apply border-l-2 h-5 rounded-4xl border-yellow-300/50 inline absolute -translate-x-3 left-[-1px];
+    }
+  }
+
+  .collapse {
+    /* -o-animation: ; */
+  }
+  .header {
+    /*  */
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1aa6414d..9cb25e2c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,16 +1,12 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Analytics } from "@vercel/analytics/react"
 import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import { inter, jetbrainsMono } from "@/font/google";
+import { Header } from "@/components/(home)/header";
+import { Footer } from "@/components/(home)/footer";
+import { LightDark } from "@/components/(home)/lightDark";
+import { Language } from "@/components/(home)/language";
+import { MenuModal } from "@/components/(home)/menu.modal";
 
 export const metadata: Metadata = {
   title: "Nexy",
@@ -25,15 +21,37 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="scroll-smooth light">
       <meta name="theme-color" content="#0E201B" />
-      
+
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${inter.variable} ${jetbrainsMono.variable} flex flex-col justify-between overflow-x-hidden min-h-dvh antialiased `}
       >
-        {children}
+
+        <Header />
+        <div className="h-16 md:hidden"></div>
+        <main className="flex-1 h-fit relative scroll-smooth">
+          {children}
+        </main>
+        <MenuModal />
+        <Footer />
+        <Analytics />
+        <div 
+          hidden
+          className=" fixed bottom-5  right-5 md:right-14 z-50 backdrop-blur-xl flex gap-1 p-1 items-center bg-[#A9FFEA]/2 -border border-dashed border-gray-50/15 rounded-[1.125rem] "
+
+        >
+          <Language/>
+          <hr className="h-2 border border-dashed border-gray-50/15 " />
+          <button
+            className="cursor-pointer size-9 bg-[#A9FFEA]/6 hover:bg-[#A9FFEA]/10  border border-[#A9FFEA]/7 hover:borerd-[#A9FFEA]/12 rounded-[0.875rem] grid place-content-center hover:scale-110 transition-all duration-300 text-gray-50"
+
+          >
+            <LightDark />
+          </button>
+        </div>
       </body>
-      
+
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 00000000..49e6e849
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,13 @@
+import { HeroSection } from "@/components/(home)/heroSection";
+
+const HomePage = () => {
+     return (
+        <>
+          <HeroSection/>
+        </>
+          
+     );
+    
+};
+
+export default HomePage;
diff --git a/src/components/(home)/collapse.tsx b/src/components/(home)/collapse.tsx
new file mode 100644
index 00000000..83e72be9
--- /dev/null
+++ b/src/components/(home)/collapse.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { dm_sans_400 } from '@/font/google'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ReactNode, useState } from 'react'
+import { Minius } from '../icons/minius'
+import { PLus } from '../icons/plus'
+
+interface CollapseProps {
+  children: ReactNode
+  title: string
+  defaultOpen?: boolean
+  className?: string
+}
+
+const Collapse = ({
+  children,
+  title,
+  defaultOpen = false,
+  className = '',
+}: CollapseProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+
+  return (
+    <div className={` ${isOpen ? "h-fit p-1 bg-[#24262B]/20 border border-[#24262B] border-dashed  rounded-2xl" : "bg-transparent border-0 border-transparent rounded-xs"} notscroll overflow-hidden transition-all ${className}`}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`w-full ${isOpen ? "py-1.5 pl-4 pr-1.5 text-[#A9FFEA]  bg-[#A9FFEA]/5 border border-[#A9FFEA]/10 rounded-xl" : "border-transparent p-0"} outline-0 flex justify-between items-center transition-all cursor-pointer`}
+      >
+        <span className={`${dm_sans_400.className}   transition-all duration-500`}>{title}</span>
+        <AnimatePresence presenceAffectsLayout>
+          <span className='opacity-50'>
+          {
+            isOpen ? <Minius /> : <PLus />
+          }
+          </span>
+        </AnimatePresence>
+      </button>
+
+      <AnimatePresence >
+        {isOpen && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
+          >
+            <div className={` ml-1 px-3 my-2 transition-all w-full  border-l border-dotted border-gray-50/20 `}>{children}</div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export { Collapse }
\ No newline at end of file
diff --git a/src/components/(home)/docs/Structure.tsx b/src/components/(home)/docs/Structure.tsx
new file mode 100644
index 00000000..ea781ee0
--- /dev/null
+++ b/src/components/(home)/docs/Structure.tsx
@@ -0,0 +1,58 @@
+import { Python } from "@/components/icons/python"
+import { RightArrow } from "@/components/icons/right"
+
+const Structure = ({ children }: { children?: React.ReactNode }) => (
+    <div
+        className="group overflow-hidden relative flex flex-col gap-1 p-4 reltive z-20 backdrop-blur-xs flex-1 bg-gray-50/3 border border-gray-50/8 rounded-2xl"
+    >
+        {children}
+    </div>
+)
+const Folder = ({ folderName, children, isActive = false, showArrow = true }: { folderName: string, children?: React.ReactNode, isActive: boolean, showArrow?: boolean }) => (
+    <menu>
+        <ul className="folder flex gap-2 ">
+            {
+                showArrow &&
+                <li className={`opacity-50 ${children && "rotate-90"}`}>
+                    <RightArrow />
+                </li>
+            }
+            <li className={`size-6 ${isActive && "bg-gray-50/3"} text-yellow-50  grid place-content-center rounded-md `}>
+                {
+                    children ? (
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" strokeWidth={1} className="size-5 stroke-current/40 fill-current/8">
+                            <path d="M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z" />
+                        </svg>
+
+                    ) : (
+
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} className="size-5 stroke-current/40 fill-current/8">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44l-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6Z" />
+                        </svg>
+
+                    )
+                }
+            </li>
+            <li>{folderName}</li>
+        </ul>
+        {
+            children &&
+            <ul
+                className="folder space-y-2 pl-5 pt-2 ml-1.5 items-center border-l border-gray-50/10"
+            >
+                {children}
+            </ul>
+        }
+    </menu>
+)
+
+const File = ({ icon = <Python />, fileName }: { icon?: React.ReactNode, fileName: string }) => (
+    <li
+        className="file flex gap-1.5 items-center ml-1"
+    >
+        <span className="opacity-30 text-xs">●</span>
+        <span className="text-[#A9FFEA]/50">{icon}</span>
+        <span className="text-sm font-light leading-0 tracking-wider text-gray-50/70">{fileName}</span>
+    </li>
+)
+export { Structure, Folder, File }
\ No newline at end of file
diff --git a/src/components/(home)/docs/badge.tsx b/src/components/(home)/docs/badge.tsx
new file mode 100644
index 00000000..68fe2eb5
--- /dev/null
+++ b/src/components/(home)/docs/badge.tsx
@@ -0,0 +1,7 @@
+const Badge = ({ children } : {children: React.ReactNode}) => (
+    <span className='w-fit bg-yellow-50/6 border border-gray-50/15 rounded-md text-xs text-yellow-300 font-medium tracking-wider  px-1 py-0.5 pb-1 text-gray-50'>
+        {children } 
+    </span>
+)
+
+export { Badge }
diff --git a/src/components/(home)/docs/codeCard.tsx b/src/components/(home)/docs/codeCard.tsx
new file mode 100644
index 00000000..af6e5a52
--- /dev/null
+++ b/src/components/(home)/docs/codeCard.tsx
@@ -0,0 +1,61 @@
+import { dm_sans_300 } from "@/font/google";
+import { BundledLanguage, BundledTheme, codeToHtml } from "shiki";
+import { CopyButton } from "./copyButton";
+
+
+
+type CodeProps = {
+    language: BundledLanguage;
+    code: string
+    theme?: BundledTheme;
+    canCopy?: boolean;
+
+}
+const Code = async ({ code, language, canCopy = true, theme }: CodeProps) => {
+    const child = await codeToHtml(code, {
+        lang: language,
+        theme: theme || "poimandres" || "ayu-dark",
+    });
+    const lignes = code.split("\n").map((items, index) => index!=0 && index )
+    return (
+
+        <div
+            className="group overflow-hidden relative max-w-full flex-1 flex justify-center items-center reltive z-20 backdrop-blur-xs  bg-gray-50/3 border border-gray-50/8 rounded-2xl"
+        >
+            <ul className={` ${lignes.length == 0 && "hidden" } flex flex-col items-center !gap-1 text-gray-50/70 text-sm  !p-0 -mt-0.5 !pl-4 opacity-50  `}>
+                {
+                    lignes.map((ligne) => <li key={String(ligne)} className="0 ">{ligne}</li>)
+                }
+            </ul>
+            <div
+                className="[&>pre]:focus:border-0 w-[calc(100dvw_-_60px)] md:w-full [&>pre]:overflow-x-auto [&>pre]:!w-full  p-4  [&>pre]:!bg-transparent [&>pre]:!m-0 [&_.line]:!px-0"
+                dangerouslySetInnerHTML={{ __html: child }}
+
+            >
+
+            </div>
+            <CopyButton code = {code} className={`${!canCopy && "hidden"}`}/>
+            
+        </div>
+
+    );
+}
+
+
+
+const CodeCard = ({ children, fileName }: { children: React.ReactNode, fileName: string }) => {
+    return (
+        <div className="w-full  flex flex-col gap-1.5  relative size-fit  bg-[#24262B]/20 border border-gray-50/8 border-dashed rounded-3xl p-1.5">
+            <span className="  absolute -z-10 -left-2 -top-2 rounded-full blur-2xl  size-6 bg-[#A9FFEA]  "></span>
+            <span className="  absolute -z-10 -left-2 -bottom-2 rounded-full blur-2xl  size-6 bg-gray-50 "></span>
+
+            <span className="  absolute -z-10 -right-2 -top-2 rounded-full blur-2xl  size-6 bg-[#A9F5FF] "></span>
+            <span className="  absolute -z-10 -right-2 -bottom-2 rounded-full blur-2xl  size-6 bg-yellow-100 "></span>
+
+            <span className={`text-xs px-3 py-1 opacity-70 tracking-wide font-light ${dm_sans_300.className}`}>{fileName}</span>
+            {children}
+        </div>
+    )
+}
+
+export { Code, CodeCard }
\ No newline at end of file
diff --git a/src/components/(home)/docs/copyButton.tsx b/src/components/(home)/docs/copyButton.tsx
new file mode 100644
index 00000000..4cb24f94
--- /dev/null
+++ b/src/components/(home)/docs/copyButton.tsx
@@ -0,0 +1,75 @@
+// CopyButton.client.tsx
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+interface CopyButtonProps {
+    code: string;
+    className?: string;
+}
+
+
+const CopyButton = ({ code, className }: CopyButtonProps) => {
+    const [copied, setCopied] = useState(false);
+
+    const copyToClipboard = async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 500);
+        } catch (error) {
+            console.error("Copy failed:", error);
+        }
+    };
+
+    return (
+        <button
+            onClick={copyToClipboard}
+            className={`${className} hover:scale-110 transition-all absolute right-0 top-2.5 opacity-0 group-hover:opacity-100 cursor-pointer  grid place-content-center  border border-gray-50/8 text-gray-50 ${copied ? "bg-[#A9FFEA]/30" :"bg-gray-50/3 hover:bg-gray-50/8"} rounded-lg size-6 `}
+        >
+
+            {!copied ? (
+                <motion.svg
+                    initial={{ y: 20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    exit={{ y: -20, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.3}
+                    className="size-4 stroke-current"
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"
+                    />
+                </motion.svg>
+            ) : (
+                <motion.svg
+                    initial={{ y: 20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    exit={{ y: -20, opacity: 0 }}
+                    transition={{ duration: 0.3 }}
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.3}
+                    className="size-4 stroke-current"
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                    />
+                </motion.svg>
+            )}
+
+        </button>
+
+    );
+}
+
+export { CopyButton }
diff --git a/src/components/(home)/docs/mark.tsx b/src/components/(home)/docs/mark.tsx
new file mode 100644
index 00000000..056bd217
--- /dev/null
+++ b/src/components/(home)/docs/mark.tsx
@@ -0,0 +1,8 @@
+const Mark = ({children}:{children :React.ReactNode}) => (
+    <div className='bg-[#A9FFEA]/5 p-3 border border-dashed border-[#A9FFEA]/10 rounded-2xl'>
+        {children}
+    </div>
+)
+
+
+export { Mark}
\ No newline at end of file
diff --git a/src/components/(home)/docs/mdxLink.tsx b/src/components/(home)/docs/mdxLink.tsx
new file mode 100644
index 00000000..277d27fe
--- /dev/null
+++ b/src/components/(home)/docs/mdxLink.tsx
@@ -0,0 +1,8 @@
+import Link from "next/link";
+
+const MDXLink = ({ children, href, target= true }: { children: React.ReactNode, href: string, target?:boolean }) => {
+    return (
+        <Link href={href} className='text-yellow-300 italic' target={ `${target ? "_blank": ""}`}>{children}</Link>
+    );
+}
+export {MDXLink};
\ No newline at end of file
diff --git a/src/components/(home)/docs/switchPage.tsx b/src/components/(home)/docs/switchPage.tsx
new file mode 100644
index 00000000..a7f055d0
--- /dev/null
+++ b/src/components/(home)/docs/switchPage.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+type SwitchPageProps = {
+    next: {
+        label :string
+        href: string
+    },
+    prev: {
+        label: string
+        href: string
+    }
+
+}
+const SwitchPage = ({next, prev}:SwitchPageProps) => (
+    <div className="flex  gap-5 justify-between mt-5 py-10 md:pb-0 border-t border-gray-50/15 border-dotted ">
+        <Link href={`/docs${prev.href}`}
+            className={`flex gap-2.5 items-center  cursor-pointer py-2.5 px-5 rounded-2xl text-xs md:text-sm text-left font-normal   bg-[#A9FFEA]/2.5 border border-[#A9FFEA]/5 text-gray-50/80 `}>
+            <span>←</span>
+            <span>{prev.label}</span>
+        </Link>
+
+        <Link
+            href={`/docs${next.href}`}  
+            className=" flex gap-2.5 items-center relative bg-[#A9FFEA]/30  text-[#A9FFEA] text-xs md:text-sm border border-[#A9FFEA]/30 size-fit py-2.5 px-5 rounded-2xl  "
+
+        >
+            <span className="  absolute left-1 rounded-full blur-sm  size-4 bg-[#A9FFEA]  "></span>
+            <span className="  absolute right-2 rounded-full blur-sm  size-4 bg-[#A9F5FF] "></span>
+
+            <span>{next.label}</span>
+            <span>→</span>
+        </Link>
+
+    </div>
+)
+
+export { SwitchPage }
\ No newline at end of file
diff --git a/src/components/(home)/docs/templateEffect.tsx b/src/components/(home)/docs/templateEffect.tsx
new file mode 100644
index 00000000..0ffe3796
--- /dev/null
+++ b/src/components/(home)/docs/templateEffect.tsx
@@ -0,0 +1,49 @@
+"use client"
+import { motion } from "framer-motion";
+
+interface TemplateProps {
+    children: React.ReactNode;
+}
+
+const TemplateEffect = ({ children }: TemplateProps) => {
+    const pageVariants = {
+        initial: {
+            opacity: 0,
+            y: 50,
+            scale: 0.95
+        },
+        animate: {
+            opacity: 1,
+            y: 0,
+            scale: 1
+        },
+        exit: {
+            opacity: 0,
+            y: -50,
+            scale: 0.95
+        }
+    };
+
+    const pageTransition = {
+        type: "spring",
+        stiffness: 150,
+        damping: 18,
+        duration: 0.5
+    };
+
+    return (
+        <motion.section
+            variants={pageVariants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={pageTransition}
+            className="flex-1 flex flex-col gap-5"
+        >
+            
+                {children}
+        </motion.section>
+    );
+};
+
+export  {TemplateEffect};
diff --git a/src/components/(home)/footer.tsx b/src/components/(home)/footer.tsx
new file mode 100644
index 00000000..7efb6da1
--- /dev/null
+++ b/src/components/(home)/footer.tsx
@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { Github } from "../icons/github";
+import { majorMonoDisplay } from "@/font/google";
+import { LinkedIn } from "../icons/linkedin";
+
+const Footer = () => {
+    return (
+        <footer className="px-5 py-10 md:p-14  space-y-15 border-t border-dashed border-gray-50/15 ">
+            <aside className="hidden">ghdghd</aside>
+            <hr className=" border-gray-50/15 border-dotted hidden" />
+            <aside>
+                <div className=" space-y-5">
+                    <div
+                        className="flex  items-center gap-5"
+                    >
+                        <Link href="/#" className={`size-fit text-3xl text-gray-50/90  ${majorMonoDisplay.className}`}>
+                            <span className="py-1.5 ">NEXY</span>
+                        </Link>
+                        <hr className="h-2 border border-dashed border-gray-50/15 " />
+
+                        <ul
+                            className="flex gap-1 p-1 items-center bg-[#A9FFEA]/2 -border border-dotted border-[#A9FFEA]/20 rounded-[1.125rem] "
+                        >
+                            <li
+                                className="cursor-pointer size-9 bg-[#A9FFEA]/6 hover:bg-[#A9FFEA]/10  border border-[#A9FFEA]/7 hover:borerd-[#A9FFEA]/12 rounded-[0.875rem] grid place-content-center hover:scale-110 transition-all duration-300 text-gray-50"
+                            >
+                                <Link
+                                    href="https://github.com/NexyPy/Nexy" className="text-[#A9FFEA]"
+                                    target="_blank"
+
+                                >
+                                    <Github />
+                                </Link>
+                            </li>
+                            <hr className="h-2 border border-dashed border-gray-50/15 " />
+
+                            <li
+                                className="cursor-pointer size-9 bg-[#A9FFEA]/6 hover:bg-[#A9FFEA]/10  border border-[#A9FFEA]/7 hover:borerd-[#A9FFEA]/12 rounded-[0.875rem] grid place-content-center hover:scale-110 transition-all duration-300 text-gray-50"
+                            >
+                                <Link
+                                    href="https://www.linkedin.com/company/nexy-python/"
+                                    target="_blank"
+
+                                >
+                                    <LinkedIn />
+                                </Link>
+                            </li>
+                        </ul>
+                    </div>
+                    <p className="text-sm opacity-90">
+                        Copyright © 2025 Espoir Loémba. Tous droits réservés.
+                    </p>
+                </div>
+            </aside>
+        </footer>
+    );
+}
+
+export { Footer };
\ No newline at end of file
diff --git a/src/components/(home)/header.tsx b/src/components/(home)/header.tsx
new file mode 100644
index 00000000..7cb883ca
--- /dev/null
+++ b/src/components/(home)/header.tsx
@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { Nexy } from "../icons/nexy";
+import { Search } from "../icons/search";
+import { Github } from "../icons/github";
+import { NavLink } from "./navLink";
+import { MenuButton } from "./menu.button";
+
+
+const Header = () => {
+    return (
+        <header className="flex justify-between items-center px-4 md:px-14  md:py-5 py-3 fixed md:sticky w-full top-0 z-30 bg-background/50  border-b border-gray-50/15 border-dashed backdrop-blur-md">
+            <div className="flex gap-6 items-center hover:scale-104 transition-all duration-300">
+                <Link
+                    href="/"
+                    className=""
+                >
+                    <Nexy />
+                </Link>
+
+
+            </div>
+            <menu className=" hidden md:flex gap-6 items-center ">
+                <button
+                    className="hover:scale-104 transition-all duration-300 flex gap-2 justify-center items-center  pl-2 pr-4 py-1 rounded-xl text-sm text-gray-50/70 border border-[#A9FFEA]/6 bg-[#A9FFEA]/5 hover:bg-[#A9FFEA]/10 cursor-pointer "
+                >
+                    <Search />
+                    <code>ctr k</code>
+                </button>
+                <hr className="hidden md:block h-2 border border-dashed border-gray-50/15" />
+                <NavLink />
+                <hr className="hidden md:block h-2 border border-dashed border-gray-50/15 " />
+                <Link
+                    href="https://github.com/NexyPy/Nexy"
+                    target="_blank"
+                    className="hover:scale-110 transition-all duration-300 hover:text-[#A9FFEA]"
+                >
+                    <Github />
+                </Link>
+                <hr className="hidden md:block h-2 border border-dashed border-gray-50/15" />
+                <Link
+                    href="https://pepy.tech/projects/nexy"
+                    target="_blank"
+                    className="hover:scale-104 transition-all duration-300"
+                >
+                    <img src="https://static.pepy.tech/badge/nexy" alt="PyPI Downloads" />
+                </Link>
+            </menu>
+
+            <MenuButton/>
+
+        </header>
+    );
+
+}
+
+export { Header };
\ No newline at end of file
diff --git a/src/components/(home)/heroSection.tsx b/src/components/(home)/heroSection.tsx
new file mode 100644
index 00000000..cc92a8b6
--- /dev/null
+++ b/src/components/(home)/heroSection.tsx
@@ -0,0 +1,105 @@
+import { dm_sans, dm_sans_300 } from "@/font/google";
+import Link from "next/link";
+import { Code } from "./docs/codeCard";
+
+
+
+const codes = [
+`def GET():
+    data = {"Get": "Hello World"}
+    return data
+`,
+
+`async def POST():
+    data = {"Post": "Hello New Post"}
+    return data
+`,
+
+`async def SOCKET(
+    ws: WebSocket, 
+    service: Depends(AppService)
+):
+    await service.handle_websocket(ws)
+`
+]
+const RightSide = async () => {
+    
+
+    
+    return (
+        <aside className="flex-1 hidden md:flex items-center justify-end">
+            <div className="flex flex-col gap-2  relative size-fit bg-[#24262B]/20 border border-[#24262B] border-dashed rounded-3xl p-2">
+                <span className="  absolute -left-2 -top-2 rounded-full blur-2xl  size-10 bg-[#A9FFEA]  "></span>
+                <span className="  absolute -left-2 -bottom-2 rounded-full blur-2xl  size-10 bg-gray-50 "></span>
+
+                <span className="  absolute -right-2 -top-2 rounded-full blur-2xl  size-10 bg-[#A9F5FF] "></span>
+                <span className="  absolute -right-2 -bottom-2 rounded-full blur-2xl  size-10 bg-yellow-100 "></span>
+
+                <span className={`text-xs px-3 py-1 opacity-50 tracking-wide ${dm_sans_300.className}`}>app/**/controller.py</span>
+
+                {
+                    codes.map((code, codeIndex) => (
+
+                        <Code key={codeIndex} code={code} theme="catppuccin-mocha" language="python" />
+
+                    ))
+                }
+
+            </div>
+
+        </aside>
+    )
+}
+
+
+const LeftSide = () => {
+    return (
+        <aside className="hit-full flex-1 flex flex-col justify-center gap-4 ">
+            <span
+                className="bg-yellow-200/5 border border-yellow-200/10 rounded-full py-1 px-2  size-fit text-xs text-yellow-200 tracking-wider"
+            >Nexy v1-bêta</span>
+            <h5
+                className="text-lg font-light opacity-80 tracking-wider"
+            >
+                Et si tu changeais un peu ta façon de coder ? <br />
+                Savais-tu que tu peux faire plus simple et plus performant ?
+            </h5>
+            <h1 className={`${dm_sans.className} uppercase text-3xl font-medium tracking-wide md:tracking-widest leading-12`}>
+                Simplifiez vos projets backend avec des performances optimisées.
+            </h1>
+            <p className="text-lg font-light opacity-80 tracking-wider">
+                Nexy est un framework Python web qui simplifie la création de backend robustes et performants.
+            </p>
+
+            <div className="mt-7 w-fit hover:scale-110 transition-all duration-300 ease-in-out  ">
+
+                <Link
+                    href="/docs"
+                    className=" flex gap-2.5 items-center relative bg-[#A9FFEA]/30  text-[#A9FFEA] border border-[#A9FFEA]/30 size-fit py-2.5 px-5 rounded-2xl  "
+
+                >
+                    <span className="  absolute left-1 rounded-full blur-sm  size-4 bg-[#A9FFEA]  "></span>
+                    <span className="  absolute right-2 rounded-full blur-sm  size-4 bg-[#A9F5FF] "></span>
+
+                    <span>Commencer</span>
+                    <span>→</span>
+                </Link>
+
+
+            </div>
+        </aside>
+    )
+}
+
+
+
+const HeroSection = () => {
+    return (
+        <section className="flex   mx-5 md:mx-14 md:px-15 py-10 md:py-5   md:h-[39rem] md:border-x border-gray-50/15 border-dashed   ">
+            <LeftSide />
+            <RightSide />
+        </section>
+    );
+}
+
+export { HeroSection };
\ No newline at end of file
diff --git a/src/components/(home)/language.tsx b/src/components/(home)/language.tsx
new file mode 100644
index 00000000..0baa4cc1
--- /dev/null
+++ b/src/components/(home)/language.tsx
@@ -0,0 +1,40 @@
+"use client"
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+const Language = () => {
+    const [selectedTab, setSelectedTab] = useState(0);
+    const tabs = ["EN","FR"];
+
+    return (
+
+        <div className="relative">
+            {/* Tab Headers */}
+            <div className="flex space-x-1 p-1  bg-[#24262B]/20 border border-dashed  border-[#24262B] rounded-[0.875rem] ">
+                {tabs.map((tab, index) => (
+                    <button
+                        key={tab}
+                        className={`relative cursor-pointer text-xs size-7  rounded-[0.625rem] grid place-content-center hover:scale-110 transition-all duration-300  ${selectedTab === index
+                                ? " text-[#A9FFEA] "
+                                : " hover:text-[#A9FFEA] "
+                            }`}
+                        onClick={() => setSelectedTab(index)}
+                    >
+                        {tab}
+                        {selectedTab === index && (
+                            <motion.div
+                                className="absolute inset-0 bg-[#A9FFEA]/6 hover:bg-[#A9FFEA]/10  border border-[#A9FFEA]/7 hover:borerd-[#A9FFEA]/12 rounded-[0.625rem] -z-10"
+                                layoutId="activeTab"
+                                transition={{ type: "spring", duration: 0.6 }}
+                            />
+                        )}
+                    </button>
+                ))}
+            </div>
+
+
+        </div>
+    );
+};
+
+export { Language }
diff --git a/src/components/(home)/lightDark.tsx b/src/components/(home)/lightDark.tsx
new file mode 100644
index 00000000..c7579e29
--- /dev/null
+++ b/src/components/(home)/lightDark.tsx
@@ -0,0 +1,21 @@
+const LightDark = ({ isActive }: { isActive?: boolean }) => (
+
+    <>
+        {
+
+            isActive ? (
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}  className="size-5 stroke-current">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+                </svg>
+            ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-5">
+                    <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                </svg>
+
+            )
+        }
+    </>
+
+)
+
+export { LightDark }
\ No newline at end of file
diff --git a/src/components/(home)/menu.button.tsx b/src/components/(home)/menu.button.tsx
new file mode 100644
index 00000000..ae8e3c62
--- /dev/null
+++ b/src/components/(home)/menu.button.tsx
@@ -0,0 +1,23 @@
+"use client"
+import { Menu } from "../icons/menu";
+import useStore from "@/store";
+
+
+const MenuButton = () => {
+    const {menuIsOpen, setMenuIsOpen} = useStore()
+    return (
+        <>
+            <button
+                className="md:hidden"
+                onClick={() => {
+                    setMenuIsOpen(!menuIsOpen)
+                }}
+            >
+                <Menu />
+            </button>
+            
+        </>
+    )
+}
+
+export { MenuButton }
\ No newline at end of file
diff --git a/src/components/(home)/menu.modal.tsx b/src/components/(home)/menu.modal.tsx
new file mode 100644
index 00000000..7994d5ad
--- /dev/null
+++ b/src/components/(home)/menu.modal.tsx
@@ -0,0 +1,93 @@
+"use client"
+import useStore from "@/store";
+import { SideBar } from "./sideBar";
+import { usePathname } from "next/navigation";
+import { dm_sans_400 } from "@/font/google";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Close } from "../icons/close";
+
+const CloseModale = () => {
+    const {menuIsOpen, setMenuIsOpen } = useStore();
+
+
+    if(menuIsOpen) return (
+        <button
+            className="fixed top-3 right-3 z-[51] bg-[#A9FFEA]/6 hover:bg-[#A9FFEA]/5 border border-gray-100/10 backdrop-blur-md rounded-full p-1.5"
+            onClick={() => {
+                setMenuIsOpen(false)
+            }}
+        >
+            <Close/>
+
+        </button>
+    )
+}
+
+const MenuModal = () => {
+    const { menuIsOpen, setMenuIsOpen } = useStore();
+    const pathname = usePathname();
+    const navLinks = [
+        { id: 1, href: "/docs", label: "Docs", active: true },
+        // {id:2, href: "#", label: "Showcase" ,active:false},
+        { id: 3, href: "/blog", label: "Blog", active: false },
+    ]
+
+    return (
+        <>
+        <CloseModale />
+        <motion.div
+            initial={{ x: "100%" }}
+            animate={{ x: menuIsOpen ? "0%" : "100%" }}
+            exit={{x:"-100%"}}
+            transition={{ type: "spring", stiffness: 400, damping: 25 }}
+            className="overflow-y-auto max-h-dvh fixed min-h-dvh pb-10 w-full z-50 bg-background/80 backdrop-blur-xl"
+        >
+            <motion.p 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 0.5, y: 0 }}
+                transition={{ delay: 0.2 }}
+                className="p-5 pb-5 flex items-center text-sm gap-3 w-[90%]"
+            >
+                <span>Menu</span>
+                <span className="mt-1 border-t-[0.5px] w-full border-gray-50/15"></span>
+            </motion.p>
+
+            <motion.ul 
+                className="px-5 pb-5 flex flex-col gap-3 w-fit"
+            >
+                {navLinks.map((link, index) => (
+                    <motion.li
+                        key={link.id}
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ delay: 0.3 + index * 0.1 }}
+                        onClick={() => {
+                            setMenuIsOpen(false)
+                        }}
+                        className="flex gap-6 items-center"
+                    >
+                        <Link
+                            href={link.href}
+                            className={`${dm_sans_400.className} tracking-widest transition-all duration-300 ${pathname.startsWith(link.href) ? "text-yellow-300" : "text-gray-50/80"}`}
+                        >
+                            {link.label}
+                        </Link>
+                    </motion.li>
+                ))}
+            </motion.ul>
+            <motion.p 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 0.5, y: 0 }}
+                transition={{ delay: 0.4 }}
+                className="px-5 flex items-center text-sm gap-3"
+            >
+                <span>Docs</span>
+                <span className="mt-1 border-t-[0.5px] w-full border-gray-50/15"></span>
+            </motion.p>
+            <SideBar />
+        </motion.div>
+        </>
+    );
+};
+export { MenuModal }
\ No newline at end of file
diff --git a/src/components/(home)/navLink.tsx b/src/components/(home)/navLink.tsx
new file mode 100644
index 00000000..888728b0
--- /dev/null
+++ b/src/components/(home)/navLink.tsx
@@ -0,0 +1,40 @@
+"use client"
+import {  dm_sans_400 } from "@/font/google";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const navLinks = [
+    {id:1, href: "/docs", label: "Docs", active:true },
+    // {id:2, href: "#", label: "Showcase" ,active:false},
+    {id:3, href: "/blog", label: "Blog" ,active:false},
+]
+
+/**
+ * Navigation component for the header.
+ * Renders a list of navigation links defined in navLinks array.
+ * @returns {React.ReactElement} Navigation component with links
+ */
+
+const NavLink = (): React.ReactElement => {
+    const pathname = usePathname();
+    
+    return (
+        <nav className="flex">
+            <ul className="flex gap-6 transition-all duration-300 w-fit">
+                
+                {navLinks.map((link,lindexIndex) => (
+                    <li key={link.id} className={`flex gap-6 items-center justify-center hover:scale-110 ${pathname.startsWith(link.href) && "scale-110"} transition-all duration-300 `}>
+                        <Link
+                            href={link.href}
+                            className={` text-sm ${dm_sans_400.className} tracking-widest  hover:text-[#A9FFEA]/80  transition-all duration-300 ${pathname.startsWith(link.href)? "text-yellow-300":"text-gray-50/80" }`}
+                        >{link.label}</Link>
+                        <hr  hidden={navLinks.length-1 == lindexIndex} className="hidden md:block h-2 border border-dashed border-gray-50/15" />
+
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    );
+}
+
+export {NavLink}
\ No newline at end of file
diff --git a/src/components/(home)/sideBar.tsx b/src/components/(home)/sideBar.tsx
new file mode 100644
index 00000000..e1bb61b4
--- /dev/null
+++ b/src/components/(home)/sideBar.tsx
@@ -0,0 +1,55 @@
+"use client"
+import Link from "next/link"
+import { Collapse } from "./collapse"
+import { SIDE_BAR } from "@/data/docs/sidebar"
+import { usePathname } from "next/navigation"
+import useStore from "@/store"
+
+const SideBar = ({hidden}: {hidden?: boolean}) => {
+    const pathname = usePathname()
+    const { setMenuIsOpen } = useStore();
+    return (
+        <aside
+            
+            className={`${hidden? "hidden md:block": ""}  overflow-y-auto sticky top-[4.5rem]  p-4  md:w-[19rem] md:max-h-[90dvh] space-y-3 transition-all duration-300`}
+        >
+            {/* <p>
+                <Link
+                    href="/docs"
+                    className={`${pathname === "/docs" && "active-link"} ${dm_sans_400.className}`}
+                > Introduction </Link>
+            </p> */}
+            {
+                SIDE_BAR.map((item, itemIndex) => (
+                    <Collapse
+                        key={itemIndex}
+                        title={item.label}
+                        defaultOpen={(pathname.startsWith(item.link) || (pathname === "/docs" && itemIndex === 0))}
+                    >
+                        <ul className="space-y-2">
+                            
+                            {
+                                item.children.map((child, childIndex) => (
+                                    
+                                    <li key={childIndex} className="flex "
+                                    onClick={()=>{setMenuIsOpen(false)}}
+                                    >
+                                        <Link
+                                            href={(item.link ==="/docs/started" && child.link ==="/introduction" )? "/docs": item.link + child.link}
+                                            className={`${(pathname === item.link + child.link) || ((pathname === "/docs" && child.link === "/introduction")) ? "active-link" : " text-sm text-gray-50/70 hover:text-yellow-100"} w-full  transition-all duration-300`}
+                                        >
+                                            {child.title}
+                                        </Link>
+                                    </li>
+
+                                ))
+                            }
+                        </ul>
+                    </Collapse>
+                ))
+            }
+        </aside>
+    )
+}
+
+export { SideBar }
\ No newline at end of file
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
deleted file mode 100644
index a94ab711..00000000
--- a/src/components/Badge.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-interface BadgeProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-const Badge = ({ children, className = "" }: BadgeProps) => {
-  return (
-    <div className={`bg-[#A9FFEA]/8 border border-[#A9FFEA]/10 rounded-full p-1 ${className}`}>
-      {children}
-    </div>
-  );
-};
-
-export default Badge;
diff --git a/src/components/Build.tsx b/src/components/Build.tsx
deleted file mode 100644
index 65ca29ce..00000000
--- a/src/components/Build.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client"
-import React from 'react';
-import { usePathname } from 'next/navigation';
-const Build = () => {
-    const page = usePathname();
-    return (
-        <div className="flex flex-col items-center justify-center w-full h-[calc(100dvh_-_110px)] md:h-full">
-
-            <h1 className='text-9xl mb-10'>🐍</h1>
-            
-            <h1 className="text-2xl font-bold mt-4 text-center">La page <span className="bg-white/5 px-2 py-1 rounded-md text-[#A9FFEA] text-lg font-medium border border-[#A9FFEA]/5">{page}</span> est en cours de construction</h1>
-            <p className="text-center px-8 text-lg text-gray-500 mt-2">Cette section est encore en construction. Revenez plus tard pour plus de mises à jour.</p>
-        </div>
-    );
-};
-
-export default Build;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
deleted file mode 100644
index d860a4a9..00000000
--- a/src/components/Button.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-
-"use client"
-import useStore from "@/store";
-
-type ButtonProps = {
-    children: React.ReactNode;
-    className?: string;
-    onClick?: () => void;
-    type?: "button" | "submit" | "reset";
-    disabled?: boolean;
-    loading?: boolean;
-    size?: "md" | "sm";
-}
-
- function Button({ children, className = "", ...props }: ButtonProps) {
-    return (
-        <button 
-            className={`bg-[#A9FFEA]/8 border border-[#A9FFEA]/10 rounded-full p-1 pr-10 ${className}`}
-            {...props}
-        >
-            {children}
-            {props.loading && <span className="ml-2">Chargement...</span>}
-        </button>
-    );
-}
-
-function MenuButton() {
-    const {  setMenuIsOpen } = useStore();
-    return (
-        <button 
-            className={`size-10 flex md:hidden items-center justify-center gap-1.5 bg-[#A9FFEA]/8 border border-[#A9FFEA]/10 rounded-xl text-[#A9FFEA]`}
-            onClick={() => setMenuIsOpen(true)}
-        >
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
-            </svg>
-            
-        </button>
-    
-    );
-}
-
-
-
-export { Button, MenuButton };
\ No newline at end of file
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
deleted file mode 100644
index 2e4fcd00..00000000
--- a/src/components/CodeBlock.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-// import type { BundledLanguage } from 'shiki'
-import { codeToHtml,BundledLanguage } from 'shiki'
-import CopyButton from "@/components/btnCopier";
-
-
-
-
-
-interface CodeBlockProps {
-    code: string;
-    language: BundledLanguage;
-    fileName?: string;
-    copyButton?: boolean;
-    // Si vous souhaitez ajouter d'autres options, comme showLineNumbers, vous pouvez les inclure ici
-  }
-
-export async function CodeBlock({
-  code,
-  language,
-  fileName = "",
-  copyButton = true,
-}: CodeBlockProps) {
-    const out = await codeToHtml(code, {
-        lang: language,
-        theme: 'one-dark-pro'
-      })
-      
-
-  return (
-    <article className="flex-1 group flex flex-col gap-1 bg-[#A9FFEA]/6 border border-[#A9FFEA]/7 rounded-[20px] p-1 h-fit ">
-      
-      {copyButton && <div className="flex gap-1 justify-between p-1">
-        <p className="p-0.5 flex gap-2 items-center">
-          <svg
-
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className="size-6 bg-[#A9FFEA]/10 border border-[#F9FFFD]/10 rounded-[7.5px] p-0.5 text-green-200"
-          >
-            <path
-              fillRule="evenodd"
-              d="M2.25 6a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V6Zm3.97.97a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 0 1-1.06-1.06l1.72-1.72-1.72-1.72a.75.75 0 0 1 0-1.06Zm4.28 4.28a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z"
-              clipRule="evenodd"
-            />
-          </svg>
-          {fileName}
-          <span className="text-base font-normal mb-0.5 text-[#7E8382]">
-            {language}
-          </span>
-        </p>
-        <CopyButton code={code} />
-      </div> }
-      <div className=" w-full  bg-[#F9FFFD]/5 px-1.5 py-0.5 rounded-[14px] border border-[#7E8382]/20 backdrop-blur-md">
-        <div
-          className="w-[calc(100dvw_-_60px)] md:w-full [&>pre]:overflow-x-auto [&>pre]:!w-full  p-4 [&>pre]:!bg-transparent [&>pre]:!m-0 [&_.line]:!px-0"
-          dangerouslySetInnerHTML={{ __html: out }}
-          
-        >
-          </div>
-      </div>
-    </article>
-  );
-}
-
-
-
-
-
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index 83adb2c7..00000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import Link from "next/link";
-import { Nexy } from "@/components/svg/nexy";
-import { MenuButton } from "@/components/Button";
-const Header = () => {
-    return (
-        <header>
-            <h1>Nexy</h1>
-        </header>
-    )
-}
-
-const HeaderDocs = () => {
-    return (
-        <header className="flex-1 flex justify-between items-center md:px-14 px-5 md:py-3.5 py-5 sticky top-0 z-10 bg-b[#040807]/50 border-b border-[#0D1713]/50 backdrop-blur-md">
-            <div className="flex gap-6 items-center">
-                <Link href="/docs/started"><Nexy /></Link>
-                <div className=" bg-[#A9FFEA]/10 border border-[#A9FFEA]/10 backdrop-blur-md rounded-[12px] px-2 py-1 text-sm font-light text-[#A9FFEA] " >
-                    V0-1-canary
-                </div>
-
-            </div>
-
-            <menu className="hidden md:flex items-center gap-2.5">
-                <button className="w-full flex items-center gap-1.5 bg-[#A9FFEA]/8 border border-[#A9FFEA]/10 rounded-full p-1 pr-10">
-                    <svg className="size-8" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <rect width="34" height="34" rx="17" fill="#A9FFEA" fillOpacity="0.2" />
-
-                        <rect x="0.25" y="0.25" width="33.5" height="33.5" rx="16.75" stroke="#A9FFEA" strokeOpacity="0.4" strokeWidth="0.5" />
-                        <path d="M24 24.6152L19.9581 20.5733ZM19.9581 20.5733C21.052 19.4793 21.6666 17.9956 21.6666 16.4485C21.6666 14.9014 21.052 13.4177 19.9581 12.3238C18.8641 11.2298 17.3804 10.6152 15.8333 10.6152C14.2862 10.6152 12.8025 11.2298 11.7085 12.3238C10.6146 13.4177 10 14.9014 10 16.4485C10 17.9956 10.6146 19.4793 11.7085 20.5733C12.8025 21.6673 14.2862 22.2818 15.8333 22.2818C17.3804 22.2818 18.8641 21.6673 19.9581 20.5733Z" fill="#A9FFEA" fillOpacity="0.8" />
-                        <path d="M24 24.6152L19.9581 20.5733M19.9581 20.5733C21.052 19.4793 21.6666 17.9956 21.6666 16.4485C21.6666 14.9014 21.052 13.4177 19.9581 12.3238C18.8641 11.2298 17.3804 10.6152 15.8333 10.6152C14.2862 10.6152 12.8025 11.2298 11.7085 12.3238C10.6146 13.4177 10 14.9014 10 16.4485C10 17.9956 10.6146 19.4793 11.7085 20.5733C12.8025 21.6673 14.2862 22.2818 15.8333 22.2818C17.3804 22.2818 18.8641 21.6673 19.9581 20.5733Z" stroke="#A9FFEA" strokeLinecap="round" strokeLinejoin="round" />
-                    </svg>
-                    <span className="text-sm font-light text-[#A9FFEA]">Que cherchez-vous ?</span>
-                </button>
-                <div className="flex items-center gap-1 bg-[#A9FFEA]/8 border border-[#A9FFEA]/10 rounded-full p-1  h-fit">
-                    <button>
-                        <svg width="31" height="30" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <rect x="0.599609" width="32" height="32" rx="16" fill="#A9FFEA" fillOpacity="0.2" />
-                            <rect x="0.849609" y="0.25" width="31.5" height="31.5" rx="15.75" stroke="#A9FFEA" strokeOpacity="0.25" strokeWidth="0.5" />
-                            <path d="M13.9896 10.4008C14.4276 10.541 14.8442 10.7356 15.2285 10.9795C15.7715 10.8476 16.33 10.7814 16.8906 10.7825C17.4695 10.7825 18.028 10.8511 18.5515 10.979C18.9356 10.7353 19.352 10.5409 19.7898 10.4008C20.1961 10.2696 20.775 10.0572 21.119 10.4185C21.3522 10.6641 21.4105 11.0758 21.4519 11.3901C21.4985 11.7408 21.5096 12.1979 21.3872 12.6516C21.8553 13.2253 22.1375 13.9098 22.1375 14.6556C22.1375 15.7854 21.4927 16.7664 20.5383 17.4459C20.0788 17.7684 19.5695 18.0215 19.0284 18.1962C19.1531 18.4673 19.2225 18.7672 19.2225 19.082V20.7419C19.2225 20.8886 19.1611 21.0294 19.0518 21.1331C18.9424 21.2369 18.7942 21.2952 18.6395 21.2952H15.1416C14.987 21.2952 14.8387 21.2369 14.7294 21.1331C14.62 21.0294 14.5586 20.8886 14.5586 20.7419V20.1936C14.0019 20.2583 13.5349 20.2008 13.1379 20.0409C12.7228 19.8738 12.4336 19.6148 12.2162 19.3669C12.0098 19.1323 11.7848 18.6034 11.4594 18.5005C11.3868 18.4775 11.3196 18.4412 11.2617 18.3936C11.2039 18.346 11.1565 18.2881 11.1222 18.2231C11.053 18.0918 11.0416 17.9398 11.0904 17.8006C11.1393 17.6613 11.2444 17.5462 11.3827 17.4805C11.521 17.4148 11.6812 17.404 11.8279 17.4503C12.2162 17.5732 12.4692 17.8387 12.6423 18.0523C12.9222 18.3954 13.1495 18.8435 13.5926 19.0222C13.7751 19.0958 14.0427 19.144 14.4613 19.0897L14.5586 19.0709C14.56 18.7698 14.626 18.4722 14.7527 18.1962C14.2117 18.0215 13.7023 17.7684 13.2428 17.4459C12.2885 16.7664 11.6437 15.786 11.6437 14.6556C11.6437 13.9109 11.9253 13.227 12.3922 12.6538C12.2698 12.2001 12.2803 11.742 12.3269 11.3906L12.3298 11.3696C12.3724 11.0476 12.422 10.6686 12.6598 10.4185C13.0038 10.0572 13.5833 10.2702 13.989 10.4013L13.9896 10.4008Z" fill="#A9FFEA" />
-                        </svg>
-
-                    </button>
-                    <button>
-                        <svg width="36" height="29" viewBox="0 0 41 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <rect x="0.599609" width="40.4" height="32" rx="16" fill="#A9FFEA" fillOpacity="0.2" />
-
-                            <rect x="0.849609" y="0.25" width="39.9" height="31.5" rx="15.75" stroke="#A9FFEA" strokeOpacity="0.25" strokeWidth="0.5" />
-                            <path d="M12.9805 22.0024L16.4805 14.5024L19.9805 22.0024M13.9805 20.0024H18.9805M7.98047 11.7498C9.3074 11.5847 10.6433 11.5021 11.9805 11.5024M11.9805 11.5024C12.7271 11.5024 13.4691 11.5278 14.2031 11.5784M11.9805 11.5024V10.0024M14.2031 11.5784C13.4311 15.1078 11.1071 18.0558 7.98047 19.6704M14.2031 11.5784C14.8005 11.6191 15.3931 11.6764 15.9805 11.7498M12.9211 17.4131C11.8278 16.3015 10.9612 14.9878 10.3698 13.5451" stroke="#A9FFE9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                            <path fillRule="evenodd" clipRule="evenodd" d="M33.4996 14.353C33.659 14.5124 33.659 14.7709 33.4996 14.9303L30.7778 17.6521C30.6184 17.8115 30.3599 17.8115 30.2005 17.6521L27.4787 14.9303C27.3193 14.7709 27.3193 14.5124 27.4787 14.353C27.6382 14.1935 27.8967 14.1935 28.0561 14.353L30.4892 16.786L32.9222 14.353C33.0816 14.1935 33.3401 14.1935 33.4996 14.353Z" fill="#A9FFEA" fillOpacity="0.4" />
-                        </svg>
-                    </button>
-                </div>
-                <button className="bg-[#A9FFEA]/8 border border-[#A9FFEA]/10 rounded-full  pr-2">
-                    <svg width="40" height="38" viewBox="0 0 44 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <g filter="url(#filter0_bd_422_2132)">
-                            <rect x="4" y="4" width="32" height="32" rx="16" fill="#A9FFEA" fillOpacity="0.2" shapeRendering="crispEdges" />
-                            <rect x="4.25" y="4.25" width="31.5" height="31.5" rx="15.75" stroke="#A9FFEA" strokeOpacity="0.25" strokeWidth="0.5" shapeRendering="crispEdges" />
-                            <path fillRule="evenodd" clipRule="evenodd" d="M17.7501 12.7886C17.8332 12.8716 17.8897 12.9775 17.9125 13.0927C17.9353 13.2079 17.9233 13.3273 17.8781 13.4357C17.5169 14.3026 17.3316 15.2326 17.333 16.1717C17.333 18.0575 18.0821 19.8661 19.4156 21.1996C20.7491 22.5331 22.5578 23.2823 24.4436 23.2823C25.3827 23.2836 26.3127 23.0983 27.1796 22.7371C27.2879 22.692 27.4072 22.6801 27.5223 22.7028C27.6375 22.7256 27.7432 22.782 27.8262 22.8649C27.9092 22.9479 27.9658 23.0536 27.9886 23.1687C28.0115 23.2837 27.9997 23.403 27.9547 23.5114C27.3242 25.023 26.2606 26.3142 24.8977 27.2225C23.5347 28.1307 21.9335 28.6153 20.2957 28.6152C15.7141 28.6152 12 24.9019 12 20.3195C12 16.8685 14.1071 13.9105 17.1039 12.6606C17.2122 12.6156 17.3314 12.6037 17.4464 12.6265C17.5615 12.6493 17.6672 12.7057 17.7501 12.7886Z" fill="#A9FFE9" />
-                        </g>
-                        <defs>
-                            <filter id="filter0_bd_422_2132" x="0" y="-1" width="44" height="44" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-                                <feFlood floodOpacity="0" result="BackgroundImageFix" />
-                                <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
-                                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_422_2132" />
-                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-                                <feOffset dx="2" dy="1" />
-                                <feGaussianBlur stdDeviation="3" />
-                                <feComposite in2="hardAlpha" operator="out" />
-                                <feColorMatrix type="matrix" values="0 0 0 0 0.913889 0 0 0 0 1 0 0 0 0 0.978973 0 0 0 0.08 0" />
-                                <feBlend mode="normal" in2="effect1_backgroundBlur_422_2132" result="effect2_dropShadow_422_2132" />
-                                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_422_2132" result="shape" />
-                            </filter>
-                        </defs>
-                    </svg>
-
-                </button>
-            </menu>
-
-            <MenuButton />
-        </header>
-
-
-    )
-}
-
-export { Header, HeaderDocs };
\ No newline at end of file
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
deleted file mode 100644
index 20522733..00000000
--- a/src/components/Input.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-type InputProps = {
-    children?: React.ReactNode;
-    className?: string;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string;
-}   
-
-const Input = ({ className, onChange, value}: InputProps) => {
-    return (
-        <input type="text" className={`bg-[#A9FFEA]/8 border border-[#A9FFEA]/10 rounded-full p-1 pr-10 ${className}`} onChange={onChange} value={value} />
-    )
-}
-
-
-export default Input;   
diff --git a/src/components/Mark.tsx b/src/components/Mark.tsx
deleted file mode 100644
index 4b7f610c..00000000
--- a/src/components/Mark.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-const  Mark = ({children}: {children: React.ReactNode}) => {
-    return (
-      <div className="text-sm font-light  tracking-wide bg-[#A9FFEA]/3 border-l border-[#A9FFEA] p-2 px-2.5">
-        {children}
-      </div>
-    )
-  }
-  
-
-export default Mark;
\ No newline at end of file
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
deleted file mode 100644
index 2609a49f..00000000
--- a/src/components/Modal.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-"use client"
-import { motion } from 'framer-motion';
-import { SideBarItem } from '@/components/SideBar';
-import useStore from '@/store';
-
-interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    children: React.ReactNode;
-}
-
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
-    if (!isOpen) return null;
-
-    return (
-        <div className="fixed inset-0 flex items-end justify-center z-50">
-            <div className="fixed inset-0 bg-background opacity-90" onClick={onClose}>
-
-            </div>
-
-            <motion.div
-                initial={{ y: '100%' }}
-                animate={{ y: 0 }}
-                exit={{ y: '100%' }}
-                transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-                className="bg-[#F9FFFD]/6 backdrop-blur-2xl border border-[#7E8382]/12 rounded-t-[25px] w-full min-h-1/4 "
-            >
-                <button className=" bg-red-500/50 backdrop-blur-2xl border border-red-500 text-[#A9FFEA] rounded-[13px] w-fit px-3 py-1 absolute -top-10 left-[50%] -translate-x-1/2" onClick={onClose}>
-                    close
-                </button>
-                {children}
-
-            </motion.div>
-        </div>
-    );
-};
-
-const MenuBottomSheet = () => {
-    const { menuIsOpen, setMenuIsOpen } = useStore();
-    return (
-        <>
-        
-        { menuIsOpen && <Modal isOpen={menuIsOpen} onClose={() => setMenuIsOpen(false)}>
-
-            <div className="flex flex-col gap-3 p-2 pb-10" onClick={() => setMenuIsOpen(false)}>
-                <SideBarItem />
-            </div>
-            
-        </Modal>}
-        </>
-    );
-  };
-
-
-export {Modal, MenuBottomSheet};
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
deleted file mode 100644
index 1e754968..00000000
--- a/src/components/SideBar.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-"use client"
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import {  useEffect, useState } from "react";
-
-const SideBar = () => {
-    return (
-        <div className="sticky top-24 hidden md:flex flex-col gap-3.5 backdrop-blur-[4px] bg-[#F9FFFD]/6 border border-[#7E8382]/12 rounded-[25px] p-1.5 pb-4 min-w-[240px] min-h-[82dvh] max-h-fit">
-
-            <SideBarItem />
-
-        </div>
-    );
-
-};
-
-const StartedData = [
-    {
-        label: "Introduction",
-        href: ""
-    },
-    {
-        label: "Créer un projet",
-        href: "/new_project"
-    },
-    {
-        label: "Structure du projet",
-        href: "/structures"
-    },
-    
-    {
-        label: "Controllers",
-        href: "/controllers"
-    },
-
-    {
-        label: "Reponses",
-        href: "/reponses"
-    }, {
-        label: "Composants",
-        href: "/components"
-    },
-    {
-        label: "Views",
-        href: "/views"
-    },
- 
-
-    {
-        label: "Serveur actions",
-        href: "/serveur-actions"
-    },
-    {
-        label: "Middlewares",
-        href: "/middlewares"
-    },
-
-
-    {
-        label: "Configuration",
-        href: "/configuration"
-    },
-
-]
-
-const ReferenceData = [
-    {
-        label: "Reponse",
-        href: ""
-    },
-    {
-        label: "Composant",
-        href: "/components"
-    },
-    
-]
-
-const IntegrationData = [
-    {
-        label: "React",
-        href: ""
-    },
-    {
-        label: "Next.js",
-        href: "/nextjs"
-    },
-    {
-        label: "Vue.js",
-        href: "/vue"
-    }, 
-]
-
-const CLI = [
-    {
-        label: "Installation",
-        href: ""
-    },
-    {
-        label: "Créer un projet",
-        href: "/create_projects"
-    },{
-        label:"Update",
-        href: "/update"
-    },{
-        label:"Start",
-        href: "/start"
-    },{
-        label:"Stop",
-        href: "/stop"
-    },{
-        label:"Restart",
-        href: "/restart"
-    },{
-        label:"Logs",
-        href: "/logs"
-    }
-    
-]
-
-const API = [
-    {
-        label: "Introduction",
-        href: ""
-    },
-    
-]
-
-// Define a type for the keys of the data object
-type DataKeys = "/docs/started" | "/docs/reference" | "/docs/integration" | "/docs/cli" | "/docs/api";
-
-const SideBarItem = () => {
-
-    const activePath = usePathname()
-    const [path, setPath] = useState<DataKeys>('/docs/started');
-    const tabs = [
-        { label: "Commencer", href: "/docs/started", active: true, data: StartedData },
-        { label: "Réference", href: "/docs/reference", active: false, data: ReferenceData },
-        { label: "Intégration", href: "/docs/integration", active: false, data: IntegrationData },
-        { label: "CLI", href: "/docs/cli", active: false, data: CLI },
-        { label: "API", href: "/docs/api", active: false, data: API }, // New tab added
-    ];
-
-    const data = {
-        "/docs/started": StartedData,
-        "/docs/reference": ReferenceData,
-        "/docs/integration": IntegrationData,
-        "/docs/cli": CLI,
-        "/docs/api": API,
-    }
-
-    useEffect(() => {
-        const keys = Object.keys(data);
-        console.log(keys);
-        for (const key of keys) {
-            if (activePath.startsWith(key)) {
-                setPath(key as DataKeys);
-                break;
-            }
-        }
-    }, [activePath, data]);
-
-    return (
-        <>
-            <div className="flex flex-col w-full bg-[#A9FFEA]/5 backdrop-blur-[4px] border border-[#A9FFEA]/10 rounded-[17px] p-1">
-                {tabs.map((item) => (
-                    <Link
-                        href={item.href}
-                        key={item.label}
-                        className={`px-3 py-2.5 text-sm font-normal text-left rounded-[14px] ${
-                            activePath.startsWith(item.href)
-                                ? "bg-[#A9FFEA]/30 border border-[#A9FFEA]/35 text-[#A9FFEA]"
-                                : "opacity-70"
-                        }`}
-                    >
-                        {item.label}
-                    </Link>
-                ))}
-            </div>
-            <menu className="flex flex-col w-full">
-                {data[path]?.map((item: { label: string; href: string }) => (
-                    <Link
-                        href={`${path}${item.href}`}
-                        className={`cursor-pointer px-3 py-1.5 text-sm text-left font-normal rounded-[10px] ${
-                            activePath === path + item.href
-                                ? "bg-[#A9FFEA]/2.5 border border-[#A9FFEA]/5 text-[#A9FFEA]"
-                                : "opacity-70"
-                        }`}
-                        key={item.label}
-                    >
-                        {item.label}
-                    </Link>
-                ))}
-            </menu>
-        </>
-    );
-};
-
-
-export {SideBarItem, SideBar};
\ No newline at end of file
diff --git a/src/components/btnCopier.tsx b/src/components/btnCopier.tsx
deleted file mode 100644
index 61e95b68..00000000
--- a/src/components/btnCopier.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// CopyButton.client.tsx
-"use client";
-
-import { useState } from "react";
-import { motion } from "framer-motion";
-
-interface CopyButtonProps {
-  code: string;
-}
-
-
-export default function CopyButton({ code }: CopyButtonProps) {
-  const [copied, setCopied] = useState(false);
-
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (error) {
-      console.error("Copy failed:", error);
-    }
-  };
-
-  return (
-    <motion.button
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.2 }}
-      onClick={copyToClipboard}
-      className="opacity-0 group-hover:opacity-100 cursor-pointer px-1.5 py-0.5 flex gap-1 items-center text-sm font-normal bg-[#A9FFEA]/3 border border-[#A9FFEA]/5 text-[#7E8382] w-fit text-left rounded-[10px]"
-    >
-
-
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={1.5}
-        stroke="currentColor"
-        className="size-4"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
-        />
-      </svg>
-      {copied ? <motion.span
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.2 }}
-      >Copié!</motion.span> : <motion.span
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.2 }}>Copier</motion.span>}
-    </motion.button>
-
-  );
-}
diff --git a/src/components/icons/close.tsx b/src/components/icons/close.tsx
new file mode 100644
index 00000000..44c39572
--- /dev/null
+++ b/src/components/icons/close.tsx
@@ -0,0 +1,7 @@
+const Close = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}  className="size-6 stroke-current">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+    </svg>
+)
+
+export { Close }
\ No newline at end of file
diff --git a/src/components/icons/github.tsx b/src/components/icons/github.tsx
new file mode 100644
index 00000000..1cceec65
--- /dev/null
+++ b/src/components/icons/github.tsx
@@ -0,0 +1,13 @@
+const Github = () => {
+    return (
+        <svg 
+            className="w-4 h-[18px] fill-current hover:fill-current transition-colors"
+            viewBox="0 0 24 26" 
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M6.66993 0.392774C7.56461 0.694684 8.41546 1.11351 9.2004 1.63836C10.3097 1.35444 11.4504 1.212 12.5954 1.21443C13.7779 1.21443 14.9187 1.3621 15.988 1.63717C16.7727 1.11282 17.6231 0.694407 18.5173 0.392774C19.3473 0.110552 20.5298 -0.34672 21.2324 0.43088C21.7087 0.959601 21.8278 1.84557 21.9123 2.52195C22.0076 3.27692 22.0302 4.26053 21.7801 5.237C22.7364 6.47187 23.3127 7.94491 23.3127 9.55012C23.3127 11.9818 21.9957 14.0931 20.0463 15.5554C19.1077 16.2495 18.0673 16.7942 16.9621 17.1701C17.2169 17.7536 17.3587 18.399 17.3587 19.0766V22.6491C17.3587 22.9649 17.2332 23.2678 17.0099 23.4911C16.7866 23.7144 16.4837 23.8399 16.1678 23.8399H9.02297C8.70715 23.8399 8.40426 23.7144 8.18094 23.4911C7.95762 23.2678 7.83216 22.9649 7.83216 22.6491V21.469C6.69493 21.6083 5.74109 21.4844 4.93015 21.1403C4.08229 20.7807 3.49165 20.2234 3.04747 19.6899C2.62593 19.185 2.16627 18.0466 1.5018 17.8251C1.3534 17.7757 1.21618 17.6975 1.09798 17.5951C0.979784 17.4926 0.882923 17.3679 0.812927 17.228C0.671565 16.9455 0.648216 16.6184 0.748016 16.3187C0.847816 16.019 1.06259 15.7712 1.34509 15.6298C1.62759 15.4885 1.95468 15.4651 2.25439 15.5649C3.04747 15.8293 3.56429 16.4009 3.91796 16.8605C4.48955 17.5988 4.95397 18.5634 5.85898 18.948C6.23171 19.1064 6.77829 19.21 7.63329 19.0933L7.83216 19.0528C7.8349 18.4048 7.96983 17.7642 8.2287 17.1701C7.12347 16.7942 6.08309 16.2495 5.1445 15.5554C3.19514 14.0931 1.8781 11.983 1.8781 9.55012C1.8781 7.94729 2.45326 6.47544 3.4071 5.24176C3.15703 4.2653 3.17846 3.2793 3.27373 2.52314L3.27968 2.47789C3.36661 1.78483 3.46783 0.969127 3.95368 0.43088C4.65626 -0.34672 5.83993 0.111743 6.66873 0.393965L6.66993 0.392774Z" />
+        </svg>
+    )
+}
+
+export { Github }
\ No newline at end of file
diff --git a/src/components/icons/globe.tsx b/src/components/icons/globe.tsx
new file mode 100644
index 00000000..6231ad8c
--- /dev/null
+++ b/src/components/icons/globe.tsx
@@ -0,0 +1,8 @@
+const Globe = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}  className="size-6 stroke-current">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+    </svg>
+
+)
+
+export { Globe}
\ No newline at end of file
diff --git a/src/components/icons/linkedin.tsx b/src/components/icons/linkedin.tsx
new file mode 100644
index 00000000..729b8f40
--- /dev/null
+++ b/src/components/icons/linkedin.tsx
@@ -0,0 +1,11 @@
+const LinkedIn = () => (
+    <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M2.79348 4.71195C3.51216 4.71195 4.09477 4.12935 4.09477 3.41066C4.09477 2.69198 3.51216 2.10938 2.79348 2.10938C2.07479 2.10938 1.49219 2.69198 1.49219 3.41066C1.49219 4.12935 2.07479 4.71195 2.79348 4.71195Z" fill="#A9FFEA" />
+        <path d="M2.79297 7.31445V13.8209"  className="stroke-[#A9FFEA]" strokeWidth="2.60258" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6.69727 7.31445V13.8209"  className="stroke-[#A9FFEA]" strokeWidth="2.60258" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6.69727 10.5677C6.69727 8.7719 8.15471 7.31445 9.95049 7.31445C11.7463 7.31445 13.2037 8.7719 13.2037 10.5677V13.8209"  className="stroke-[#A9FFEA]" strokeWidth="2.60258" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+)
+
+export { LinkedIn }
\ No newline at end of file
diff --git a/src/components/icons/menu.tsx b/src/components/icons/menu.tsx
new file mode 100644
index 00000000..c6fdf179
--- /dev/null
+++ b/src/components/icons/menu.tsx
@@ -0,0 +1,8 @@
+const Menu = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}  className="size-8 stroke-current">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25" />
+    </svg>
+
+)
+
+export {Menu}
\ No newline at end of file
diff --git a/src/components/icons/minius.tsx b/src/components/icons/minius.tsx
new file mode 100644
index 00000000..182da365
--- /dev/null
+++ b/src/components/icons/minius.tsx
@@ -0,0 +1,9 @@
+const Minius = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.2} className="size-5 stroke-current">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+    </svg>
+
+)
+
+
+export {Minius}
\ No newline at end of file
diff --git a/src/components/icons/nexy.tsx b/src/components/icons/nexy.tsx
new file mode 100644
index 00000000..643a0106
--- /dev/null
+++ b/src/components/icons/nexy.tsx
@@ -0,0 +1,14 @@
+import { majorMonoDisplay } from "@/font/google";
+
+const Nexy = () => {
+    return (
+        <span className={`${majorMonoDisplay.className} text-[#D8FFF5] text-3xl`}>
+            <span className=" text-primary">N</span>
+            <span>E</span>
+            <span className=" text-primary ">X</span>
+            <span>Y</span>
+        </span>
+    )
+}
+
+export { Nexy };
\ No newline at end of file
diff --git a/src/components/icons/plus.tsx b/src/components/icons/plus.tsx
new file mode 100644
index 00000000..a5e0f817
--- /dev/null
+++ b/src/components/icons/plus.tsx
@@ -0,0 +1,8 @@
+const PLus = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.2}  className="size-5 stroke-current">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+    </svg>
+
+)
+
+export {PLus}
\ No newline at end of file
diff --git a/src/components/icons/python.tsx b/src/components/icons/python.tsx
new file mode 100644
index 00000000..7f5b285f
--- /dev/null
+++ b/src/components/icons/python.tsx
@@ -0,0 +1,20 @@
+
+const Python = () => {
+  return (
+    <svg 
+      version="1.1" 
+      xmlns="http://www.w3.org/2000/svg" 
+      xmlnsXlink="http://www.w3.org/1999/xlink" 
+      
+      viewBox="0 0 32 32"
+      className="size-5"
+    >
+      <path 
+        fill="currentColor" 
+        d="M13.275 15.88h5.417c1.508 0 2.712-1.241 2.712-2.756v-5.164c0-1.47-1.24-2.574-2.712-2.819-0.932-0.155-1.898-0.226-2.825-0.221s-1.813 0.083-2.592 0.221c-2.295 0.405-2.712 1.254-2.712 2.819v2.067h5.423v0.689h-7.459c-1.576 0-2.956 0.947-3.388 2.75-0.498 2.066-0.52 3.355 0 5.512 0.385 1.606 1.306 2.75 2.882 2.75h1.865v-2.478c0-1.79 1.549-3.369 3.388-3.369zM12.933 8.649c-0.562 0-1.018-0.461-1.018-1.030 0-0.572 0.455-1.037 1.018-1.037 0.56 0 1.018 0.465 1.018 1.037 0 0.57-0.457 1.030-1.018 1.030zM26.826 13.465c-0.389-1.569-1.133-2.75-2.712-2.75h-2.035v2.408c0 1.867-1.583 3.439-3.388 3.439h-5.417c-1.484 0-2.712 1.27-2.712 2.756v5.164c0 1.47 1.278 2.334 2.712 2.756 1.717 0.505 3.363 0.596 5.417 0 1.365-0.395 2.712-1.191 2.712-2.756v-2.067h-5.417v-0.689h8.129c1.576 0 2.163-1.099 2.712-2.75 0.566-1.699 0.542-3.332 0-5.512zM19.033 23.794c0.562 0 1.018 0.461 1.018 1.030 0 0.572-0.456 1.037-1.018 1.037-0.56 0-1.018-0.465-1.018-1.037 0-0.57 0.457-1.030 1.018-1.030z"
+      />
+    </svg>
+  )
+}
+
+export {Python }
diff --git a/src/components/icons/right.tsx b/src/components/icons/right.tsx
new file mode 100644
index 00000000..b4ef0cea
--- /dev/null
+++ b/src/components/icons/right.tsx
@@ -0,0 +1,8 @@
+const RightArrow = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={4}  className="size-3 fill-current">
+        <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+    </svg>
+
+)
+
+export { RightArrow}
\ No newline at end of file
diff --git a/src/components/icons/search.tsx b/src/components/icons/search.tsx
new file mode 100644
index 00000000..33d727e6
--- /dev/null
+++ b/src/components/icons/search.tsx
@@ -0,0 +1,10 @@
+const Search = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="size-4" strokeWidth={1}>
+            <path fillRule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clipRule="evenodd" />
+        </svg>
+
+    )
+}
+
+export { Search }
\ No newline at end of file
diff --git a/src/components/svg/nexy.tsx b/src/components/svg/nexy.tsx
deleted file mode 100644
index f0e871ae..00000000
--- a/src/components/svg/nexy.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-const Nexy = ({className}: {className?: string}) => {
-    return (
-        <svg width="84" height="21" viewBox="0 0 84 21" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-
-            <path d="M0.0559377 20.97V0.0899992H1.22594L15.8059 14.28V0.0899992H16.9159V20.97H0.0559377ZM43.75 21L51.94 10.56L43.75 0.119999H61.48L53.29 10.56L61.48 21H43.75ZM52.6 9.66L59.23 1.23H46L52.6 9.66ZM59.23 19.89L52.6 11.46L46 19.89H59.23Z" fill="#A9FFE9" />
-            <path d="M22.893 0.119999H38.103V5.4H28.353V8.04H36.453V13.05H28.353V15.72H38.103V21H22.893V0.119999ZM65.897 0.119999H83.717L75.377 12.45V21H74.267V12.45L65.897 0.119999Z" fill="#D8FFF5" />
-        </svg>
-    )
-}
-
-export { Nexy };
\ No newline at end of file
diff --git a/src/data/docs/sidebar.ts b/src/data/docs/sidebar.ts
new file mode 100644
index 00000000..76301f36
--- /dev/null
+++ b/src/data/docs/sidebar.ts
@@ -0,0 +1,304 @@
+const GET_STARTED = [
+    {  
+        id :1,
+        title : "Introduction",
+        link : "/introduction"
+    },
+    
+    {
+        id : 2,
+        title : "Installation",
+        link : ""    
+    },
+    {
+        id : 3,
+        title : "Créer un projet",
+        link : "/new_project"
+    },
+    {
+        id : 4,
+        title : "Structure du projet",
+        link:"/structure"
+    }
+];
+
+
+const BASICS = [
+    // {
+    //     id: 1,
+    //     title: "Routing",
+    //     link: "/routing"
+    // },
+    {
+        id: 2,
+        title: "Controllers",
+        link: "/controllers"
+    },
+    // {
+    //     id: 3,
+    //     title: "Middleware",
+    //     link: "/middleware"
+    // },
+    {
+        id: 4,
+        title: "Body Parser",
+        link: "/body-parser"
+    },
+    {
+        id: 5,
+        title: "Request",
+        link: "/request"
+    },
+    {
+        id: 6,
+        title: "Response",
+        link: "/response"
+    },
+    {
+        id: 7,
+        title: "Validation",
+        link: "/validation"
+    },
+    {
+        id: 8,
+        title: "File Upload",
+        link: "/file-upload"
+    },
+    {
+        id: 9,
+        title: "Session",
+        link: "/session"
+    },
+    {
+        id: 10,
+        title: "Cookies",
+        link: "/cookies"
+    },
+    {
+        id: 11,
+        title: "Exception",
+        link: "/exception"
+    }
+];
+
+const DATABASES = [
+    {
+        id: 1,
+        title: "Introduction",
+        link: ""
+    },
+    {
+        id: 2,
+        title: "Prisma",
+        link: "/prisma"
+    },
+    {
+        id: 3,
+        title: "SQLAlchemy",
+        link: "/sql_alchemy"
+    },
+    {
+        id: 4,
+        title: "SQLModel",
+        link: "/sqlmodel"
+    }
+];
+
+const AUTH = [
+    {
+        id: 1,
+        title: "Introduction",
+        link: "/intro"
+    },
+    {
+        id: 2,
+        title: "JWT",
+        link: "/jwt"
+    },
+    {
+        id: 3,
+        title: "OAuth",
+        link: "/oauth"
+    }
+];
+
+const SECURITY = [
+    {
+        id: 1,
+        title: "CORS",
+        link: "/cors"
+    },
+    {
+        id: 2,
+        title: "CSRF Protection",
+        link: "/csrf"
+    },
+    {
+        id: 3,
+        title: "Rate Limiting",
+        link: "/rate-limit"
+    }
+];
+
+const VIEWS = [
+    {
+        id: 1,
+        title: "Templates",
+        link: "/templates"
+    },
+    {
+        id: 2,
+        title: "Static Files",
+        link: "/static"
+    },
+    {
+        id: 3,
+        title: "Jinja2",
+        link: "/jinja"
+    }
+];
+
+const WEBSOCKETS = [
+    {
+        id: 1,
+        title: "Setup",
+        link: "/setup"
+    },
+    {
+        id: 2,
+        title: "Events",
+        link: "/events"
+    },
+    {
+        id: 3,
+        title: "Rooms",
+        link: "/rooms"
+    }
+];
+
+const TESTING = [
+    {
+        id: 1,
+        title: "Unit Tests",
+        link: "/unit"
+    },
+    {
+        id: 2,
+        title: "Integration Tests",
+        link: "/integration"
+    },
+    {
+        id: 3,
+        title: "Mocking",
+        link: "/mocking"
+    }
+];
+
+const CLI = [
+    {
+        id: 1,
+        title: "Introction",
+        link: "/intro"
+    },
+    {
+        id: 2,
+        title: "new",
+        link: "/custom"
+    },
+    {
+        id: 3,
+        title: "serve",
+        link: "/run"
+    }
+];
+
+
+const DEPLOYMENT = [
+    {
+        id: 1,
+        title: "Production",
+        link: "/production"
+    },
+    {
+        id: 2,
+        title: "Docker",
+        link: "/docker"
+    },
+    {
+        id: 3,
+        title: "CI/CD",
+        link: "/cicd"
+    }
+];
+const COMMUNITY = [
+    {
+        id: 1,
+        title: "Guide de contribution",
+        link: "/contributing"
+    }
+]
+// SIDE BAR
+const SIDE_BAR = [
+    {
+        label: "Commencer",
+        link : "/docs/started",
+        children : GET_STARTED
+    },
+    // {
+    //     label: "Concepts",
+    //     link : "/docs/concepts",
+    //     children : CONCEPTS
+    // },
+    {
+        label: "Basics",
+        link : "/docs/basics",
+        children : BASICS
+    },
+    {
+        label: "Database",
+        link : "/docs/database",
+        children : DATABASES
+    },
+    {
+        label: "Authentification",
+        link : "/docs/authentification",
+        children : AUTH
+    },
+    {
+        label: "Security",
+        link : "/docs/security",
+        children : SECURITY
+    },
+    {
+        label: "Views",
+        link : "/docs/views",
+        children : VIEWS
+    },
+    {
+        label: "WebSockets",
+        link : "/docs/websockets",
+        children : WEBSOCKETS
+    },
+    {
+        label: "Testing",
+        link : "/docs/testing",
+        children : TESTING
+    },
+    {
+        label: "CLI",
+        link : "/docs/cli",
+        children : CLI
+    },
+    {
+        label: "Deploiment",
+        link : "/docs/deploy",
+        children : DEPLOYMENT
+    },
+    {
+        label: "communauté",
+        link : "/docs/community",
+        children : COMMUNITY
+    }
+];
+
+export {SIDE_BAR}
diff --git a/src/font/google.ts b/src/font/google.ts
new file mode 100644
index 00000000..cf2b5149
--- /dev/null
+++ b/src/font/google.ts
@@ -0,0 +1,35 @@
+import { Major_Mono_Display, Inter, JetBrains_Mono,DM_Sans } from "next/font/google";
+
+const dm_sans = DM_Sans({
+    subsets: ['latin'],
+    weight: [ '600'],
+})
+
+const dm_sans_300 = DM_Sans({
+  subsets: ["latin"],
+  weight : ["300"]
+})
+
+const dm_sans_400 = DM_Sans({
+  subsets: ["latin"],
+  weight : ["400"]
+})
+
+
+const inter = Inter({
+    variable: "--font-inter",
+    subsets: ["latin"],
+  });
+  
+  const jetbrainsMono = JetBrains_Mono({
+    variable: "--font-jetbrains-mono",
+    subsets: ["latin"],
+  });
+
+  const majorMonoDisplay = Major_Mono_Display({
+    subsets: ["latin"],
+    variable: "--font-major-mono-display",
+    weight: ["400"],
+  })
+
+export { dm_sans,inter,jetbrainsMono,dm_sans_300, dm_sans_400,majorMonoDisplay}
\ No newline at end of file
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
index 9cac3e27..6e55ce3e 100644
--- a/src/mdx-components.tsx
+++ b/src/mdx-components.tsx
@@ -1,26 +1,25 @@
 import type { MDXComponents } from 'mdx/types'
-import { Button } from '@/components/Button'
-import Input from '@/components/Input'
-import { CodeBlock } from '@/components/CodeBlock'
-import CopyButton from '@/components/btnCopier'
-import Badge from '@/components/Badge'
-import Mark from '@/components/Mark'
-import { SideBar , SideBarItem} from '@/components/SideBar'
+import { Code, CodeCard } from './components/(home)/docs/codeCard'
+import { SwitchPage } from './components/(home)/docs/switchPage'
+import { MDXLink } from './components/(home)/docs/mdxLink'
+import { Mark } from './components/(home)/docs/mark'
+import { File, Folder, Structure } from './components/(home)/docs/Structure'
+import { Badge } from './components/(home)/docs/badge'
+
 
 
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...components,
-
-    Button: Button,
-    Input: Input,
-    CodeBlock: CodeBlock,
-    CopyButton: CopyButton,
-    Badge: Badge,
-    Mark: Mark,
-    SideBar: SideBar,
-    SideBarItem: SideBarItem,
-    
+    Code,
+    CodeCard,
+    SwitchPage,
+    MDXLink,
+    Mark,
+    Structure,
+    File,
+    Folder,
+    Badge
   }
 }
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index a2b1931d..00000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-  
-} satisfies Config;
diff --git a/tsconfig.json b/tsconfig.json
index 57a9c590..267a6c4c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/docs/basics/page.mdx"],
   "exclude": ["node_modules"]
 }
diff --git a/version.md b/version.md
new file mode 100644
index 00000000..90f765fe
--- /dev/null
+++ b/version.md
@@ -0,0 +1,19 @@
+v1:
+  - FastAPI
+  - Jinja2 optimisé
+  - ORM 
+  - CLI
+  - Tailwind support
+  - route optimisé
+
+
+V2: 20 janv 2026
+  - v1
+  - Inertia
+  - Better auth for python
+  - Docker support
+  - 
+
+V3 : 20 Juin 2026
+  - V2
+  - Sonic (Frontend in python)