Work on 404 LM, minor fixes

src/components/sections/404/hero/hero.module.scss

@@ -184,3 +184,20 @@
   width: tovw(36px, 'default', 22px);
   height: tovw(20px, 'default', 20px);
 }
+
+[data-theme='light'] {
+  .section {
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+
+  .video {
+    mix-blend-mode: darken;
+  }
+
+  .gradient {
+    visibility: hidden;
+  }
+}

src/components/sections/404/hero/index.tsx

@@ -1,4 +1,6 @@
 import clsx from 'clsx'
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
 
 import Line from '~/components/icons/line'
 import Section from '~/components/layout/section'
@@ -8,10 +10,24 @@ import Heading from '~/components/primitives/heading'
 import s from './hero.module.scss'
 
 const Hero = () => {
+  const { theme } = useTheme()
+
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (!videoRef.current) return
+
+    videoRef.current.src =
+      theme === 'dark'
+        ? '/videos/hero-grid.mp4'
+        : '/videos/Banner-Home-Light.mp4'
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <video
         autoPlay
+        ref={videoRef}
         className={clsx('hide-on-mobile', s['video'])}
         controls={false}
         loop
@@ -19,7 +35,7 @@ const Hero = () => {
         playsInline={true}
         preload="true"
       >
-        <source src="/videos/hero-grid.mp4" type="video/mp4" />
+        <source type="video/mp4" />
       </video>
       <Heading as="h1" variant="xl" centered>
         Page not found

src/components/sections/about/hero/hero.module.scss

@@ -216,6 +216,6 @@
   }
 
   .gradient {
-    display: hidden;
+    visibility: hidden;
   }
 }

src/components/sections/community/hero/hero.module.scss

@@ -221,6 +221,6 @@
   }
 
   .gradient {
-    display: hidden;
+    visibility: hidden;
   }
 }

src/components/sections/products/hero/hero.module.scss

@@ -253,6 +253,6 @@
   }
 
   .gradient {
-    display: none;
+    visibility: hidden;
   }
 }