Merge branch 'sett/landing-v2' into develop

src/constants/breakpoint.ts

@@ -1,4 +1,4 @@
 export const XS_MOBILE_SCREEN = 500;
 export const MOBILE_SCREEN = 768;
-export const TABLET_SCREEN = 1024;
+export const TABLET_SCREEN = 1199;
 export const QHD_SCREEN = 2048;

src/interactive/Fade/styles.module.scss

@@ -1,3 +1,5 @@
-.chars{
-
+.fade {
+  @include is-mobile {
+    width: 100%;
+  }
 }

src/interactive/Lines/styles.module.scss

@@ -1,3 +1,2 @@
-.chars{
-
+.chars {
 }

src/interactive/Scale/index.tsx

@@ -1,32 +1,44 @@
-import {PropsWithChildren, useCallback, useRef} from "react";
-import {gsap} from "gsap";
-import useAnimation from "@/hooks/useAnimation";
+import { PropsWithChildren, useCallback, useRef } from 'react';
+import { gsap } from 'gsap';
+import useAnimation from '@/hooks/useAnimation';
+import useWindowSize from '@/hooks/useWindowSize';
 
 interface IProp extends PropsWithChildren {
-    delay?: number
+  delay?: number;
+  scale?: number;
 }
 
-export default function Scale({children, delay}: IProp) {
-    const refContent = useRef<HTMLDivElement>(null)
+export default function Scale({ children, delay, scale }: IProp) {
+  const refContent = useRef<HTMLDivElement>(null);
+  const initAnimation = useCallback((): void => {
+    refContent.current &&
+      gsap.set(refContent.current, {
+        opacity: 0,
+        scale: scale ? scale : 1.2,
+      });
+  }, []);
 
-    const initAnimation = useCallback((): void => {
-        refContent.current && gsap.set(refContent.current, {opacity: 0, scale: 1.2});
-    }, [])
+  const playAnimation = useCallback((): void => {
+    refContent.current &&
+      gsap.to(refContent.current, {
+        opacity: 1,
+        scale: 1,
+        delay,
+        ease: 'power3.out',
+        duration: 0.8,
+      });
+  }, []);
 
-    const playAnimation = useCallback((): void => {
-        refContent.current && gsap.to(refContent.current, {opacity: 1, scale: 1, delay, ease: 'power3.out', duration: .8});
-    }, [])
+  useAnimation({
+    trigger: refContent,
+    initAnimation,
+    playAnimation,
+    threshold: 30,
+  });
 
-    useAnimation(
-        {
-            trigger: refContent,
-            initAnimation,
-            playAnimation,
-            threshold: 30
-        }
-    )
-
-    return <div ref={refContent} className={'anim-scale'}>
-        {children}
+  return (
+    <div ref={refContent} className={'anim-scale'}>
+      {children}
     </div>
+  );
 }

src/layouts/Header/index.tsx

@@ -16,6 +16,7 @@ import { useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import cn from 'classnames';
 import s from './style.module.scss';
+import useWindowSize from '@/hooks/useWindowSize';
 
 export type HeaderProps = {
   color?: 'black' | 'white';
@@ -35,11 +36,11 @@ const Header = (props: HeaderProps) => {
     return pathName === '/';
   }, [pathName]);
   const isMobile = useBreakpointValue({ base: true, md: false }) as boolean;
-
+  const { tabletScreen } = useWindowSize();
   return (
     <>
       <Box
-        id='HEADER_VIEW'
+        id="HEADER_VIEW"
         position={position}
         bgColor={bgColor}
         display={'flex'}
@@ -52,7 +53,7 @@ const Header = (props: HeaderProps) => {
         zIndex={2}
         className={cn(isHome ? s.isHome : '', play ? s.play : '')}
       >
-        <BoxContent id='HEADER_CONTENT'>
+        <BoxContent id="HEADER_CONTENT">
           <Flex
             display={'flex'}
             flexDir={'row'}
@@ -61,13 +62,13 @@ const Header = (props: HeaderProps) => {
             minH={['40px', '40px']}
           >
             <Flex
-              flex={1}
+              flex={tabletScreen ? '' : 1}
               justify={'left'}
               _hover={{
                 cursor: 'pointer',
               }}
             >
-              <Link href='/'>
+              <Link href="/">
                 {primaryColor === 'white' ? (
                   <Image src={`/icons/logo_white.svg`} />
                 ) : (

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

@@ -1,25 +1,23 @@
 import React from 'react';
 import s from './styles.module.scss';
-import Image, { StaticImageData } from 'next/image';
+import { IBlog } from '../../Section_7/constant';
+import { Image } from '@chakra-ui/react';
+import useWindowSize from '@/hooks/useWindowSize';
 
-type TArticle = {
-  title: string;
-  img: StaticImageData;
-  description: string;
-};
-
-export default function ItemArticle({ data }: { data: TArticle }) {
+export default function ItemArticle({ data }: { data: IBlog }) {
+  const { mobileScreen } = useWindowSize();
   return (
     <div className={s.itemArticle}>
       <Image
-        src={data.img}
+        className={s.itemArticle_img}
+        src={data.imageUrl}
         alt={data.title}
-        width={data.img.width}
-        height={data.img.height}
+        width={'100%'}
+        height={mobileScreen ? 'auto' : '300px'}
       />
       <div className={s.itemArticle_content}>
         <h5 className={s.itemArticle_content_title}>{data.title}</h5>
-        <p className={s.itemArticle_content_description}>{data.description}</p>
+        <p className={s.itemArticle_content_description}>{data.desc}</p>
       </div>
     </div>
   );

src/modules/landing/Componets/Article/ItemArticle/styles.module.scss

@@ -1,22 +1,46 @@
 .itemArticle {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: 24px;
+
+  @include is-mobile {
+    gap: 20px;
+  }
+  &_img {
+    width: 100%;
+    height: auto;
+  }
   &_content {
     display: flex;
     flex-direction: column;
     gap: 16px;
+
+    @include is-mobile {
+      gap: 12px;
+    }
     &_title {
       font-size: 24px;
       line-height: 31.2px;
       font-weight: 400;
       color: #000;
+      @include is-mobile {
+        font-size: 22px;
+        font-weight: 400;
+        line-height: 130%;
+      }
     }
     &_description {
       font-size: 16px;
       font-weight: 400;
       color: #4d4d4d;
       line-height: 22.4px;
+
+      @include is-mobile {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+      }
     }
   }
 }

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

@@ -1,98 +1,66 @@
-import React from 'react';
-import s from './styles.module.scss';
-import ItemArticle from './ItemArticle';
-import article_1 from '@/public/landing/images/article_1.jpg';
-import article_2 from '@/public/landing/images/article_2.jpg';
-import article_3 from '@/public/landing/images/article_3.jpg';
-import article_4 from '@/public/landing/images/article_4.jpg';
+// import React from 'react';
+// import s from './styles.module.scss';
+// import ItemArticle from './ItemArticle';
+// import article_1 from '@/public/landing/images/article_1.jpg';
+// import article_2 from '@/public/landing/images/article_2.jpg';
+// import article_3 from '@/public/landing/images/article_3.jpg';
+// import article_4 from '@/public/landing/images/article_4.jpg';
 
-const DATA_ARTICLE = {
-  top: [
-    {
-      title: 'What Are BRC-20 Tokens? Explaining the Bitcoin Memecoin Hype',
-      description:
-        '"Memecoins" on Bitcoin is probably not what Satoshi Nakamoto envisioned when he released the Bitcoin whitepaper in 2008, but it just might be the mass adoption Bitcoin deserves.',
-      img: article_1,
-    },
-    {
-      title:
-        'Ordinals turned Bitcoin into a worse version of Ethereum: Can we fix it?',
-      description:
-        'No one expected the Taproot upgrade would lead to a surge of NFTs and memecoins on Bitcoin. Are they here to stay, or can the problems they’re causing be fixed?',
-      img: article_2,
-    },
-  ],
-  bottom: [
-    {
-      title: 'BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit',
-      description:
-        'Degens will immediately recognize BRC-721’s acronymous name as being akin to ERC-721 — AKA the premiere token standard for Ethereum NFTs. Put simply, BRC-721s are smart-contract-based NFTs, but on BTC.',
-      img: article_3,
-    },
-    {
-      title: 'BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit',
-      description:
-        'Degens will immediately recognize BRC-721’s acronymous name as being akin to ERC-721 — AKA the premiere token standard for Ethereum NFTs. Put simply, BRC-721s are smart-contract-based NFTs, but on BTC.',
-      img: article_4,
-    },
-  ],
-};
+// const DATA_ARTICLE = {
+//   top: [
+//     {
+//       title: 'What Are BRC-20 Tokens? Explaining the Bitcoin Memecoin Hype',
+//       description:
+//         '"Memecoins" on Bitcoin is probably not what Satoshi Nakamoto envisioned when he released the Bitcoin whitepaper in 2008, but it just might be the mass adoption Bitcoin deserves.',
+//       img: article_1,
+//     },
+//     {
+//       title:
+//         'Ordinals turned Bitcoin into a worse version of Ethereum: Can we fix it?',
+//       description:
+//         'No one expected the Taproot upgrade would lead to a surge of NFTs and memecoins on Bitcoin. Are they here to stay, or can the problems they’re causing be fixed?',
+//       img: article_2,
+//     },
+//   ],
+//   bottom: [
+//     {
+//       title: 'BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit',
+//       description:
+//         'Degens will immediately recognize BRC-721’s acronymous name as being akin to ERC-721 — AKA the premiere token standard for Ethereum NFTs. Put simply, BRC-721s are smart-contract-based NFTs, but on BTC.',
+//       img: article_3,
+//     },
+//     {
+//       title: 'BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit',
+//       description:
+//         'Degens will immediately recognize BRC-721’s acronymous name as being akin to ERC-721 — AKA the premiere token standard for Ethereum NFTs. Put simply, BRC-721s are smart-contract-based NFTs, but on BTC.',
+//       img: article_4,
+//     },
+//   ],
+// };
 
-export default function Article() {
-  return (
-    <div className={s.article}>
-      <div className="container">
-        <div className={s.article_inner}>
-          <h3 className={s.article_inner_heading}>
-            Oh, and the <span>press loves us too!</span>
-          </h3>
-          <div className={s.article_inner_content}>
-            <div className={s.article_inner_content_top}>
-              {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, index) => {
-                return <ItemArticle data={item} key={index} />;
-              })}
-            </div>
-          </div>
-
-          <div className={s.article_inner_groupButton}>
-            <span className={s.article_inner_groupButton_left}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="8"
-                height="14"
-                viewBox="0 0 8 14"
-                fill="none"
-              >
-                <path
-                  d="M6.66656 0.666655C6.92256 0.666655 7.17859 0.76395 7.37326 0.95995C7.76393 1.35062 7.76393 1.984 7.37326 2.37466L2.74663 7.00129L7.37326 11.6279C7.76393 12.0186 7.76393 12.652 7.37326 13.0426C6.98259 13.4333 6.34921 13.4333 5.95855 13.0426L0.625214 7.7093C0.234547 7.31863 0.234547 6.68525 0.625214 6.29459L5.95855 0.961252C6.15455 0.763919 6.41056 0.666655 6.66656 0.666655Z"
-                  fill="black"
-                  fill-opacity="0.3"
-                />
-              </svg>
-            </span>
-            <span className={s.article_inner_groupButton_right}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="8"
-                height="14"
-                viewBox="0 0 8 14"
-                fill="none"
-              >
-                <path
-                  d="M1.33345 13.3333C1.07745 13.3333 0.821407 13.236 0.62674 13.04C0.236074 12.6494 0.236074 12.016 0.62674 11.6253L5.25337 6.99871L0.62674 2.37208C0.236074 1.98141 0.236074 1.34803 0.62674 0.957368C1.01741 0.566701 1.65079 0.566701 2.04145 0.957368L7.37479 6.2907C7.76545 6.68137 7.76545 7.31475 7.37479 7.70541L2.04145 13.0387C1.84545 13.2361 1.58945 13.3333 1.33345 13.3333Z"
-                  fill="white"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+// export default function Article() {
+//   return (
+//     <div className={s.article}>
+//       <div className="container">
+//         <div className={s.article_inner}>
+//           <h3 className={s.article_inner_heading}>
+//             Oh, and the <span>press loves us too!</span>
+//           </h3>
+//           <div className={s.article_inner_content}>
+//             <div className={s.article_inner_content_top}>
+//               {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, index) => {
+//                 return <ItemArticle data={item} key={index} />;
+//               })}
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }