docs: update stage-0 pages and navigation for content restructuring

- Mark stage-0 links as "Coming Soon" across all language versions - Update navigation labels from "Product Manager" to "Novice & PM" variants - Consolidate stage-0 and stage-1 content into single "Novice & Product Prototype" section - Refactor homepage feature grid to use Apple Store-style layout - Update stage descriptions and learning path summaries to reflect new structure - Ensure consistency across all supported languages (en, zh, ja, ko, es, fr, de, ar, vi)
2026-01-29 20:01:05 +08:00
parent 119304a0a4
commit a9a5c5c8a7
17 changed files with 186 additions and 178 deletions
@@ -311,7 +311,7 @@ export default defineConfig({
        nav: [
          { text: '首页', link: '/zh-cn/' },
          {
-            text: '产品经理',
+            text: '新手与产品原型',
            link: '/zh-cn/stage-0/'
          },
          {
@@ -669,7 +669,7 @@ export default defineConfig({
        nav: [
          { text: 'Home', link: '/en-us/' },
          {
-            text: 'Product Manager',
+            text: 'Novice & PM',
            link: '/en-us/stage-0/'
          },
          {
@@ -709,7 +709,7 @@ export default defineConfig({
        nav: [
          { text: 'ホーム', link: '/ja-jp/' },
          {
-            text: 'AI プロダクトマネージャー',
+            text: '初心者とPM',
            link: '/ja-jp/stage-0/'
          },
          {
@@ -747,7 +747,7 @@ export default defineConfig({
        nav: [
          { text: '首頁', link: '/zh-tw/' },
          {
-            text: '產品經理',
+            text: '新手與產品原型',
            link: '/zh-tw/stage-0/'
          },
          {
@@ -783,7 +783,7 @@ export default defineConfig({
        },
        nav: [
          { text: '홈', link: '/ko-kr/' },
-          { text: 'AI PM', link: '/ko-kr/stage-0/' },
+          { text: '초보자 & PM', link: '/ko-kr/stage-0/' },
          {
            text: '풀스택 개발',
            link: '/ko-kr/stage-2/'
@@ -818,7 +818,7 @@ export default defineConfig({
        nav: [
          { text: 'Inicio', link: '/es-es/' },
          {
-            text: 'PM de IA',
+            text: 'Principiante y PM',
            link: '/es-es/stage-0/'
          },
          {
@@ -854,7 +854,7 @@ export default defineConfig({
        },
        nav: [
          { text: 'Accueil', link: '/fr-fr/' },
-          { text: 'PM IA', link: '/fr-fr/stage-0/' },
+          { text: 'Débutant & PM', link: '/fr-fr/stage-0/' },
          {
            text: 'Développement Full Stack',
            link: '/fr-fr/stage-2/'
@@ -888,7 +888,7 @@ export default defineConfig({
        },
        nav: [
          { text: 'Start', link: '/de-de/' },
-          { text: 'KI-PM', link: '/de-de/stage-0/' },
+          { text: 'Anfänger & PM', link: '/de-de/stage-0/' },
          {
            text: 'Full Stack Entwicklung',
            link: '/de-de/stage-2/'
@@ -923,7 +923,7 @@ export default defineConfig({
        nav: [
          { text: 'الرئيسية', link: '/ar-sa/' },
          {
-            text: 'مدير منتج AI',
+            text: 'مبتدأ & PM',
            link: '/ar-sa/stage-0/'
          },
          {
@@ -960,7 +960,7 @@ export default defineConfig({
        nav: [
          { text: 'Trang chủ', link: '/vi-vn/' },
          {
-            text: 'PM AI',
+            text: 'Người mới & PM',
            link: '/vi-vn/stage-0/'
          },
          {
@@ -70,13 +70,13 @@ const i18n = {
      start: '开始学习'
    },
    stage1: {
-      cat: 'Stage 1 · 产品经理',
+      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/' }
+        { title: 'AI 产品经理', desc: '从想法到高保真原型，你只需要会说话。', sub: '适合非技术背景', link: '/zh-cn/stage-0/' },
+        { title: '游戏化入门', desc: '通过制作贪吃蛇、俄罗斯方块，打破对代码的恐惧。', sub: '边玩边学', link: '/zh-cn/stage-0/' },
+        { title: 'Vibe Coding', desc: '掌握 AI 时代的编程核心：提示词工程与上下文管理。', sub: '核心心法', link: '/zh-cn/stage-0/' }
      ]
    },
    stage2: {
@@ -121,7 +121,7 @@ const i18n = {
    },
    footer: {
      title: '你的想法，<br>此刻上线。',
-      desc: '从灵感到现实，只差这一个开始。',
+      desc: '灵感到现实，何不从现在开始。',
      btn: '>_ Start'
    }
  },
@@ -136,7 +136,7 @@ const i18n = {
      start: 'Start Learning'
    },
    stage1: {
-      cat: 'Stage 1 · Product Manager',
+      cat: 'Stage 1 · Novice & PM',
      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: [
@@ -202,7 +202,7 @@ const i18n = {
      start: '学習を開始'
    },
    stage1: {
-      cat: 'Stage 1 · プロダクトマネージャー',
+      cat: 'Stage 1 · 初心者とPM',
      title: 'ゼロからの入門、<br><span class="highlight">自分だけのPMになる。</span>',
      sub: 'CSの背景は不要。アイデアを話すだけで、AIが高精度のWebプロトタイプに変換します。',
      cards: [
@@ -260,7 +260,7 @@ const i18n = {
      start: '開始學習'
    },
    stage1: {
-      cat: 'Stage 1 · 產品經理',
+      cat: 'Stage 1 · 新手與產品原型',
      title: '零基礎入門，<br><span class="highlight">做自己的產品經理。</span>',
      sub: '不需要計算機專業背景，只要會說話，就能通過 AI 將你的創意轉化為高保真的 Web 原型。',
      cards: [
@@ -318,7 +318,7 @@ const i18n = {
      start: '학습 시작'
    },
    stage1: {
-      cat: 'Stage 1 · 제품 관리자',
+      cat: 'Stage 1 · 초보자 & PM',
      title: '제로 베이스 입문,<br><span class="highlight">나만의 PM이 되다.</span>',
      sub: 'CS 배경지식이 없어도 괜찮습니다. 아이디어를 말하기만 하면 AI가 고품질 웹 프로토타입으로 변환해줍니다.',
      cards: [
@@ -376,7 +376,7 @@ const i18n = {
      start: 'Empezar'
    },
    stage1: {
-      cat: 'Stage 1 · Gerente de Producto',
+      cat: 'Stage 1 · Principiante y PM',
      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: [
@@ -434,7 +434,7 @@ const i18n = {
      start: 'Commencer'
    },
    stage1: {
-      cat: 'Stage 1 · Chef de Produit',
+      cat: 'Stage 1 · Débutant & PM',
      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: [
@@ -492,7 +492,7 @@ const i18n = {
      start: 'Starten'
    },
    stage1: {
-      cat: 'Stage 1 · Produktmanager',
+      cat: 'Stage 1 · Anfänger & PM',
      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: [
@@ -608,7 +608,7 @@ const i18n = {
      start: 'Bắt đầu học'
    },
    stage1: {
-      cat: 'Stage 1 · Quản lý sản phẩm',
+      cat: 'Stage 1 · Người mới & PM',
      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: [
@@ -967,24 +967,16 @@ const appendixCards = [
        <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 class="feature-grid">
+        <a v-for="(card, i) in stage1Cards" :key="i" :href="withBase(t.stage1.cards[i].link)" class="feature-card glass">
+          <div class="feature-icon" :style="{ background: card.color }">
+            {{ card.icon }}
+          </div>
+          <div class="feature-content">
+            <h4>{{ t.stage1.cards[i].title }}</h4>
+            <p>{{ t.stage1.cards[i].desc }}</p>
          </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>

@@ -1738,3 +1730,85 @@ a {
  padding-top: 52px !important;
 }
 </style>
+
+<style scoped>
+/* Feature Grid (Apple Store Style) */
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+
+.feature-card {
+  background: var(--vp-c-bg-soft);
+  border-radius: 18px;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none !important;
+  border: 1px solid rgba(0,0,0,0.05);
+}
+
+.dark .feature-card {
+  border: 1px solid rgba(255,255,255,0.1);
+  background: var(--vp-c-bg-mute);
+}
+
+.feature-card:hover {
+  transform: scale(1.02);
+  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
+}
+
+.feature-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  margin-bottom: 24px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.feature-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.feature-content h4 {
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: var(--vp-c-text-1);
+  line-height: 1.3;
+}
+
+.feature-content p {
+  font-size: 15px;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-top: 4px;
+  margin-bottom: 0;
+}
+
+@media (max-width: 960px) {
+  .feature-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+  .feature-card {
+    padding: 24px;
+  }
+}
+</style>
@@ -7,13 +7,13 @@ Welcome to the AI Product Manager stage. Here, you will start from scratch and m
 ### Getting Started
 Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.

- [1. Learning Map](/en-us/stage-0/0.1-learning-map/)
- [2. If you can speak, you can code](/en-us/stage-0/0.2-ai-capabilities-through-games/)
+- 1. Learning Map (Coming Soon)
+- 2. If you can speak, you can code (Coming Soon)

 ### Product Manager
 Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.

- [1. Introduction to AI IDE](/en-us/stage-1/1.1-introduction-to-ai-ide/)
- [2. Building a Prototype](/en-us/stage-1/1.2-building-prototype/)
- [3. Integrating AI Capabilities](/en-us/stage-1/1.3-integrating-ai-capabilities/)
- [4. Complete Project Practice](/en-us/stage-1/1.4-complete-project-practice/)
+- 1. Introduction to AI IDE (Coming Soon)
+- 2. Building a Prototype (Coming Soon)
+- 3. Integrating AI Capabilities (Coming Soon)
+- 4. Complete Project Practice (Coming Soon)
@@ -7,13 +7,13 @@ Welcome to the AI Product Manager stage. Here, you will start from scratch and m
 ### Getting Started
 Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.

- [1. Learning Map](/ja-jp/stage-0/0.1-learning-map/)
- [2. If you can speak, you can code](/ja-jp/stage-0/0.2-ai-capabilities-through-games/)
+- 1. Learning Map (Coming Soon)
+- 2. If you can speak, you can code (Coming Soon)

 ### Product Manager
 Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.

- [1. Introduction to AI IDE](/ja-jp/stage-1/1.1-introduction-to-ai-ide/)
- [2. Building a Prototype](/ja-jp/stage-1/1.2-building-prototype/)
- [3. Integrating AI Capabilities](/ja-jp/stage-1/1.3-integrating-ai-capabilities/)
- [4. Complete Project Practice](/ja-jp/stage-1/1.4-complete-project-practice/)
+- 1. Introduction to AI IDE (Coming Soon)
+- 2. Building a Prototype (Coming Soon)
+- 3. Integrating AI Capabilities (Coming Soon)
+- 4. Complete Project Practice (Coming Soon)
@@ -7,13 +7,13 @@ Welcome to the AI Product Manager stage. Here, you will start from scratch and m
 ### Getting Started
 Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.

- [1. Learning Map](/ko-kr/stage-0/0.1-learning-map/)
- [2. If you can speak, you can code](/ko-kr/stage-0/0.2-ai-capabilities-through-games/)
+- 1. Learning Map (Coming Soon)
+- 2. If you can speak, you can code (Coming Soon)

 ### Product Manager
 Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.

- [1. Introduction to AI IDE](/ko-kr/stage-1/1.1-introduction-to-ai-ide/)
- [2. Building a Prototype](/ko-kr/stage-1/1.2-building-prototype/)
- [3. Integrating AI Capabilities](/ko-kr/stage-1/1.3-integrating-ai-capabilities/)
- [4. Complete Project Practice](/ko-kr/stage-1/1.4-complete-project-practice/)
+- 1. Introduction to AI IDE (Coming Soon)
+- 2. Building a Prototype (Coming Soon)
+- 3. Integrating AI Capabilities (Coming Soon)
+- 4. Complete Project Practice (Coming Soon)
@@ -1,24 +1,24 @@
-# AI 产品经理
+# AI 產品經理

-欢迎来到 AI 产品经理阶段。在这里，你将从零开始，掌握 Vibe Coding 工作流，成为能够独立完成产品设计的超级个体。
+歡迎來到 AI 產品經理階段。在這裡，你將從零開始，掌握 Vibe Coding 工作流，成為能夠獨立完成產品設計的超級個體。

-## 阶段概览
+## 階段概覽

-### 新手入门
-适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。
+### 新手入門
+適合產品、運營及非技術背景。通過做遊戲理解 AI 編程邏輯，建立信心。

- [1. 学习地图](/zh-tw/stage-0/0.1-learning-map/)
- [2. AI 时代，会说话就会编程](/zh-tw/stage-0/0.2-ai-capabilities-through-games/)
+- 1. 學習地圖 (即將推出)
+- 2. AI 時代，會說話就會編程 (即將推出)

-### 产品经理
-掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。
+### 產品經理
+掌握 Vibe Coding 工作流。學會拆解需求，獨立完成高保真 Web 應用原型。

- [1. 认识 AI IDE 工具](/zh-tw/stage-1/1.1-introduction-to-ai-ide/)
- [2. 动手做出原型](/zh-tw/stage-1/1.2-building-prototype/)
- [3. 给原型加上 AI 能力](/zh-tw/stage-1/1.3-integrating-ai-capabilities/)
- [4. 完整项目实战](/zh-tw/stage-1/1.4-complete-project-practice/)
- [附录 A：产品思维补充](/zh-tw/stage-1/appendix-a-product-thinking/)
- [附录 B：常见报错及解决方案](/zh-tw/stage-1/appendix-b-common-errors/)
- [附录 C：产业多分类场景方向参考](/zh-tw/stage-1/appendix-industry-scenarios/)
- [扩展阅读 1：7 款主流 Vibe Coding 在线平台实测对比](/zh-tw/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial)
- [扩展阅读 2：用编程和设计智能体开发网站](/zh-tw/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents)
+- 1. 認識 AI IDE 工具 (即將推出)
+- 2. 動手做出原型 (即將推出)
+- 3. 給原型加上 AI 能力 (即將推出)
+- 4. 完整項目實戰 (即將推出)
+- 附錄 A：產品思維補充 (即將推出)
+- 附錄 B：常見報錯及解決方案 (即將推出)
+- 附錄 C：產業多分類場景方向參考 (即將推出)
+- 擴展閱讀 1：7 款主流 Vibe Coding 在線平台實測對比 (即將推出)
+- 擴展閱讀 2：用編程和設計智能體開發網站 (即將推出)