From 64d2e66d8fb98da184591180153cc6dafd2cc62b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Sun, 15 May 2022 11:15:29 +0200
Subject: [PATCH] Adjust hero

---
 .../sections/about/hero/hero.module.scss      |  7 ++--
 .../sections/products/hero/hero.module.scss   | 35 +++++++++++++++----
 .../sections/products/hero/index.tsx          | 28 ++++++++-------
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index 0cd2409..baeec34 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -17,6 +17,7 @@
     position: relative;
     display: flex;
     width: 100%;
+    mix-blend-mode: lighten;
 
     video {
       @include respond-to('mobile') {
@@ -25,7 +26,6 @@
 
       width: 100%;
       margin: auto;
-      mix-blend-mode: screen;
       z-index: 1;
     }
 
@@ -34,10 +34,11 @@
       top: 0;
       left: 0;
       z-index: 1;
+      mix-blend-mode: overlay;
       background: radial-gradient(
         ellipse,
-        rgb(3 3 3 / 0) 55%,
-        rgb(3 3 3 / 1) 75%,
+        rgb(3 3 3 / 0) 50%,
+        rgb(3 3 3 / 1) 72%,
         rgb(3 3 3 / 1) 100%
       );
       width: 101%;
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index 2397cd5..cb1a9cb 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -20,13 +20,35 @@
     }
   }
 
-  video {
-    @include respond-to('mobile') {
-      display: none;
+  .video_container {
+    position: relative;
+    margin: auto;
+    width: 82%;
+    mix-blend-mode: lighten;
+
+    video {
+      @include respond-to('mobile') {
+        display: none;
+      }
+
+      width: 100%;
     }
 
-    margin: 0 tovw(180px, 'default', 115px);
-    mix-blend-mode: screen;
+    &::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 {
@@ -187,7 +209,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%,
diff --git a/src/components/sections/products/hero/index.tsx b/src/components/sections/products/hero/index.tsx
index a4a3692..ac177c4 100644
--- a/src/components/sections/products/hero/index.tsx
+++ b/src/components/sections/products/hero/index.tsx
@@ -17,19 +17,21 @@ const Hero = () => {
   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.webm" type="video/webm" />
-        <source src="/videos/banner-products.mp4" type="video/mp4" />
-      </video>
+      <div className={s.video_container}>
+        <video
+          autoPlay
+          ref={heroVideoRef}
+          controls={false}
+          loop
+          // onEnded={() => loop()}
+          muted
+          playsInline={true}
+          preload="true"
+        >
+          <source src="/videos/banner-products.webm" type="video/webm" />
+          <source src="/videos/banner-products.mp4" type="video/mp4" />
+        </video>
+      </div>
       <img
         className={s.hero__mobile}
         loading="eager"