Replace video, links to solid

src/components/primitives/link/link.module.scss

@@ -101,49 +101,6 @@
 
       &::before {
         opacity: 1;
-        background-image: repeating-linear-gradient(
-            0deg,
-            currentcolor,
-            currentcolor tovw(4px, 'default', 3px),
-            transparent tovw(4px, 'default', 3px),
-            transparent tovw(8px, 'default', 6px),
-            currentcolor tovw(8px, 'default', 6px)
-          ),
-          repeating-linear-gradient(
-            90deg,
-            currentcolor,
-            currentcolor tovw(4px, 'default', 3px),
-            transparent tovw(4px, 'default', 3px),
-            transparent tovw(8px, 'default', 6px),
-            currentcolor tovw(8px, 'default', 6px)
-          ),
-          repeating-linear-gradient(
-            currentcolor,
-            currentcolor tovw(4px, 'default', 3px),
-            transparent tovw(4px, 'default', 3px),
-            transparent tovw(8px, 'default', 6px),
-            currentcolor tovw(8px, 'default', 6px)
-          ),
-          repeating-linear-gradient(
-            270deg,
-            currentcolor,
-            currentcolor tovw(4px, 'default', 3px),
-            transparent tovw(4px, 'default', 3px),
-            transparent tovw(8px, 'default', 6px),
-            currentcolor tovw(8px, 'default', 6px)
-          );
-      }
-    }
-
-    @keyframes border {
-      from {
-        background-position: 0 0, tovw(8px, 'default', 6px) 0,
-          100% tovw(8px, 'default', 6px), 0 100%;
-      }
-
-      to {
-        background-position: 0 tovw(8px, 'default', 6px), 0 0, 100% 0,
-          tovw(8px, 'default', 6px) 100%;
       }
     }
   }

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

@@ -9,17 +9,41 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
+  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 100px);
   max-width: 100%;
   min-height: calc(var(--vh) * 100);
 
-  video {
-    @include respond-to('mobile') {
-      display: none;
+  .video_container {
+    position: relative;
+    display: flex;
+    width: 100%;
+
+    video {
+      @include respond-to('mobile') {
+        display: none;
+      }
+
+      width: 100%;
+      margin: auto;
+      mix-blend-mode: screen;
+      z-index: 1;
     }
 
-    margin: 0 tovw(-35px, 'default', -35px);
-    mix-blend-mode: screen;
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: radial-gradient(
+        ellipse,
+        rgb(3 3 3 / 0) 55%,
+        rgb(3 3 3 / 1) 75%,
+        rgb(3 3 3 / 1) 100%
+      );
+      width: 101%;
+      height: 100%;
+      content: '';
+    }
   }
 
   .hero__mobile {
@@ -144,7 +168,8 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: -1;
+  z-index: 2;
+  mix-blend-mode: screen;
   background: linear-gradient(
     180deg,
     rgb(0 0 244 / 0.9) 1.63%,

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

@@ -11,16 +11,18 @@ const Hero = () => {
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s['gradient']} />
-      <video
-        autoPlay
-        controls={false}
-        loop
-        muted
-        playsInline={true}
-        preload="true"
-      >
-        <source src="/videos/hero-about.mp4" type="video/mp4" />
-      </video>
+      <div className={s['video_container']}>
+        <video
+          autoPlay
+          controls={false}
+          loop
+          muted
+          playsInline={true}
+          preload="true"
+        >
+          <source src="/videos/Banner_About.webm" type="video/webm" />
+        </video>
+      </div>
       <img
         className={s.hero__mobile}
         loading="eager"

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

@@ -18,7 +18,7 @@ const Hero = () => {
           playsInline={true}
           preload="true"
         >
-          <source src="/videos/banner-community.mp4" type="video/mp4" />
+          <source src="/videos/Banner_Community.webm" type="video/webm" />
         </video>
       </div>
       <img

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

@@ -25,7 +25,7 @@
       display: none;
     }
 
-    margin: 0 tovw(180px, 'default', 90px);
+    margin: 0 tovw(180px, 'default', 115px);
     mix-blend-mode: screen;
   }
 

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

@@ -1,3 +1,5 @@
+import { useRef } from 'react'
+
 import { Arrow } from '~/components/icons/arrow'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
@@ -6,18 +8,26 @@ import Heading from '~/components/primitives/heading'
 import s from './hero.module.scss'
 
 const Hero = () => {
+  const heroVideoRef = useRef<HTMLVideoElement>(null)
+
+  // const loop = () => {
+  //   heroVideoRef.current?.play()
+  // }
+
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
       <video
         autoPlay
+        ref={heroVideoRef}
         controls={false}
         loop
+        // onEnded={() => loop()}
         muted
         playsInline={true}
         preload="true"
       >
-        <source src="/videos/banner_products.mp4" type="video/mp4" />
+        <source src="/videos/Banner_Products.webm" type="video/webm" />
       </video>
       <img
         className={s.hero__mobile}