Change App section in Products

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

@@ -2,7 +2,11 @@
 
 .section {
   @include respond-to('mobile') {
-    height: calc(var(--vw) * 80);
+    width: 100%;
+    height: unset;
+    padding: 0;
+    margin-bottom: 0;
+    padding-bottom: tovw(88px, 'mobile');
   }
 
   display: flex;
@@ -14,80 +18,63 @@
 
   .container {
     @include respond-to('mobile') {
-      padding: 0 tovw(16px, 'tablet', 16px);
+      flex-direction: column;
+      padding: 0 tovw(56px, 'default', 16px);
     }
 
     display: flex;
     position: relative;
-    align-items: center;
-    flex-direction: column;
     z-index: 2;
 
-    h2 {
-      @include respond-to('mobile') {
-        font-size: tovw(32px, 'mobile');
+    div:nth-child(2) {
+      h2 {
+        text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
       }
 
-      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
-    }
+      p {
+        @include respond-to('mobile') {
+          width: 100%;
+          max-width: 550px;
+          margin-top: tovw(16px, 'mobile');
+          line-height: 1.5;
+        }
 
-    p {
-      @include respond-to('mobile') {
-        margin-top: tovw(16px, 'mobile');
-        line-height: 1.5;
+        line-height: 1.35;
+        font-size: tovw(30px, 'default', 18px);
+        width: tovw(635px, 'default', 300px);
+        margin-top: tovw(62px, 'default', 30px);
       }
-
-      text-align: center;
-      line-height: 1.35;
-      font-size: tovw(30px, 'default', 15px);
-      width: tovw(856px, 'default', 300px);
-      margin-top: tovw(62px, 'default', 30px);
     }
   }
 
-  &::after,
-  &::before {
+  div:first-child {
     @include respond-to('mobile') {
-      content: normal;
+      width: 100%;
     }
 
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: linear-gradient(
-      0deg,
-      var(--color-black) 15%,
-      rgb(9 9 121 / 0) 45%,
-      var(--color-black) 100%
-    );
-    width: 100%;
-    height: 100%;
-    content: '';
-    pointer-events: none;
-  }
+    position: relative;
+    width: tovw(1300px, 'default');
 
-  &::before {
-    background: radial-gradient(
-      ellipse,
-      rgb(3 3 3 / 0) 25%,
-      rgb(3 3 3 / 0.965) 60%,
-      rgb(3 3 3 / 1) 100%
-    );
-    width: 120%;
-    height: 110%;
-    filter: blur(tovw(80px, 'default', 40px));
-    will-change: filter, transform;
-  }
+    .app__img {
+      @include respond-to('mobile') {
+        display: none;
+      }
 
-  .video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    user-select: none;
+      top: tovw(-250px);
+      left: tovw(-400px);
+      width: tovw(1060px, 'default', 300px);
+      position: absolute;
+
+      &__mobile {
+        @include respond-to('mobile') {
+          display: unset;
+          width: 135%;
+          transform: translateX(-15%);
+          mix-blend-mode: screen;
+        }
+
+        display: none;
+      }
+    }
   }
 }

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

@@ -1,5 +1,3 @@
-// import { Arrow } from '~/components/icons/arrow'
-
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
@@ -10,15 +8,28 @@ const AppSection = () => {
   return (
     <Section className={s['section']} id="laconicapp">
       <Container className={s['container']}>
-        <Heading as="h2" variant="lg">
-          Laconic App
-        </Heading>
-        <p>
-          The Laconic App leverages an in-browser IPFS payment channel, enabling
-          users of the network to transact quickly and easily with Laconic
-          Network Token (LNT) and ERC20 tokens. Users will also be able to
-          access Laconic’s liquidity <br /> pool via the App.
-        </p>
+        <div>
+          <img
+            className={s.app__img}
+            src="/images/products/app.png"
+            alt="token"
+          />
+          <img
+            className={s.app__img__mobile}
+            src="/images/products/app-mobile.jpg"
+            alt="token"
+          />
+        </div>
+        <div>
+          <Heading as="h2" variant="lg">
+            Laconic App
+          </Heading>
+          <p>
+            Laconic Wallet leverages an in-browser IPFS payment channel,
+            enabling users of the network to transact quickly and easily with
+            LNT and ERC20 tokens.
+          </p>
+        </div>
       </Container>
     </Section>
   )