docs(guide): add promo video and update component

Author: zhensherlock

apps/docs/.vitepress/theme/components/HomePromoVideo.vue

@@ -3,12 +3,20 @@ import { useData, withBase } from 'vitepress'
 import { computed, onMounted, ref, watch } from 'vue'
 
 const { lang } = useData()
+withDefaults(defineProps<{ variant?: 'home' | 'doc' }>(), {
+  variant: 'home',
+})
+
 const videoRef = ref<HTMLVideoElement>()
 
 const videoSrc = computed(() =>
   withBase(lang.value.startsWith('zh') ? '/protocol-launcher-promo.zh.mp4' : '/protocol-launcher-promo.en.mp4'),
 )
 
+const ariaLabel = computed(() =>
+  lang.value.startsWith('zh') ? 'Protocol Launcher 宣传视频' : 'Protocol Launcher promo video',
+)
+
 const playVideo = () => {
   if (!videoRef.value) {
     return
@@ -30,7 +38,7 @@ watch(videoSrc, () => {
 </script>
 
 <template>
-  <section class="HomePromoVideo" aria-label="Protocol Launcher promo video">
+  <section class="HomePromoVideo" :class="`HomePromoVideo--${variant}`" :aria-label="ariaLabel">
     <div class="container">
       <video ref="videoRef" :src="videoSrc" autoplay muted loop playsinline preload="metadata" />
     </div>
@@ -68,4 +76,12 @@ video {
     padding: 16px 64px 32px;
   }
 }
+
+.HomePromoVideo--doc {
+  padding: 16px 0 24px;
+}
+
+.HomePromoVideo--doc .container {
+  max-width: 100%;
+}
 </style>

apps/docs/en/guide/what-is-it.md

@@ -2,12 +2,18 @@
 layout: doc
 ---
 
+<script setup lang="ts">
+import HomePromoVideo from '../../.vitepress/theme/components/HomePromoVideo.vue';
+</script>
+
 # What is Protocol Launcher?
 
 **Protocol Launcher** is a TypeScript library designed to generate "Quick Launch" URLs (Deep Links) for various applications.
 
 These URLs allow users to trigger specific actions in applications with a single click, such as installing plugins, configuring servers, or setting up API keys.
 
+<HomePromoVideo variant="doc" />
+
 ## Key Features
 
 - **Type-Safe**: Strict TypeScript types validate payloads and prevent malformed links.

apps/docs/zh/guide/what-is-it.md

@@ -2,12 +2,18 @@
 layout: doc
 ---
 
+<script setup lang="ts">
+import HomePromoVideo from '../../.vitepress/theme/components/HomePromoVideo.vue';
+</script>
+
 # 什么是 Protocol Launcher？
 
 **Protocol Launcher** 是一个 TypeScript 库，旨在为各种应用程序生成“快速启动” URL（深度链接）。
 
 这些 URL 允许用户通过单击触发应用程序中的特定操作，例如安装插件、配置服务器或设置 API 密钥。
 
+<HomePromoVideo variant="doc" />
+
 ## 主要特性
 
 - **类型安全**: 严格的 TypeScript 类型校验，避免生成不合法链接。