Replace videos with images in mobile (#31)

* Replace videos with img mobile

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

@@ -17,10 +17,21 @@
     margin: 0 tovw(-35px, 'default', -35px);
     mix-blend-mode: screen;
 
+    @include respond-to('mobile') {
+      display: none;
+    }
+  }
+
+  .hero__mobile {
+    display: none;
+
     @include respond-to('mobile') {
       display: flex;
-      width: 300%;
       place-self: center;
+      margin: tovw(30px, 'mobile', 75px) 0 tovw(-25px, 'mobile')
+        tovw(10px, 'mobile', 10px);
+      width: 300%;
+      mix-blend-mode: screen;
     }
   }
 }

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

@@ -21,6 +21,12 @@ const Hero = () => {
       >
         <source src="/videos/hero-about.mp4" type="video/mp4" />
       </video>
+      <img
+        className={s.hero__mobile}
+        loading="eager"
+        alt="hero"
+        src="/images/about/about.jpg"
+      />
       <Container className={s['container']}>
         <div className={s['body']}>
           <div className={s['header']}>

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

@@ -13,10 +13,24 @@
   @include respond-to('mobile') {
     display: flex;
     flex-direction: column;
+    gap: tovw(49px, 'default', 49px);
     width: 100vw;
     min-height: 100vh;
     padding-bottom: tovw(18px, 'mobile');
   }
+
+  .hero__mobile {
+    display: none;
+
+    @include respond-to('mobile') {
+      display: flex;
+      place-self: center;
+      width: 250%;
+      margin-right: tovw(150px, 'mobile');
+      padding-top: tovw(65px, 'mobile');
+      mix-blend-mode: screen;
+    }
+  }
 }
 
 .video__container {
@@ -26,9 +40,11 @@
   padding-top: tovw(220px, 'default', 90px);
 
   @include respond-to('mobile') {
-    position: unset;
-    margin-bottom: tovw(-85px, 'mobile');
-    padding-top: tovw(55px, 'mobile');
+    display: none;
+
+    // position: unset;
+    // margin-bottom: tovw(-85px, 'mobile');
+    // padding-top: tovw(55px, 'mobile');
   }
 
   video {
@@ -130,6 +146,7 @@
   @include respond-to('mobile') {
     flex-direction: column;
     width: 100%;
+    margin-top: tovw(88px, 'default', 88px);
     gap: tovw(20px, 'mobile');
   }
 }

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

@@ -22,6 +22,12 @@ const Hero = () => {
           <source src="/videos/banner-community.mp4" type="video/mp4" />
         </video>
       </div>
+      <img
+        className={s.hero__mobile}
+        loading="eager"
+        alt="hero"
+        src="/images/community/hero/community.jpg"
+      />
       <div className={s['header']}>
         <Heading as="h1" variant="xl">
           Laconic Community

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

@@ -24,10 +24,21 @@
     margin: 0 tovw(180px, 'default', 90px);
     mix-blend-mode: screen;
 
+    @include respond-to('mobile') {
+      display: none;
+    }
+  }
+
+  .hero__mobile {
+    display: none;
+
     @include respond-to('mobile') {
       display: flex;
-      width: 300%;
       place-self: center;
+      margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
+        tovw(16px, 'mobile', 20px);
+      width: 200%;
+      mix-blend-mode: screen;
     }
   }
 

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

@@ -19,6 +19,12 @@ const Hero = () => {
       >
         <source src="/videos/banner_products.mp4" type="video/mp4" />
       </video>
+      <img
+        className={s.hero__mobile}
+        loading="eager"
+        alt="hero"
+        src="/images/products/products.jpg"
+      />
       <Container className={s['container']}>
         <div className={s.body}>
           <div>