add video

Author: lijingrs

public/assets/videos/f8eb693a22d0c0f74997b806d4a51210.mp4

@@ -93,6 +93,15 @@ const {
             </div>
           )
         }
+
+        {
+          // Check for custom video slot content
+          (await Astro.slots.has('video')) && (
+            <div class="relative m-auto max-w-5xl">
+              <slot name="video" />
+            </div>
+          )
+        }
       </div>
     </div>
   </div>

src/components/widgets/Hero.astro

@@ -8,6 +8,9 @@ import Content from '~/components/widgets/Content.astro';
 import Steps from '~/components/widgets/Steps.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
 
+// Video from public folder
+const heroVideoUrl = "/assets/videos/f8eb693a22d0c0f74997b806d4a51210.mp4";
+
 const metadata = {
   title: 'Agent Orchestration System Platform - aios-rs',
   ignoreTitleTemplate: true,
@@ -18,17 +21,48 @@ const metadata = {
 <Layout metadata={metadata}>
   <!-- Hero Widget ******************* -->
 
-  <Hero
-    actions={[]}
-    image={{ src: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', alt: '企业级Agent Orchestration System Platform' }}
-  >
+  <Hero actions={[]} image={null}>
     <Fragment slot="title">
       <span class="text-accent dark:text-white">Agent Orchestration System Platform</span>
     </Fragment>
 
     <Fragment slot="subtitle">
       企业级智能体系统，构建AI原生的企业业务系统底座。
     </Fragment>
+
+    <Fragment slot="video">
+      <video
+        id="hero-video"
+        class="mx-auto rounded-md w-full aspect-video shadow-2xl bg-black"
+        autoplay
+        muted
+        loop
+        playsinline
+        preload="auto"
+        controls
+      >
+        <source src={heroVideoUrl} type="video/mp4" />
+        您的浏览器不支持视频播放。
+      </video>
+
+      <script is:inline>
+        // Simple autoplay guarantee
+        const video = document.getElementById('hero-video');
+        if (video) {
+          video.muted = true;
+
+          // Try to play immediately
+          video.play().catch(() => {
+            // Fallback on user interaction
+            const play = () => {
+              video.play();
+              document.removeEventListener('click', play);
+            };
+            document.addEventListener('click', play);
+          });
+        }
+      </script>
+    </Fragment>
   </Hero>
 
   <!-- Note Widget ******************* -->