Add the app preview video (#21)

* Add app preview video as carousel item

* Import screenshot as static image

* Update carousel with indicator buttons

Author: lilac

public/preview.mp4

@@ -12,6 +12,7 @@ import Linux from "@/components/icons/Linux";
 import Apple from "super-tiny-icons/images/svg/apple.svg";
 import IconLink from "@/components/IconLink";
 import FAQ from "@/components/FAQ";
+import screenshot from 'public/screenshot-full.jpg';
 
 export default function Home() {
   const downloadUrl = "https://github.com/rabrain/ai-chat/releases/latest"
@@ -52,13 +53,27 @@ export default function Home() {
                 </Link>
               </div>
             </div>
-            <Image
-              src="/screenshot-full.jpg"
-              width={960}
-              height={580}
-              alt="banner"
-              className="mx-auto shadow-xl"
-            />
+            <div>
+              <div className="carousel carousel-center w-full">
+                <div id="slide1" className="carousel-item w-full">
+                  <video controls>
+                    <source src="/preview.mp4" type="video/mp4" />
+                    Your browser does not support the video tag.
+                  </video>
+                </div>
+                <div id="slide2" className="carousel-item w-full">
+                  <Image
+                    src={screenshot}
+                    alt="banner"
+                    className="mx-auto shadow-xl rounded-box"
+                  />
+                </div>
+              </div>
+              <div className="flex justify-center w-full py-2 gap-2">
+                <a href="#slide1" className="btn btn-xs">1</a>
+                <a href="#slide2" className="btn btn-xs">2</a>
+              </div>
+            </div>
           </div>
         </section>
         {/* Home section */}