Merge branch 'dev'

2026-01-27 02:09:21 +08:00
parent 761aa7d68b 11605edb3f
commit 57884c4a5c
16 changed files with 1935 additions and 1398 deletions
@@ -194,6 +194,10 @@ const commonThemeConfig = {
  // ],
  outline: {
    level: [1, 6]
+  },
+  footer: {
+    message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a> | <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010602202215" rel="noreferrer" target="_blank">京公网安备11010602202215号</a>',
+    copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
  }
 }

@@ -640,10 +644,6 @@ export default defineConfig({
            }
          ]
        },
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    },

@@ -684,10 +684,6 @@ export default defineConfig({
        ],
        // TODO: Add English sidebar when content is ready
        sidebar: {},
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    },

@@ -728,10 +724,6 @@ export default defineConfig({
        ],
        // TODO: Add Japanese sidebar when content is ready
        sidebar: {},
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    },
    'zh-tw': {
@@ -769,10 +761,6 @@ export default defineConfig({
          { text: '附錄', link: '/zh-tw/appendix/' }
        ],
        sidebar: {},
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    },
    'ko-kr': {
@@ -807,10 +795,6 @@ export default defineConfig({
          { text: '부록', link: '/ko-kr/appendix/' }
        ],
        sidebar: {},
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    },
    'es-es': {
@@ -848,10 +832,6 @@ export default defineConfig({
          { text: 'Apéndice', link: '/es-es/appendix/' }
        ],
        sidebar: {},
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    },
    'fr-fr': {
@@ -886,10 +866,6 @@ export default defineConfig({
          { text: 'Annexe', link: '/fr-fr/appendix/' }
        ],
        sidebar: {},
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    },
    'de-de': {
@@ -924,10 +900,6 @@ export default defineConfig({
          { text: 'Anhang', link: '/de-de/appendix/' }
        ],
        sidebar: {},
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    },
    'ar-sa': {
@@ -965,10 +937,6 @@ export default defineConfig({
          { text: 'ملحق', link: '/ar-sa/appendix/' }
        ],
        sidebar: {},
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    },
    'vi-vn': {
@@ -1006,10 +974,6 @@ export default defineConfig({
          { text: 'Phụ lục', link: '/vi-vn/appendix/' }
        ],
        sidebar: {},
-        footer: {
-          message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
-          copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
-        }
      }
    }
  }
@@ -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"
          />
@@ -223,12 +223,32 @@ watch(lineHeight, (next) => {
  font-size: 18px;
  font-weight: 500;
  white-space: pre-wrap;
-  color: var(--vp-c-text-2);
+  color: #000000;
  min-height: 28px;
  display: flex;
-  /* 确保左对齐 */
-  text-align: left;
-  justify-content: flex-start;
+  /* 居中对齐 */
+  text-align: center;
+  justify-content: center;
+}
+
+/* 强制 HomeHero 内容居中 */
+.VPHomeHero .container {
+  text-align: center;
+}
+.VPHomeHero .main {
+  margin: 0 auto;
+}
+.VPHomeHero .name,
+.VPHomeHero .text {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+.VPHomeHero .text {
+  color: #000000 !important;
+}
+.VPHomeHero .actions {
+  justify-content: center;
 }

@media (min-width: 640px) {
@@ -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)
@@ -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,66 @@
 .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);
+}
+
+/* HomeFeatures Sections Scroll Offset */
+.section-container {
+  scroll-margin-top: 80px;
+}
@@ -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 />
@@ -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 />
@@ -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 />
@@ -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 />
@@ -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 />
@@ -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 />
@@ -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 />
@@ -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 />
@@ -1,262 +1,23 @@
 ---
 layout: home
+navbar: false
 hero:
  name: 'Easy-Vibe'
-  text: 'Learn Vibe Coding from 0 to 1'
-  tagline:
-    - 不止是写代码，而是成为集产品、设计、全栈开发于一身的超级个体。
-    - 从想法到原型，从原型到上线，把每一次输出变成可交付的产品。
-    - 让 AI 成为你的搭档：更快、更稳、更有创造力。
-    - 用系统化的学习路径，构建你的个人技术与产品护城河。
+  text: '从零开始的 AI 编程指南'
+  tagline: '适合所有人的编程新范式。无论你是产品经理还是全栈开发者，都能在这里找到属于你的 AI 编程之路。'
+  typingTagline:
+    - 代码，注入灵魂。
+    - 智能，懂你所想。
+    - 复杂系统，一览无余。
+    - 灵感，即刻落地。
+    - 编程，本该如此。
  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 原型、全栈应用、微信小程序，将每一个想法真正落地为产品。
 ---

-<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 />
@@ -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 />