replace demo.gif with video support in Hero component

Author: 7underlines

public/demo.gif

@@ -1,19 +1,21 @@
 ---
-import { Image } from 'astro:assets'
-
 /**
  * Hero Component
  *
  * @description A component that displays a hero section with a title, description, and image
  */
 interface Props {
   /**
-   * The source URL for the image
+   * Source for the WebM video
+   */
+  srcWebm?: string
+  /**
+   * Source for the MP4 video
    */
-  src?: string
+  srcMp4?: string
 }
 
-const { src = '/demo.gif' }: Props = Astro.props
+const { srcWebm = '/demo.webm', srcMp4 = '/demo.mp4' }: Props = Astro.props
 ---
 
 <section class="hero my-24">
@@ -31,9 +33,31 @@ const { src = '/demo.gif' }: Props = Astro.props
             <img src="/google-play-badge.png" alt="Get it on Google Play" width="200" class="h-auto" />
           </a>
         </div>
-        <Image class="block w-full max-w-xs mt-8 lg:hidden" src={src} alt="" decoding="async" width={400} height={300} loading="eager" />
+        <video
+          class="block w-full max-w-xs mt-8 lg:hidden"
+          autoplay
+          muted
+          loop
+          playsinline
+          width="400"
+          height="300"
+        >
+          <source src={srcWebm} type="video/webm" />
+          <source src={srcMp4} type="video/mp4" />
+        </video>
       </div>
-      <Image class="hidden lg:block" src={src} alt="" decoding="async" width={800} height={600} loading="eager" />
+      <video
+        class="hidden lg:block"
+        autoplay
+        muted
+        loop
+        playsinline
+        width="536"
+        height="687"
+      >
+        <source src={srcWebm} type="video/webm" />
+        <source src={srcMp4} type="video/mp4" />
+      </video>
     </div>
   </div>
 </section>