Refactor styles and update Hero component content

- Adjusted positioning of the scroll message container in styles.module.scss for better responsiveness. - Updated the HeroContent component text formatting for improved readability. - Modified Fade component delays for smoother animations. - Changed various style properties for consistency, including color and transition effects. - Added overflow hidden to JoinAllowList styles for layout improvement.
TrustlessComputer · Dec 24, 2024 · 6b8c173 · 6b8c173
1 parent 150cf43
commit 6b8c173
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 34 deletions.
diff --git a/src/components/ScrollDown/styles.module.scss b/src/components/ScrollDown/styles.module.scss
@@ -44,7 +44,6 @@ $wheel_size: $border_width * 2;
 
 .scroll_msg_container {
   position: absolute;
-  bottom: 40px;
   left: 50%;
 
   width: $mouse_width + $border_width;
@@ -54,6 +53,12 @@ $wheel_size: $border_width * 2;
 
   -webkit-mask-image: linear-gradient(black, transparent);
   mask-image: linear-gradient(black, transparent);
+
+  bottom: 24px;
+
+  @include min-tablet {
+    bottom: 40px;
+  }
 }
 .scroll_msg_inner {
   width: $mouse_width;

diff --git a/src/modules/landing/Componets/Hero/Content/index.tsx b/src/modules/landing/Componets/Hero/Content/index.tsx
@@ -20,8 +20,8 @@ export default function HeroContent() {
         <div className={s.heroContent_inner}>
           <Chars classNames={s.heroContent_inner_heading} delayEnter={6}>
             <h1 className={s.heroContent_heading}>
-              Powerful, fast, and cost-effective Bitcoin L2s anyone can set up
-              by drag ’n drop.
+              {`Powerful, fast, and cost-effective Bitcoin L2s anyone can set up
+              by drag’n drop.`}
             </h1>
           </Chars>
           <div className={s.heroContent_content}>
@@ -64,7 +64,7 @@ export default function HeroContent() {
               </span>
             </div>
           </Fade> */}
-          <Fade delay={6.8}>
+          <Fade delayEnter={6.8}>
             <div className={s.btnVideo}>
               <a
                 href={'#'}
@@ -85,7 +85,7 @@ export default function HeroContent() {
           </Fade>
         </div>
       </div>
-      <Fade delayEnter={7}>
+      <Fade delayEnter={8}>
         <ScrollDown />
       </Fade>
       <ModalVideo

diff --git a/src/modules/landing/Componets/Hero/Content/styles.module.scss b/src/modules/landing/Componets/Hero/Content/styles.module.scss
@@ -5,7 +5,7 @@
   z-index: 2;
   max-width: 1400px;
   width: 100%;
-  top: 180px;
+  top: 80px;
   padding-left: 16px;
   padding-right: 16px;
   min-height: 68vh;
@@ -17,6 +17,10 @@
   @include is-min-table {
     padding-left: rem(32px);
     padding-right: rem(32px);
+    top: 120px;
+  }
+
+  @include is-pc {
     top: 200px;
   }
 
@@ -34,7 +38,6 @@
     @include is-pc {
       font-size: 20px;
     }
-
   }
 
   &_inner {
@@ -47,7 +50,6 @@
   }
 
   &_heading {
-
     font-weight: 500;
     line-height: (79/72);
     text-align: center;
@@ -80,7 +82,6 @@
 }
 
 .btn {
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -89,7 +90,7 @@
   line-height: (19/16);
   letter-spacing: 0.01em;
   text-align: center;
-  transition: background-color .4s var(--easeOutQuart);
+  transition: background-color 0.4s var(--easeOutQuart);
   font-size: 16px;
   height: 48px;
   padding-left: 18px;
@@ -115,7 +116,7 @@
       position: relative;
       width: fit-content !important;
       display: block;
-      transform: translateY(.12em);
+      transform: translateY(0.12em);
 
       &:after {
         content: '';
@@ -126,7 +127,7 @@
         bottom: 0;
         left: 0;
         transform: translateX(-100%);
-        transition: transform .4s var(--easeOutQuart);
+        transition: transform 0.4s var(--easeOutQuart);
       }
     }
 
@@ -142,33 +143,31 @@
   }
 
   &__play {
-
     gap: 6px;
 
     span {
       display: block;
-      transform: translateY(.065em);
+      transform: translateY(0.065em);
     }
 
-
     svg {
       width: 16px;
       height: 16px;
     }
 
     rect {
-      transition: fill .4s var(--easeOutQuart);
+      transition: fill 0.4s var(--easeOutQuart);
     }
 
     &:hover {
       rect {
-        fill: #FA4E0E;
+        fill: #fa4e0e;
       }
     }
   }
 
   &__red {
-    background: #FA4E0E;
+    background: #fa4e0e;
     color: white;
 
     &:hover {
@@ -177,7 +176,7 @@
   }
 
   &__white {
-    color: #FA4E0E;
+    color: #fa4e0e;
     background: white;
 
     &:hover {
@@ -229,15 +228,14 @@
 }
 
 .listItem {
-
   a {
     color: #000000 !important;
     display: flex;
     align-items: center;
     justify-content: space-between;
 
     svg * {
-      transition: fill .4s var(--easeOutQuart);
+      transition: fill 0.4s var(--easeOutQuart);
     }
 
     &:hover {
@@ -246,13 +244,12 @@
       }
 
       path {
-        fill: white
+        fill: white;
       }
     }
   }
 }
 
-
 .vid {
   position: relative;
   padding-top: 16px;
@@ -263,12 +260,11 @@
     left: 50%;
     width: 240px;
     transform: translateX(-50%);
-    border-bottom: 1px solid rgba(white, .25)
+    border-bottom: 1px solid rgba(white, 0.25);
   }
 }
 
 .contact {
-
   line-height: 19.09px;
   text-align: center;
   display: flex;
@@ -283,7 +279,7 @@
   }
 
   span {
-    color: #FA4E0E;
+    color: #fa4e0e;
     cursor: pointer;
     padding-top: 10px;
     padding-bottom: 10px;
@@ -308,8 +304,6 @@
   // }
 }
 
-
-
 .mouse_scroll {
   // position: absolute;
   // left: 50%;
@@ -351,7 +345,7 @@
       content: '';
       width: 44px;
       height: 44px;
-      box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
+      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
       border-radius: 100%;
       opacity: 0;
       -webkit-animation: sdb03 3s infinite;
@@ -370,7 +364,7 @@
     }
 
     60% {
-      box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
+      box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
       opacity: 0;
     }
 
@@ -389,16 +383,14 @@
     }
 
     60% {
-      box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
+      box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
       opacity: 0;
     }
 
     100% {
       opacity: 0;
     }
   }
-
-
 }
 
 .mouse_scroll::after {
@@ -410,4 +402,4 @@
   height: 80%;
   // background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 80%, rgba(0, 0, 0, .8) 100%);
   // background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 80%, rgba(0, 0, 0, .8) 100%);
-}
+}
diff --git a/src/modules/landing/Componets/Hero/JoinAllowList/styles.module.scss b/src/modules/landing/Componets/Hero/JoinAllowList/styles.module.scss
@@ -8,6 +8,7 @@
   background: url('/landing/images/hero-bg-allow.jpg');
   background-repeat: no-repeat;
   background-size: cover;
+  overflow: hidden;
 
   &:not(.isFooter) {
     padding: 20px 0;