From 472b61e958aab401ded064cd686407cf1cced375 Mon Sep 17 00:00:00 2001
From: Archaon <archaon1574@bvm.network>
Date: Wed, 13 Nov 2024 16:33:14 +0700
Subject: [PATCH] update homepage

---
 src/modules/landing/Componets/Chain/index.tsx |   4 +-
 .../landing/Componets/Hero/Content/index.tsx  |   9 +-
 .../Componets/Hero/Content/styles.module.scss | 114 +++++++++++++++++-
 src/modules/landing/Componets/Hero/index.tsx  |   1 +
 .../landing/Componets/Hero/styles.module.scss | 107 ++++++++++++++++
 .../landing/Componets/LegoV2/index.tsx        |   2 +-
 src/modules/landingV5/styles.module.scss      |   2 +-
 7 files changed, 231 insertions(+), 8 deletions(-)

diff --git a/src/modules/landing/Componets/Chain/index.tsx b/src/modules/landing/Componets/Chain/index.tsx
index f31df26b0..e0f6c681d 100644
--- 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
index 02b64add2..97073a07d 100644
--- 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
index e2b33014d..330e92666 100644
--- 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%);
 }
\ No newline at end of file
diff --git a/src/modules/landing/Componets/Hero/index.tsx b/src/modules/landing/Componets/Hero/index.tsx
index 86ef9fa15..1ae67562e 100644
--- 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
index 689fed025..427f0a03f 100644
--- 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%);
+}
\ No newline at end of file
diff --git a/src/modules/landing/Componets/LegoV2/index.tsx b/src/modules/landing/Componets/LegoV2/index.tsx
index 5c95ac3b8..73161f38b 100644
--- 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
index e0b6d2f37..037dfbab5 100644
--- 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 {