perf(hero): split HeroVideo into a Server Component to bypass React Hydration LCP block

components/blocks/DeferredVideo.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface DeferredVideoProps {
+  videoUrl: string;
+  pathname: string;
+}
+
+export function DeferredVideo({ videoUrl, pathname }: DeferredVideoProps) {
+  const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
+
+  useEffect(() => {
+    let interactionTriggered = false;
+
+    const handleInteraction = () => {
+      if (interactionTriggered) return;
+      interactionTriggered = true;
+      setVideoSrcLoaded(true);
+      
+      // Cleanup listeners
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+
+    // Listen for any user interaction
+    ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+      window.addEventListener(event, handleInteraction, { passive: true, once: true })
+    );
+
+    return () => {
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+  }, []);
+
+  if (!videoUrl) return null;
+
+  return (
+    <video
+      key={`${pathname}-${videoUrl}`}
+      className={`absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90 transition-opacity duration-1000 ${videoSrcLoaded ? 'opacity-100' : 'opacity-0'}`}
+      src={videoSrcLoaded ? videoUrl : undefined}
+      autoPlay
+      muted
+      loop
+      playsInline
+      preload="none"
+    />
+  );
+}