feat(homepage): update feature cards with images and improve UI

- Add cover images for stage 2 and 3 feature cards
- Enhance card hover effects and scrolling behavior
- Improve appendix section with new navigation controls
- Update stage 2 content with more specific learning paths

docs/.vitepress/theme/Layout.vue

@@ -609,7 +609,7 @@ watch(sidebarCollapsed, (collapsed) => {
     </div>
   </ClientOnly>
   <ClientOnly>
-    <ReadingProgress />
+    <ReadingProgress v-if="!isHomePage && !isWelcomePage" />
   </ClientOnly>  
 </template>
 

docs/.vitepress/theme/style.css

@@ -299,6 +299,14 @@
   border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
+.VPHome .reading-progress {
+  display: none !important;
+}
+
+body:has(.VPHome) .reading-progress {
+  display: none !important;
+}
+
 .dark .glass {
   background: rgba(0, 0, 0, 0.7);
   border: 1px solid rgba(255, 255, 255, 0.1);

docs/zh-cn/stage-3/core-skills/agent-teams/images/home-cover.svg

@@ -0,0 +1,33 @@
+<svg width="1200" height="720" viewBox="0 0 1200 720" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="1200" height="720" rx="40" fill="url(#bg)"/>
+  <rect x="72" y="84" width="1056" height="552" rx="32" fill="white" fill-opacity="0.78"/>
+  <rect x="120" y="138" width="250" height="180" rx="24" fill="#0F172A"/>
+  <text x="152" y="204" fill="white" font-family="Arial, sans-serif" font-size="38" font-weight="700">Team Lead</text>
+  <text x="152" y="252" fill="#BFDBFE" font-family="Arial, sans-serif" font-size="24">拆解任务</text>
+  <text x="152" y="288" fill="#BFDBFE" font-family="Arial, sans-serif" font-size="24">协调成员</text>
+  <rect x="470" y="138" width="250" height="180" rx="24" fill="#1D4ED8"/>
+  <text x="505" y="204" fill="white" font-family="Arial, sans-serif" font-size="38" font-weight="700">Agent A</text>
+  <text x="505" y="252" fill="#DBEAFE" font-family="Arial, sans-serif" font-size="24">Frontend</text>
+  <rect x="810" y="138" width="250" height="180" rx="24" fill="#7C3AED"/>
+  <text x="844" y="204" fill="white" font-family="Arial, sans-serif" font-size="38" font-weight="700">Agent B</text>
+  <text x="844" y="252" fill="#EDE9FE" font-family="Arial, sans-serif" font-size="24">Backend</text>
+  <rect x="292" y="398" width="250" height="150" rx="24" fill="#059669"/>
+  <text x="328" y="460" fill="white" font-family="Arial, sans-serif" font-size="34" font-weight="700">Agent C</text>
+  <text x="328" y="502" fill="#D1FAE5" font-family="Arial, sans-serif" font-size="22">Testing</text>
+  <rect x="658" y="398" width="250" height="150" rx="24" fill="#EA580C"/>
+  <text x="694" y="460" fill="white" font-family="Arial, sans-serif" font-size="34" font-weight="700">Task List</text>
+  <text x="694" y="502" fill="#FFEDD5" font-family="Arial, sans-serif" font-size="22">共享任务板</text>
+  <path d="M370 228H470" stroke="#2563EB" stroke-width="12" stroke-linecap="round"/>
+  <path d="M720 228H810" stroke="#6366F1" stroke-width="12" stroke-linecap="round"/>
+  <path d="M600 318V398" stroke="#0F172A" stroke-width="12" stroke-linecap="round"/>
+  <path d="M542 472H658" stroke="#475569" stroke-width="12" stroke-linecap="round"/>
+  <text x="120" y="604" fill="#0F172A" font-family="Arial, sans-serif" font-size="58" font-weight="700">Claude Agent Teams</text>
+  <text x="120" y="652" fill="#475569" font-family="Arial, sans-serif" font-size="28">多代理并行协作，像真正开发团队一样分工与联动</text>
+  <defs>
+    <linearGradient id="bg" x1="69" y1="38" x2="1102" y2="701" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DBEAFE"/>
+      <stop offset="0.48" stop-color="#EDE9FE"/>
+      <stop offset="1" stop-color="#FEF3C7"/>
+    </linearGradient>
+  </defs>
+</svg>

docs/zh-cn/stage-3/core-skills/agent-teams/index.md

@@ -6,6 +6,8 @@
 
 想象一下，以前你使用 Claude Code，就像是一个项目经理带着一个超级能干的助手工作。无论任务多复杂，只有这一个助手在干活。现在有了 Agent Teams，你可以组建一支完整的 AI 开发团队——有的负责前端，有的负责后端，有的负责测试，它们可以**同时工作、互相交流、协同完成复杂任务**。
 
+![](images/home-cover.svg)
+
 ### 从单助手到团队协作
 
 在深入了解 Agent Teams 之前，让我们先理解它解决的问题。

docs/zh-cn/stage-3/core-skills/long-running-tasks/images/home-cover.svg

@@ -0,0 +1,29 @@
+<svg width="1200" height="720" viewBox="0 0 1200 720" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="1200" height="720" rx="40" fill="url(#bg)"/>
+  <rect x="72" y="82" width="1056" height="556" rx="32" fill="white" fill-opacity="0.82"/>
+  <rect x="124" y="132" width="420" height="214" rx="28" fill="#111827"/>
+  <text x="164" y="202" fill="#F9FAFB" font-family="Arial, sans-serif" font-size="34" font-weight="700">while true</text>
+  <text x="164" y="254" fill="#93C5FD" font-family="Arial, sans-serif" font-size="30">claude --continue</text>
+  <text x="164" y="306" fill="#A7F3D0" font-family="Arial, sans-serif" font-size="30">check completion</text>
+  <circle cx="760" cy="240" r="128" fill="#DBEAFE"/>
+  <circle cx="760" cy="240" r="92" fill="#2563EB"/>
+  <path d="M760 184V240L802 270" stroke="white" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="124" y="410" width="280" height="138" rx="24" fill="#0EA5E9"/>
+  <text x="158" y="468" fill="white" font-family="Arial, sans-serif" font-size="32" font-weight="700">Stop Hook</text>
+  <text x="158" y="510" fill="#E0F2FE" font-family="Arial, sans-serif" font-size="22">拦截提前退出</text>
+  <rect x="462" y="410" width="280" height="138" rx="24" fill="#10B981"/>
+  <text x="496" y="468" fill="white" font-family="Arial, sans-serif" font-size="32" font-weight="700">Ralph</text>
+  <text x="496" y="510" fill="#D1FAE5" font-family="Arial, sans-serif" font-size="22">自动重试推进</text>
+  <rect x="800" y="410" width="280" height="138" rx="24" fill="#F59E0B"/>
+  <text x="834" y="468" fill="white" font-family="Arial, sans-serif" font-size="32" font-weight="700">Overnight</text>
+  <text x="834" y="510" fill="#FEF3C7" font-family="Arial, sans-serif" font-size="22">长任务稳定执行</text>
+  <text x="124" y="608" fill="#111827" font-family="Arial, sans-serif" font-size="58" font-weight="700">Claude Code 长时间工作</text>
+  <text x="124" y="656" fill="#4B5563" font-family="Arial, sans-serif" font-size="28">循环、检查与重试，让任务持续跑到真正完成</text>
+  <defs>
+    <linearGradient id="bg" x1="72" y1="32" x2="1114" y2="696" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0F2FE"/>
+      <stop offset="0.5" stop-color="#ECFCCB"/>
+      <stop offset="1" stop-color="#FEF3C7"/>
+    </linearGradient>
+  </defs>
+</svg>

docs/zh-cn/stage-3/core-skills/long-running-tasks/index.md

@@ -12,6 +12,8 @@
 
 本章要解决的核心问题是：如何让 Claude Code 像真正的开发者一样，持续工作直到任务真正完成。
 
+![](images/home-cover.svg)
+
 ---
 
 ## 核心原理：为什么 AI 会"过早停止"？