New heros etc

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

@@ -43,11 +43,10 @@
 
     position: relative;
     align-self: center;
-    width: 101%;
-    min-height: tovw(875px, 'default', 414px);
-    margin-top: tovw(-180px, 'default');
-    margin-bottom: tovw(-165px, 'default');
+    width: 115%;
+    max-height: tovw(380px, 'default', 180px);
     padding-top: tovw(30px, 'default', 20px);
+    margin-bottom: 50px;
     mix-blend-mode: lighten;
 
     video {
@@ -69,11 +68,11 @@
       background: radial-gradient(
         ellipse,
         rgb(3 3 3 / 0) 50%,
-        rgb(3 3 3 / 1) 72%,
+        rgb(3 3 3 / 1) 70%,
         rgb(3 3 3 / 1) 100%
       );
       width: 101%;
-      height: 100%;
+      height: tovw(390px, 'default', 200px);
       content: '';
     }
   }

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

@@ -10,10 +10,9 @@
     rgb(0 0 244 / 0.9) 1.63%,
     rgb(0 0 244 / 0) 65.89%
   );
-  padding-top: tovw(185px, 'default', 104px);
-  padding-bottom: tovw(92px, 'default', 40px);
+  padding-top: tovw(220px, 'default', 160px);
+  padding-bottom: tovw(40px, 'default', 20px);
   max-width: 100%;
-  min-height: calc(var(--vh) * 100);
   text-align: center;
 
   @media screen and (max-width: 800px) {

src/components/sections/blog/search/search.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
-  padding-top: tovw(108px, 'default', 64px);
+  padding-top: tovw(70px, 'default', 30px);
 
   @media screen and (max-width: 800px) {
     flex-direction: column-reverse;

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

@@ -28,11 +28,9 @@
 
     position: relative;
     align-self: center;
-    width: 75%;
-    margin-left: tovw(165px, 'default', 125px);
-    min-height: tovw(790px, 'default', 380px);
-    margin-top: tovw(-45px, 'default');
-    padding-top: tovw(30px, 'default', 20px);
+    width: 105%;
+    max-height: tovw(470px, 'default', 210px);
+    margin-bottom: tovw(50px, 'default', 40px);
     mix-blend-mode: lighten;
 
     video {
@@ -56,9 +54,9 @@
         rgb(3 3 3 / 1) 70%,
         rgb(3 3 3 / 1) 100%
       );
-      transform: translateX(-20%) translateY(-3%);
-      width: 400%;
-      height: 102%;
+      transform: translateX(-30%) translateY(-3%);
+      width: 650%;
+      height: tovw(495px, 'default', 200px);
       content: '';
     }
   }

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

@@ -18,6 +18,7 @@
   gap: tovw(155px, 'default', 80px) tovw(130px, 'default', 30px);
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
+  padding-bottom: tovw(115px, 'default', 55px);
 
   .hero__container {
     @include respond-to('mobile') {
@@ -49,9 +50,9 @@
   }
 
   position: absolute;
-  right: tovw(630px, 'default', 80px);
+  right: tovw(570px, 'default', 80px);
   z-index: -3;
-  padding-top: tovw(250px, 'default', 90px);
+  padding-top: tovw(150px, 'default', 90px);
 
   video {
     @include respond-to('mobile') {
@@ -59,9 +60,15 @@
     }
 
     z-index: -1;
-    width: tovw(1750px, 'default', 800px);
+    width: tovw(1900px, 'default', 800px);
     pointer-events: none;
     user-select: none;
+    mask-image: radial-gradient(
+      ellipse,
+      rgb(3 3 3 / 1) 5%,
+      rgb(3 3 3 / 1) 30%,
+      rgb(3 3 3 / 0) 60%
+    );
   }
 
   &::after {
@@ -78,19 +85,19 @@
       height: 100%;
     }
 
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    background: radial-gradient(
-      ellipse,
-      rgb(3 3 3 / 0) 25%,
-      rgb(3 3 3 / 0.9648) 60%,
-      rgb(3 3 3 / 1) 95%
-    );
-    width: 100%;
-    height: 80%;
-    content: '';
+    // position: absolute;
+    // bottom: 0;
+    // left: 0;
+    // z-index: 1;
+    // background: radial-gradient(
+    //   ellipse,
+    //   rgb(3 3 3 / 0) 25%,
+    //   rgb(3 3 3 / 0.9648) 60%,
+    //   rgb(3 3 3 / 1) 95%
+    // );
+    // width: 100%;
+    // height: 100%;
+    // content: '';
   }
 }
 

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

@@ -24,16 +24,49 @@
     justify-content: center;
   }
 
-  .hero__container {
+  .video_container {
     @include respond-to('mobile') {
-      min-height: tovw(400px, 'mobile', 510px);
+      min-height: unset;
     }
 
-    display: flex;
-    place-content: center;
-    margin-top: tovw(-210px, 'default', -220px);
-    margin-bottom: tovw(-60px, 'default', -70px);
-    min-height: tovw(925px, 'default', 485px);
+    position: relative;
+    align-self: center;
+    width: 120%;
+    max-height: tovw(650px, 'default', 320px);
+    margin-bottom: tovw(240px, 'default', 180px);
+    margin-top: tovw(-175px, 'default', -185px);
+    mix-blend-mode: lighten;
+
+    video {
+      @include respond-to('mobile') {
+        display: none;
+      }
+
+      width: 100%;
+      margin: auto;
+      z-index: 1;
+      mask-size: 250% 100%;
+      mask-position: center center;
+      mask-repeat: no-repeat;
+      mask-image: radial-gradient(
+        ellipse,
+        rgb(3 3 3 / 1) 40%,
+        rgb(3 3 3 / 0) 85%,
+        rgb(3 3 3 / 0) 100%
+      );
+    }
+  }
+
+  .hero__container {
+    @include respond-to('mobile') {
+      display: flex;
+      place-content: center;
+      margin-top: tovw(-210px, 'default', -220px);
+      margin-bottom: tovw(-60px, 'default', -70px);
+      min-height: tovw(925px, 'default', 485px);
+    }
+
+    display: none;
 
     .hero {
       @include respond-to('mobile') {

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

@@ -1,5 +1,5 @@
 import { useTheme } from 'next-themes'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { Arrow } from '~/components/icons/arrow'
 import Line from '~/components/icons/line'
@@ -24,17 +24,26 @@ interface Props {
 const Hero = ({ data }: Props) => {
   const { theme } = useTheme()
 
-  const contactHeroRef = useRef<HTMLImageElement>(null)
+  const [webmSource, setWebmSource] = useState('')
+  const [mp4Source, setMp4Source] = useState('')
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setWebmSource('/videos/banner-contact.webm')
+      setMp4Source('/videos/banner-contact.mp4')
+    }
+
+    if (theme === 'light') {
+      setWebmSource('/videos/banner-contact-light.webm')
+      setMp4Source('/videos/banner-contact-light.mp4')
+    }
+  }, [theme])
+
   const contactHeroMobileRef = useRef<HTMLImageElement>(null)
 
   useEffect(() => {
-    if (!contactHeroRef.current) return
     if (!contactHeroMobileRef.current) return
 
-    contactHeroRef.current.src =
-      theme === 'dark'
-        ? '/images/contact/banner-contact.png'
-        : '/images/contact/banner-contact-light.png'
     contactHeroMobileRef.current.src =
       theme === 'dark'
         ? '/images/contact/banner-contact.png'
@@ -44,13 +53,20 @@ const Hero = ({ data }: Props) => {
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
+      <div className={s['video_container']}>
+        <video
+          key={mp4Source}
+          autoPlay
+          controls={false}
+          muted
+          playsInline={true}
+          preload="true"
+        >
+          <source src={webmSource} type="video/webm" />
+          <source src={mp4Source} type="video/mp4" />
+        </video>
+      </div>
       <div className={s.hero__container}>
-        <img
-          ref={contactHeroRef}
-          className={s.hero}
-          loading="eager"
-          alt="hero"
-        />
         <img
           ref={contactHeroMobileRef}
           className={s.hero__mobile}

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

@@ -28,10 +28,9 @@
 
     position: relative;
     align-self: center;
-    width: 70%;
-    min-height: tovw(770px, 'default', 370px);
-    margin-top: tovw(-30px, 'default');
-    padding-top: tovw(30px, 'default', 20px);
+    width: 85%;
+    max-height: tovw(450px, 'default', 210px);
+    margin-bottom: tovw(120px, 'default', 80px);
     mix-blend-mode: lighten;
 
     video {
@@ -42,23 +41,15 @@
       width: 100%;
       margin: auto;
       z-index: 1;
-    }
-
-    &::after {
-      position: absolute;
-      top: tovw(10px, 'default', 10px);
-      left: 0;
-      z-index: 1;
-      mix-blend-mode: overlay;
-      background: radial-gradient(
+      mask-size: 250% 100%;
+      mask-position: center center;
+      mask-repeat: no-repeat;
+      mask-image: radial-gradient(
         ellipse,
-        rgb(3 3 3 / 0) 50%,
-        rgb(3 3 3 / 1) 72%,
-        rgb(3 3 3 / 1) 100%
+        rgb(3 3 3 / 1) 40%,
+        rgb(3 3 3 / 0) 85%,
+        rgb(3 3 3 / 0) 100%
       );
-      width: 101%;
-      height: 90%;
-      content: '';
     }
   }
 

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

@@ -21,14 +21,46 @@
     }
   }
 
+  .video_container {
+    @include respond-to('mobile') {
+      min-height: unset;
+    }
+
+    position: relative;
+    align-self: center;
+    width: 101%;
+    max-height: tovw(450px, 'default', 200px);
+    margin-bottom: tovw(65px, 'default', 60px);
+    mix-blend-mode: lighten;
+
+    video {
+      @include respond-to('mobile') {
+        display: none;
+      }
+
+      width: 100%;
+      margin: auto;
+      z-index: 1;
+      mask-size: 250% 100%;
+      mask-position: center center;
+      mask-repeat: no-repeat;
+      mask-image: radial-gradient(
+        ellipse,
+        rgb(3 3 3 / 1) 40%,
+        rgb(3 3 3 / 0) 85%,
+        rgb(3 3 3 / 0) 100%
+      );
+    }
+  }
+
   .hero__container {
     @include respond-to('mobile') {
+      display: flex;
+      place-content: center;
       min-height: tovw(400px, 'mobile', 480px);
     }
 
-    display: flex;
-    place-content: center;
-    min-height: tovw(650px, 'default', 320px);
+    display: none;
 
     .hero {
       @include respond-to('mobile') {
@@ -186,3 +218,21 @@
     height: tovw(740px, 'default', 740px);
   }
 }
+
+[data-theme='light'] {
+  .video_container {
+    mix-blend-mode: darken;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .hero__container {
+    mix-blend-mode: darken;
+  }
+
+  .gradient {
+    display: none;
+  }
+}

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

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef, useState } from 'react'
+
 import { Arrow } from '~/components/icons/arrow'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
@@ -15,21 +18,57 @@ interface Props {
 }
 
 const Hero = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const [webmSource, setWebmSource] = useState('')
+  const [mp4Source, setMp4Source] = useState('')
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setWebmSource('/videos/banner-partners.webm')
+      setMp4Source('/videos/banner-partners.mp4')
+    }
+
+    if (theme === 'light') {
+      setWebmSource('/videos/banner-partners-light.webm')
+      setMp4Source('/videos/banner-partners-light.mp4')
+    }
+  }, [theme])
+
+  const partnersHeroMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!partnersHeroMobileRef.current) return
+
+    partnersHeroMobileRef.current.src =
+      theme === 'dark'
+        ? '/images/partners/partners.png'
+        : '/images/partners/partners.png'
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
+      <div className={s['video_container']}>
+        <video
+          key={mp4Source}
+          autoPlay
+          controls={false}
+          loop
+          muted
+          playsInline={true}
+          preload="true"
+        >
+          <source src={webmSource} type="video/webm" />
+          <source src={mp4Source} type="video/mp4" />
+        </video>
+      </div>
       <div className={s.hero__container}>
-        <img
-          className={s.hero}
-          loading="eager"
-          alt="hero"
-          src="/images/partners/partners.png"
-        />
         <img
           className={s.hero__mobile}
           loading="eager"
           alt="hero"
-          src="/images/partners/partners.png"
+          ref={partnersHeroMobileRef}
         />
       </div>
       <Container className={s['container']}>

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

@@ -28,11 +28,9 @@
 
     align-self: center;
     position: relative;
-    width: 82%;
-    min-height: tovw(925px, 'default', 435px);
-    margin-top: tovw(-175px, 'default');
-    margin-bottom: tovw(-180px, 'default');
-    padding-top: tovw(30px, 'default', 20px);
+    width: 102%;
+    max-height: tovw(380px, 'default', 210px);
+    margin-bottom: tovw(110px, 'default', 20px);
     mix-blend-mode: lighten;
 
     video {
@@ -42,22 +40,6 @@
 
       width: 100%;
     }
-
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      background: radial-gradient(
-        ellipse,
-        rgb(3 3 3 / 0) 60%,
-        rgb(3 3 3 / 1) 75%,
-        rgb(3 3 3 / 1) 100%
-      );
-      width: 100%;
-      height: 100%;
-      content: '';
-    }
   }
 
   .hero__mobile {