merge sett

package.json

@@ -25,6 +25,7 @@
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@commitlint/cli": "^18.4.3",
+    "@dotlottie/react-player": "^1.6.12",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@next/bundle-analyzer": "^14.0.4",

src/app/page.tsx

@@ -2,7 +2,6 @@
 
 import MainLayout from '@/layouts/MainLayout';
 import Landing from '@/modules/landing';
-// import HomeModule from '@/modules/home';
 
 export default function Home() {
   return (
@@ -11,7 +10,3 @@ export default function Home() {
     </MainLayout>
   );
 }
-
-// export default function Home() {
-//   return <></>;
-// }

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/layouts/MainLayout.tsx

@@ -1,11 +1,9 @@
 'use client';
 
-// import Footer from '@/layouts/Footer';
 import Header, { HeaderProps } from '@/layouts/Header';
 import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 import useAnimationStore from '@/stores/useAnimationStore';
-// import s from './styles.module.scss';
 
 type IMainProps = {
   hideHeader?: boolean;

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;

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

@@ -8,8 +8,10 @@ import Chars from '@/interactive/Chars';
 import BorderLine from '@/interactive/BorderLine';
 import { Box } from '@chakra-ui/react';
 import useWindowSize from '@/hooks/useWindowSize';
+import useAnimationStore from '@/stores/useAnimationStore';
 
 export default function Hero() {
+  const { played } = useAnimationStore();
   const { mobileScreen } = useWindowSize();
   return (
     <div className={s.hero}>