feat(docs): add NavGrid/NavCard components and restructure stage pages

- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
2026-02-01 23:42:12 +08:00
parent a9a5c5c8a7
commit ad95658a11
171 changed files with 16366 additions and 7946 deletions
@@ -1,42 +0,0 @@
-# Appendix
-
-Knowledge base for AI, Frontend, Backend, and General Skills.
-
-## Content Overview
-
-### AI Basics
- [Prompt Engineering](/fr-fr/appendix/prompt-engineering)
- [AI Evolution](/fr-fr/appendix/ai-evolution)
- [LLM Introduction](/fr-fr/appendix/llm-intro)
- [VLM Introduction](/fr-fr/appendix/vlm-intro)
- [AI Image Generation](/fr-fr/appendix/image-gen-intro)
- [AI Audio Models](/fr-fr/appendix/audio-intro)
- [Context Engineering](/fr-fr/appendix/context-engineering)
- [AI Agents](/fr-fr/appendix/agent-intro)
- [AI Capability Dictionary](/fr-fr/appendix/ai-capability-dictionary)
-
-### Frontend Development
- [Web Basics (HTML/CSS/JS)](/fr-fr/appendix/web-basics)
- [Frontend Evolution](/fr-fr/appendix/frontend-evolution)
- [Frontend Performance](/fr-fr/appendix/frontend-performance)
- [Canvas 2D](/fr-fr/appendix/canvas-intro)
- [URL to Browser](/fr-fr/appendix/url-to-browser)
- [Browser DevTools](/fr-fr/appendix/browser-devtools)
-
-### Backend Development
- [Backend Evolution](/fr-fr/appendix/backend-evolution)
- [Backend Languages](/fr-fr/appendix/backend-languages)
- [Database Principles](/fr-fr/appendix/database-intro)
- [Cache Design](/fr-fr/appendix/cache-design)
- [Message Queues](/fr-fr/appendix/queue-design)
- [Authentication](/fr-fr/appendix/auth-design)
- [Tracking Design](/fr-fr/appendix/tracking-design)
- [Operations](/fr-fr/appendix/operations)
-
-### General Skills
- [API Introduction](/fr-fr/appendix/api-intro)
- [IDE Introduction](/fr-fr/appendix/ide-intro)
- [Terminal Introduction](/fr-fr/appendix/terminal-intro)
- [Git Introduction](/fr-fr/appendix/git-intro)
- [Computer Networks](/fr-fr/appendix/computer-networks)
- [Deployment](/fr-fr/appendix/deployment)
@@ -0,0 +1,186 @@
+# Annexe
+
+Bienvenue à la section **Annexe** ! C'est une collection de fondamentaux d'intelligence artificielle et de bases du développement full-stack, servant de bibliothèque de référence importante pendant votre parcours d'apprentissage.
+
+## Catégories de contenu
+
+### Fondamentaux de l'IA
+
+Comprendre les concepts clés, l'histoire du développement et les principes techniques de pointe de l'intelligence artificielle :
+<NavGrid>
+  <NavCard
+    href="/fr-fr/appendix/prompt-engineering/"
+    title="Ingénierie de prompts"
+    description="Maîtriser l'art du dialogue efficace avec l'IA pour libérer le potentiel des grands modèles"
+  />
+  <NavCard
+    href="/fr-fr/appendix/ai-evolution"
+    title="Histoire de l'évolution de l'IA"
+    description="Passer en revue les jalons clés du développement de l'IA et comprendre la trajectoire de l'évolution technologique"
+  />
+  <NavCard
+    href="/fr-fr/appendix/llm-intro"
+    title="Grands modèles de langage"
+    description="Explication profonde mais accessible de comment fonctionnent les Grands Modèles de Langage (LLM) et leurs applications"
+  />
+  <NavCard
+    href="/fr-fr/appendix/vlm-intro"
+    title="Grands modèles multimodaux"
+    description="Explorer des modèles avancés capables de traiter plusieurs modalités de données comme les images et l'audio"
+  />
+  <NavCard
+    href="/fr-fr/appendix/image-gen-intro"
+    title="Principes de génération d'images par IA"
+    description="Révéler la logique sous-jacente et la mise en œuvre technique de la génération d'images par IA"
+  />
+  <NavCard
+    href="/fr-fr/appendix/audio-intro"
+    title="Modèles audio IA"
+    description="Comprendre les applications de l'IA dans la synthèse vocale, la reconnaissance et la génération de musique"
+  />
+  <NavCard
+    href="/fr-fr/appendix/context-engineering"
+    title="Ingénierie de contexte"
+    description="Apprendre comment optimiser la gestion du contexte pour améliorer la cohérence à long terme des tâches IA"
+  />
+  <NavCard
+    href="/fr-fr/appendix/agent-intro"
+    title="Intelligence des agents"
+    description="Explorer les architectures d'agents IA avec capacités de prise de décision et d'exécution autonomes"
+  />
+  <NavCard
+    href="/fr-fr/appendix/ai-capability-dictionary"
+    title="Dictionnaire des capacités IA"
+    description="Un manuel de référence rapide pour les termes couramment utilisés et les concepts clés dans le domaine de l'IA"
+  />
+</NavGrid>
+
+
+### Fondamentaux du Frontend
+
+Consolider la base technique du développement frontend :
+<NavGrid>
+  <NavCard
+    href="/fr-fr/appendix/web-basics"
+    title="Fondamentaux HTML/CSS/JS"
+    description="Les trois piliers de la construction de pages web, essentiel pour les débutants en développement frontend"
+  />
+  <NavCard
+    href="/fr-fr/appendix/frontend-evolution"
+    title="Histoire de l'évolution du frontend"
+    description="Comprendre l'évolution des piles technologiques frontend et saisir les tendances de développement technologique"
+  />
+  <NavCard
+    href="/fr-fr/appendix/frontend-performance"
+    title="Optimisation des performances frontend"
+    description="Apprendre les stratégies clés pour améliorer la vitesse de chargement des pages web et la fluidité des interactions"
+  />
+  <NavCard
+    href="/fr-fr/appendix/canvas-intro"
+    title="Introduction à Canvas 2D"
+    description="Maîtriser l'API de dessin Canvas pour réaliser des effets graphiques et d'animation impressionnants"
+  />
+  <NavCard
+    href="/fr-fr/appendix/url-to-browser"
+    title="De l'URL à l'affichage dans le navigateur"
+    description="Analyse complète de la chaîne du processus complet de rendu de pages par le navigateur"
+  />
+  <NavCard
+    href="/fr-fr/appendix/browser-devtools/"
+    title="Outils de développement du navigateur"
+    description="Utiliser les outils de développement de manière experte pour localiser et résoudre efficacement les problèmes frontend"
+  />
+</NavGrid>
+
+
+### Fondamentaux du Backend
+
+Maîtriser les concepts clés du développement backend :
+<NavGrid>
+  <NavCard
+    href="/fr-fr/appendix/backend-evolution"
+    title="Histoire de l'évolution du backend"
+    description="Du monolithique aux microservices, explorer l'évolution de l'architecture backend"
+  />
+  <NavCard
+    href="/fr-fr/appendix/backend-languages"
+    title="Langages de programmation backend"
+    description="Comparer les caractéristiques et scénarios applicables des langages backend dominants pour choisir la meilleure pile technologique"
+  />
+  <NavCard
+    href="/fr-fr/appendix/database-intro"
+    title="Principes des bases de données"
+    description="Comprendre les principes clés des bases de données et maîtriser l'art du stockage et de la récupération de données"
+  />
+  <NavCard
+    href="/fr-fr/appendix/cache-design"
+    title="Conception du cache système"
+    description="Apprendre les stratégies de mise en cache pour améliorer les capacités de traitement à haute concurrence du système"
+  />
+  <NavCard
+    href="/fr-fr/appendix/queue-design"
+    title="Conception des files d'attente de messages"
+    description="Maîtriser le rôle clé des files d'attente de messages dans le découplage et l'écrêtage des pics"
+  />
+  <NavCard
+    href="/fr-fr/appendix/auth-design"
+    title="Principes et pratique d'authentification"
+    description="Construire des systèmes sécurisés d'authentification d'identité et de gestion des permissions"
+  />
+  <NavCard
+    href="/fr-fr/appendix/tracking-design"
+    title="Conception du suivi"
+    description="Concevoir scientifiquement le suivi des données pour fournir un support de données pour les décisions produit"
+  />
+  <NavCard
+    href="/fr-fr/appendix/operations"
+    title="Opérations en ligne"
+    description="Maîtriser les compétences opérationnelles pour le déploiement, la surveillance et le dépannage du système"
+  />
+</NavGrid>
+
+
+### Compétences générales
+
+Connaissances de base du développement logiciel :
+<NavGrid>
+  <NavCard
+    href="/fr-fr/appendix/api-intro"
+    title="Introduction aux API"
+    description="Connaissances de base de la conception et du développement d'interfaces API"
+  />
+  <NavCard
+    href="/fr-fr/appendix/ide-intro/"
+    title="Principes des IDE"
+    description="Comprendre le mécanisme de fonctionnement interne des Environnements de Développement Intégrés (IDE)"
+  />
+  <NavCard
+    href="/fr-fr/appendix/terminal-intro"
+    title="Introduction au terminal"
+    description="Maîtriser les opérations de base du terminal de ligne de commande pour améliorer l'efficacité du développement"
+  />
+  <NavCard
+    href="/fr-fr/appendix/git-intro"
+    title="Introduction détaillée à Git"
+    description="Comprendre en profondeur les principes de contrôle de version de Git et l'utilisation avancée"
+  />
+  <NavCard
+    href="/fr-fr/appendix/computer-networks"
+    title="Réseaux informatiques"
+    description="Connaissances de base des protocoles réseau et des principes de communication"
+  />
+  <NavCard
+    href="/fr-fr/appendix/deployment"
+    title="Déploiement et lancement"
+    description="Processus complet et meilleures pratiques pour le déploiement et le lancement d'applications"
+  />
+</NavGrid>
+
+
+## Suggestions d'utilisation
+
+- Utilisez comme matériel de référence pendant le processus d'apprentissage, consultez selon les besoins
+- Lorsque vous rencontrez des concepts techniques familiers, cherchez d'abord des explications ici
+- Il est recommandé de le lire une fois pour établir un système de connaissances complet
+
+C'est votre trésor de connaissances techniques, toujours le bienvenu pour consulter !
@@ -1,19 +0,0 @@
-# AI Product Manager
-
-Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
-
-## Stage Overview
-
-### Getting Started
-Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
-
- [1. Learning Map](/fr-fr/stage-0/0.1-learning-map/)
- [2. If you can speak, you can code](/fr-fr/stage-0/0.2-ai-capabilities-through-games/)
-
-### Product Manager
-Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
-
- [1. Introduction to AI IDE](/fr-fr/stage-1/1.1-introduction-to-ai-ide/)
- [2. Building a Prototype](/fr-fr/stage-1/1.2-building-prototype/)
- [3. Integrating AI Capabilities](/fr-fr/stage-1/1.3-integrating-ai-capabilities/)
- [4. Complete Project Practice](/fr-fr/stage-1/1.4-complete-project-practice/)
@@ -0,0 +1,66 @@
+# Débutant et Prototype de Produit
+
+Bienvenue à l'étape **Chef de Produit IA** ! C'est le point de départ du tutoriel Easy-Vibe, conçu pour les apprenants sans expérience en programmation.
+
+## Ce que vous allez apprendre
+
+Dans cette étape, vous commencerez de zéro et maîtriserez le flux de travail Vibe Coding pour devenir un super individu capable de concevoir des produits de manière indépendante.
+
+### Démarrage
+
+Convient aux produits, opérations et profils non techniques. Comprendre la logique de programmation IA à travers des jeux et gagner en confiance :
+<NavGrid>
+  <NavCard
+    href="/fr-fr/stage-0/0.1-learning-map/"
+    title="Carte d'apprentissage"
+    description="Comprendre tout le parcours d'apprentissage et clarifier les objectifs et résultats de chaque étape"
+  />
+  <NavCard
+    href="/fr-fr/stage-0/0.2-ai-capabilities-through-games/"
+    title="Ère de l'IA : si vous pouvez parler, vous pouvez programmer"
+    description="Découvrir le charme de la programmation IA à travers des jeux comme Snake, surmontant la peur du codage"
+  />
+</NavGrid>
+
+
+### Chef de produit
+
+Maîtriser le flux de travail Vibe Coding. Apprendre à décomposer les exigences et compléter de manière indépendante des prototypes d'applications web haute fidélité :
+<NavGrid>
+  <NavCard
+    href="/fr-fr/stage-1/1.1-introduction-to-ai-ide/"
+    title="Introduction aux outils IDE IA"
+    description="Découvrir les outils de programmation IA actuels et choisir le meilleur partenaire de développement pour vous"
+  />
+  <NavCard
+    href="/fr-fr/stage-1/1.2-building-prototype/"
+    title="Création de prototypes"
+    description="Apprendre comment transformer rapidement des idées de produits en prototypes visuels pour des essais et erreurs à faible coût"
+  />
+  <NavCard
+    href="/fr-fr/stage-1/1.3-integrating-ai-capabilities/"
+    title="Intégration des capacités IA"
+    description="Intégrer des API IA simples pour doter votre prototype d'intelligence"
+  />
+  <NavCard
+    href="/fr-fr/stage-1/1.4-complete-project-practice/"
+    title="Pratique de projets complets"
+    description="Appliquer de manière complète ce que vous avez appris pour compléter le développement d'un prototype de produit complet de 0 à 1"
+  />
+</NavGrid>
+
+
+## Pour qui c'est
+
+- Chefs de produit et personnel des opérations sans expérience en programmation
+- Entrepreneurs qui veulent valider rapidement des idées
+- Personnes non techniques intéressées par la programmation IA
+- Designers cherchant à améliorer leurs compétences en prototypage
+
+## Parcours d'apprentissage
+
+```
+Démarrage → Fondamentaux de gestion de produit → Intégration des capacités IA → Pratique de projets complets
+```
+
+Prêt à commencer votre voyage de programmation IA ? Cliquez sur la navigation de gauche pour commencer à apprendre !
@@ -1,37 +0,0 @@
-# Full-Stack Development
-
-Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
-
-## Stage Overview
-
-### Frontend Development
-Master modern frontend development with component libraries and design tools.
-
- [Frontend 0: Lovart Assets](/fr-fr/stage-2/frontend/2.0-lovart-assets/)
- [Frontend 1: Figma & MasterGo](/fr-fr/stage-2/frontend/2.1-figma-mastergo/)
- [Frontend 2: UI Design](/fr-fr/stage-2/frontend/2.2-ui-design/)
- [Frontend 3: Multi-Product UI](/fr-fr/stage-2/frontend/2.3-multi-product-ui/)
- [Frontend 4: Hogwarts Portraits](/fr-fr/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
-
-### Backend & Full-Stack
-Learn API design, database management, and deployment strategies.
-
- [Backend 1: What is API](/fr-fr/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
- [Backend 2: Database & Supabase](/fr-fr/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
- [Backend 3: AI Interface Code](/fr-fr/stage-2/backend/2.3-ai-interface-code/)
- [Backend 4: Git Workflow](/fr-fr/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
- [Backend 5: Zeabur Deployment](/fr-fr/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
- [Backend 6: Modern CLI Tools](/fr-fr/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
- [Backend 7: Stripe Payment](/fr-fr/stage-2/backend/2.7-stripe-payment/)
-
-### Assignments
-Practical projects to apply your full-stack skills.
-
- [Assignment 1: Full-Stack App](/fr-fr/stage-2/assignments/2.1-fullstack-app/)
- [Assignment 2: Modern Frontend + Trae](/fr-fr/stage-2/assignments/2.2-modern-frontend-trae/)
-
-### AI Capabilities
-Integrate AI features like knowledge bases and multimodal APIs.
-
- [AI 1: Dify & Knowledge Base](/fr-fr/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
- [AI 2: Multimodal API](/fr-fr/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)
@@ -0,0 +1,126 @@
+# Développement Full-Stack
+
+Bienvenue à l'étape **Développement Full-Stack** ! Ici, vous approfondirez le développement full-stack, maîtrisant la componentisation frontend, la conception de bases de données, le développement d'API backend et le déploiement.
+
+## Ce que vous allez apprendre
+
+### Développement Frontend
+
+Maîtriser le développement frontend moderne et apprendre à utiliser des bibliothèques de composants et des outils de conception :
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Frontend 0 : Utilisation de Lovart pour les ressources"
+    description="Apprendre comment utiliser des outils IA comme Lovart pour générer rapidement des ressources de jeu de haute qualité et des ressources UI"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 1 : Introduction à Figma et MasterGo"
+    description="Maîtriser les opérations de base des outils professionnels de conception UI et le flux de travail de la conception au code"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 2 : Construction de votre première application moderne - Conception UI"
+    description="Concevoir une interface d'application web moderne à partir de zéro, en pratiquant les principes de conception UI"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 3 : Directives de conception UI et UI multi-produits"
+    description="Apprendre les directives de conception UI dominantes pour améliorer la cohérence et l'esthétique de la conception de produits"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 4 : Construisons des portraits de Poudlard"
+    description="Projet pratique : Construire une application de portraits de Poudlard interactive en utilisant des images générées par IA"
+  />
+</NavGrid>
+
+
+### Backend et Full-Stack
+
+Apprendre la conception d'API, la gestion de bases de données et les stratégies de déploiement d'applications :
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Backend 1 : Qu'est-ce qu'une API"
+    description="Comprendre le concept central des API, le pont entre frontend et backend"
+  />
+  <NavCard
+    href="#"
+    title="Backend 2 : De la base de données à Supabase"
+    description="Maîtriser les bases des bases de données relationnelles et apprendre à utiliser Supabase, une plateforme BaaS moderne"
+  />
+  <NavCard
+    href="#"
+    title="Backend 3 : Code d'interface assisté par IA et documentation"
+    description="Utiliser l'IA pour aider à générer du code d'interface backend et de la documentation API standard"
+  />
+  <NavCard
+    href="#"
+    title="Backend 4 : Flux de travail Git"
+    description="Maîtriser les opérations centrales et les flux de travail de collaboration du système de contrôle de version Git"
+  />
+  <NavCard
+    href="#"
+    title="Backend 5 : Déploiement Zeabur"
+    description="Apprendre à déployer rapidement vos applications full-stack dans le cloud en utilisant Zeabur"
+  />
+  <NavCard
+    href="#"
+    title="Backend 6 : Outils de développement CLI modernes"
+    description="Explorer les outils CLI modernes pour améliorer l'expérience de développement dans les environnements de ligne de commande"
+  />
+  <NavCard
+    href="#"
+    title="Backend 7 : Intégration des systèmes de paiement Stripe"
+    description="Pratique : Intégrer la fonctionnalité de paiement Stripe dans votre application pour la monétisation"
+  />
+</NavGrid>
+
+
+### Devoirs
+
+Consolider vos compétences de développement full-stack à travers des projets pratiques :
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Devoir 1 : Construction de votre première application moderne - Full-Stack"
+    description="Appliquer de manière complète ce que vous avez appris pour compléter de manière indépendante une application full-stack entièrement fonctionnelle"
+  />
+  <NavCard
+    href="#"
+    title="Devoir 2 : Bibliothèque de composants frontend moderne + Trae"
+    description="Utiliser des bibliothèques de composants modernes avec Trae IDE pour construire efficacement des interfaces frontend complexes"
+  />
+</NavGrid>
+
+
+### Extension des capacités IA
+<NavGrid>
+  <NavCard
+    href="#"
+    title="IA 1 : Introduction à Dify et intégration de base de connaissances"
+    description="Apprendre à construire des applications IA en utilisant Dify et intégrer des bases de connaissances privées"
+  />
+  <NavCard
+    href="#"
+    title="IA 2 : Recherche de dictionnaire IA et intégration d'API multimodales"
+    description="Explorer plus de capacités IA, en intégrant des API multimodales comme la vision et la voix"
+  />
+</NavGrid>
+
+
+## Pour qui c'est
+
+- Développeurs avec une certaine base de programmation qui veulent apprendre systématiquement le développement full-stack
+- Apprenants qui souhaitent passer de chef de produit à ingénieur full-stack
+- Développeurs juniors à intermédiaires qui veulent maîtriser les outils et flux de travail de développement modernes
+- Entrepreneurs qui veulent développer des produits complets de manière indépendante
+
+## Prérequis
+
+- Compléter l'étape "Débutant et prototype de produit", ou avoir des connaissances de base équivalentes
+- Comprendre les concepts de base de HTML/CSS/JavaScript
+- Avoir des connaissances préliminaires sur les outils de programmation IA
+
+Prêt à approfondir le développement full-stack ? Cliquez sur la navigation de gauche pour commencer à apprendre !
@@ -1,30 +0,0 @@
-# Advanced Development
-
-Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
-
-## Stage Overview
-
-### Core Skills
-Advanced AI coding skills and long-running task management.
-
- [Advanced 1: MCP & ClaudeCode Skills](/fr-fr/stage-3/core-skills/3.1-mcp-claudecode-skills/)
- [Advanced 2: Long-running Tasks](/fr-fr/stage-3/core-skills/3.2-long-running-tasks/)
-
-### Cross-Platform Development
-Build apps for WeChat, Android, and iOS.
-
- [Advanced 3: WeChat Mini-Program](/fr-fr/stage-3/cross-platform/3.3-wechat-miniprogram/)
- [Advanced 4: WeChat Mini-Program (Backend)](/fr-fr/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
- [Advanced 5: Android App](/fr-fr/stage-3/cross-platform/3.5-android-app/)
- [Advanced 6: iOS App](/fr-fr/stage-3/cross-platform/3.6-ios-app/)
-
-### Personal Brand
-Build your personal website and blog.
-
- [Advanced 7: Personal Website & Blog](/fr-fr/stage-3/personal-brand/3.7-personal-website-blog/)
-
-### AI Advanced
-Deep dive into RAG and advanced agent workflows.
-
- [Advanced AI 1: What is RAG](/fr-fr/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
- [Advanced AI 2: Advanced RAG with LangGraph](/fr-fr/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)
@@ -0,0 +1,93 @@
+# Développement Avancé
+
+Bienvenue à l'étape **Développement Avancé** ! Ici, vous construirez des applications multiplateformes complexes, maîtriserez le développement de mini-programmes WeChat et vous défier avec le développement d'applications natives IA plus avancées.
+
+## Ce que vous allez apprendre
+
+### Compétences clés
+
+Maîtriser en profondeur le protocole MCP et les techniques avancées de Claude Code pour améliorer l'efficacité du développement :
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Avancé 1 : Compétences MCP et ClaudeCode"
+    description="Maîtriser Model Context Protocol (MCP) pour étendre les capacités des outils de programmation IA"
+  />
+  <NavCard
+    href="#"
+    title="Avancé 2 : Tâches de longue durée"
+    description="Apprendre comment faire en sorte que les outils de codage IA gèrent des tâches complexes de longue durée"
+  />
+</NavGrid>
+
+
+### Développement multiplateforme
+
+Construire des mini-programmes WeChat, des applications Android et iOS pour réaliser une couverture multiplateforme :
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Avancé 3 : Construction de mini-programmes WeChat"
+    description="Développer des mini-programmes WeChat à partir de zéro, en maîtrisant les flux de travail de développement de mini-programmes"
+  />
+  <NavCard
+    href="#"
+    title="Avancé 4 : Mini-programmes WeChat avec backend"
+    description="Construire des applications complètes de mini-programmes WeChat avec support backend"
+  />
+  <NavCard
+    href="#"
+    title="Avancé 5 : Construction d'applications Android"
+    description="Utiliser des frameworks multiplateformes modernes pour construire des applications natives Android"
+  />
+  <NavCard
+    href="#"
+    title="Avancé 6 : Construction d'applications iOS"
+    description="Développer et publier des applications iOS, en maîtrisant les normes de développement de l'écosystème iOS"
+  />
+</NavGrid>
+
+
+### Marque personnelle
+
+Construire votre propre site web personnel et blog technique pour établir une influence personnelle :
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Avancé 7 : Construction de votre site web personnel et blog académique"
+    description="Utiliser des piles technologiques modernes pour construire des blogs personnels performants et visuellement attrayants"
+  />
+</NavGrid>
+
+
+### Capacités IA avancées
+
+Explorer des technologies IA avancées comme RAG et LangGraph pour construire des flux de travail complexes d'applications IA :
+<NavGrid>
+  <NavCard
+    href="#"
+    title="IA avancée 1 : Qu'est-ce que RAG et comment ça fonctionne"
+    description="Comprendre en profondeur les principes de Retrieval-Augmented Generation (RAG) et sa valeur dans les applications IA"
+  />
+  <NavCard
+    href="#"
+    title="IA avancée 2 : RAG avancé et orchestration de flux de travail - LangGraph"
+    description="Apprendre à utiliser LangGraph pour orchestrer des flux de travail IA complexes et construire des systèmes RAG avancés"
+  />
+</NavGrid>
+
+
+## Pour qui c'est
+
+- Développeurs avancés avec expérience en développement full-stack qui veulent défier des applications plus complexes
+- Ingénieurs qui veulent maîtriser les technologies de développement multiplateforme
+- Explorateurs qui veulent comprendre en profondeur le développement d'applications natives IA
+- Blogueurs techniques qui veulent construire leur marque technique personnelle
+
+## Prérequis
+
+- Compléter l'étape "Développement Full-Stack", ou avoir une expérience en développement full-stack
+- Familiarité avec les frameworks frontend (comme React/Vue) et le développement backend
+- Compréhension des concepts de base de l'IA et utilisation des API
+
+Prêt à défier le développement avancé ? Cliquez sur la navigation de gauche pour commencer à apprendre !