From f5adedf77bab5bc5a6256d011f9a2218ea64051b Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Mon, 26 Jan 2026 13:00:54 +0800
Subject: [PATCH] feat(docs): refactor homepage layouts and add HomeFeatures
 component

- Replace verbose inline HTML/CSS in multiple language homepages with reusable HomeFeatures component
- Simplify hero section taglines and action links across all language versions
- Add iOS/Apple style enhancements including glassmorphism effects and refined button animations
- Register HomeFeatures component globally in Vue app for consistent usage
- Remove redundant translation banners and GitHub star sections to streamline content
---
 docs/.vitepress/theme/Layout.vue              |    4 +-
 .../theme/components/HomeFeatures.vue         | 1197 +++++++++++++++++
 docs/.vitepress/theme/index.js                |    2 +
 docs/.vitepress/theme/style.css               |   79 ++
 docs/ar-sa/index.md                           |   96 +-
 docs/de-de/index.md                           |   98 +-
 docs/en-us/index.md                           |  253 +---
 docs/es-es/index.md                           |   98 +-
 docs/fr-fr/index.md                           |   98 +-
 docs/ja-jp/index.md                           |  237 +---
 docs/ko-kr/index.md                           |   96 +-
 docs/vi-vn/index.md                           |   98 +-
 docs/zh-cn/index.md                           |  263 +---
 docs/zh-tw/index.md                           |   96 +-
 14 files changed, 1359 insertions(+), 1356 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/HomeFeatures.vue

diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 92798d5..f81d486 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -195,12 +195,12 @@ watch(lineHeight, (next) => {
     </template>
     <template #home-hero-info-after>
       <div
-        v-if="frontmatter.layout === 'home' && frontmatter.hero?.tagline"
+        v-if="frontmatter.layout === 'home' && (frontmatter.hero?.tagline || frontmatter.hero?.typingTagline)"
         class="vp-typed-tagline"
       >
         <ClientOnly>
           <TextType
-            :text="frontmatter.hero.tagline"
+            :text="frontmatter.hero.typingTagline || frontmatter.hero.tagline"
             v-bind="homeTaglineTyping"
             :loop="true"
           />
diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue
new file mode 100644
index 0000000..2da6c9e
--- /dev/null
+++ b/docs/.vitepress/theme/components/HomeFeatures.vue
@@ -0,0 +1,1197 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter, withBase, useData } from 'vitepress'
+import GitHubStars from './GitHubStars.vue'
+
+const router = useRouter()
+const { site, page, lang } = useData()
+const activeTab = ref('home')
+const showLangMenu = ref(false)
+
+const i18n = {
+  'zh-cn': {
+    nav: {
+      title: 'Easy-Vibe 教程',
+      home: '首页',
+      pm: '产品经理',
+      junior: '初中级开发',
+      senior: '高级开发',
+      appendix: '附录',
+      start: '开始学习'
+    },
+    stage1: {
+      cat: 'Stage 1 · 产品经理',
+      title: '零基础入门，<br><span class="highlight">做自己的产品经理。</span>',
+      sub: '不需要计算机专业背景，只要会说话，就能通过 AI 将你的创意转化为高保真的 Web 原型。',
+      cards: [
+        { title: 'AI 产品经理', desc: '从想法到高保真原型，你只需要会说话。', sub: '适合非技术背景', link: '/zh-cn/stage-0/0.1-learning-map/' },
+        { title: '游戏化入门', desc: '通过制作贪吃蛇、俄罗斯方块，打破对代码的恐惧。', sub: '边玩边学', link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/' },
+        { title: 'Vibe Coding', desc: '掌握 AI 时代的编程核心：提示词工程与上下文管理。', sub: '核心心法', link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · 初中级开发',
+      title: '深入全栈，<br><span class="highlight">构建真实应用。</span>',
+      sub: '掌握前后端分离架构，亲手打造包含数据库、API 和复杂交互的完整商业级项目。',
+      cards: [
+        { title: '全栈开发', headline: '独立完成前后端。', desc: '从数据库设计到 API 开发，再到前端组件化，完整构建一个现代化 Web 应用。', link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/' },
+        { title: '真实项目', headline: '拒绝玩具代码。', desc: '深入理解用户鉴权、数据存储、文件上传等核心业务逻辑。', link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase' },
+        { title: '部署上线', headline: '让世界看到你的作品。', desc: '学习服务器配置、域名解析和自动化部署，打通产品落地的最后一公里。', link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · 高级开发',
+      title: '高阶实战，<br><span class="highlight">挑战无限可能。</span>',
+      sub: '进军移动端小程序与 AI 原生应用开发，探索大模型时代的无限机遇。',
+      cards: [
+        { title: '微信小程序', desc: '跨平台开发，触达亿级用户。', link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/' },
+        { title: 'AI 原生应用', desc: 'RAG、Agent，探索 LLM 的无限可能。', link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future' },
+        { title: '复杂业务架构', desc: '应对高并发、高可用场景的架构设计。', link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/' },
+        { title: '个人品牌', desc: '构建属于自己的个人网页与学术博客。', link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/' }
+      ]
+    },
+    footer: {
+      title: '准备好开始了吗？',
+      desc: 'Easy-Vibe，让编程像呼吸一样自然。',
+      btn: '立即开启'
+    }
+  },
+  'en-us': {
+    nav: {
+      title: 'Easy-Vibe Tutorial',
+      home: 'Home',
+      pm: 'Product Manager',
+      junior: 'Junior Dev',
+      senior: 'Senior Dev',
+      appendix: 'Appendix',
+      start: 'Start Learning'
+    },
+    stage1: {
+      cat: 'Stage 1 · Product Manager',
+      title: 'Zero to Hero, <br><span class="highlight">Be Your Own PM.</span>',
+      sub: 'No CS background needed. Just speak your idea, and AI will turn it into high-fidelity web prototypes.',
+      cards: [
+        { title: 'AI Product Manager', desc: 'From idea to prototype, just by speaking.', sub: 'Non-tech friendly', link: '/en-us/stage-0/' },
+        { title: 'Gamified Intro', desc: 'Build Snake, Tetris, and break the fear of code.', sub: 'Learn by playing', link: '/en-us/stage-0/' },
+        { title: 'Vibe Coding', desc: 'Master the core of AI coding: Prompt Engineering & Context.', sub: 'Core Mindset', link: '/en-us/stage-0/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · Junior/Mid Dev',
+      title: 'Go Full Stack, <br><span class="highlight">Build Real Apps.</span>',
+      sub: 'Master frontend-backend separation. Build commercial-grade projects with DB, API, and complex interactions.',
+      cards: [
+        { title: 'Full Stack', headline: 'Frontend & Backend.', desc: 'From DB design to API and components, build a modern web app completely.', link: '/en-us/stage-2/' },
+        { title: 'Real Projects', headline: 'No Toy Code.', desc: 'Deep dive into Auth, Storage, File Uploads and core business logic.', link: '/en-us/stage-2/' },
+        { title: 'Deployment', headline: 'Show the World.', desc: 'Server config, DNS, CI/CD. The last mile of product delivery.', link: '/en-us/stage-2/' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · Senior Dev',
+      title: 'Advanced Practice, <br><span class="highlight">Infinite Possibilities.</span>',
+      sub: 'Mobile Mini-programs & AI Native Apps. Explore the era of LLMs.',
+      cards: [
+        { title: 'WeChat Mini-app', desc: 'Cross-platform dev, reaching millions of users.', link: '/en-us/stage-3/' },
+        { title: 'AI Native Apps', desc: 'RAG, Agent. Explore the limits of LLMs.', link: '/en-us/stage-3/' },
+        { title: 'Complex Arch', desc: 'High concurrency, High availability architecture design.', link: '/en-us/stage-3/' },
+        { title: 'Personal Brand', desc: 'Build your own website and academic blog.', link: '/en-us/stage-3/' }
+      ]
+    },
+    footer: {
+      title: 'Ready to start?',
+      desc: 'Easy-Vibe, make coding as natural as breathing.',
+      btn: 'Start Now'
+    }
+  },
+  'ja-jp': {
+    nav: {
+      title: 'Easy-Vibe チュートリアル',
+      home: 'ホーム',
+      pm: 'プロダクトマネージャー',
+      junior: '初中級開発者',
+      senior: '上級開発者',
+      appendix: '付録',
+      start: '学習を開始'
+    },
+    stage1: {
+      cat: 'Stage 1 · プロダクトマネージャー',
+      title: 'ゼロからの入門、<br><span class="highlight">自分だけのPMになる。</span>',
+      sub: 'CSの背景は不要。アイデアを話すだけで、AIが高精度のWebプロトタイプに変換します。',
+      cards: [
+        { title: 'AI PM', desc: 'アイデアからプロトタイプまで、話すだけ。', sub: '非技術者向け', link: '/ja-jp/stage-0/' },
+        { title: 'ゲーム化入門', desc: 'スネークゲームやテトリスを作って、コードへの恐怖を克服。', sub: '遊びながら学ぶ', link: '/ja-jp/stage-0/' },
+        { title: 'Vibe Coding', desc: 'AI時代のコーディングの核心：プロンプトエンジニアリングとコンテキスト管理。', sub: '核心的な考え方', link: '/ja-jp/stage-0/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · 初中級開発者',
+      title: 'フルスタックへ、<br><span class="highlight">リアルなアプリを構築。</span>',
+      sub: 'フロントエンドとバックエンドの分離をマスター。DB、API、複雑なインタラクションを含む商用レベルのプロジェクトを構築。',
+      cards: [
+        { title: 'フルスタック', headline: 'フロント＆バックエンド。', desc: 'DB設計からAPI、コンポーネントまで、現代的なWebアプリを完全に構築。', link: '/ja-jp/stage-2/' },
+        { title: 'リアルプロジェクト', headline: 'おもちゃのコードは卒業。', desc: '認証、ストレージ、ファイルアップロード、コアビジネスロジックを深く掘り下げる。', link: '/ja-jp/stage-2/' },
+        { title: 'デプロイ', headline: '世界に公開。', desc: 'サーバー設定、DNS、CI/CD。製品リリースのラストワンマイル。', link: '/ja-jp/stage-2/' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · 上級開発者',
+      title: '高度な実践、<br><span class="highlight">無限の可能性。</span>',
+      sub: 'モバイルミニプログラムとAIネイティブアプリ。LLM時代の可能性を探求。',
+      cards: [
+        { title: 'WeChatミニアプリ', desc: 'クロスプラットフォーム開発、数億人のユーザーに到達。', link: '/ja-jp/stage-3/' },
+        { title: 'AIネイティブアプリ', desc: 'RAG、Agent。LLMの限界を探る。', link: '/ja-jp/stage-3/' },
+        { title: '複雑なアーキテクチャ', desc: '高並行性、高可用性のアーキテクチャ設計。', link: '/ja-jp/stage-3/' },
+        { title: 'パーソナルブランド', desc: '自分のウェブサイトと学術ブログを構築。', link: '/ja-jp/stage-3/' }
+      ]
+    },
+    footer: {
+      title: '準備はいいですか？',
+      desc: 'Easy-Vibe、呼吸するように自然にコーディング。',
+      btn: '今すぐ開始'
+    }
+  },
+  'zh-tw': {
+    nav: {
+      title: 'Easy-Vibe 教學',
+      home: '首頁',
+      pm: '產品經理',
+      junior: '初中級開發',
+      senior: '高級開發',
+      appendix: '附錄',
+      start: '開始學習'
+    },
+    stage1: {
+      cat: 'Stage 1 · 產品經理',
+      title: '零基礎入門，<br><span class="highlight">做自己的產品經理。</span>',
+      sub: '不需要計算機專業背景，只要會說話，就能通過 AI 將你的創意轉化為高保真的 Web 原型。',
+      cards: [
+        { title: 'AI 產品經理', desc: '從想法到高保真原型，你只需要會說話。', sub: '適合非技術背景', link: '/zh-tw/stage-0/' },
+        { title: '遊戲化入門', desc: '通過製作貪吃蛇、俄羅斯方塊，打破對代碼的恐懼。', sub: '邊玩邊學', link: '/zh-tw/stage-0/' },
+        { title: 'Vibe Coding', desc: '掌握 AI 時代的編程核心：提示詞工程與上下文管理。', sub: '核心心法', link: '/zh-tw/stage-0/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · 初中級開發',
+      title: '深入全棧，<br><span class="highlight">構建真實應用。</span>',
+      sub: '掌握前後端分離架構，親手打造包含數據庫、API 和複雜交互的完整商業級項目。',
+      cards: [
+        { title: '全棧開發', headline: '獨立完成前後端。', desc: '從數據庫設計到 API 開發，再到前端組件化，完整構建一個現代化 Web 應用。', link: '/zh-tw/stage-2/' },
+        { title: '真實項目', headline: '拒絕玩具代碼。', desc: '深入理解用戶鑑權、數據存儲、文件上傳等核心業務邏輯。', link: '/zh-tw/stage-2/' },
+        { title: '部署上線', headline: '讓世界看到你的作品。', desc: '學習服務器配置、域名解析和自動化部署，打通產品落地的最後一公里。', link: '/zh-tw/stage-2/' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · 高級開發',
+      title: '高階實戰，<br><span class="highlight">挑戰無限可能。</span>',
+      sub: '進軍移動端小程序與 AI 原生應用開發，探索大模型時代的無限機遇。',
+      cards: [
+        { title: '微信小程序', desc: '跨平台開發，觸達億級用戶。', link: '/zh-tw/stage-3/' },
+        { title: 'AI 原生應用', desc: 'RAG、Agent，探索 LLM 的無限可能。', link: '/zh-tw/stage-3/' },
+        { title: '複雜業務架構', desc: '應對高並發、高可用場景的架構設計。', link: '/zh-tw/stage-3/' },
+        { title: '個人品牌', desc: '構建屬於自己的個人網頁與學術博客。', link: '/zh-tw/stage-3/' }
+      ]
+    },
+    footer: {
+      title: '準備好開始了嗎？',
+      desc: 'Easy-Vibe，讓編程像呼吸一樣自然。',
+      btn: '立即開啟'
+    }
+  },
+  'ko-kr': {
+    nav: {
+      title: 'Easy-Vibe 튜토리얼',
+      home: '홈',
+      pm: '제품 관리자',
+      junior: '초/중급 개발자',
+      senior: '고급 개발자',
+      appendix: '부록',
+      start: '학습 시작'
+    },
+    stage1: {
+      cat: 'Stage 1 · 제품 관리자',
+      title: '제로 베이스 입문,<br><span class="highlight">나만의 PM이 되다.</span>',
+      sub: 'CS 배경지식이 없어도 괜찮습니다. 아이디어를 말하기만 하면 AI가 고품질 웹 프로토타입으로 변환해줍니다.',
+      cards: [
+        { title: 'AI 제품 관리자', desc: '아이디어에서 프로토타입까지, 말 한마디로.', sub: '비전공자 추천', link: '/ko-kr/stage-0/' },
+        { title: '게임으로 입문', desc: '스네이크 게임, 테트리스를 만들며 코딩 공포증 극복.', sub: '놀면서 배우기', link: '/ko-kr/stage-0/' },
+        { title: 'Vibe Coding', desc: 'AI 시대 코딩의 핵심: 프롬프트 엔지니어링과 컨텍스트 관리.', sub: '핵심 마인드셋', link: '/ko-kr/stage-0/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · 초/중급 개발자',
+      title: '풀스택 심화,<br><span class="highlight">실제 앱 구축.</span>',
+      sub: '프론트엔드-백엔드 분리 아키텍처 마스터. DB, API, 복잡한 상호작용이 포함된 상용급 프로젝트 구축.',
+      cards: [
+        { title: '풀스택 개발', headline: '프론트 & 백엔드 독립 완성.', desc: 'DB 설계부터 API 개발, 프론트엔드 컴포넌트화까지 현대적인 웹 앱을 완벽하게 구축.', link: '/ko-kr/stage-2/' },
+        { title: '실전 프로젝트', headline: '장난감 코드는 그만.', desc: '사용자 인증, 데이터 저장, 파일 업로드 등 핵심 비즈니스 로직 심층 이해.', link: '/ko-kr/stage-2/' },
+        { title: '배포 및 출시', headline: '세상에 보여주세요.', desc: '서버 설정, 도메인 연결, CI/CD. 제품 출시의 마지막 관문.', link: '/ko-kr/stage-2/' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · 고급 개발자',
+      title: '고급 실전,<br><span class="highlight">무한한 가능성에 도전.</span>',
+      sub: '모바일 미니 프로그램 및 AI 네이티브 앱 개발. LLM 시대의 무한한 기회 탐색.',
+      cards: [
+        { title: '위챗 미니프로그램', desc: '크로스 플랫폼 개발, 수억 명의 사용자 도달.', link: '/ko-kr/stage-3/' },
+        { title: 'AI 네이티브 앱', desc: 'RAG, Agent. LLM의 한계 탐색.', link: '/ko-kr/stage-3/' },
+        { title: '복잡한 아키텍처', desc: '고동시성, 고가용성 아키텍처 설계.', link: '/ko-kr/stage-3/' },
+        { title: '퍼스널 브랜딩', desc: '나만의 웹사이트와 학술 블로그 구축.', link: '/ko-kr/stage-3/' }
+      ]
+    },
+    footer: {
+      title: '시작할 준비 되셨나요?',
+      desc: 'Easy-Vibe, 숨 쉬듯 자연스러운 코딩.',
+      btn: '지금 시작하기'
+    }
+  },
+  'es-es': {
+    nav: {
+      title: 'Tutorial Easy-Vibe',
+      home: 'Inicio',
+      pm: 'Gerente de Producto',
+      junior: 'Desarrollador Junior',
+      senior: 'Desarrollador Senior',
+      appendix: 'Apéndice',
+      start: 'Empezar'
+    },
+    stage1: {
+      cat: 'Stage 1 · Gerente de Producto',
+      title: 'De Cero a Héroe,<br><span class="highlight">Sé tu propio PM.</span>',
+      sub: 'No necesitas experiencia en CS. Solo di tu idea y la IA la convertirá en prototipos web de alta fidelidad.',
+      cards: [
+        { title: 'PM de IA', desc: 'De la idea al prototipo, solo hablando.', sub: 'Amigable para no técnicos', link: '/es-es/stage-0/' },
+        { title: 'Intro Gamificada', desc: 'Crea Snake, Tetris y rompe el miedo al código.', sub: 'Aprende jugando', link: '/es-es/stage-0/' },
+        { title: 'Vibe Coding', desc: 'Domina el núcleo de la programación con IA: Ingeniería de Prompts y Contexto.', sub: 'Mentalidad Clave', link: '/es-es/stage-0/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · Desarrollador Junior/Mid',
+      title: 'Full Stack,<br><span class="highlight">Crea Apps Reales.</span>',
+      sub: 'Domina la separación frontend-backend. Crea proyectos de nivel comercial con DB, API e interacciones complejas.',
+      cards: [
+        { title: 'Full Stack', headline: 'Frontend y Backend.', desc: 'Desde el diseño de DB hasta API y componentes, construye una web app moderna completamente.', link: '/es-es/stage-2/' },
+        { title: 'Proyectos Reales', headline: 'Sin código de juguete.', desc: 'Profundiza en Auth, Almacenamiento, Subida de Archivos y lógica de negocio.', link: '/es-es/stage-2/' },
+        { title: 'Despliegue', headline: 'Muestra al mundo.', desc: 'Configuración de servidor, DNS, CI/CD. La última milla de la entrega del producto.', link: '/es-es/stage-2/' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · Desarrollador Senior',
+      title: 'Práctica Avanzada,<br><span class="highlight">Posibilidades Infinitas.</span>',
+      sub: 'Mini-programas móviles y Apps Nativas de IA. Explora la era de los LLMs.',
+      cards: [
+        { title: 'WeChat Mini-app', desc: 'Desarrollo multiplataforma, llegando a millones de usuarios.', link: '/es-es/stage-3/' },
+        { title: 'Apps Nativas IA', desc: 'RAG, Agent. Explora los límites de los LLMs.', link: '/es-es/stage-3/' },
+        { title: 'Arq. Compleja', desc: 'Diseño de arquitectura de alta concurrencia y alta disponibilidad.', link: '/es-es/stage-3/' },
+        { title: 'Marca Personal', desc: 'Construye tu propio sitio web y blog académico.', link: '/es-es/stage-3/' }
+      ]
+    },
+    footer: {
+      title: '¿Listo para empezar?',
+      desc: 'Easy-Vibe, haz que programar sea tan natural como respirar.',
+      btn: 'Empezar Ahora'
+    }
+  },
+  'fr-fr': {
+    nav: {
+      title: 'Tutoriel Easy-Vibe',
+      home: 'Accueil',
+      pm: 'Chef de Produit',
+      junior: 'Dév Junior',
+      senior: 'Dév Senior',
+      appendix: 'Annexe',
+      start: 'Commencer'
+    },
+    stage1: {
+      cat: 'Stage 1 · Chef de Produit',
+      title: 'De Zéro à Héros,<br><span class="highlight">Soyez votre propre PM.</span>',
+      sub: 'Pas besoin de background CS. Parlez juste de votre idée, et l\'IA la transformera en prototypes web haute fidélité.',
+      cards: [
+        { title: 'PM IA', desc: 'De l\'idée au prototype, juste en parlant.', sub: 'Accessible aux non-tech', link: '/fr-fr/stage-0/' },
+        { title: 'Intro Gamifiée', desc: 'Créez Snake, Tetris et brisez la peur du code.', sub: 'Apprendre en jouant', link: '/fr-fr/stage-0/' },
+        { title: 'Vibe Coding', desc: 'Maîtrisez le cœur du codage IA : Prompt Engineering & Contexte.', sub: 'Esprit Clé', link: '/fr-fr/stage-0/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · Dév Junior/Mid',
+      title: 'Full Stack,<br><span class="highlight">Créez de Vraies Apps.</span>',
+      sub: 'Maîtrisez la séparation frontend-backend. Créez des projets commerciaux avec DB, API et interactions complexes.',
+      cards: [
+        { title: 'Full Stack', headline: 'Frontend & Backend.', desc: 'Du design DB aux API et composants, construisez une web app moderne complète.', link: '/fr-fr/stage-2/' },
+        { title: 'Projets Réels', headline: 'Pas de code jouet.', desc: 'Plongez dans l\'Auth, le Stockage, l\'Upload de fichiers et la logique métier.', link: '/fr-fr/stage-2/' },
+        { title: 'Déploiement', headline: 'Montrez au monde.', desc: 'Config serveur, DNS, CI/CD. Le dernier kilomètre de la livraison produit.', link: '/fr-fr/stage-2/' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · Dév Senior',
+      title: 'Pratique Avancée,<br><span class="highlight">Possibilités Infinies.</span>',
+      sub: 'Mini-programmes mobiles et Apps Natives IA. Explorez l\'ère des LLM.',
+      cards: [
+        { title: 'WeChat Mini-app', desc: 'Dév multiplateforme, touchant des millions d\'utilisateurs.', link: '/fr-fr/stage-3/' },
+        { title: 'Apps Natives IA', desc: 'RAG, Agent. Explorez les limites des LLM.', link: '/fr-fr/stage-3/' },
+        { title: 'Arch. Complexe', desc: 'Conception d\'architecture haute concurrence et haute disponibilité.', link: '/fr-fr/stage-3/' },
+        { title: 'Marque Perso', desc: 'Construisez votre propre site web et blog académique.', link: '/fr-fr/stage-3/' }
+      ]
+    },
+    footer: {
+      title: 'Prêt à commencer ?',
+      desc: 'Easy-Vibe, rendez le codage aussi naturel que la respiration.',
+      btn: 'Commencer'
+    }
+  },
+  'de-de': {
+    nav: {
+      title: 'Easy-Vibe Tutorial',
+      home: 'Startseite',
+      pm: 'Produktmanager',
+      junior: 'Junior Dev',
+      senior: 'Senior Dev',
+      appendix: 'Anhang',
+      start: 'Starten'
+    },
+    stage1: {
+      cat: 'Stage 1 · Produktmanager',
+      title: 'Von Null auf Hundert,<br><span class="highlight">Sei dein eigener PM.</span>',
+      sub: 'Kein CS-Hintergrund nötig. Sprich einfach deine Idee aus, und KI verwandelt sie in High-Fidelity-Web-Prototypen.',
+      cards: [
+        { title: 'KI PM', desc: 'Von der Idee zum Prototyp, einfach durch Sprechen.', sub: 'Nicht-Tech-freundlich', link: '/de-de/stage-0/' },
+        { title: 'Gamifizierte Intro', desc: 'Baue Snake, Tetris und überwinde die Angst vor Code.', sub: 'Spielend lernen', link: '/de-de/stage-0/' },
+        { title: 'Vibe Coding', desc: 'Meistere den Kern des KI-Codings: Prompt Engineering & Kontext.', sub: 'Kern-Mindset', link: '/de-de/stage-0/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · Junior/Mid Dev',
+      title: 'Full Stack,<br><span class="highlight">Baue echte Apps.</span>',
+      sub: 'Meistere die Frontend-Backend-Trennung. Baue kommerzielle Projekte mit DB, API und komplexen Interaktionen.',
+      cards: [
+        { title: 'Full Stack', headline: 'Frontend & Backend.', desc: 'Vom DB-Design bis zu APIs und Komponenten, baue eine moderne Web-App komplett.', link: '/de-de/stage-2/' },
+        { title: 'Echte Projekte', headline: 'Kein Spielzeug-Code.', desc: 'Tauche ein in Auth, Speicher, Datei-Uploads und Kern-Geschäftslogik.', link: '/de-de/stage-2/' },
+        { title: 'Deployment', headline: 'Zeig es der Welt.', desc: 'Server-Konfig, DNS, CI/CD. Die letzte Meile der Produktlieferung.', link: '/de-de/stage-2/' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · Senior Dev',
+      title: 'Fortgeschrittene Praxis,<br><span class="highlight">Unendliche Möglichkeiten.</span>',
+      sub: 'Mobile Mini-Programme & KI-Native Apps. Erkunde die Ära der LLMs.',
+      cards: [
+        { title: 'WeChat Mini-App', desc: 'Plattformübergreifende Entwicklung, Millionen von Nutzern erreichen.', link: '/de-de/stage-3/' },
+        { title: 'KI-Native Apps', desc: 'RAG, Agent. Erkunde die Grenzen von LLMs.', link: '/de-de/stage-3/' },
+        { title: 'Komplexe Arch', desc: 'Architekturdesign für hohe Gleichzeitigkeit und hohe Verfügbarkeit.', link: '/de-de/stage-3/' },
+        { title: 'Persönliche Marke', desc: 'Baue deine eigene Website und deinen akademischen Blog.', link: '/de-de/stage-3/' }
+      ]
+    },
+    footer: {
+      title: 'Bereit zu starten?',
+      desc: 'Easy-Vibe, mache Coden so natürlich wie Atmen.',
+      btn: 'Jetzt starten'
+    }
+  },
+  'ar-sa': {
+    nav: {
+      title: 'Easy-Vibe درس تعليمي',
+      home: 'الرئيسية',
+      pm: 'مدير المنتج',
+      junior: 'مطور مبتدئ',
+      senior: 'مطور خبير',
+      appendix: 'ملحق',
+      start: 'ابدأ التعلم'
+    },
+    stage1: {
+      cat: 'Stage 1 · مدير المنتج',
+      title: 'من الصفر إلى الاحتراف،<br><span class="highlight">كن مدير منتجك الخاص.</span>',
+      sub: 'لا حاجة لخلفية في علوم الحاسوب. فقط تحدث بفكرتك، وسيُحولها الذكاء الاصطناعي إلى نماذج ويب عالية الدقة.',
+      cards: [
+        { title: 'مدير منتج AI', desc: 'من الفكرة إلى النموذج الأولي، بمجرد التحدث.', sub: 'صديق لغير التقنيين', link: '/ar-sa/stage-0/' },
+        { title: 'مقدمة بالألعاب', desc: 'ابنِ Snake و Tetris واكسر حاجز الخوف من الكود.', sub: 'تعلم باللعب', link: '/ar-sa/stage-0/' },
+        { title: 'Vibe Coding', desc: 'أتقن جوهر برمجة الذكاء الاصطناعي: هندسة الأوامر والسياق.', sub: 'العقلية الأساسية', link: '/ar-sa/stage-0/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · مطور مبتدئ/متوسط',
+      title: 'Full Stack،<br><span class="highlight">ابنِ تطبيقات حقيقية.</span>',
+      sub: 'أتقن فصل الواجهة الأمامية عن الخلفية. ابنِ مشاريع تجارية مع قواعد بيانات و API وتفاعلات معقدة.',
+      cards: [
+        { title: 'Full Stack', headline: 'واجهة أمامية وخلفية.', desc: 'من تصميم DB إلى API والمكونات، ابنِ تطبيق ويب حديث بالكامل.', link: '/ar-sa/stage-2/' },
+        { title: 'مشاريع حقيقية', headline: 'ليس كود ألعاب.', desc: 'تعمق في المصادقة، التخزين، رفع الملفات ومنطق العمل الأساسي.', link: '/ar-sa/stage-2/' },
+        { title: 'النشر', headline: 'أظهر للعالم.', desc: 'إعداد الخادم، DNS، CI/CD. الميل الأخير لتسليم المنتج.', link: '/ar-sa/stage-2/' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · مطور خبير',
+      title: 'ممارسة متقدمة،<br><span class="highlight">إمكانيات لا نهائية.</span>',
+      sub: 'برامج WeChat الصغيرة وتطبيقات AI الأصلية. استكشف عصر LLMs.',
+      cards: [
+        { title: 'برنامج WeChat المصغر', desc: 'تطوير متعدد المنصات، الوصول لملايين المستخدمين.', link: '/ar-sa/stage-3/' },
+        { title: 'تطبيقات AI الأصلية', desc: 'RAG، Agent. استكشف حدود LLMs.', link: '/ar-sa/stage-3/' },
+        { title: 'هندسة معقدة', desc: 'تصميم هندسة التزامن العالي والتوافر العالي.', link: '/ar-sa/stage-3/' },
+        { title: 'العلامة التجارية الشخصية', desc: 'ابنِ موقعك الخاص ومدونتك الأكاديمية.', link: '/ar-sa/stage-3/' }
+      ]
+    },
+    footer: {
+      title: 'جاهز للبدء؟',
+      desc: 'Easy-Vibe، اجعل البرمجة طبيعية كالتنفس.',
+      btn: 'ابدأ الآن'
+    }
+  },
+  'vi-vn': {
+    nav: {
+      title: 'Hướng dẫn Easy-Vibe',
+      home: 'Trang chủ',
+      pm: 'Quản lý sản phẩm',
+      junior: 'Dev Sơ/Trung cấp',
+      senior: 'Dev Cao cấp',
+      appendix: 'Phụ lục',
+      start: 'Bắt đầu học'
+    },
+    stage1: {
+      cat: 'Stage 1 · Quản lý sản phẩm',
+      title: 'Từ số 0 đến Hero,<br><span class="highlight">Tự làm PM cho chính mình.</span>',
+      sub: 'Không cần nền tảng CS. Chỉ cần nói ra ý tưởng, AI sẽ biến nó thành nguyên mẫu web độ trung thực cao.',
+      cards: [
+        { title: 'AI PM', desc: 'Từ ý tưởng đến nguyên mẫu, chỉ bằng lời nói.', sub: 'Thân thiện với non-tech', link: '/vi-vn/stage-0/' },
+        { title: 'Nhập môn qua Game', desc: 'Xây dựng Snake, Tetris và phá bỏ nỗi sợ code.', sub: 'Học mà chơi', link: '/vi-vn/stage-0/' },
+        { title: 'Vibe Coding', desc: 'Nắm vững cốt lõi lập trình AI: Prompt Engineering & Context.', sub: 'Tư duy cốt lõi', link: '/vi-vn/stage-0/' }
+      ]
+    },
+    stage2: {
+      cat: 'Stage 2 · Dev Sơ/Trung cấp',
+      title: 'Full Stack,<br><span class="highlight">Xây dựng App thực tế.</span>',
+      sub: 'Nắm vững tách biệt frontend-backend. Xây dựng dự án thương mại với DB, API và tương tác phức tạp.',
+      cards: [
+        { title: 'Full Stack', headline: 'Frontend & Backend.', desc: 'Từ thiết kế DB đến API và component, xây dựng trọn vẹn web app hiện đại.', link: '/vi-vn/stage-2/' },
+        { title: 'Dự án thực tế', headline: 'Không phải code đồ chơi.', desc: 'Đi sâu vào Auth, Lưu trữ, Upload file và logic nghiệp vụ cốt lõi.', link: '/vi-vn/stage-2/' },
+        { title: 'Triển khai', headline: 'Show cho thế giới.', desc: 'Cấu hình server, DNS, CI/CD. Chặng cuối của việc giao sản phẩm.', link: '/vi-vn/stage-2/' }
+      ]
+    },
+    stage3: {
+      cat: 'Stage 3 · Dev Cao cấp',
+      title: 'Thực hành nâng cao,<br><span class="highlight">Khả năng vô hạn.</span>',
+      sub: 'Mini-app di động & Ứng dụng AI Native. Khám phá kỷ nguyên LLM.',
+      cards: [
+        { title: 'WeChat Mini-app', desc: 'Phát triển đa nền tảng, tiếp cận hàng triệu người dùng.', link: '/vi-vn/stage-3/' },
+        { title: 'App AI Native', desc: 'RAG, Agent. Khám phá giới hạn của LLM.', link: '/vi-vn/stage-3/' },
+        { title: 'Kiến trúc phức tạp', desc: 'Thiết kế kiến trúc chịu tải cao và sẵn sàng cao.', link: '/vi-vn/stage-3/' },
+        { title: 'Thương hiệu cá nhân', desc: 'Xây dựng website và blog học thuật của riêng bạn.', link: '/vi-vn/stage-3/' }
+      ]
+    },
+    footer: {
+      title: 'Sẵn sàng chưa?',
+      desc: 'Easy-Vibe, biến lập trình trở nên tự nhiên như hơi thở.',
+      btn: 'Bắt đầu ngay'
+    }
+  }
+}
+
+// Fallback to English for other languages
+import { computed } from 'vue'
+const t = computed(() => {
+  const code = lang.value ? lang.value.toLowerCase() : 'zh-cn'
+  return i18n[code] || i18n['en-us']
+})
+
+const locales = [
+  { code: 'zh-cn', text: '简体中文' },
+  { code: 'en-us', text: 'English' },
+  { code: 'ja-jp', text: '日本語' },
+  { code: 'zh-tw', text: '繁體中文' },
+  { code: 'ko-kr', text: '한국어' },
+  { code: 'es-es', text: 'Español' },
+  { code: 'fr-fr', text: 'Français' },
+  { code: 'de-de', text: 'Deutsch' },
+  { code: 'ar-sa', text: 'العربية' },
+  { code: 'vi-vn', text: 'Tiếng Việt' }
+]
+
+const toggleLangMenu = () => {
+  showLangMenu.value = !showLangMenu.value
+}
+
+const changeLang = (targetLocale) => {
+  const currentPath = router.route.path
+  // Find current locale based on path prefix
+  const currentLocale = locales.find(l => currentPath.startsWith(`/${l.code}/`))
+  
+  let newPath
+  if (currentLocale) {
+    newPath = currentPath.replace(`/${currentLocale.code}/`, `/${targetLocale}/`)
+  } else {
+    // Fallback for root path or missing locale prefix
+    newPath = `/${targetLocale}/`
+  }
+  
+  router.go(withBase(newPath))
+  showLangMenu.value = false
+}
+
+const scrollTo = (id) => {
+  if (id === 'home') {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+    activeTab.value = 'home'
+    return
+  }
+  const el = document.getElementById(id)
+  if (el) {
+    const navHeight = 64 // Approximate nav height
+    const offset = el.offsetTop - navHeight - 20
+    window.scrollTo({ top: offset, behavior: 'smooth' })
+    activeTab.value = id
+  }
+}
+
+// Close lang menu on click outside
+const closeLangMenu = (e) => {
+  if (!e.target.closest('.lang-switch-wrapper')) {
+    showLangMenu.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeLangMenu)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeLangMenu)
+})
+
+// Stage 1: 产品经理 (Web 原型)
+const stage1Cards = [
+  {
+    title: 'AI 产品经理',
+    desc: '从想法到高保真原型，你只需要会说话。',
+    sub: '适合非技术背景',
+    color: 'linear-gradient(135deg, #FF9A9E 0%, #FECFEF 99%, #FECFEF 100%)',
+    icon: '🎨',
+    link: '/zh-cn/stage-0/0.1-learning-map/'
+  },
+  {
+    title: '游戏化入门',
+    desc: '通过制作贪吃蛇、俄罗斯方块，打破对代码的恐惧。',
+    sub: '边玩边学',
+    color: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)',
+    icon: '🎮',
+    link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/'
+  },
+  {
+    title: 'Vibe Coding',
+    desc: '掌握 AI 时代的编程核心：提示词工程与上下文管理。',
+    sub: '核心心法',
+    color: 'linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%)',
+    icon: '💡',
+    link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/'
+  }
+]
+
+// Stage 2: 初中级开发 (全栈)
+const stage2Cards = [
+  {
+    title: '全栈开发',
+    headline: '独立完成前后端。',
+    desc: '从数据库设计到 API 开发，再到前端组件化，完整构建一个现代化 Web 应用。',
+    imageColor: '#E0C3FC',
+    visualType: 'code',
+    link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
+  },
+  {
+    title: '真实项目',
+    headline: '拒绝玩具代码。',
+    desc: '深入理解用户鉴权、数据存储、文件上传等核心业务逻辑。',
+    imageColor: '#8EC5FC',
+    visualType: 'server',
+    link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase'
+  },
+  {
+    title: '部署上线',
+    headline: '让世界看到你的作品。',
+    desc: '学习服务器配置、域名解析和自动化部署，打通产品落地的最后一公里。',
+    imageColor: '#96E6A1',
+    visualType: 'cloud',
+    link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications'
+  }
+]
+
+// Stage 3: 高级开发 (小程序 & AI)
+const stage3Cards = [
+  {
+    title: '微信小程序',
+    desc: '跨平台开发，触达亿级用户。',
+    tag: 'Stage 3',
+    visualType: 'phone',
+    link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
+  },
+  {
+    title: 'AI 原生应用',
+    desc: 'RAG、Agent，探索 LLM 的无限可能。',
+    tag: 'Advanced',
+    visualType: 'ai',
+    link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future'
+  },
+  {
+    title: '复杂业务架构',
+    desc: '应对高并发、高可用场景的架构设计。',
+    tag: 'Architecture',
+    visualType: 'arch',
+    link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
+  },
+  {
+    title: '个人品牌',
+    desc: '构建属于自己的个人网页与学术博客。',
+    tag: 'Brand',
+    visualType: 'brand',
+    link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
+  }
+]
+</script>
+
+<template>
+  <div class="apple-container">
+    <!-- Sticky Navigation -->
+    <nav class="sticky-nav glass">
+      <div class="nav-content">
+        <span class="nav-title">{{ t.nav.title }}</span>
+        <div class="nav-links">
+          <button :class="{ active: activeTab === 'home' }" @click="scrollTo('home')">{{ t.nav.home }}</button>
+          <button :class="{ active: activeTab === 'pm' }" @click="scrollTo('pm')">{{ t.nav.pm }}</button>
+          <button :class="{ active: activeTab === 'junior' }" @click="scrollTo('junior')">{{ t.nav.junior }}</button>
+          <button :class="{ active: activeTab === 'senior' }" @click="scrollTo('senior')">{{ t.nav.senior }}</button>
+          <a class="nav-link-item" :href="withBase('/zh-cn/appendix/')">{{ t.nav.appendix }}</a>
+        </div>
+        <div class="nav-action">
+          <div class="nav-icons">
+            <!-- Language Switcher -->
+            <div class="lang-switch-wrapper">
+              <button class="icon-btn" aria-label="Change language" @click.stop="toggleLangMenu">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <line x1="2" y1="12" x2="22" y2="12"></line>
+                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                </svg>
+              </button>
+              <!-- Dropdown Menu -->
+              <div class="lang-dropdown glass" v-if="showLangMenu">
+                <button 
+                  v-for="locale in locales" 
+                  :key="locale.code" 
+                  class="lang-item" 
+                  @click="changeLang(locale.code)"
+                >
+                  {{ locale.text }}
+                </button>
+              </div>
+            </div>
+            
+            <!-- GitHub Link -->
+            <a class="icon-btn" href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer" aria-label="View on GitHub">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+              </svg>
+            </a>
+          </div>
+          <a class="buy-btn" :href="withBase('/zh-cn/stage-0/0.1-learning-map/')">{{ t.footer.btn }}</a>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Home Anchor -->
+    <div id="home" style="height: 0;"></div>
+
+    <!-- Stage 1: Product Manager -->
+    <section id="pm" class="section-container">
+      <div class="section-header">
+        <h2 class="section-category">{{ t.stage1.cat }}</h2>
+        <h3 class="section-headline" v-html="t.stage1.title"></h3>
+        <p class="section-sub">{{ t.stage1.sub }}</p>
+      </div>
+
+      <div class="bento-grid">
+        <a :href="withBase(t.stage1.cards[0].link)" class="bento-item large" :style="{ background: stage1Cards[0].color }">
+          <div class="card-content">
+            <span class="card-icon">{{ stage1Cards[0].icon }}</span>
+            <h4>{{ t.stage1.cards[0].title }}</h4>
+            <p>{{ t.stage1.cards[0].desc }}</p>
+            <span class="card-sub">{{ t.stage1.cards[0].sub }}</span>
+          </div>
+        </a>
+        <div class="bento-column">
+          <a v-for="(card, i) in stage1Cards.slice(1)" :key="i" :href="withBase(t.stage1.cards[i+1].link)" class="bento-item small" :style="{ background: card.color }">
+            <div class="card-content">
+              <span class="card-icon">{{ card.icon }}</span>
+              <h4>{{ t.stage1.cards[i+1].title }}</h4>
+              <p>{{ t.stage1.cards[i+1].desc }}</p>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- Stage 2: Junior/Mid Dev -->
+    <section id="junior" class="section-container">
+      <div class="section-header">
+        <h2 class="section-category">{{ t.stage2.cat }}</h2>
+        <h3 class="section-headline" v-html="t.stage2.title"></h3>
+        <p class="section-sub">{{ t.stage2.sub }}</p>
+      </div>
+
+      <div class="comm-grid">
+        <a v-for="(card, index) in stage2Cards" :key="index" :href="withBase(t.stage2.cards[index].link)" class="comm-card glass">
+          <div class="comm-visual" :style="{ backgroundColor: card.imageColor }">
+            <div class="visual-placeholder"></div>
+          </div>
+          <div class="comm-text">
+            <h4 class="comm-title">{{ t.stage2.cards[index].title }}</h4>
+            <p class="comm-desc">{{ t.stage2.cards[index].desc }}</p>
+            <span class="comm-note">点击查看详情</span>
+          </div>
+        </a>
+      </div>
+    </section>
+
+    <!-- Stage 3: Senior Dev -->
+    <section id="senior" class="section-container">
+      <div class="section-header">
+        <h2 class="section-category">{{ t.stage3.cat }}</h2>
+        <h3 class="section-headline" v-html="t.stage3.title"></h3>
+        <p class="section-sub">{{ t.stage3.sub }}</p>
+      </div>
+
+      <div class="scroll-container">
+        <div class="scroll-track">
+          <a v-for="(card, index) in stage3Cards" :key="index" :href="withBase(t.stage3.cards[index].link)" class="prod-card glass">
+            <div class="prod-tag">{{ card.tag }}</div>
+            <h4>{{ t.stage3.cards[index].title }}</h4>
+            <p>{{ t.stage3.cards[index].desc }}</p>
+            <div class="prod-visual"></div>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer Callout -->
+    <div class="footer-callout">
+      <h2>{{ t.footer.title }}</h2>
+      <p>{{ t.footer.desc }}</p>
+      <a class="buy-btn large" :href="withBase('/zh-cn/stage-0/0.1-learning-map/')">{{ t.footer.btn }}</a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Reset & Base */
+.apple-container {
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
+  color: var(--vp-c-text-1);
+  overflow: hidden;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.highlight {
+  color: var(--vp-c-text-2);
+}
+
+/* Sticky Nav */
+.sticky-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  border-bottom: 1px solid var(--vp-c-divider);
+  transition: all 0.3s ease;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+/* Dark mode adjustment for glass effect */
+:root.dark .sticky-nav {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.nav-content {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 40px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-title {
+  font-weight: 600;
+  font-size: 21px;
+}
+
+.nav-links {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.nav-links button, .nav-link-item {
+  background: none;
+  border: none;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: color 0.2s;
+  padding: 0;
+  margin: 0;
+  line-height: 1;
+}
+
+.nav-links button:hover,
+.nav-links button.active,
+.nav-link-item:hover {
+  color: var(--vp-c-text-1);
+}
+
+.nav-action {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.nav-icons {
+  display: flex;
+  gap: 12px;
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+}
+
+.icon-btn:hover {
+  opacity: 1;
+}
+
+/* Lang Switcher */
+.lang-switch-wrapper {
+  position: relative;
+}
+
+.lang-dropdown {
+  position: absolute;
+  top: 100%;
+  right: -10px; /* Align slightly to right */
+  margin-top: 12px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 6px;
+  min-width: 140px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.lang-item {
+  text-align: left;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  transition: background 0.2s;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.lang-item:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.buy-btn {
+  background: var(--vp-c-brand-1);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 980px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.buy-btn:hover {
+  background: var(--vp-c-brand-2);
+  transform: scale(1.02);
+}
+
+.buy-btn.large {
+  padding: 12px 28px;
+  font-size: 17px;
+  margin-top: 20px;
+  display: inline-block;
+}
+
+/* Sections General */
+.section-container {
+  max-width: 1280px;
+  margin: 0 auto 120px;
+  padding: 0 40px;
+}
+
+.section-header {
+  margin-bottom: 60px;
+}
+
+.section-category {
+  font-size: 21px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  border: none;
+  padding: 0;
+}
+
+.section-headline {
+  font-size: 48px;
+  line-height: 1.08349;
+  font-weight: 600;
+  letter-spacing: -0.003em;
+  margin-bottom: 20px;
+}
+
+.section-sub {
+  font-size: 21px;
+  line-height: 1.381;
+  font-weight: 400;
+  letter-spacing: 0.011em;
+  color: var(--vp-c-text-2);
+  max-width: 70%;
+}
+
+/* Bento Grid */
+.bento-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 24px;
+  height: 500px;
+}
+
+.bento-item {
+  border-radius: 30px;
+  padding: 40px;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  color: #1d1d1f; /* Force dark text on colorful backgrounds */
+  display: block;
+}
+
+.bento-item:hover {
+  transform: scale(1.02);
+}
+
+.bento-column {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.bento-item.small {
+  flex: 1;
+  padding: 30px;
+}
+
+.card-icon {
+  font-size: 48px;
+  margin-bottom: 20px;
+  display: block;
+}
+
+.bento-item h4 {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  line-height: 1.2;
+}
+
+.bento-item p {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.4;
+  opacity: 0.8;
+}
+
+.card-sub {
+  position: absolute;
+  bottom: 40px;
+  font-size: 14px;
+  opacity: 0.6;
+}
+
+/* Communication Grid (Now used for Stage 2) */
+.comm-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+
+.comm-card {
+  border-radius: 24px;
+  overflow: hidden;
+  background: var(--vp-c-bg-soft);
+  transition: transform 0.3s;
+  display: block;
+}
+
+.comm-card:hover {
+  transform: translateY(-5px);
+}
+
+.comm-visual {
+  height: 200px;
+  width: 100%;
+  position: relative;
+}
+
+.visual-placeholder {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 60px;
+  background: rgba(255,255,255,0.5);
+  border-radius: 50%;
+  backdrop-filter: blur(10px);
+}
+
+.comm-text {
+  padding: 30px;
+}
+
+.comm-title {
+  font-size: 19px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.comm-desc {
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  margin-bottom: 20px;
+}
+
+.comm-note {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Productivity Scroll (Now used for Stage 3) */
+.scroll-container {
+  overflow-x: auto;
+  padding-bottom: 40px;
+  margin: 0 -20px;
+  padding: 0 20px 40px;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+}
+
+.scroll-track {
+  display: flex;
+  gap: 24px;
+  width: max-content;
+}
+
+.prod-card {
+  width: 300px;
+  height: 400px;
+  border-radius: 24px;
+  background: var(--vp-c-bg-soft);
+  padding: 30px;
+  scroll-snap-align: center;
+  text-decoration: none !important;
+  color: inherit !important;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s;
+}
+
+.prod-card:hover {
+  transform: scale(1.03);
+}
+
+.prod-tag {
+  font-size: 12px;
+  font-weight: 600;
+  color: #0071e3;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+}
+
+.prod-card h4 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.prod-card p {
+  color: var(--vp-c-text-2);
+  font-size: 15px;
+}
+
+.prod-visual {
+  margin-top: auto;
+  height: 150px;
+  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
+  border-radius: 12px;
+  opacity: 0.5;
+}
+
+/* Footer */
+.footer-callout {
+  text-align: center;
+  padding: 100px 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.footer-callout h2 {
+  font-size: 40px;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .section-headline {
+    font-size: 32px;
+  }
+  
+  .bento-grid {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+  
+  .comm-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .nav-links {
+    display: none; /* Simplify for mobile for now, or use overflow scroll */
+  }
+}
+</style>
+
+<style>
+/* Global layout fix for fixed nav */
+.VPHome {
+  padding-top: 52px !important;
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 32ff195..d706944 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -8,6 +8,7 @@ import { onMounted, watch, nextTick } from 'vue'
 import { useRoute, useData } from 'vitepress'
 import './style.css'
 import Layout from './Layout.vue'
+import HomeFeatures from './components/HomeFeatures.vue'
 import CategoryIndex from './components/CategoryIndex.vue'
 import ArticleGrid from './components/ArticleGrid.vue'
 import StepBar from './components/StepBar.vue'
@@ -270,6 +271,7 @@ export default {
   Layout,
   enhanceApp({ app }) {
     app.use(ElementPlus)
+    app.component('HomeFeatures', HomeFeatures)
     app.component('CategoryIndex', CategoryIndex)
     app.component('ArticleGrid', ArticleGrid)
     app.component('StepBar', StepBar)
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 625428c..966f207 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -60,6 +60,7 @@
 
 .vp-doc :where(h1, h2, h3, h4, h5, h6) {
   line-height: 1.3;
+  scroll-margin-top: calc(var(--vp-nav-height, 64px) + 24px);
 }
 
 .vp-doc :where(h1) {
@@ -199,6 +200,26 @@
   height: auto !important;
 }
 
+/* 布局调整：增加内容区域的最大宽度，并适当增加内边距 */
+@media (min-width: 960px) {
+  .VPDoc:not(.has-sidebar) .container {
+    max-width: 1280px !important;
+    padding-left: 40px !important;
+    padding-right: 40px !important;
+  }
+  .VPDoc.has-sidebar .container {
+    max-width: 100% !important; /* 移除强制宽度限制，让内容自然对齐 */
+    padding-left: 40px !important;
+    padding-right: 40px !important;
+  }
+  /* 强制统一首页 Hero 区域的宽度和边距，使其与下方 Features 区域对齐 */
+  .VPHomeHero .container {
+    max-width: 1280px !important;
+    padding-left: 40px !important;
+    padding-right: 40px !important;
+  }
+}
+
 .vp-doc img.img-limit-height {
   max-height: 450px !important;
   max-width: 100% !important;
@@ -244,3 +265,61 @@
 .VPSidebarItem .VPLink:hover {
   text-decoration: none !important;
 }
+
+/* iOS/Apple Style Enhancements */
+
+/* System Font Stack */
+:root {
+  --vp-font-family-base: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+/* Glassmorphism Utilities */
+.glass {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.dark .glass {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Hero Section Refinements */
+.VPHomeHero .name {
+  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 30px rgba(66, 211, 146, 0.3));
+}
+
+.VPHomeHero .text {
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.VPHomeHero .action .VPButton.brand {
+  border-radius: 20px;
+  background-image: linear-gradient(to right, #42d392, #647eff);
+  border: none;
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.VPHomeHero .action .VPButton.brand:hover {
+  transform: scale(1.05);
+  opacity: 0.9;
+}
+
+.VPHomeHero .action .VPButton.alt {
+  border-radius: 20px;
+  border-color: var(--vp-c-divider);
+  background-color: var(--vp-c-bg-soft);
+  transition: transform 0.2s;
+}
+
+.VPHomeHero .action .VPButton.alt:hover {
+  transform: scale(1.05);
+  background-color: var(--vp-c-bg);
+}
diff --git a/docs/ar-sa/index.md b/docs/ar-sa/index.md
index 0d077a2..d938a21 100644
--- a/docs/ar-sa/index.md
+++ b/docs/ar-sa/index.md
@@ -1,99 +1,17 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: 'تعلم Vibe Coding من الصفر'
-  tagline:
-    - كن شخصًا خارقًا يجمع بين المنتج والتصميم والتطوير الكامل.
-    - من الفكرة إلى النموذج الأولي، من النموذج الأولي إلى المنتج، حول كل مخرج إلى منتج قابل للتسليم.
-    - اجعل AI شريكك: أسرع ، أكثر استقرارًا ، أكثر إبداعًا.
-    - ابنِ خندقك التكنولوجي والمنتجي مع مسار تعلم منهجي.
+  text: 'دليل برمجة الذكاء الاصطناعي من الصفر'
+  tagline: 'نموذج برمجة جديد للجميع. سواء كنت مدير منتج أو مطور Full Stack، ابحث عن مسار برمجة الذكاء الاصطناعي الخاص بك هنا.'
   actions:
     - theme: brand
       text: ابدأ التعلم
-      link: /stage-0/0.1-learning-map/
+      link: /ar-sa/stage-0/
     - theme: alt
-      text: ⭐️ Star على GitHub
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: ودود للمبتدئين
-    details: مصمم لخلفيات غير تقنية. ابدأ بـ "إذا يمكنك التحدث ، يمكنك البرمجة" ، ابدأ بسرعة من خلال ألعاب مثل Snake ، وتغلب على الخوف التقني.
-  - title: مسار تدريجي عملي
-    details: طريقة تعلم فريدة "ثلاث مراحل". من تفكير مدير منتج AI ، إلى تطوير كامل المكدس ، إلى بناء تطبيقات معقدة ، خطوة بخطوة.
-  - title: Vibe Coding نموذج جديد
-    details: إتقان جوهر البرمجة في عصر الذكاء الاصطناعي. تعلم البرمجة الزوجية مع AI ، وجعل IDE أقوى شريك لك.
-  - title: مدفوع بمشاريع حقيقية
-    details: لا رمز ألعاب. قم ببناء نماذج ويب وتطبيقات كاملة المكدس وبرامج WeChat المصغرة بيديك ، وجعل كل فكرة منتجًا حقًا.
+      text: مخطط الدورة
+      link: /ar-sa/stage-0/
 ---
 
-<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
-  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
-    <h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 الترجمة العربية قيد التقدم</h2>
-    <p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
-      نحن نعمل بجد لترجمة البرنامج التعليمي الكامل لـ Easy-Vibe إلى العربية.<br>
-      ترقبوا النسخة الكاملة!<br><br>
-      في هذه الأثناء ، يمكنك زيارة<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">النسخة الإنجليزية</a> أو <a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">النسخة الصينية</a>.
-    </p>
-  </div>
-</div>
-
-<style>
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">هل تجد هذا مفيدًا؟</h3>
-  <p class="support-text">Star الخاص بك يحفزنا على الاستمرار في التحديث 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-</style>
+<HomeFeatures />
diff --git a/docs/de-de/index.md b/docs/de-de/index.md
index c99744a..badd047 100644
--- a/docs/de-de/index.md
+++ b/docs/de-de/index.md
@@ -1,99 +1,17 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: 'Lernen Sie Vibe Coding von Null'
-  tagline:
-    - Werden Sie eine Superperson, die Produkt, Design und Full-Stack-Entwicklung kombiniert.
-    - Von Idee zu Prototyp, von Prototyp zu Produkt, machen Sie aus jeder Ausgabe ein lieferbares Produkt.
-    - Machen Sie die KI zu Ihrem Partner: schneller, stabiler, kreativer.
-    - Bauen Sie Ihren technologie- und produktbezogenen Graben mit einem systematischen Lernpfad auf.
+  text: 'KI-Coding-Guide von Grund auf'
+  tagline: 'Ein neues Coding-Paradigma für alle. Egal ob PM oder Full Stack Dev, finde hier deinen KI-Coding-Pfad.'
   actions:
     - theme: brand
-      text: Lernen beginnen
-      link: /stage-0/0.1-learning-map/
+      text: Starten
+      link: /de-de/stage-0/
     - theme: alt
-      text: ⭐️ Star auf GitHub
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: Einsteigerfreundlich
-    details: Entwickelt für nicht-technische Hintergründe. Beginnen Sie mit "wenn Sie sprechen können, können Sie programmieren", starten Sie schnell durch Spiele wie Snake, und überwinden Sie technische Angst.
-  - title: Progressive Praxis-Route
-    details: Einzigartige "Drei-Phasen"-Lernmethode. Von KI-Produktmanager-Denken, bis zu Full-Stack-Entwicklungs-Implementierung, bis zum Aufbau komplexer Anwendungen, Schritt für Schritt.
-  - title: Vibe Coding Neues Paradigma
-    details: Meistern Sie den Kern der Programmierung im KI-Zeitalter. Lernen Sie, mit der KI zu paaren, und machen Sie Ihre IDE zu Ihrem stärksten Partner.
-  - title: Durch echte Projekte getrieben
-    details: Kein Spielzeugcode. Bauen Sie Web-Prototypen, Full-Stack-Anwendungen, WeChat-Mini-Programme mit Ihren eigenen Händen und machen Sie wirklich jede Idee zu einem Produkt.
+      text: Kursübersicht
+      link: /de-de/stage-0/
 ---
 
-<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
-  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
-    <h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Deutsche Übersetzung läuft</h2>
-    <p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
-      Wir arbeiten hart daran, das vollständige Easy-Vibe-Tutorial auf Deutsch zu übersetzen.<br>
-      Bleiben Sie dran für die vollständige Version!<br><br>
-      In der Zwischenzeit können Sie die<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">englische Version</a> oder die<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">chinesische Version</a> besuchen.
-    </p>
-  </div>
-</div>
-
-<style>
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">Haben Sie das nützlich gefunden?</h3>
-  <p class="support-text">Ihr Star motiviert uns, weiter zu aktualisieren 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-</style>
+<HomeFeatures />
diff --git a/docs/en-us/index.md b/docs/en-us/index.md
index 96f241b..d06ab80 100644
--- a/docs/en-us/index.md
+++ b/docs/en-us/index.md
@@ -1,256 +1,17 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: 'Learn Vibe Coding from 0 to 1'
-  tagline:
-    - Become a super individual combining product, design, and full-stack development.
-    - From idea to prototype, from prototype to production, turn every output into a deliverable product.
-    - Make AI your partner: faster, more stable, more creative.
-    - Build your personal technology and product moat with a systematic learning path.
+  text: 'AI Coding Guide from Scratch'
+  tagline: 'A new coding paradigm for everyone. Whether you are a PM or a Full Stack Dev, find your AI coding path here.'
   actions:
     - theme: brand
       text: Start Learning
-      link: /stage-0/0.1-learning-map/
+      link: /en-us/stage-0/
     - theme: alt
-      text: ⭐️ Star on GitHub
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: Beginner-Friendly
-    details: Designed for non-technical backgrounds. Start with "if you can speak, you can code", quickly get started through games like Snake, and overcome technical fear.
-  - title: Progressive Practical Path
-    details: Unique "three-stage" learning method. From AI product manager thinking, to full-stack development implementation, to complex application construction, step by step.
-  - title: Vibe Coding New Paradigm
-    details: Master the core of AI era programming. Learn to pair-program with AI, making your IDE your strongest partner.
-  - title: Real Project-Driven
-    details: No toy code. Build web prototypes, full-stack applications, WeChat mini-programs with your own hands, and truly land every idea as a product.
+      text: Course Outline
+      link: /en-us/stage-0/
 ---
 
-<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
-  <h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">Why Choose Easy-Vibe?</h2>
-  <p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
-    2025 is the first year of AI programming. More and more people are trying AI programming, but often stop at simple demos.<br>
-    Easy-Vibe is dedicated to filling this gap, teaching you how to organize the development process with AI like a professional, from prototype to production, bridging the last mile of product landing.
-  </p>
-</div>
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site } = useData()
-const base = site.value.base
-</script>
-
-<div class="stage-container">
-  <a :href="base + 'en-us/stage-0/'" class="stage-card">
-    <div class="stage-icon">🎨</div>
-    <h3>Stage 1: AI Product Manager</h3>
-    <p>Suitable for product, operations, and non-technical backgrounds. Build confidence through games, master Vibe Coding workflow, and independently complete high-fidelity web application prototypes.</p>
-    <span>Learn More →</span>
-  </a>
-  <a :href="base + 'en-us/stage-2/'" class="stage-card">
-    <div class="stage-icon">💻</div>
-    <h3>Stage 2: Full-Stack Development</h3>
-    <p>Dive deep into full-stack development. Frontend componentization, database design, backend API development, and deployment.</p>
-    <span>Learn More →</span>
-  </a>
-  <a :href="base + 'en-us/stage-3/'" class="stage-card">
-    <div class="stage-icon">🚀</div>
-    <h3>Stage 3: Advanced Development</h3>
-    <p>Build complex cross-platform applications. WeChat mini-program practice, challenge higher-level AI-native application development.</p>
-    <span>Learn More →</span>
-  </a>
-</div>
-
-<style>
-/* LOGO 容器：负责上下浮动动画 */
-.VPHomeHero .image {
-  animation: float 6s ease-in-out infinite;
-}
-
-@media (min-width: 960px) {
-  /* 给 LOGO 容器设置不可侵犯的左侧边界 */
-  .VPHomeHero .image {
-    margin-left: 80px !important;
-    flex-shrink: 0; /* 保证图片不被挤压 */
-  }
-
-  .VPHomeHero .tagline {
-    max-width: 450px;
-    white-space: pre-wrap;
-  }
-}
-
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-
-.stage-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-  max-width: 1152px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-  .stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
-  .stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
-  .stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
-  .stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
-
-  .stage-card {
-    background-color: var(--vp-c-bg-soft);
-    border-radius: 12px;
-    padding: 24px;
-    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
-    border: 1px solid var(--vp-c-bg-soft);
-    position: relative;
-    overflow: hidden;
-  }
-
-  .stage-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 4px;
-    height: 100%;
-    background-color: var(--card-color);
-    opacity: 0.5;
-    transition: opacity 0.2s;
-  }
-
-  .stage-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    border-color: var(--card-color);
-  }
-
-  .stage-card:hover::before {
-    opacity: 1;
-  }
-
-  .stage-icon {
-    font-size: 3rem;
-    margin-bottom: 16px;
-    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
-  }
-
-  .stage-card h3 {
-    font-size: 1.2rem;
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: var(--vp-c-text-1);
-    transition: color 0.2s;
-  }
-
-  .stage-card:hover h3 {
-    color: var(--card-color);
-  }
-
-  .stage-card p {
-    font-size: 0.9rem;
-    color: var(--vp-c-text-2);
-    margin-bottom: 16px;
-    line-height: 1.5;
-  }
-
-  .stage-card a {
-    color: var(--card-color);
-    font-weight: 500;
-    text-decoration: none;
-    font-size: 0.9rem;
-    display: inline-flex;
-    align-items: center;
-    transition: transform 0.2s;
-  }
-
-  .stage-card a:hover {
-    text-decoration: none;
-    transform: translateX(4px);
-  }
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">Find this helpful?</h3>
-  <p class="support-text">Your Star motivates us to keep updating 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-  border: 1px solid var(--vp-c-bg-soft);
-  transition: border-color 0.3s;
-}
-
-.footer-cta:hover {
-  border-color: var(--vp-c-brand);
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-
-.VPButton.alt[href*="github.com"] {
-  background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
-  background-size: 200% auto;
-  border: 1px solid transparent !important;
-  color: white !important;
-  font-weight: 600;
-  animation: gradient 3s linear infinite;
-  box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
-  transition: all 0.3s ease;
-}
-
-.VPButton.alt[href*="github.com"]:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
-  background-position: right center;
-}
-
-@keyframes gradient {
-  0% { background-position: 0% 50%; }
-  100% { background-position: 200% 50%; }
-}
-</style>
+<HomeFeatures />
diff --git a/docs/es-es/index.md b/docs/es-es/index.md
index 9adfa57..f701e88 100644
--- a/docs/es-es/index.md
+++ b/docs/es-es/index.md
@@ -1,99 +1,17 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: 'Aprende Vibe Coding desde Cero'
-  tagline:
-    - Conviértete en un súper individuo combinando producto, diseño y desarrollo full-stack.
-    - De idea a prototipo, de prototipo a producto, convierte cada salida en un producto entregable.
-    - Haz de la IA tu pareja: más rápido, más estable, más creativo.
-    - Construye tu moat tecnológico y de producto con una ruta de aprendizaje sistemática.
+  text: 'Guía de Programación con IA desde Cero'
+  tagline: 'Un nuevo paradigma de programación para todos. Ya seas un PM o un desarrollador Full Stack, encuentra tu camino de programación con IA aquí.'
   actions:
     - theme: brand
-      text: Empezar a Aprender
-      link: /stage-0/0.1-learning-map/
+      text: Empezar
+      link: /es-es/stage-0/
     - theme: alt
-      text: ⭐️ Star en GitHub
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: Amigable para Principiantes
-    details: Diseñado para antecedentes no técnicos. Comienza con "si puedes hablar, puedes programar", empieza rápidamente a través de juegos como Snake, y supera el miedo técnico.
-  - title: Ruta Progresiva Práctica
-    details: Método único de aprendizaje en "tres etapas". Desde el pensamiento de producto de IA, hasta la implementación de desarrollo full-stack, hasta la construcción de aplicaciones complejas, paso a paso.
-  - title: Nuevo Paradigma de Vibe Coding
-    details: Domina el núcleo de la programación en la era de la IA. Aprende a programar en pareja con la IA, haciendo de tu IDE tu socio más fuerte.
-  - title: Impulsado por Proyectos Reales
-    details: Sin código de juguete. Construye prototipos web, aplicaciones full-stack, mini-programas de WeChat con tus propias manos, y realmente lleva cada idea a un producto.
+      text: Esquema del Curso
+      link: /es-es/stage-0/
 ---
 
-<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
-  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
-    <h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Traducción en Español en Progreso</h2>
-    <p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
-      Estamos trabajando duro para traducir el tutorial completo de Easy-Vibe al español.<br>
-      ¡Estén atentos para la versión completa!<br><br>
-      Mientras tanto, puedes visitar la<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">versión en inglés</a> o la<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">versión en chino</a>.
-    </p>
-  </div>
-</div>
-
-<style>
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">¿Te resulta útil?</h3>
-  <p class="support-text">Tu Star nos motiva a seguir actualizando 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-</style>
+<HomeFeatures />
diff --git a/docs/fr-fr/index.md b/docs/fr-fr/index.md
index 69a4d9b..9d0125a 100644
--- a/docs/fr-fr/index.md
+++ b/docs/fr-fr/index.md
@@ -1,99 +1,17 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: 'Apprenez Vibe Coding de Zéro'
-  tagline:
-    - Devenez une super personne combinant produit, design et développement full-stack.
-    - De l'idée au prototype, du prototype au produit, transformez chaque sortie en un produit livrable.
-    - Faites de l'IA votre partenaire: plus rapide, plus stable, plus créatif.
-    - Construisez votre fossé technologique et produit avec une voie d'apprentissage systématique.
+  text: 'Guide de Codage IA à partir de Zéro'
+  tagline: 'Un nouveau paradigme de codage pour tous. Que vous soyez PM ou développeur Full Stack, trouvez votre voie de codage IA ici.'
   actions:
     - theme: brand
-      text: Commencer à Apprendre
-      link: /stage-0/0.1-learning-map/
+      text: Commencer
+      link: /fr-fr/stage-0/
     - theme: alt
-      text: ⭐️ Star sur GitHub
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: Adapté aux Débutants
-    details: Conçu pour les origines non techniques. Commencez par "si vous pouvez parler, vous pouvez coder", démarrez rapidement par des jeux comme Snake, et surmontez la peur technique.
-  - title: Voie Progressive Pratique
-    details: Méthode unique d'apprentissage en "trois étapes". De la pensée produit IA, à la implémentation développement full-stack, à la construction d'applications complexes, étape par étape.
-  - title: Nouveau Paradigme de Vibe Coding
-    details: Maîtrisez le cœur de la programmation à l'ère de l'IA. Apprenez à programmer en binôme avec l'IA, faisant de votre IDE votre partenaire le plus fort.
-  - title: Piloté par des Projets Réels
-    details: Pas de code jouet. Construisez des prototypes web, des applications full-stack, des mini-programmes WeChat de vos propres mains, et faites vraiment de chaque idée un produit.
+      text: Plan du Cours
+      link: /fr-fr/stage-0/
 ---
 
-<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
-  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
-    <h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Traduction en Français en Cours</h2>
-    <p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
-      Nous travaillons dur pour traduire le tutoriel complet d'Easy-Vibe en français.<br>
-      Restez à l'écoute pour la version complète !<br><br>
-      En attendant, vous pouvez visiter la<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">version anglaise</a> ou la<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">version chinoise</a>.
-    </p>
-  </div>
-</div>
-
-<style>
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">Trouvez cela utile ?</h3>
-  <p class="support-text">Votre Star nous motive à continuer à mettre à jour 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-</style>
+<HomeFeatures />
diff --git a/docs/ja-jp/index.md b/docs/ja-jp/index.md
index 57f620d..a31d4e6 100644
--- a/docs/ja-jp/index.md
+++ b/docs/ja-jp/index.md
@@ -1,238 +1,17 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: 'Vibe Coding を 0 から 1 へ'
-  tagline:
-    - プロダクト、デザイン、フルスタック開発を兼ね備えたスーパー個人になりましょう。
-    - アイデアからプロトタイプへ、プロトタイプから製品へ、すべてのアウトプットを納品可能な製品にします。
-    - AI をあなたのパートナーに：より速く、より安定して、より創造的に。
-    - システマティックな学習パスで、あなたの個人的技術と製品の護城河を構築します。
+  text: 'ゼロからのAIコーディングガイド'
+  tagline: 'すべての人のための新しいコーディングパラダイム。PMでもフルスタック開発者でも、ここで自分のAIコーディングの道を見つけることができます。'
   actions:
     - theme: brand
-      text: 学習を始める
-      link: /stage-0/0.1-learning-map/
+      text: 学習を開始
+      link: /ja-jp/stage-0/
     - theme: alt
-      text: ⭐️ GitHub で Star
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: 初心者に優しい
-    details: 非技術的背景のために設計されています。「話せるならコードも書ける」から始めて、Snake などのゲームを通じて素早く始め、技術への恐怖を克服しましょう。
-  - title: 段階的な実践パス
-    details: 独自の「3段階」学習法。AI プロダクトマネージャー思考から、フルスタック開発実装、複雑なアプリケーション構築へ、着実に進みます。
-  - title: Vibe Coding の新しいパラダイム
-    details: AI 時代のプログラミングの中核をマスターしましょう。AI とペアプログラミングする方法を学び、IDE を最強のパートナーにします。
-  - title: リアルプロジェクト主導
-    details: おもちゃのコードはありません。Web プロトタイプ、フルスタックアプリケーション、WeChat ミニプログラムを自分の手で構築し、すべてのアイデアを本当の製品として落地させます。
+      text: コース概要
+      link: /ja-jp/stage-0/
 ---
 
-<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
-  <h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">Easy-Vibe を選ぶ理由</h2>
-  <p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
-    2025 年は AI プログラミングの元年です。ますます多くの人々が AI プログラミングを試していますが、しばしば単純なデモで止まっています。<br>
-    Easy-Vibe はこのギャップを埋めることに専念しており、プロのように AI で開発プロセスを整理し、プロトタイプから製品まで、製品落地の最後の 1 キロを橋渡しする方法を教えます。
-  </p>
-</div>
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site } = useData()
-const base = site.value.base
-</script>
-
-<div class="stage-container">
-  <a :href="base + 'ja-jp/stage-0/'" class="stage-card">
-    <div class="stage-icon">🎨</div>
-    <h3>Stage 1: AI プロダクトマネージャー</h3>
-    <p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、Vibe Coding ワークフローをマスターしましょう。</p>
-    <span>詳しく見る →</span>
-  </a>
-  <a :href="base + 'ja-jp/stage-2/'" class="stage-card">
-    <div class="stage-icon">💻</div>
-    <h3>Stage 2: フルスタック開発</h3>
-    <p>フルスタック開発に深く潜り込みましょう。フロントエンドコンポーネント化、データベース設計、バックエンド API 開発、デプロイメント。</p>
-    <span>詳しく見る →</span>
-  </a>
-  <a :href="base + 'ja-jp/stage-3/'" class="stage-card">
-    <div class="stage-icon">🚀</div>
-    <h3>Stage 3: 上級開発</h3>
-    <p>複雑なクロスプラットフォームアプリケーションを構築しましょう。WeChat ミニプログラム実戦、より高レベルの AI ネイティブアプリケーション開発に挑戦します。</p>
-    <span>詳しく見る →</span>
-  </a>
-</div>
-
-<style>
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-
-.stage-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-  max-width: 1152px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-  .stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
-  .stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
-  .stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
-  .stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
-
-  .stage-card {
-    background-color: var(--vp-c-bg-soft);
-    border-radius: 12px;
-    padding: 24px;
-    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
-    border: 1px solid var(--vp-c-bg-soft);
-    position: relative;
-    overflow: hidden;
-  }
-
-  .stage-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 4px;
-    height: 100%;
-    background-color: var(--card-color);
-    opacity: 0.5;
-    transition: opacity 0.2s;
-  }
-
-  .stage-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    border-color: var(--card-color);
-  }
-
-  .stage-card:hover::before {
-    opacity: 1;
-  }
-
-  .stage-icon {
-    font-size: 3rem;
-    margin-bottom: 16px;
-    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
-  }
-
-  .stage-card h3 {
-    font-size: 1.2rem;
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: var(--vp-c-text-1);
-    transition: color 0.2s;
-  }
-
-  .stage-card:hover h3 {
-    color: var(--card-color);
-  }
-
-  .stage-card p {
-    font-size: 0.9rem;
-    color: var(--vp-c-text-2);
-    margin-bottom: 16px;
-    line-height: 1.5;
-  }
-
-  .stage-card a {
-    color: var(--card-color);
-    font-weight: 500;
-    text-decoration: none;
-    font-size: 0.9rem;
-    display: inline-flex;
-    align-items: center;
-    transition: transform 0.2s;
-  }
-
-  .stage-card a:hover {
-    text-decoration: none;
-    transform: translateX(4px);
-  }
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">お役に立ちましたか？</h3>
-  <p class="support-text">あなたの Star が更新の励みになります 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-  border: 1px solid var(--vp-c-bg-soft);
-  transition: border-color 0.3s;
-}
-
-.footer-cta:hover {
-  border-color: var(--vp-c-brand);
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-
-.VPButton.alt[href*="github.com"] {
-  background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
-  background-size: 200% auto;
-  border: 1px solid transparent !important;
-  color: white !important;
-  font-weight: 600;
-  animation: gradient 3s linear infinite;
-  box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
-  transition: all 0.3s ease;
-}
-
-.VPButton.alt[href*="github.com"]:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
-  background-position: right center;
-}
-
-@keyframes gradient {
-  0% { background-position: 0% 50%; }
-  100% { background-position: 200% 50%; }
-}
-</style>
+<HomeFeatures />
diff --git a/docs/ko-kr/index.md b/docs/ko-kr/index.md
index 01aab26..756fe86 100644
--- a/docs/ko-kr/index.md
+++ b/docs/ko-kr/index.md
@@ -1,99 +1,17 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: 'Vibe Coding을 처음부터 체계적으로 학습'
-  tagline:
-    - 제품, 디자인, 풀스택 개발을 결합한 슈퍼 개인이 되세요.
-    - 아이디어에서 프로토타입으로, 프로토타입에서 제품으로, 모든 결과물을 실제 제품으로 전환하세요.
-    - AI를 파트너로 만드세요: 더 빠르게, 더 안정적으로, 더 창의적으로.
-    - 체계적인 학습 경로로 개인의 기술과 제품의 보호막을 구축하세요.
+  text: '제로 베이스 AI 코딩 가이드'
+  tagline: '모두를 위한 새로운 코딩 패러다임. PM이든 풀스택 개발자든, 여기서 자신만의 AI 코딩 경로를 찾을 수 있습니다.'
   actions:
     - theme: brand
       text: 학습 시작
-      link: /stage-0/0.1-learning-map/
+      link: /ko-kr/stage-0/
     - theme: alt
-      text: ⭐️ GitHub Star
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: 초보자 친화적
-    details: 비기술 배경을 위해 설계되었습니다. "말할 수 있다면 코딩할 수 있습니다"로 시작하여 스네이크 게임 등을 통해 빠르게 시작하고 기술적 두려움을 극복하세요.
-  - title: 점진적 실무 경로
-    details: 독특한 "3단계" 학습 방법론. AI 제품 매니저 사고방식에서 풀스택 개발 구현까지, 복잡한 애플리케이션 구축까지 단계별로.
-  - title: Vibe Coding 새로운 패러다임
-    details: AI 시대 프로그래밍의 핵심을 마스터하세요. AI와 페어 프로그래밍하는 법을 배우고 IDE를 가장 강력한 파트너로 만드세요.
-  - title: 실제 프로젝트 주도
-    details: 장난감 코드는 없습니다. 직접 웹 프로토타입, 풀스택 애플리케이션, 위챗 미니 프로그램을 구축하고 모든 아이디어를 실제 제품으로 실현하세요.
+      text: 과정 개요
+      link: /ko-kr/stage-0/
 ---
 
-<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
-  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
-    <h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 한국어 번역 진행 중</h2>
-    <p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
-      전체 Easy-Vibe 튜토리얼을 한국어로 번역하는 작업이 진행 중입니다.<br>
-      완전한 버전을 기다려주세요!<br><br>
-      그 전에는<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">중국어 간체판</a> 또는 <a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">영문판</a>을 먼저 방문하실 수 있습니다.
-    </p>
-  </div>
-</div>
-
-<style>
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">도움이 되셨나요?</h3>
-  <p class="support-text">Star는 저희가 계속 업데이트할 수 있는 동기가 됩니다 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-</style>
+<HomeFeatures />
diff --git a/docs/vi-vn/index.md b/docs/vi-vn/index.md
index 4df4b7c..c396ea3 100644
--- a/docs/vi-vn/index.md
+++ b/docs/vi-vn/index.md
@@ -1,99 +1,17 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: 'Học Vibe Coding từ Con Số Không'
-  tagline:
-    - Trở thành một cá nhân siêu kết hợp sản phẩm, thiết kế và phát triển full-stack.
-    - Từ ý tưởng sang nguyên mẫu, từ nguyên mẫu sang sản phẩm, biến mọi đầu ra thành sản phẩm có thể giao hàng.
-    - Khiến AI trở thành đối tác của bạn: nhanh hơn, ổn định hơn, sáng tạo hơn.
-    - Xây dựng hào kỹ thuật và sản phẩm cá nhân với lộ trình học tập có hệ thống.
+  text: 'Hướng dẫn Lập trình AI từ con số 0'
+  tagline: 'Một mô hình lập trình mới cho mọi người. Dù bạn là PM hay Full Stack Dev, hãy tìm lộ trình lập trình AI của bạn tại đây.'
   actions:
     - theme: brand
-      text: Bắt Đầu Học
-      link: /stage-0/0.1-learning-map/
+      text: Bắt đầu học
+      link: /vi-vn/stage-0/
     - theme: alt
-      text: ⭐️ Star trên GitHub
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: Thân thiện với Người mới
-    details: Được thiết kế cho nền tảng không kỹ thuật. Bắt đầu với "nếu bạn có thể nói, bạn có thể lập trình", bắt đầu nhanh thông qua các trò chơi như Snake, và vượt qua nỗi sợ kỹ thuật.
-  - title: Lộ trình Thực tế Tiến bộ
-    details: Phương pháp học tập độc đáo "ba giai đoạn". Từ tư duy quản lý sản phẩm AI, đến triển khai phát triển full-stack, đến xây dựng ứng dụng phức tạp, từng bước một.
-  - title: Vibe Coding Paradigm Mới
-    details: Làm chủ cốt lõi của lập trình trong kỷ nguyên AI. Học lập trình cặp với AI, làm cho IDE trở thành đối tác mạnh nhất của bạn.
-  - title: Dẫn dắt bởi Dự án Thực
-    details: Không mã đồ chơi. Tự xây dựng nguyên mẫu web, ứng dụng full-stack, chương trình nhỏ WeChat, và thực hiện biến mọi ý tưởng thành sản phẩm.
+      text: Đề cương khóa học
+      link: /vi-vn/stage-0/
 ---
 
-<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
-  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
-    <h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Bản dịch tiếng Việt đang tiến hành</h2>
-    <p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
-      Chúng tôi đang nỗ lực dịch toàn bộ hướng dẫn Easy-Vibe sang tiếng Việt.<br>
-      Hãy chờ đợi phiên bản hoàn chỉnh!<br><br>
-      Trong thời gian chờ đợi, bạn có thể truy cập<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">phiên bản tiếng Anh</a> hoặc <a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">phiên bản tiếng Trung</a>.
-    </p>
-  </div>
-</div>
-
-<style>
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">Bạn thấy có hữu ích không?</h3>
-  <p class="support-text">Star của bạn thúc đẩy chúng tôi tiếp tục cập nhật 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-</style>
+<HomeFeatures />
diff --git a/docs/zh-cn/index.md b/docs/zh-cn/index.md
index b6dcfc0..afeb0b9 100644
--- a/docs/zh-cn/index.md
+++ b/docs/zh-cn/index.md
@@ -1,262 +1,21 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: 'Learn Vibe Coding from 0 to 1'
-  tagline:
-    - 不止是写代码，而是成为集产品、设计、全栈开发于一身的超级个体。
-    - 从想法到原型，从原型到上线，把每一次输出变成可交付的产品。
-    - 让 AI 成为你的搭档：更快、更稳、更有创造力。
-    - 用系统化的学习路径，构建你的个人技术与产品护城河。
+  text: '从零开始的 AI 编程指南'
+  tagline: '适合所有人的编程新范式。无论你是产品经理还是全栈开发者，都能在这里找到属于你的 AI 编程之路。'
+  typingTagline:
+    - 适合所有人的编程新范式。
+    - 无论你是产品经理还是全栈开发者，
+    - 都能在这里找到属于你的 AI 编程之路。
   actions:
     - theme: brand
-      text: 开启学习之旅
+      text: 开始学习
       link: /zh-cn/stage-0/0.1-learning-map/
     - theme: alt
-      text: ⭐️ GitHub 加速更新
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: 零基础友好
-    details: 专为非技术背景设计。从"会说话就会编程"开始，通过贪吃蛇等小游戏快速上手，打破技术恐惧。
-  - title: 循序渐进的实战路径
-    details: 独创"三阶段"学习法。从 AI 产品经理思维，到全栈开发落地，再到复杂应用构建，步步为营。
-  - title: Vibe Coding 新范式
-    details: 掌握 AI 时代的编程核心。学会与 AI 结对编程，让 IDE 成为你的最强搭档。
-  - title: 真实项目驱动
-    details: 拒绝玩具代码。亲手构建 Web 原型、全栈应用、微信小程序，将每一个想法真正落地为产品。
+      text: 课程大纲
+      link: /zh-cn/stage-0/
 ---
 
-<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
-  <h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">为什么选择 Easy-Vibe？</h2>
-  <p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
-    2025 年是 AI 编程的元年。越来越多的人开始尝试 AI 编程，但往往止步于简单的 Demo。<br>
-    Easy-Vibe 致力于填补这一空白，教你如何像专业人士一样，用 AI 组织开发流程，从原型到上线，打通产品落地的最后一公里。
-  </p>
-</div>
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site } = useData()
-const base = site.value.base
-</script>
-
-<div class="stage-container">
-  <a :href="base + 'zh-cn/stage-0/'" class="stage-card">
-    <div class="stage-icon">🎨</div>
-    <h3>Stage 1: AI 产品经理</h3>
-    <p>适合产品、运营及非技术背景。从做游戏建立信心，到掌握 Vibe Coding 工作流，独立完成高保真 Web 应用原型。</p>
-    <span>查看详情 →</span>
-  </a>
-  <a :href="base + 'zh-cn/stage-2/'" class="stage-card">
-    <div class="stage-icon">💻</div>
-    <h3>Stage 2: 初中级开发</h3>
-    <p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
-    <span>查看详情 →</span>
-  </a>
-  <a :href="base + 'zh-cn/stage-3/'" class="stage-card">
-    <div class="stage-icon">🚀</div>
-    <h3>Stage 3: 高级开发</h3>
-    <p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>
-    <span>查看详情 →</span>
-  </a>
-</div>
-
-<style>
-/* LOGO 容器：负责上下浮动动画 */
-.VPHomeHero .image {
-  animation: float 6s ease-in-out infinite;
-}
-
-/* 鼠标悬停时暂停浮动 */
-.VPHomeHero .image:hover {
-  animation-play-state: paused;
-}
-
-@media (min-width: 960px) {
-  /* 给 LOGO 容器设置不可侵犯的左侧边界 */
-  .VPHomeHero .image {
-    margin-left: 80px !important;
-    flex-shrink: 0; /* 保证图片不被挤压 */
-  }
-
-  .VPHomeHero .tagline {
-    max-width: 450px;
-    white-space: pre-wrap;
-  }
-}
-
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-
-.stage-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-  max-width: 1152px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-  .stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
-  .stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
-  .stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
-  .stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
-
-  .stage-card {
-    background-color: var(--vp-c-bg-soft);
-    border-radius: 12px;
-    padding: 24px;
-    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
-    border: 1px solid var(--vp-c-bg-soft);
-    position: relative;
-    overflow: hidden;
-    text-decoration: none;
-  }
-
-  .stage-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 4px;
-    height: 100%;
-    background-color: var(--card-color);
-    opacity: 0.5;
-    transition: opacity 0.2s;
-  }
-
-  .stage-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    border-color: var(--card-color);
-  }
-
-  .stage-card:hover::before {
-    opacity: 1;
-  }
-
-  .stage-icon {
-    font-size: 3rem;
-    margin-bottom: 16px;
-    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
-  }
-
-  .stage-card h3 {
-    font-size: 1.2rem;
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: var(--vp-c-text-1);
-    transition: color 0.2s;
-  }
-
-  .stage-card:hover h3 {
-    color: var(--card-color);
-  }
-
-  .stage-card p {
-    font-size: 0.9rem;
-    color: var(--vp-c-text-2);
-    margin-bottom: 16px;
-    line-height: 1.5;
-  }
-
-  .stage-card a {
-    color: var(--card-color);
-    font-weight: 500;
-    text-decoration: none;
-    font-size: 0.9rem;
-    display: inline-flex;
-    align-items: center;
-    transition: transform 0.2s;
-  }
-
-  .stage-card a:hover {
-    text-decoration: none;
-    transform: translateX(4px);
-  }
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">觉得有帮助？</h3>
-  <p class="support-text">你的 Star 是我们持续更新的动力 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-  border: 1px solid var(--vp-c-bg-soft);
-  transition: border-color 0.3s;
-}
-
-.footer-cta:hover {
-  border-color: var(--vp-c-brand);
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-
-.VPButton.alt[href*="github.com"] {
-  background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
-  background-size: 200% auto;
-  border: 1px solid transparent !important;
-  color: white !important;
-  font-weight: 600;
-  animation: gradient 3s linear infinite;
-  box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
-  transition: all 0.3s ease;
-}
-
-.VPButton.alt[href*="github.com"]:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
-  background-position: right center;
-}
-
-@keyframes gradient {
-  0% { background-position: 0% 50%; }
-  100% { background-position: 200% 50%; }
-}
-</style>
+<HomeFeatures />
diff --git a/docs/zh-tw/index.md b/docs/zh-tw/index.md
index 0c00826..6d1f93f 100644
--- a/docs/zh-tw/index.md
+++ b/docs/zh-tw/index.md
@@ -1,99 +1,17 @@
 ---
 layout: home
+navbar: false
 hero:
   name: 'Easy-Vibe'
-  text: '從零到一學習 Vibe Coding'
-  tagline:
-    - 成為結合產品、設計和全端開發的超級個人。
-    - 從想法到原型，從原型到產品，將每個輸出轉化為可交付的產品。
-    - 讓 AI 成為你的合作夥伴：更快、更穩定、更有創造力。
-    - 透過系統化的學習路徑，建立個人的技術與產品護城河。
+  text: '從零開始的 AI 編程指南'
+  tagline: '適合所有人的編程新範式。無論你是產品經理還是全棧開發者，都能在這裡找到屬於你的 AI 編程之路。'
   actions:
     - theme: brand
       text: 開始學習
-      link: /stage-0/0.1-learning-map/
+      link: /zh-tw/stage-0/
     - theme: alt
-      text: ⭐️ GitHub Star
-      link: https://github.com/datawhalechina/easy-vibe
-features:
-  - title: 新手友善
-    details: 專為非技術背景設計。從「會說話就會寫程式」開始，透過貪吃蛇等遊戲快速入門，克服技術恐懼。
-  - title: 漸進實戰路徑
-    details: 獨特的「三階段」學習法。從 AI 產品經理思維，到全端開發實作，到複雜應用構建，一步一腳印。
-  - title: Vibe Coding 新範式
-    details: 掌握 AI 時代程式設計的核心。學會與 AI 配對程式設計，讓 IDE 成為你最強的合作夥伴。
-  - title: 真實專案驅動
-    details: 沒有玩具程式碼。親手打造 Web 原型、全端應用、微信小程式，真正將每個想法落地為產品。
+      text: 課程大綱
+      link: /zh-tw/stage-0/
 ---
 
-<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
-  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
-    <h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 繁體中文版正在翻譯中</h2>
-    <p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
-      我們正在努力將完整的 Easy-Vibe 教程翻譯成繁體中文。<br>
-      敬請期待完整版本！<br><br>
-      在此之前，您可以先訪問<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">簡體中文版</a>或<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">英文版</a>。
-    </p>
-  </div>
-</div>
-
-<style>
-.VPHomeHero .text {
-  font-size: 1.8rem;
-}
-</style>
-
-<div class="footer-cta">
-  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
-  <h3 class="support-title">覺得有幫助嗎？</h3>
-  <p class="support-text">您的 Star 鼓勵我們持續更新 🚀</p>
-  <div class="github-badge">
-    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
-      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
-    </a>
-  </div>
-</div>
-
-<style>
-.footer-cta {
-  margin-top: 100px;
-  padding: 40px 24px;
-  text-align: center;
-  background: var(--vp-c-bg-soft);
-  border-radius: 24px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-}
-
-.love-text {
-  color: var(--vp-c-text-3);
-  font-size: 0.875rem;
-  margin-bottom: 24px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.support-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.support-text {
-  font-size: 1.1rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 24px;
-}
-
-.github-badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-badge img {
-  height: 32px;
-}
-</style>
+<HomeFeatures />