From c8b68e513987cd9433543833f691dd625bfde4fc Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Wed, 18 Mar 2026 12:12:42 +0800
Subject: [PATCH] feat(ui): update hero button text and enhance welcome screen

- Change primary hero button text from "Start Learning" to "Start Vibe Together!" across all language versions to align with project branding
- Update online reading links in README files to point to /welcome.html for better user onboarding
- Enhance WelcomeScreen.vue with improved animation timing and spacing
- Add dynamic SVG wordmark to homepage hero section for visual appeal
- Implement animated color transition for top promo bar
- Remove testing guidelines comment in AGENTS.md as placeholder
- Adjust feature card styling with increased min-height and icon sizes
---
 README.md                                     |  8 +-
 docs-readme/ar-SA/README.md                   |  4 +-
 docs-readme/de-DE/README.md                   |  4 +-
 docs-readme/en-US/README.md                   |  4 +-
 docs-readme/es-ES/README.md                   |  4 +-
 docs-readme/fr-FR/README.md                   |  4 +-
 docs-readme/ja-JP/README.md                   |  4 +-
 docs-readme/ko-KR/README.md                   |  4 +-
 docs-readme/vi-VN/README.md                   |  4 +-
 docs-readme/zh-TW/README.md                   |  4 +-
 docs/.vitepress/theme/Layout.vue              | 57 +++++++++++-
 .../theme/components/HomeFeatures.vue         | 90 ++++++++++++++++---
 .../theme/components/WelcomeScreen.vue        | 19 ++--
 docs/.vitepress/theme/style.css               | 34 ++++++-
 docs/ar-sa/index.md                           |  2 +-
 docs/de-de/index.md                           |  2 +-
 docs/en/index.md                              |  2 +-
 docs/es-es/index.md                           |  2 +-
 docs/fr-fr/index.md                           |  2 +-
 docs/ja-jp/index.md                           |  2 +-
 docs/ko-kr/index.md                           |  2 +-
 docs/vi-vn/index.md                           |  2 +-
 docs/zh-cn/index.md                           |  2 +-
 docs/zh-tw/index.md                           |  2 +-
 24 files changed, 205 insertions(+), 59 deletions(-)

diff --git a/README.md b/README.md
index e2a323a..63ae1d8 100644
--- a/README.md
+++ b/README.md
@@ -16,16 +16,16 @@
 </p>
 
 <p align="center">
-  🚀 <a href="https://datawhalechina.github.io/easy-vibe/">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">还想学 OpenClaw</a><br>
-  <span style="font-size: 0.85em; color: #888;"><a href="https://datawhalechina.github.io/easy-vibe/">Start Experience</a> · <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interactive Tutorial</a> · <a href="https://github.com/datawhalechina/hello-claw">Learn OpenClaw</a></span>
+  🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">还想学 OpenClaw</a><br>
+  <span style="font-size: 0.85em; color: #888;"><a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Start Experience</a> · <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interactive Tutorial</a> · <a href="https://github.com/datawhalechina/hello-claw">Learn OpenClaw</a></span>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">在线阅读</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">在线阅读</a> ·
   <a href="#-内容导航">学习地图</a> ·
   <a href="#contact">社区交流</a><br>
   <span style="font-size: 0.85em; color: #888;">
-    <a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> ·
+    <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> ·
     <a href="#-content-navigation">Learning Map</a> ·
     <a href="#contact">Community</a>
   </span>
diff --git a/docs-readme/ar-SA/README.md b/docs-readme/ar-SA/README.md
index f40801c..2da2d7b 100644
--- a/docs-readme/ar-SA/README.md
+++ b/docs-readme/ar-SA/README.md
@@ -12,11 +12,11 @@
 # Easy-Vibe : تعلم Vibe Coding من 0 إلى 1
 
 <p align="center">
-  📌 <a href="https://datawhalechina.github.io/easy-vibe/">القراءة عبر الإنترنت (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">دليل تفاعلي</a>
+  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">القراءة عبر الإنترنت (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">دليل تفاعلي</a>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">القراءة عبر الإنترنت</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">القراءة عبر الإنترنت</a> ·
   <a href="#-التنقل">خريطة التعلم</a> ·
   <a href="#contact">المجتمع</a>
 </p>
diff --git a/docs-readme/de-DE/README.md b/docs-readme/de-DE/README.md
index 01af938..2d08595 100644
--- a/docs-readme/de-DE/README.md
+++ b/docs-readme/de-DE/README.md
@@ -12,11 +12,11 @@
 # Easy-Vibe : Lerne Vibe Coding von 0 auf 1
 
 <p align="center">
-  📌 <a href="https://datawhalechina.github.io/easy-vibe/">Online lesen (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interaktives Tutorial</a>
+  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Online lesen (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interaktives Tutorial</a>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">Online lesen</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Online lesen</a> ·
   <a href="#-navigation">Lernkarte</a> ·
   <a href="#contact">Community</a>
 </p>
diff --git a/docs-readme/en-US/README.md b/docs-readme/en-US/README.md
index 3a8ada4..e6d925c 100644
--- a/docs-readme/en-US/README.md
+++ b/docs-readme/en-US/README.md
@@ -12,11 +12,11 @@
 # Easy-Vibe : Learn vibe coding from 0 to 1
 
 <p align="center">
-  📌 <a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interactive Tutorial</a>
+  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interactive Tutorial</a>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> ·
   <a href="#-navigation">Learning Map</a> ·
   <a href="#contact">Community</a>
 </p>
diff --git a/docs-readme/es-ES/README.md b/docs-readme/es-ES/README.md
index 3aa2633..f3203b3 100644
--- a/docs-readme/es-ES/README.md
+++ b/docs-readme/es-ES/README.md
@@ -12,11 +12,11 @@
 # Easy-Vibe : Aprende Vibe Coding de 0 a 1
 
 <p align="center">
-  📌 <a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutorial interactivo</a>
+  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Leer en línea (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutorial interactivo</a>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Leer en línea</a> ·
   <a href="#-navegación">Mapa de aprendizaje</a> ·
   <a href="#contact">Comunidad</a>
 </p>
diff --git a/docs-readme/fr-FR/README.md b/docs-readme/fr-FR/README.md
index 95eef35..c6e9204 100644
--- a/docs-readme/fr-FR/README.md
+++ b/docs-readme/fr-FR/README.md
@@ -12,11 +12,11 @@
 # Easy-Vibe : Apprendre le Vibe Coding de 0 à 1
 
 <p align="center">
-  📌 <a href="https://datawhalechina.github.io/easy-vibe/">Lire en ligne (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutoriel interactif</a>
+  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Lire en ligne (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutoriel interactif</a>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">Lire en ligne</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Lire en ligne</a> ·
   <a href="#-navigation">Carte d'apprentissage</a> ·
   <a href="#contact">Communauté</a>
 </p>
diff --git a/docs-readme/ja-JP/README.md b/docs-readme/ja-JP/README.md
index 358781a..8f0b0c4 100644
--- a/docs-readme/ja-JP/README.md
+++ b/docs-readme/ja-JP/README.md
@@ -12,11 +12,11 @@
 # Easy-Vibe : 0から1で学ぶVibe Coding
 
 <p align="center">
-  📌 <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">インタラクティブチュートリアル</a>
+  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">オンラインで読む (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">インタラクティブチュートリアル</a>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">オンラインで読む</a> ·
   <a href="#-コンテンツナビゲーション">学習マップ</a> ·
   <a href="#contact">コミュニティ交流</a>
 </p>
diff --git a/docs-readme/ko-KR/README.md b/docs-readme/ko-KR/README.md
index 9cafdc4..1ad40c9 100644
--- a/docs-readme/ko-KR/README.md
+++ b/docs-readme/ko-KR/README.md
@@ -12,11 +12,11 @@
 # Easy-Vibe : 0에서 1까지 배우는 Vibe Coding
 
 <p align="center">
-  📌 <a href="https://datawhalechina.github.io/easy-vibe/">온라인 읽기 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">대화형 튜토리얼</a>
+  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">온라인 읽기 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">대화형 튜토리얼</a>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">온라인 읽기</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">온라인 읽기</a> ·
   <a href="#-콘텐츠-탐색">학습 지도</a> ·
   <a href="#contact">커뮤니티 교류</a>
 </p>
diff --git a/docs-readme/vi-VN/README.md b/docs-readme/vi-VN/README.md
index 88be80e..c4f416f 100644
--- a/docs-readme/vi-VN/README.md
+++ b/docs-readme/vi-VN/README.md
@@ -12,11 +12,11 @@
 # Easy-Vibe : Học Vibe Coding từ 0 đến 1
 
 <p align="center">
-  📌 <a href="https://datawhalechina.github.io/easy-vibe/">Đọc trực tuyến (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Hướng dẫn tương tác</a>
+  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Đọc trực tuyến (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Hướng dẫn tương tác</a>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">Đọc trực tuyến</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Đọc trực tuyến</a> ·
   <a href="#-điều-hướng">Bản đồ học tập</a> ·
   <a href="#contact">Cộng đồng</a>
 </p>
diff --git a/docs-readme/zh-TW/README.md b/docs-readme/zh-TW/README.md
index 46a5a4d..dd178e6 100644
--- a/docs-readme/zh-TW/README.md
+++ b/docs-readme/zh-TW/README.md
@@ -12,11 +12,11 @@
 # Easy-Vibe : 從 0 到 1 學習 Vibe Coding
 
 <p align="center">
-  📌 <a href="https://datawhalechina.github.io/easy-vibe/">在線閱讀 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程 (Interactive Tutorial)</a>
+  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">在線閱讀 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程 (Interactive Tutorial)</a>
 </p>
 
 <p align="center">
-  <a href="https://datawhalechina.github.io/easy-vibe/">在線閱讀</a> ·
+  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">在線閱讀</a> ·
   <a href="#-內容導航">學習地圖</a> ·
   <a href="#contact">社區交流</a>
 </p>
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 25e8645..86dfbe6 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -6,6 +6,7 @@ import GitHubStars from './components/GitHubStars.vue'
 import { onMounted, ref, watch, computed } from 'vue'
 import ReadingProgress from './components/ReadingProgress.vue'
 import { Setting } from '@element-plus/icons-vue'
+import easyVibePaths from './data/easyVibePaths.json'
 
 const { frontmatter } = useData()
 const route = useRoute()
@@ -416,6 +417,38 @@ watch(sidebarCollapsed, (collapsed) => {
         </el-popover>
       </ClientOnly>
     </template>
+    <template #home-hero-info-before>
+      <div
+        v-if="frontmatter.layout === 'home'"
+        class="vp-home-wordmark"
+      >
+        <svg
+          viewBox="0 0 460 220"
+          class="vp-home-wordmark-svg"
+        >
+          <defs>
+            <linearGradient
+              id="home-hero-ocean"
+              x1="0"
+              y1="0"
+              x2="460"
+              y2="0"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0%" stop-color="#06b6d4" />
+              <stop offset="50%" stop-color="#0ea5e9" />
+              <stop offset="100%" stop-color="#3b82f6" />
+            </linearGradient>
+          </defs>
+          <path
+            v-for="(path, index) in easyVibePaths"
+            :key="index"
+            :d="path"
+            class="vp-home-wordmark-path"
+          />
+        </svg>
+      </div>
+    </template>
     <template #home-hero-info-after>
       <div
         v-if="
@@ -467,7 +500,8 @@ watch(sidebarCollapsed, (collapsed) => {
 
 /* 调整打字机容器的样式，使其看起来像原来的 tagline */
 .vp-typed-tagline {
-  padding-top: 8px;
+  padding-top: 0;
+  margin-top: 8px;
   line-height: 28px;
   font-size: 18px;
   font-weight: 500;
@@ -485,7 +519,7 @@ watch(sidebarCollapsed, (collapsed) => {
   text-align: center;
 }
 .VPHomeHero .main {
-  margin: 0 auto;
+  margin: -18px auto 0;
 }
 .VPHomeHero .name,
 .VPHomeHero .text {
@@ -493,11 +527,30 @@ watch(sidebarCollapsed, (collapsed) => {
   margin-left: auto;
   margin-right: auto;
 }
+.VPHomeHero .name {
+  display: none !important;
+}
 .VPHomeHero .text {
   color: var(--vp-c-text-1) !important;
 }
 .VPHomeHero .actions {
   justify-content: center;
+  margin-top: 20px;
+}
+.vp-home-wordmark {
+  display: flex;
+  justify-content: center;
+  margin-top: -12px;
+  margin-bottom: 18px;
+}
+.vp-home-wordmark-svg {
+  width: min(380px, 52vw);
+  height: auto;
+  filter: none;
+}
+.vp-home-wordmark-path {
+  fill: url(#home-hero-ocean);
+  stroke: none;
 }
 
 @media (min-width: 640px) {
diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue
index f2707f5..edb0057 100644
--- a/docs/.vitepress/theme/components/HomeFeatures.vue
+++ b/docs/.vitepress/theme/components/HomeFeatures.vue
@@ -8,6 +8,11 @@ const { site, page, lang } = useData()
 const activeTab = ref('home')
 const showLangMenu = ref(false)
 const topPromoProgress = ref(1)
+const topPromoIntroProgress = ref(0)
+const topPromoColorProgress = ref(0)
+let topPromoIntroRaf = 0
+let topPromoColorRaf = 0
+let topPromoColorTimer = 0
 const WELCOME_SEEN_KEY = 'easy-vibe-welcome-seen'
 
 // Appendix Scroll Logic
@@ -1620,12 +1625,27 @@ const updateTopPromoVisibility = () => {
 }
 
 const topPromoStyle = computed(() => {
-  const progress = topPromoProgress.value
+  const scrollProgress = topPromoProgress.value
+  const introProgress = topPromoIntroProgress.value
+  const colorProgress = topPromoColorProgress.value
+  const progress = scrollProgress * introProgress
+  const scrollOffset = -100 * (1 - scrollProgress)
+  const startTextColor = { r: 255, g: 255, b: 255 }
+  const endTextColor = { r: 29, g: 29, b: 31 }
+  const startBgColor = { r: 0, g: 113, b: 227 }
+  const endBgColor = { r: 245, g: 245, b: 247 }
+  const startLinkColor = { r: 255, g: 255, b: 255 }
+  const endLinkColor = { r: 0, g: 102, b: 204 }
+  const textColor = `rgb(${Math.round(startTextColor.r + (endTextColor.r - startTextColor.r) * colorProgress)}, ${Math.round(startTextColor.g + (endTextColor.g - startTextColor.g) * colorProgress)}, ${Math.round(startTextColor.b + (endTextColor.b - startTextColor.b) * colorProgress)})`
+  const bgColor = `rgb(${Math.round(startBgColor.r + (endBgColor.r - startBgColor.r) * colorProgress)}, ${Math.round(startBgColor.g + (endBgColor.g - startBgColor.g) * colorProgress)}, ${Math.round(startBgColor.b + (endBgColor.b - startBgColor.b) * colorProgress)})`
+  const linkColor = `rgb(${Math.round(startLinkColor.r + (endLinkColor.r - startLinkColor.r) * colorProgress)}, ${Math.round(startLinkColor.g + (endLinkColor.g - startLinkColor.g) * colorProgress)}, ${Math.round(startLinkColor.b + (endLinkColor.b - startLinkColor.b) * colorProgress)})`
   return {
     opacity: progress,
-    transform: `translateY(${-100 * (1 - progress)}%)`,
+    transform: `translateY(${scrollOffset}%)`,
     maxHeight: `${30 * progress}px`,
-    borderTopColor: `rgba(229, 229, 234, ${progress})`,
+    backgroundColor: bgColor,
+    color: textColor,
+    '--top-promo-link-color': linkColor,
     pointerEvents: progress < 0.02 ? 'none' : 'auto'
   }
 })
@@ -1636,6 +1656,33 @@ const replayIntro = () => {
 }
 
 onMounted(() => {
+  const introDuration = 1800
+  const colorDelay = 500
+  const colorDuration = 1800
+  const introStart = performance.now()
+  const stepTopPromoIntro = (now) => {
+    const raw = Math.min(1, (now - introStart) / introDuration)
+    const eased = 1 - Math.pow(1 - raw, 3)
+    topPromoIntroProgress.value = eased
+    if (raw < 1) {
+      topPromoIntroRaf = window.requestAnimationFrame(stepTopPromoIntro)
+      return
+    }
+    topPromoColorTimer = window.setTimeout(() => {
+      const colorStart = performance.now()
+      const stepTopPromoColor = (time) => {
+        const colorRaw = Math.min(1, (time - colorStart) / colorDuration)
+        const colorEased = 1 - Math.pow(1 - colorRaw, 3)
+        topPromoColorProgress.value = colorEased
+        if (colorRaw < 1) {
+          topPromoColorRaf = window.requestAnimationFrame(stepTopPromoColor)
+        }
+      }
+      topPromoColorRaf = window.requestAnimationFrame(stepTopPromoColor)
+    }, colorDelay)
+  }
+  topPromoIntroRaf = window.requestAnimationFrame(stepTopPromoIntro)
+
   const currentPath = window.location.pathname
   const basePath = site.value.base || '/'
   const normalizedBase = basePath.endsWith('/') ? basePath : `${basePath}/`
@@ -1681,6 +1728,18 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  if (topPromoIntroRaf) {
+    window.cancelAnimationFrame(topPromoIntroRaf)
+    topPromoIntroRaf = 0
+  }
+  if (topPromoColorRaf) {
+    window.cancelAnimationFrame(topPromoColorRaf)
+    topPromoColorRaf = 0
+  }
+  if (topPromoColorTimer) {
+    window.clearTimeout(topPromoColorTimer)
+    topPromoColorTimer = 0
+  }
   document.removeEventListener('click', closeLangMenu)
   if (appendixWrapper.value) {
     appendixWrapper.value.removeEventListener('scroll', onAppendixScroll)
@@ -2365,8 +2424,8 @@ a {
 }
 
 .nav-promo {
+  height: 30px;
   max-height: 30px;
-  border-top: 1px solid #e5e5ea;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2378,17 +2437,19 @@ a {
   transform-origin: top center;
   position: relative;
   z-index: 1;
-  will-change: transform, opacity, max-height, border-color;
+  will-change: transform, opacity, max-height, background-color, color;
   transition:
     transform 0.16s ease-out,
     opacity 0.16s ease-out,
     max-height 0.16s ease-out,
-    border-color 0.16s ease-out;
+    background-color 0.22s ease-out,
+    color 0.22s ease-out;
 }
 
 .nav-promo a {
-  color: #0066cc;
+  color: var(--top-promo-link-color, #0066cc);
   text-decoration: none;
+  transition: color 0.25s ease-out;
 }
 
 .button {
@@ -2786,6 +2847,7 @@ a {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
   scroll-snap-align: start;
   width: 100%;
+  min-height: 360px;
   transition: transform 0.25s ease;
 }
 
@@ -2853,14 +2915,14 @@ a {
 }
 
 .appendix-icon-wrapper {
-  width: 64px;
-  height: 64px;
-  border-radius: 17.5px; /* Apple continuous curve approximation */
+  width: 100%;
+  height: 190px;
+  border-radius: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32px;
-  margin-bottom: 16px;
+  font-size: 88px;
+  margin-bottom: 14px;
   /* Glassmorphism / VisionOS Style */
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
@@ -2916,7 +2978,7 @@ a {
 }
 
 .appendix-text {
-  font-size: 15px;
+  font-size: 13px;
   line-height: 1.5;
   color: #6e6e73;
   margin: 0;
@@ -2928,7 +2990,7 @@ a {
   font-weight: 600;
   color: #1d1d1f;
   margin-right: 6px;
-  font-size: 13px;
+  font-size: 12px;
 }
 
 /* Footer */
diff --git a/docs/.vitepress/theme/components/WelcomeScreen.vue b/docs/.vitepress/theme/components/WelcomeScreen.vue
index 0ef96df..ee7b947 100644
--- a/docs/.vitepress/theme/components/WelcomeScreen.vue
+++ b/docs/.vitepress/theme/components/WelcomeScreen.vue
@@ -258,23 +258,26 @@ onUnmounted(() => {
 }
 
 .welcome-tip {
-  margin: 24px 0 0;
+  margin: 44px 0 0;
   font-size: 11px;
-  letter-spacing: 0.08em;
-  color: rgba(34, 34, 34, 0.38);
+  letter-spacing: 0.2em;
+  color: rgba(34, 34, 34, 0.32);
   text-transform: uppercase;
-  animation: welcome-tip-breathe 7s ease-in-out infinite;
+  animation: welcome-tip-breathe 5s ease-in-out infinite;
 }
 
 @keyframes welcome-tip-breathe {
   0% {
-    opacity: 0.24;
+    opacity: 0;
   }
-  50% {
-    opacity: 0.72;
+  40% {
+    opacity: 0.55;
+  }
+  80% {
+    opacity: 0;
   }
   100% {
-    opacity: 0.24;
+    opacity: 0;
   }
 }
 
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 6fec533..323e91e 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -305,15 +305,43 @@
 }
 
 /* Hero Section Refinements */
-.VPHomeHero .name {
-  background: -webkit-linear-gradient(315deg, #0071e3 10%, #5ac8fa 90%);
+.VPHomeHero .name,
+.VPHomeHero .name.clip {
+  position: relative;
+  top: -8px;
+  background-image: linear-gradient(
+    100deg,
+    #06b6d4 0%,
+    #0ea5e9 18%,
+    #3b82f6 36%,
+    #9d4edd 56%,
+    #ff3c81 74%,
+    #f97316 88%,
+    #06b6d4 100%
+  );
+  background-size: 220% 220%;
+  background-position: 0% 50%;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  filter: drop-shadow(0 0 24px rgba(0, 113, 227, 0.28));
+  filter: drop-shadow(0 0 22px rgba(59, 130, 246, 0.26));
+  animation: ev-hero-name-flow 8s ease-in-out infinite alternate;
+}
+
+@keyframes ev-hero-name-flow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 35% 50%;
+  }
 }
 
 .VPHomeHero .text {
+  display: none !important;
   font-weight: 600;
   color: #1d1d1f;
   letter-spacing: -0.02em;
diff --git a/docs/ar-sa/index.md b/docs/ar-sa/index.md
index 3777248..f7c518a 100644
--- a/docs/ar-sa/index.md
+++ b/docs/ar-sa/index.md
@@ -16,7 +16,7 @@ hero:
     - هكذا يجب أن تكون البرمجة.
   actions:
     - theme: brand
-      text: ابدأ التعلم
+      text: ابدأ vibe معًا!
       link: /ar-sa/stage-0/
     - theme: alt
       text: مخطط الدورة
diff --git a/docs/de-de/index.md b/docs/de-de/index.md
index df8581f..6db3db4 100644
--- a/docs/de-de/index.md
+++ b/docs/de-de/index.md
@@ -16,7 +16,7 @@ hero:
     - So sollte Programmieren sich anfühlen.
   actions:
     - theme: brand
-      text: Starten
+      text: Zusammen vibe starten!
       link: /de-de/stage-0/
     - theme: alt
       text: Kursübersicht
diff --git a/docs/en/index.md b/docs/en/index.md
index 2c956fc..ebcb370 100644
--- a/docs/en/index.md
+++ b/docs/en/index.md
@@ -16,7 +16,7 @@ hero:
     - This is how coding should feel.
   actions:
     - theme: brand
-      text: Start Learning
+      text: Start Vibe Together!
       link: /en/stage-0/
     - theme: alt
       text: GitHub
diff --git a/docs/es-es/index.md b/docs/es-es/index.md
index 258741b..1a1a655 100644
--- a/docs/es-es/index.md
+++ b/docs/es-es/index.md
@@ -16,7 +16,7 @@ hero:
     - Así debería sentirse programar.
   actions:
     - theme: brand
-      text: Empezar
+      text: ¡Empezar a vibe juntos!
       link: /es-es/stage-0/
     - theme: alt
       text: Esquema del Curso
diff --git a/docs/fr-fr/index.md b/docs/fr-fr/index.md
index 3621e5d..55e0469 100644
--- a/docs/fr-fr/index.md
+++ b/docs/fr-fr/index.md
@@ -16,7 +16,7 @@ hero:
     - C'est ainsi que le coding devrait être.
   actions:
     - theme: brand
-      text: Commencer
+      text: Commencer à vibe ensemble !
       link: /fr-fr/stage-0/
     - theme: alt
       text: Plan du Cours
diff --git a/docs/ja-jp/index.md b/docs/ja-jp/index.md
index 51cbd0a..702612a 100644
--- a/docs/ja-jp/index.md
+++ b/docs/ja-jp/index.md
@@ -16,7 +16,7 @@ hero:
     - プログラミングは、こうあるべき。
   actions:
     - theme: brand
-      text: 学習を開始
+      text: 一緒にvibeを始めよう！
       link: /ja-jp/stage-0/
     - theme: alt
       text: コース概要
diff --git a/docs/ko-kr/index.md b/docs/ko-kr/index.md
index a3c9657..e030134 100644
--- a/docs/ko-kr/index.md
+++ b/docs/ko-kr/index.md
@@ -16,7 +16,7 @@ hero:
     - 프로그래밍은, 이래야 합니다.
   actions:
     - theme: brand
-      text: 학습 시작
+      text: 함께 vibe 시작!
       link: /ko-kr/stage-0/
     - theme: alt
       text: 과정 개요
diff --git a/docs/vi-vn/index.md b/docs/vi-vn/index.md
index 03249cd..3017b58 100644
--- a/docs/vi-vn/index.md
+++ b/docs/vi-vn/index.md
@@ -16,7 +16,7 @@ hero:
     - Lập trình nên như thế này.
   actions:
     - theme: brand
-      text: Bắt đầu học
+      text: Bắt đầu vibe cùng nhau!
       link: /vi-vn/stage-0/
     - theme: alt
       text: Đề cương khóa học
diff --git a/docs/zh-cn/index.md b/docs/zh-cn/index.md
index 711b422..1150988 100644
--- a/docs/zh-cn/index.md
+++ b/docs/zh-cn/index.md
@@ -16,7 +16,7 @@ hero:
     - 这就是编程该有的样子。
   actions:
     - theme: brand
-      text: 开始学习
+      text: 开始一起 vibe！
       link: /zh-cn/stage-0/0.1-learning-map/
     - theme: alt
       text: GitHub 加速更新
diff --git a/docs/zh-tw/index.md b/docs/zh-tw/index.md
index 8919cdd..9a62606 100644
--- a/docs/zh-tw/index.md
+++ b/docs/zh-tw/index.md
@@ -16,7 +16,7 @@ hero:
     - 這就是編程該有的樣子。
   actions:
     - theme: brand
-      text: 開始學習
+      text: 開始一起 vibe！
       link: /zh-tw/stage-0/
     - theme: alt
       text: 課程大綱