Merge branch 'sett/landing-v2' into develop

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

@@ -0,0 +1,69 @@
+import s from './styles.module.scss';
+import Image from 'next/image';
+import { Button } from '@chakra-ui/react';
+import Fade from '@/interactive/Fade';
+import { useRouter } from 'next/navigation';
+import useWindowSize from '@/hooks/useWindowSize';
+import Scale from '@/interactive/Scale';
+import Lines from '@/interactive/Lines';
+import HeadingSection from '../HeadingSection';
+import Chars from '@/interactive/Chars';
+import ContentSection from '@/modules/landing/Componets/ContentSection';
+
+export default function BitEth() {
+
+  const router = useRouter();
+  const { mobileScreen } = useWindowSize();
+
+  return <div className={s.bitEth}>
+    <div className={`${s.bitEth_inner} container`}>
+      <div className={s.bitEth_content}>
+        <Scale>
+          <Image className={s.thumb} src={'landing/biteth.svg'} alt={'biteth.svg'} width={250} height={80}
+                 loading={'eager'} />
+        </Scale>
+        <HeadingSection className={s.heading}>
+          <Chars delay={.2}>
+            Zero effort to migrate from Ethereum
+          </Chars>
+        </HeadingSection>
+        <ContentSection className={s.content}>
+          <Lines delay={.3}>
+            Whatever your vision — a dapp, a fully onchain game, a DEX, or an ecosystem — there are many benefits of
+            running your own blockchain.
+          </Lines>
+        </ContentSection>
+        <div className={s.actions}>
+          <Fade delay={0.5}>
+            <Button
+              bgColor={'#EF601B'}
+              color={'#fff'}
+              borderRadius={0}
+              display={'flex'}
+              justifyContent={'center'}
+              alignItems={'center'}
+              px={'24px'}
+              py={'10px'}
+              minW={['180px']}
+              width={mobileScreen ? '100%' : ''}
+              height={'48px'}
+              fontWeight={400}
+              fontSize={'16px'}
+              _hover={{
+                bgColor: '#000',
+              }}
+              onClick={() => {
+                router.push('/blockchains/customize');
+              }}
+            >
+              {`Build your Bitcoin L2`}
+            </Button>
+          </Fade>
+        </div>
+      </div>
+      <Scale>
+        <Image className={s.full} src={'/landing/carbon.jpg'} alt={'carbon'} width={1600} height={570} />
+      </Scale>
+    </div>
+  </div>;
+}

src/modules/landing/Componets/BitEth/styles.module.scss

@@ -0,0 +1,32 @@
+.bitEth {
+  padding-top: 120px;
+  background: #000;
+
+  &_content {
+    max-width: 820px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 60px;
+    text-align: center;
+  }
+
+  .thumb {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 28px;
+  }
+
+  .heading {
+    color: #FFF;
+  }
+
+  .content {
+    text-align: center;
+    color: #FFF;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: center;
+  }
+}

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

@@ -1,5 +1,7 @@
 .wrapCursor {
   position: relative;
+  overflow: hidden;
+  width: 100%;
 }
 
 .cursor {

src/modules/landing/Componets/Chain/ItemChain/SectionBottom/index.tsx

@@ -7,7 +7,7 @@ import Fade from '@/interactive/Fade';
 type TSectionBottom = {
   title: string;
   link?: string;
-  data: {
+  data?: {
     left: string;
     right: string;
     icon: string;
@@ -18,45 +18,59 @@ type TSectionBottom = {
 export default function SectionBottom({
   data,
   delay,
+  isLaunch = false,
 }: {
   data: TSectionBottom;
   delay: number;
+  isLaunch?: boolean;
+  subText?: string;
 }) {
   return (
     <div
       className={`${s.sectionBottom} ${s[`sectionBottom__${data.bgBottom}`]}`}
     >
       <div className={s.sectionBottom_title}>
-        <h6 className={s.sectionBottom_title_main}>
+        <h6
+          className={`${s.sectionBottom_title_main} ${
+            isLaunch && s[`sectionBottom_title_main_isLaunch`]
+          }`}
+        >
           <Chars delay={delay}>{data.title}</Chars>
         </h6>
-
         <Chars delay={delay}>
           <p className={s.sectionBottom_title_sub}>
-            {!data?.link && 'Coming soon'}
+            {!data?.link && !isLaunch && 'Coming soon'}
           </p>
         </Chars>
       </div>
 
-      <ul className={s.sectionBottom_listInfo}>
-        {data.data.map((item, index) => {
-          return (
-            <Fade key={index} delay={delay + 0.1 + index / 10}>
-              <li className={s.sectionBottom_listInfo_item}>
-                <span className={s.sectionBottom_listInfo_item__left}>
-                  <Image src={item.icon} alt="icon" width={24} height={24} />
-                  <p className={s.sectionBottom_listInfo_item__left_text}>
-                    {item.left}
-                  </p>
-                </span>
-                <p className={s.sectionBottom_listInfo_item__right}>
-                  {item.right}
-                </p>
-              </li>
-            </Fade>
-          );
-        })}
-      </ul>
+      {!isLaunch && (
+        <ul className={s.sectionBottom_listInfo}>
+          {data.data &&
+            data.data.map((item, index) => {
+              return (
+                <Fade key={index} delay={delay + 0.1 + index / 10}>
+                  <li className={s.sectionBottom_listInfo_item}>
+                    <span className={s.sectionBottom_listInfo_item__left}>
+                      <Image
+                        src={item.icon}
+                        alt="icon"
+                        width={24}
+                        height={24}
+                      />
+                      <p className={s.sectionBottom_listInfo_item__left_text}>
+                        {item.left}
+                      </p>
+                    </span>
+                    <p className={s.sectionBottom_listInfo_item__right}>
+                      {item.right}
+                    </p>
+                  </li>
+                </Fade>
+              );
+            })}
+        </ul>
+      )}
     </div>
   );
 }

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

@@ -3,7 +3,8 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
-
+  min-height: 142px;
+  justify-content: center;
   &_title {
     display: flex;
     flex-direction: row;
@@ -15,6 +16,12 @@
       font-weight: 500;
       line-height: 26.4px;
 
+      &_isLaunch {
+        padding: 0 40px;
+        padding-bottom: 24px;
+        text-align: center;
+      }
+
       @include is-mobile {
         font-size: 18px;
         line-height: 19.8px;
@@ -67,7 +74,7 @@
           line-height: 19.6px;
         }
 
-        @include is-tablet{
+        @include is-tablet {
           font-size: 16px;
         }
       }
@@ -83,4 +90,14 @@
   &__0074BB {
     background: #0074bb;
   }
+
+  &__EBEFF7 {
+    background: #ebeff7;
+  }
+  &__303030 {
+    background: #303030;
+  }
+  &__7D8AA7 {
+    background: #7d8aa7;
+  }
 }

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

@@ -42,6 +42,17 @@
   background: #35cca6;
 }
 
-.bg__98DCF5 {
-  background: #98dcf5;
+.bg__4DBDE0 {
+  background: #4dbde0;
+}
+
+.bg__000 {
+  background: #000;
+}
+
+.bg__EBEFF7 {
+  background: #ebeff7;
+}
+.bg__B4EDFF {
+  background: #b4edff;
 }

src/modules/landing/Componets/Chain/ItemChain/index.tsx

@@ -11,7 +11,7 @@ type TItemChain = {
   title: string;
   stud: number;
   link?: string;
-  data: {
+  data?: {
     left: string;
     right: string;
     icon: string;
@@ -20,16 +20,40 @@ type TItemChain = {
   bgBottom: string;
 };
 
-export default function ItemChain({ data, delay }: { data: TItemChain; delay: number }) {
+export default function ItemChain({
+  data,
+  delay,
+  isLaunch,
+}: {
+  data: TItemChain;
+  delay: number;
+  isLaunch?: boolean;
+}) {
   const { img, bgTop, stud, ...dataSectionBottom } = data;
-  const {show, hide} = useCursorStore();
+  const { show, hide } = useCursorStore();
   return (
-    <div onMouseEnter={show} onMouseLeave={hide} className={s.itemChain} onClick={() => {
-      data.link && window.open(data.link, '_blank');
-    }}>
+    <div
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      className={`${s.itemChain} ${isLaunch && s.itemLaunch}`}
+      onClick={() => {
+        data.link && window.open(data.link, '_blank');
+      }}
+    >
       <Fade from={{ x: 50 }} to={{ x: 0 }} delay={delay}>
-        <SectionTop delay={delay + 0.1} img={img} color={bgTop} stud={stud} />
-        <SectionBottom delay={delay + 0.2} data={dataSectionBottom} />
+        <div className={s.itemChain_inner}>
+          <SectionTop delay={delay + 0.1} img={img} color={bgTop} stud={stud} />
+
+          {isLaunch ? (
+            <SectionBottom
+              delay={delay + 0.2}
+              isLaunch={isLaunch}
+              data={dataSectionBottom}
+            />
+          ) : (
+            <SectionBottom delay={delay + 0.2} data={dataSectionBottom} />
+          )}
+        </div>
       </Fade>
     </div>
   );