Merge branch 'sett/hero-v1000'

TrustlessComputer · Jan 18, 2024 · 3f8ca67 · 3f8ca67
2 parents 5871e4c + 11782ff
commit 3f8ca67
Show file tree

Hide file tree

Showing 20 changed files with 170 additions and 146 deletions.
diff --git a/public/landing/ic-ordinal.svg b/public/landing/ic-ordinal.svg
diff --git a/public/landing/uni-v2.svg b/public/landing/uni-v2.svg
diff --git a/src/modules/landing/Componets/BitEth/index.tsx b/src/modules/landing/Componets/BitEth/index.tsx
@@ -24,7 +24,7 @@ export default function BitEth() {
         </Scale>
         <HeadingSection className={s.heading}>
           <Chars delay={.2}>
-            <b>Minimal effort</b> to migrate from Ethereum to Bitcoin.
+            <b>Minimal effort to migrate</b> from Ethereum to Bitcoin.
           </Chars>
         </HeadingSection>
         <ContentSection className={s.content}>

diff --git a/src/modules/landing/Componets/Chain/styles.module.scss b/src/modules/landing/Componets/Chain/styles.module.scss
@@ -43,7 +43,7 @@
   }
 
   &_heading {
-    max-width: 1200px;
+    max-width: 980px;
     margin-left: auto;
     margin-right: auto;
   }

diff --git a/src/modules/landing/Componets/Hero/HeroLabel/index.tsx b/src/modules/landing/Componets/Hero/HeroLabel/index.tsx
@@ -21,21 +21,25 @@ const DATA_HERO = [
     title: 'Polygon',
   },
   {
-    icon: '/landing/uni.svg',
+    icon: '/landing/uni-v2.svg',
     title: 'Uniswap',
   },
+  {
+    icon: '/landing/ic-ordinal.svg',
+    title: 'Ordinals',
+  },
 ];
 
 const DELAY = 1.8;
 
-export default function HeroLabel() {
+export default function HeroLabel({ isMobile }: { isMobile?: boolean }) {
   return (
-    <div className={`container ${s.heroLabel}`}>
+    <div className={`container ${s.heroLabel} ${isMobile && s.heroLabel__mobile}`}>
       <Fade delay={DELAY + .4}>
         <div className={s.heroLabel_content}>
           <Image
             src={'/landing/svg/lego_icon_cube.svg'}
-            alt="cube"
+            alt='cube'
             width={32}
             height={32}
           />
@@ -44,7 +48,7 @@ export default function HeroLabel() {
           </p>
         </div>
       </Fade>
-      <div className={s.heroLabel_listHero}>
+      <div className={`${s.heroLabel_listHero} ${isMobile && s.heroLabel_listHero__mobile}`}>
         {DATA_HERO.map((item, index) => {
           return <ItemHero key={index} delay={DELAY + index / 10} data={item} />;
         })}

diff --git a/src/modules/landing/Componets/Hero/HeroLabel/styles.module.scss b/src/modules/landing/Componets/Hero/HeroLabel/styles.module.scss
@@ -3,6 +3,14 @@
   flex-direction: column;
   gap: 12px;
 
+  padding-top: 48px;
+  padding-bottom: 48px;
+
+  @include is-pc {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
 
   &_content {
     display: flex;
@@ -21,26 +29,31 @@
       justify-content: center;
       gap: 8px;
     }
+
     &_text {
       font-size: 20px;
       line-height: 36px;
       font-weight: 400;
       color: #fff;
 
       @include is-mobile {
-        //color: #000;
+        color: #000;
         font-size: 16px;
         line-height: 24px;
       }
       @include is-tablet {
-        //color: #000;
+        color: #000;
       }
     }
   }
 
   &_listHero {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     gap: 4px;
+    @include is-mobile {
+      justify-content: center;
+    }
   }
 }
diff --git a/src/modules/landing/Componets/Hero/ItemHero/index.tsx b/src/modules/landing/Componets/Hero/ItemHero/index.tsx
@@ -16,7 +16,7 @@ export default function ItemHero({
   delay: number;
 }) {
   return (
-    <div className={s.itemHero}>
+    <div className={`${s.itemHero} itemHero`}>
       <Fade from={{ x: 20 }} to={{ x: 0 }} delay={delay}>
         <div className={s.itemHero_inner}>
           <div className={s.itemHero_content}>
@@ -27,7 +27,7 @@ export default function ItemHero({
               width={45}
               height={45}
             />
-            <p className={s.itemHero_content_title}>{data.title}</p>
+            <p className={`${s.itemHero_content_title} itemHero_content_title`}>{data.title}</p>
           </div>
         </div>
       </Fade>

diff --git a/src/modules/landing/Componets/Hero/ItemHero/styles.module.scss b/src/modules/landing/Componets/Hero/ItemHero/styles.module.scss
@@ -3,7 +3,6 @@
 
   &_inner {
 
-
     display: flex;
     justify-content: center;
     align-items: center;
@@ -21,29 +20,24 @@
       height: 80px;
     }
 
-    //@include is-mobile {
-    //  background-color: #f6f6f6;
-    //  width: calc(33vw - 30px);
-    //  align-items: center;
-    //  aspect-ratio: 1;
-    //}
-    //
-    //@include is-tablet {
-    //  background-color: #f6f6f6;
-    //  width: calc(33vw - 30px);
-    //  align-items: center;
-    //  aspect-ratio: 1;
-    //}
+    @include is-mobile {
+      background-color: #f6f6f6;
+      width: calc(33vw - 30px);
+      align-items: center;
+      aspect-ratio: 1;
+    }
+
+    @include is-tablet {
+      background-color: #f6f6f6;
+      width: calc(33vw - 30px);
+      align-items: center;
+      aspect-ratio: 1;
+    }
   }
 
   &_img {
-
-    height: 30px;
+    height: 40px;
     width: auto;
-
-    @include is-min-table{
-      height: 40px;
-    }
   }
 
   &_content {
@@ -59,12 +53,12 @@
       text-align: center;
       color: #fff;
 
-      //@include is-mobile {
-      //  color: #000;
-      //}
-      //@include is-tablet {
-      //  color: #000;
-      //}
+      @include is-mobile {
+        color: #000;
+      }
+      @include is-tablet {
+        color: #000;
+      }
     }
   }
 }
diff --git a/src/modules/landing/Componets/Hero/JoinAllowList/index.tsx b/src/modules/landing/Componets/Hero/JoinAllowList/index.tsx
@@ -10,7 +10,7 @@ import Image from 'next/image';
 
 
 const DELAY = 2;
-const JoinAllowList = () => {
+const JoinAllowList = ({isFooter}: {isFooter?: boolean}) => {
   const router = useRouter();
   const [isCreating, setIsCreating] = useState(false);
   const [totalUser, setTotalUser] = useState<string>('');
@@ -34,7 +34,7 @@ const JoinAllowList = () => {
 
   return (
     <Fade delay={DELAY}>
-      <div className={s.container}>
+      <div className={`${s.container} ${isFooter && s.isFooter}`}>
         <div className={`container ${s.content}`}>
           <Flex flexDirection={'column'} gap={'8px'}>
             <Fade delay={DELAY + .2}>

diff --git a/src/modules/landing/Componets/Hero/JoinAllowList/styles.module.scss b/src/modules/landing/Componets/Hero/JoinAllowList/styles.module.scss
@@ -1,14 +1,26 @@
 .container {
-  padding: 40px 0;
+
   width: 100%;
   background: url('/landing/images/hero-bg-allow.jpg');
   background-repeat: no-repeat;
   background-size: cover;
 
-  @include is-pc {
+  &:not(.isFooter) {
+    padding: 20px 0;
     position: absolute;
     bottom: 0;
     left: 0;
+    @include is-min-table {
+      padding: 40px 0;
+    }
+  }
+
+  &.isFooter {
+    padding: 40px 0;
+  }
+
+  @include is-min-table {
+    padding: 40px 0;
   }
 
   .content {
@@ -24,19 +36,12 @@
   }
 
   .titleWrapper {
-    width: 100%;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-
-    @include is-pc{
-      display: block;
-      width: fit-content;
-    }
+    display: block;
+    width: fit-content;
   }
 
   .title {
-    text-align: center;
+
     font-size: 12px;
     line-height: normal;
     font-weight: 500;
@@ -46,21 +51,32 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     width: fit-content;
+
+    @include is-mobile {
+      font-size: 10px;
+    }
+
   }
 
   .desc {
-    font-size: 32px;
+
+    text-align: left;
     font-style: normal;
     font-weight: 400;
     line-height: 130%;
     max-width: 571px;
+
     @include is-mobile {
+      font-size: 20px;
+    }
+
+    @include is-tablet {
       font-size: 24px;
     }
-    text-align: center;
 
-    @include is-pc{
-      text-align: left;
+    @include is-pc {
+      font-size: 32px;
+
     }
 
     span {
@@ -178,12 +194,14 @@
 .whiteList {
   display: flex;
   flex-direction: row;
-  justify-content: end;
   align-items: center;
   gap: 8px;
-  padding-right: 16px;
   margin-top: 20px;
 
+  @include is-pc {
+    justify-content: end;
+  }
+
   &_users {
     display: flex;
     flex-direction: row;

diff --git a/src/modules/landing/Componets/Hero/index.tsx b/src/modules/landing/Componets/Hero/index.tsx
@@ -6,15 +6,21 @@ import JoinAllowList from './JoinAllowList';
 
 export default function Hero() {
   return (
-    <div className={s.hero}>
-      <div className={s.hero_wrap}>
-        <BgHero />
-        <div className={s.hero_inner}>
-          <HeroLabel />
+
+    <>
+      <div className={s.hero}>
+        <div className={s.hero_wrap}>
+          <BgHero />
+          <div className={`${s.hero_inner} ${s.hero_inner__desktop}`}>
+            <HeroLabel />
+          </div>
         </div>
+        <JoinAllowList />
+        <Intro />
+      </div>
+      <div className={s.hero_wrap__mobile}>
+        <HeroLabel isMobile={true} />
       </div>
-      <JoinAllowList />
-      <Intro />
-    </div>
+    </>
   );
 }