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

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) {