feat: ui improves

src/components/common/footer/footer.module.scss

@@ -5,87 +5,89 @@
   text-align: center;
 
   .isotype {
-    margin-bottom: tovw(54px, 'default', 35px);
     width: tovw(94px, 'default', 52px);
     height: tovw(95px, 'default', 53px);
+    margin-bottom: tovw(54px, 'default', 35px);
   }
 
   &--section {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     height: calc(var(--vw) * 70);
     @media screen and (max-width: 800px) {
+      height: calc(var(--vw) * 95);
       background-image: url('/images/pre-footer-mobile.png');
       background-position: 50%;
       background-size: cover;
-      height: calc(var(--vw) * 95);
     }
 
     &::after,
     &::before {
       position: absolute;
+      z-index: -1;
       top: 50%;
       left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: -1;
-      background: radial-gradient(
-        circle,
-        rgb(4 4 4 / 0.5) 45%,
-        hsl(0deg 0% 100% / 0) 100%
-      );
-      width: 80%;
-      height: calc(var(--vh) * 70);
+      width: 100%;
+      height: 100%;
       content: '';
-      filter: blur(tovw(160px, 'default', 80px));
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      background: linear-gradient(
+        0deg,
+        black 15%,
+        rgb(9 9 121 / 0) 50%,
+        black 100%
+      );
       @media screen and (max-width: 800px) {
         content: normal;
       }
     }
 
     &::before {
+      width: 120%;
+      height: 115%;
       background: radial-gradient(
         ellipse farthest-corner at center center,
-        rgb(4 4 4 / 0.15) 45%,
+        rgb(4 4 4 / 0.05) 45%,
         #000 0
       );
-      width: 120%;
-      height: 105%;
-      filter: blur(tovw(100px, 'default', 50px));
+      filter: blur(tovw(80px, 'default', 40px));
     }
 
     .video {
       position: absolute;
+      z-index: -2;
       top: 0;
       left: 0;
-      z-index: -2;
       width: 100%;
       height: 100%;
-      pointer-events: none;
       user-select: none;
+      pointer-events: none;
     }
   }
 
   form {
     position: relative;
-    margin: tovw(62px, 'default', 48px) auto 0;
     width: max-content;
+    margin: tovw(62px, 'default', 48px) auto 0;
     @media screen and (max-width: 800px) {
       width: 100%;
     }
   }
 
   input {
+    font-family: var(--font-tt-hoves);
+    font-size: tovw(24px, 'default', 18px);
+    width: tovw(440px, 'default', 320px);
+    padding-bottom: tovw(10px, 'default', 10px);
+    letter-spacing: tovw(-1px, 'default', -1px);
+    color: var(--color-white);
     border: none;
     border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
     border-radius: 0;
     background: transparent;
-    padding-bottom: tovw(10px, 'default', 10px);
-    width: tovw(440px, 'default', 320px);
-    letter-spacing: tovw(-1px, 'default', -1px);
-    color: var(--color-white);
-    font-family: var(--font-tt-hoves);
-    font-size: tovw(24px, 'default', 18px);
     appearance: none;
 
     &::placeholder {
@@ -96,14 +98,14 @@
       position: absolute;
       top: 50%;
       right: 0;
-      transform: translateY(-80%);
-      margin: 0;
-      border: none;
-      background: none;
-      cursor: pointer;
-      padding: 0;
       width: 11px;
       height: 11px;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      transform: translateY(-80%);
+      border: none;
+      background: none;
       appearance: none;
 
       svg {
@@ -113,6 +115,15 @@
   }
 }
 
+.line {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: tovw(3px, 'default', 2px);
+  height: tovw(276px, 'default', 270px);
+  margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
+}
+
 .footer {
   position: relative;
   z-index: 10;
@@ -120,8 +131,8 @@
   .container {
     display: flex;
     justify-content: space-between;
-    border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
     padding-bottom: tovw(56px, 'default', 48px);
+    border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
 
     nav {
       display: flex;
@@ -148,8 +159,8 @@
       line-height: 1.35;
 
       &:first-of-type {
-        margin-bottom: tovw(12px, 'default', 10px);
         line-height: 1;
+        margin-bottom: tovw(12px, 'default', 10px);
 
         a {
           font-weight: 500;
@@ -198,10 +209,10 @@
 
   a,
   p {
-    margin: 0;
-    line-height: 1;
-    color: var(--color-grey-light);
     font-size: tovw(18px, 'default', 14px);
+    line-height: 1;
+    margin: 0;
+    color: var(--color-grey-light);
   }
 
   ul {

src/components/common/footer/index.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 
 import { ArrowLink } from '~/components/icons/arrow'
+import Line from '~/components/icons/line'
 import { Isotype, LogoFooter } from '~/components/icons/logo'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
@@ -20,16 +21,13 @@ export const Footer = () => {
   return (
     <>
       <Section className={s['pre__footer--section']}>
-        <video
-          autoPlay
+        <Line className={s['line']} height={276} />
+        <img
+          alt=""
           className={clsx('hide-on-mobile', s['video'])}
-          controls={false}
-          loop
-          muted
-          preload="true"
-        >
-          <source src="/videos/hero-grid.mp4" type="video/mp4" />
-        </video>
+          loading="eager"
+          src="/images/hero-grid.gif"
+        />
         <Container className={s['pre__footer']}>
           <Isotype className={s['isotype']} />
           <Heading

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

@@ -70,7 +70,7 @@
   .flag {
     width: tovw(36px, 'default', 36px);
     height: tovw(20px, 'default', 20px);
-    margin: 0 auto tovw(8px, 'default', 6px) auto;
+    margin: 0 auto 0 tovw(8px, 'default', 6px);
   }
 
   p {
@@ -88,8 +88,8 @@
     grid-template-rows: 1fr;
 
     @media screen and (max-width: 800px) {
-      grid-template-columns: 1fr;
       bottom: 5%;
+      grid-template-columns: 1fr;
     }
 
     ul {
@@ -103,6 +103,8 @@
       font-family: var(--font-dm-mono);
       font-size: tovw(12px, 'default', 11px);
       line-height: 1.7;
+      width: 100%;
+      text-align: right;
       text-transform: uppercase;
       font-variant-numeric: tabular-nums;
     }
@@ -111,6 +113,11 @@
       &:first-of-type {
         display: flex;
         justify-self: flex-start;
+        align-items: flex-end;
+
+        @media screen and (max-width: 800px) {
+          display: none;
+        }
       }
 
       &:last-of-type {
@@ -119,7 +126,7 @@
 
         span {
           display: inline-block;
-          width: tovw(55px, 'default', 40px);
+          width: tovw(60px, 'default', 55px);
         }
       }
     }

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

@@ -26,16 +26,12 @@ const Hero = () => {
 
   return (
     <Section className={s['section']}>
-      <video
-        autoPlay
+      <img
+        alt=""
         className={clsx('hide-on-mobile', s['video'])}
-        controls={false}
-        loop
-        muted
-        preload="true"
-      >
-        <source src="/videos/hero-grid.mp4" type="video/mp4" />
-      </video>
+        loading="eager"
+        src="/images/hero-grid.gif"
+      />
       <Heading as="h1" variant="xl" centered>
         The <br className="hide-on-desktop" />{' '}
         <HighlightedText>Multi-chain</HighlightedText> <br /> Verifable Data
@@ -53,7 +49,7 @@ const Hero = () => {
         Get Started
       </Button>
       <div className={s['scroll']}>
-        <div className="hide-on-mobile">
+        <div>
           <p>C:</p>
           <Flag className={s['flag']} />
         </div>