From 4183ffde6389f61bd78e865f9f54b7ffa3856048 Mon Sep 17 00:00:00 2001
From: Eric Zhang <ekzhang1@gmail.com>
Date: Thu, 28 Dec 2023 14:03:11 -0600
Subject: [PATCH] Change teaser image to a live video

---
 src/lib/ui/TeaserImage.svelte | 14 ++++++++------
 src/routes/+page.svelte       |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/lib/ui/TeaserImage.svelte b/src/lib/ui/TeaserImage.svelte
index 4cbc7d5..7746a0d 100644
--- a/src/lib/ui/TeaserImage.svelte
+++ b/src/lib/ui/TeaserImage.svelte
@@ -10,8 +10,7 @@
   } from "svelte-feather-icons";
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="rounded-lg border border-white/20 overflow-hidden" on:click>
+<div class="rounded-lg border border-white/20 overflow-hidden">
   <div class="flex bg-zinc-900 items-end">
     <div class="px-4 py-3 flex gap-1.5">
       <div class="w-2.5 h-2.5 rounded-full bg-red-500" />
@@ -42,8 +41,11 @@
       <MoreVerticalIcon class="w-4 h-4 text-zinc-300" />
     </div>
   </div>
-  <img
-    src="https://i.imgur.com/Q3qKAHW.png"
-    alt="Browser with multiple terminal windows and live cursors"
-  />
+  <video muted autoplay loop>
+    <source
+      src="https://sshx.s3.amazonaws.com/media/teaser-video.mov"
+      type="video/mp4"
+    />
+    <track kind="captions" />
+  </video>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 359731c..cde4414 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -159,7 +159,7 @@
     </div>
 
     <div class="my-48 hidden md:block">
-      <TeaserImage on:click={scrollToInstallation} />
+      <TeaserImage />
     </div>
 
     <h2 bind:this={installationEl} class="mt-40 mb-16">