update homepage

TrustlessComputer · Nov 13, 2024 · 472b61e · 472b61e
1 parent fdc9620
commit 472b61e
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 8 deletions.
diff --git a/src/modules/landing/Componets/Chain/index.tsx b/src/modules/landing/Componets/Chain/index.tsx
@@ -222,8 +222,8 @@ export default function Chain() {
             </p>
             <HeadingSection className={s.chain_heading}>
               <Chars delayEnter={2}>
-                Say hello to the first <b>modular Bitcoin L2 blockchains</b>{' '}
-                powered by BVM.
+                Say hello to the first <b>Bitcoin L2 blockchains</b> powered by
+                BVM.
               </Chars>
             </HeadingSection>
             <Fade delay={0.6} delayEnter={2.2}>

diff --git a/src/modules/landing/Componets/Hero/Content/index.tsx b/src/modules/landing/Componets/Hero/Content/index.tsx
@@ -32,7 +32,7 @@ export default function HeroContent() {
               <Fade delayEnter={6.5}>
                 <button
                   onClick={() => router.push('/studio')}
-                  className={`${s.btn} ${s.btn__red}`}
+                  className={`${s.btn} ${s.btn__white}`}
                 >
                   Build on Bitcoin
                 </button>
@@ -42,7 +42,7 @@ export default function HeroContent() {
               <Fade delayEnter={6.6}>
                 <button
                   onClick={() => router.push('/experience')}
-                  className={`${s.btn} ${s.btn__red}`}
+                  className={`${s.btn} ${s.btn__white}`}
                 >
                   Experience Bitcoin
                 </button>
@@ -80,6 +80,11 @@ export default function HeroContent() {
             </div>
           </Fade>
         </div>
+        <Fade delayEnter={7}>
+          <section className={s.mouse_scroll}>
+            <span></span>
+          </section>
+        </Fade>
       </div>
 
       <ModalVideo

diff --git a/src/modules/landing/Componets/Hero/Content/styles.module.scss b/src/modules/landing/Componets/Hero/Content/styles.module.scss
@@ -8,6 +8,11 @@
   top: 180px;
   padding-left: 16px;
   padding-right: 16px;
+  min-height: 68vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
 
   @include is-min-table {
     padding-left: rem(32px);
@@ -63,7 +68,7 @@
     justify-content: center;
     list-style: none !important;
     margin-top: rem(16px);
-    margin-bottom: 24px;
+    margin-bottom: 2px;
     position: relative;
     z-index: 2;
     flex-wrap: wrap;
@@ -87,6 +92,7 @@
   padding-left: 18px;
   padding-right: 18px;
   min-width: 192px;
+  margin-bottom: 24px;
 
   @include is-pc {
     height: 60px;
@@ -168,7 +174,7 @@
   }
 
   &__white {
-    color: black;
+    color: #FA4E0E;
     background: white;
 
     &:hover {
@@ -297,4 +303,108 @@
   // @include is-min-table {
   // bottom: 30px;
   // }
+}
+
+
+
+.mouse_scroll {
+  // position: absolute;
+  // left: 50%;
+  z-index: 999;
+  // bottom: 30%;
+  position: relative;
+
+  span {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 46px;
+    height: 46px;
+    margin-left: -23px;
+    border: 1px solid #fff;
+    border-radius: 100%;
+    box-sizing: border-box;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      content: '';
+      width: 16px;
+      height: 16px;
+      margin: -12px 0 0 -8px;
+      border-left: 1px solid #fff;
+      border-bottom: 1px solid #fff;
+      -webkit-transform: rotate(-45deg);
+      transform: rotate(-45deg);
+      box-sizing: border-box;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      content: '';
+      width: 44px;
+      height: 44px;
+      box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
+      border-radius: 100%;
+      opacity: 0;
+      -webkit-animation: sdb03 3s infinite;
+      animation: sdb03 3s infinite;
+      box-sizing: border-box;
+    }
+  }
+
+  @-webkit-keyframes sdb03 {
+    0% {
+      opacity: 0;
+    }
+
+    30% {
+      opacity: 1;
+    }
+
+    60% {
+      box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes sdb03 {
+    0% {
+      opacity: 0;
+    }
+
+    30% {
+      opacity: 1;
+    }
+
+    60% {
+      box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+
+}
+
+.mouse_scroll::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  content: '';
+  width: 100%;
+  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/index.tsx b/src/modules/landing/Componets/Hero/index.tsx
@@ -4,6 +4,7 @@ import HeroLabel from '@/modules/landing/Componets/Hero/HeroLabel';
 import HeroContent from '@/modules/landing/Componets/Hero/Content';
 import React from 'react';
 import Banner from './Banner';
+import Fade from '@/interactive/Fade';
 
 export default function Hero() {
   return (

diff --git a/src/modules/landing/Componets/Hero/styles.module.scss b/src/modules/landing/Componets/Hero/styles.module.scss
@@ -33,6 +33,9 @@
       display: block;
     }
   }
+
+
+
 }
 
 .hero_wrap__mobile {
@@ -98,8 +101,112 @@
     @include is-min-table {
       margin-left: 8px;
     }
+
     @include is-pc {
       justify-content: flex-start;
     }
   }
 }
+
+.mouse_scroll {
+  position: absolute;
+  left: 50%;
+  z-index: 999;
+  bottom: 13%;
+
+
+
+  span {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 46px;
+    height: 46px;
+    margin-left: -23px;
+    border: 1px solid #fff;
+    border-radius: 100%;
+    box-sizing: border-box;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      content: '';
+      width: 16px;
+      height: 16px;
+      margin: -12px 0 0 -8px;
+      border-left: 1px solid #fff;
+      border-bottom: 1px solid #fff;
+      -webkit-transform: rotate(-45deg);
+      transform: rotate(-45deg);
+      box-sizing: border-box;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      content: '';
+      width: 44px;
+      height: 44px;
+      box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
+      border-radius: 100%;
+      opacity: 0;
+      -webkit-animation: sdb03 3s infinite;
+      animation: sdb03 3s infinite;
+      box-sizing: border-box;
+    }
+  }
+
+  @-webkit-keyframes sdb03 {
+    0% {
+      opacity: 0;
+    }
+
+    30% {
+      opacity: 1;
+    }
+
+    60% {
+      box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes sdb03 {
+    0% {
+      opacity: 0;
+    }
+
+    30% {
+      opacity: 1;
+    }
+
+    60% {
+      box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+
+}
+
+.mouse_scroll::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  content: '';
+  width: 100%;
+  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/LegoV2/index.tsx b/src/modules/landing/Componets/LegoV2/index.tsx
@@ -57,7 +57,7 @@ export default function LegoV2() {
         <div className={s.lego_heading}>
           <HeadingSection className={s.lego_heading_title}>
             <Chars>
-              Customize and launch your modular Bitcoin L2 blockchain with the
+              Customize and launch your Bitcoin L2 blockchain with the
               best-of-breed modules <b> with a few clicks.</b>
             </Chars>
           </HeadingSection>

diff --git a/src/modules/landingV5/styles.module.scss b/src/modules/landingV5/styles.module.scss
@@ -34,7 +34,7 @@
             line-height: 140%;
             /* 33.6px */
             letter-spacing: 0.72px;
-            max-width: 50ch;
+            max-width: 45ch;
         }
 
         .introduction_links {