fix(docs): update language-specific stage card links to use dynamic base

Standardize stage card links across language versions by using dynamic base path
Convert static div elements to anchor tags in Japanese and English versions

docs/en-us/index.md

@@ -34,31 +34,38 @@ features:
   </p>
 </div>
 
+<script setup>
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const base = site.value.base
+</script>
+
 <div class="stage-container">
-  <div class="stage-card">
+  <a :href="base + 'en-us/stage-0/0.1-learning-map/'" class="stage-card">
     <div class="stage-icon">🌱</div>
     <h3>Stage 0: Getting Started</h3>
     <p>Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.</p>
-    <a href="./stage-0/0.1-learning-map/">Learn More →</a>
+    <span>Learn More →</span>
-  </div>
+  </a>
-  <div class="stage-card">
+  <a :href="base + 'en-us/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
     <div class="stage-icon">🎨</div>
     <h3>Stage 1: AI Product Manager</h3>
     <p>Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.</p>
-    <a href="./stage-1/1.1-introduction-to-ai-ide/">Learn More →</a>
+    <span>Learn More →</span>
-  </div>
+  </a>
-  <div class="stage-card">
+  <a :href="base + 'en-us/stage-2/frontend/2.0-lovart-assets/'" 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>
-    <a href="./stage-2/frontend/2.0-lovart-assets/">Learn More →</a>
+    <span>Learn More →</span>
-  </div>
+  </a>
-  <div class="stage-card">
+  <a :href="base + 'en-us/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>Stage 3: Advanced Development</h3>
     <p>Build complex cross-platform applications. WeChat mini-program practical实战, challenge higher-level AI-native application development.</p>
-    <a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">Learn More →</a>
+    <span>Learn More →</span>
-  </div>
+  </a>
 </div>
 
 <style>

docs/ja-jp/index.md

@@ -34,31 +34,38 @@ features:
   </p>
 </div>
 
+<script setup>
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const base = site.value.base
+</script>
+
 <div class="stage-container">
-  <div class="stage-card">
+  <a :href="base + 'ja-jp/stage-0/0.1-learning-map/'" class="stage-card">
     <div class="stage-icon">🌱</div>
     <h3>Stage 0: 入門</h3>
     <p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、自信を構築しましょう。</p>
-    <a href="./stage-0/0.1-learning-map/">詳しく見る →</a>
+    <span>詳しく見る →</span>
-  </div>
+  </a>
-  <div class="stage-card">
+  <a :href="base + 'ja-jp/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
     <div class="stage-icon">🎨</div>
     <h3>Stage 1: AI プロダクトマネージャー</h3>
     <p>Vibe Coding ワークフローをマスターしましょう。要件を分解し、高品質な Web アプリケーションプロトタイプを独立して完成させる方法を学びます。</p>
-    <a href="./stage-1/1.1-introduction-to-ai-ide/">詳しく見る →</a>
+    <span>詳しく見る →</span>
-  </div>
+  </a>
-  <div class="stage-card">
+  <a :href="base + 'ja-jp/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
     <div class="stage-icon">💻</div>
     <h3>Stage 2: フルスタック開発</h3>
     <p>フルスタック開発に深く潜り込みましょう。フロントエンドコンポーネント化、データベース設計、バックエンド API 開発、デプロイメント。</p>
-    <a href="./stage-2/frontend/2.0-lovart-assets/">詳しく見る →</a>
+    <span>詳しく見る →</span>
-  </div>
+  </a>
-  <div class="stage-card">
+  <a :href="base + 'ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>Stage 3: 上級開発</h3>
     <p>複雑なクロスプラットフォームアプリケーションを構築しましょう。WeChat ミニプログラム実戦、より高レベルの AI ネイティブアプリケーション開発に挑戦します。</p>
-    <a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">詳しく見る →</a>
+    <span>詳しく見る →</span>
-  </div>
+  </a>
 </div>
 
 <style>

docs/zh-cn/index.md

@@ -42,25 +42,25 @@ const base = site.value.base
 </script>
 
 <div class="stage-container">
-  <a :href="base + 'cn/stage-0/0.1-learning-map/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-0/0.1-learning-map/'" class="stage-card">
     <div class="stage-icon">🌱</div>
     <h3>Stage 0: 新手入门</h3>
     <p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
     <span>查看详情 →</span>
   </a>
-  <a :href="base + 'cn/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
     <div class="stage-icon">🎨</div>
     <h3>Stage 1: AI 产品经理</h3>
     <p>掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。</p>
     <span>查看详情 →</span>
   </a>
-  <a :href="base + 'cn/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
     <div class="stage-icon">💻</div>
     <h3>Stage 2: 初中级开发</h3>
     <p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
     <span>查看详情 →</span>
   </a>
-  <a :href="base + 'cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>Stage 3: 高级开发</h3>
     <p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>