fx

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/Chain/index.tsx

@@ -112,11 +112,12 @@ export default function Chain() {
   const { mobileScreen } = useWindowSize();
   return (
     <div className={s.chain}>
-      <div className="container">
-        <section className={s.chain_label}>
-          {mobileScreen && <HeroLabel />}
-        </section>
-
+      <div className='container'>
+        {
+          mobileScreen && <section className={s.chain_label}>
+            <HeroLabel />
+          </section>
+        }
         <section className={s.chain_inner}>
           <h2 className={s.chain_heading}>
             <Chars>

src/modules/landing/Componets/Hero/ItemHero/index.tsx

@@ -12,15 +12,17 @@ function ItemHero({ data, delay }: { data: TItemHero; delay: number }) {
   return (
     <div className={s.itemHero}>
       <Fade from={{ x: 20 }} to={{ x: 0 }} delay={delay}>
-        <div className={s.itemHero_content}>
-          <Image
-            className={s.itemHero_img}
-            src={data.icon}
-            alt={data.title}
-            width={45}
-            height={45}
-          />
-          <p className={s.itemHero_content_title}>{data.title}</p>
+        <div className={s.itemHero_inner}>
+          <div className={s.itemHero_content}>
+            <Image
+              className={s.itemHero_img}
+              src={data.icon}
+              alt={data.title}
+              width={45}
+              height={45}
+            />
+            <p className={s.itemHero_content_title}>{data.title}</p>
+          </div>
         </div>
       </Fade>
     </div>

src/modules/landing/Componets/Hero/ItemHero/styles.module.scss

@@ -1,23 +1,28 @@
 .itemHero {
   position: relative;
-  width: 100px;
-  aspect-ratio: 1;
-  display: flex;
-  justify-content: center;
-  background-color: #ffffff33;
-  padding-top: 20.85px;
-  padding-bottom: 12.54px;
 
-  @include is-mobile {
-    background-color: #f6f6f6;
-    width: calc(33vw - 30px);
-    align-items: center;
+  &_inner {
+    width: 100px;
     aspect-ratio: 1;
+    display: flex;
+    justify-content: center;
+    background-color: #ffffff33;
+    padding-top: 20.85px;
+    padding-bottom: 12.54px;
+
+    @include is-mobile {
+      background-color: #f6f6f6;
+      width: calc(33vw - 30px);
+      align-items: center;
+      aspect-ratio: 1;
+    }
   }
+
   &_img {
     height: 42px;
     width: auto;
   }
+
   &_content {
     display: flex;
     flex-direction: column;