Replace blurry images (#39)

src/components/sections/homepage/benefits/benefits.module.scss

@@ -182,11 +182,11 @@
   &__image {
     display: block;
     width: 100%;
+    mix-blend-mode: lighten;
 
     &--01 {
-      transform: translateY(-14%);
       z-index: -1;
-      margin: 0 0 0 tovw(-16px, 'mobile');
+      margin: tovw(50px, 'mobile') 0 tovw(100px, 'mobile') tovw(-16px, 'mobile');
       width: calc(100% + (tovw(16px, 'mobile') * 2));
       pointer-events: none;
       user-select: none;

src/components/sections/homepage/benefits/index.tsx

@@ -53,7 +53,7 @@ const Benefits = () => {
         )}
         alt="Benefit"
         loading="lazy"
-        src="/images/benefit-mobile-01.png"
+        src="/images/benefit-mobile-01.jpg"
       />
       <div className={s['background']}>
         <Container className={s['developers']}>
@@ -98,7 +98,7 @@ const Benefits = () => {
           )}
           alt="Benefit"
           loading="lazy"
-          src="/images/benefit-mobile-02.png"
+          src="/images/benefit-mobile-02.jpg"
         />
         <Container className={s['users__container']}>
           <Container className={s['users']}>

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

@@ -37,6 +37,11 @@
       width: 200%;
       mix-blend-mode: screen;
       place-self: center;
+      mask-image: linear-gradient(
+        0deg,
+        rgb(255 255 255 / 0) 0%,
+        rgb(0 0 0) 25%
+      );
     }
 
     display: none;