From c8dae6b376099595be49b5a026512f9493ff3242 Mon Sep 17 00:00:00 2001
From: taroj1205 <taroj1205@gmail.com>
Date: Mon, 19 May 2025 19:28:23 +1200
Subject: [PATCH] feat(sticky-features): make features videos sticky

---
 src/components/Features.astro | 82 +++++++++++++++++------------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/components/Features.astro b/src/components/Features.astro
index e86def6..4020cb3 100644
--- a/src/components/Features.astro
+++ b/src/components/Features.astro
@@ -126,45 +126,47 @@ const descriptions = Object.values(features.featureTabs).map((tab) => tab.descri
       </div>
     </div>
 
-    <div class="relative w-full lg:w-3/5">
-      <div class="video-stack relative h-full w-full">
-        <Video
-          autoplay
-          loop
-          muted
-          playsinline
-          preload="none"
-          class="feature-video"
-          src={WorkspacesVideo}
-          data-active="true"
-        />
-        <Video
-          autoplay
-          loop
-          muted
-          playsinline
-          preload="none"
-          class="feature-video"
-          src={CompactModeVideo}
-        />
-        <Video
-          autoplay
-          loop
-          muted
-          playsinline
-          preload="none"
-          class="feature-video"
-          src={GlanceVideo}
-        />
-        <Video
-          autoplay
-          loop
-          muted
-          playsinline
-          preload="none"
-          class="feature-video"
-          src={SplitViewsVideo}
-        />
+    <div class="sticky top-6 w-full lg:w-3/5 h-fit">
+      <div class="relative w-full">
+        <div class="video-stack relative h-full w-full">
+          <Video
+            autoplay
+            loop
+            muted
+            playsinline
+            preload="none"
+            class="feature-video"
+            src={WorkspacesVideo}
+            data-active="true"
+          />
+          <Video
+            autoplay
+            loop
+            muted
+            playsinline
+            preload="none"
+            class="feature-video"
+            src={CompactModeVideo}
+          />
+          <Video
+            autoplay
+            loop
+            muted
+            playsinline
+            preload="none"
+            class="feature-video"
+            src={GlanceVideo}
+          />
+          <Video
+            autoplay
+            loop
+            muted
+            playsinline
+            preload="none"
+            class="feature-video"
+            src={SplitViewsVideo}
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -271,8 +273,6 @@ const descriptions = Object.values(features.featureTabs).map((tab) => tab.descri
     @apply aspect-video;
     perspective: 2000px;
     transform-style: preserve-3d;
-    position: sticky;
-    top: 0;
   }
 
   .feature-video {