Hero Video Community (#11)

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

@@ -19,18 +19,54 @@
     min-height: 100vh;
   }
 
-  img {
+  .videoContainer {
     position: absolute;
-    z-index: -2;
-    width: tovw(1050px, 'default', 400px);
-    padding-top: tovw(150px, 'default', 90px);
+    z-index: -3;
+    padding-top: tovw(220px, 'default', 90px);
+    right: tovw(620px, 'default', 80px);
 
     @media screen and (max-width: 800px) {
       position: unset;
-      width: 110vw;
       padding-top: tovw(55px, 'mobile');
       margin-bottom: tovw(-85px, 'mobile');
     }
+
+    &::after {
+      position: absolute;
+      content: '';
+      left: 0;
+      bottom: 0;
+      z-index: 1;
+      width: 100%;
+      height: 80%;
+      background: radial-gradient(
+        ellipse,
+        rgb(3 3 3 / 0) 25%,
+        rgb(3 3 3 / 0.9648) 60%,
+        rgb(3 3 3 / 1) 95%
+      );
+
+      @media screen and (max-width: 800px) {
+        bottom: unset;
+        top: tovw(-260px, 'mobile', -260px);
+        height: 100%;
+        background: radial-gradient(
+          ellipse,
+          rgb(3 3 3 / 0) 25%,
+          rgb(3 3 3 / 0.9648) 55%,
+          rgb(3 3 3 / 1) 85%
+        );
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  video {
+    width: tovw(1750px, 'default', 800px);
+
+    @media screen and (max-width: 800px) {
+      width: tovw(600px, 'mobile');
+    }
   }
 
   .headingContainer {
@@ -97,18 +133,19 @@
   .gradient {
     position: absolute;
     top: 0;
+    left: 0;
     width: 100%;
-    height: 55%;
+    height: tovw(740px, 'default', 740px);
     background: linear-gradient(
       180deg,
       rgb(0 0 244 / 0.9) 1.63%,
       rgb(0 0 244 / 0) 99.89%
     );
+    mix-blend-mode: screen;
     z-index: -1;
 
     @media screen and (max-width: 800px) {
-      height: 75%;
-      mix-blend-mode: screen;
+      height: 70%;
     }
   }
 

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

@@ -10,7 +10,11 @@ const Hero = () => {
   return (
     <Section className={s['section']}>
       <div className={s.gradient}></div>
-      <img src="/images/community/hero/hero2.png" alt="hero" />
+      <div className={s.videoContainer}>
+        <video autoPlay controls={false} loop muted preload="true">
+          <source src="/videos/banner-community.mp4" type="video/mp4" />
+        </video>
+      </div>
       <div className={s.headingContainer}>
         <Heading as="h1" variant="xl">
           Laconic Community
@@ -25,7 +29,9 @@ const Hero = () => {
         </p>
         <Link href="https://google.com">LEARN MORE</Link>
         <div className={s.buttonsContainer}>
-          <Button size="large">CHAT WITH US</Button>
+          <Button size="large" variant="primary">
+            CHAT WITH US
+          </Button>
           <Button size="large" variant="primary">
             Get Started
           </Button>