Merge branch 'sett/landing-v2' into develop

src/hooks/useIsInViewport.ts

@@ -0,0 +1,40 @@
+import { useEffect, useMemo, useState } from "react";
+
+const defaultOptions = {
+  rootMargin: "0px 0px 0px 0px",
+  threshold: 1,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useIsInViewport(
+  ref: any,
+  customOptions?: IntersectionObserverInit
+) {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  const options = useMemo(() => {
+    return customOptions
+      ? { ...defaultOptions, ...customOptions }
+      : defaultOptions;
+  }, [customOptions]);
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (!entry) return setIsIntersecting(false);
+        return setIsIntersecting(entry.isIntersecting), options;
+      }),
+    []
+  );
+
+  useEffect(() => {
+    ref.current && observer.observe(ref.current);
+
+    return () => {
+      ref.current && observer.unobserve(ref.current);
+      observer.disconnect();
+    };
+  }, [ref, observer]);
+
+  return isIntersecting;
+}

src/modules/landing/Componets/Article/index.tsx

@@ -43,19 +43,19 @@ export default function Article() {
     <div className={s.article}>
       <div className="container">
         <div className={s.article_inner}>
-          <div className={s.article_inner_heading}>
+          <h3 className={s.article_inner_heading}>
             Oh, and the <span>press loves us too!</span>
-          </div>
+          </h3>
           <div className={s.article_inner_content}>
             <div className={s.article_inner_content_top}>
-              {DATA_ARTICLE.top.map((item) => {
-                return <ItemArticle data={item} />;
+              {DATA_ARTICLE.top.map((item, index) => {
+                return <ItemArticle data={item} key={index} />;
               })}
             </div>
             <div className={s.article_inner_content_divide}></div>
             <div className={s.article_inner_content_bottom}>
-              {DATA_ARTICLE.bottom.map((item) => {
-                return <ItemArticle data={item} />;
+              {DATA_ARTICLE.bottom.map((item, index) => {
+                return <ItemArticle data={item} key={index} />;
               })}
             </div>
           </div>

src/modules/landing/Componets/Chain/ItemChain/SectionBottom/styles.module.scss

@@ -14,12 +14,21 @@
       color: #fff;
       font-weight: 500;
       line-height: 26.4px;
+
+      @include is-mobile {
+        font-size: 18px;
+        line-height: 19.8px;
+      }
     }
 
     &_sub {
       line-height: 25.2px;
       font-size: 18px;
       color: rgba(255, 255, 255, 0.7);
+      @include is-mobile {
+        font-size: 14px;
+        line-height: 19.6px;
+      }
     }
   }
   &_listInfo {
@@ -41,12 +50,22 @@
           font-size: 18px;
           line-height: 25.2px;
           color: rgba(255, 255, 255, 0.7);
+
+          @include is-mobile {
+            font-size: 14px;
+            line-height: 19.6px;
+          }
         }
       }
       &__right {
         font-size: 18px;
         line-height: 25.2px;
         font-weight: 400;
+
+        @include is-mobile {
+          font-size: 14px;
+          line-height: 19.6px;
+        }
       }
     }
   }

src/modules/landing/Componets/Chain/ItemChain/styles.module.scss

@@ -6,14 +6,21 @@
   width: 33.333%;
   cursor: pointer;
 
+  @include is-mobile {
+    width: 90vw;
+    flex-shrink: 0;
+    padding: 7.64px;
+    flex-grow: 1;
+  }
+
   :global {
 
     .fade {
       width: 100%;
     }
 
     .sectionTop_img {
-      transition: transform .4s var(--easeOutQuart);
+      transition: transform 0.4s var(--easeOutQuart);
     }
   }