Add ScrollDown component and styles; update Hero component structure

src/components/ScrollDown/index.tsx

@@ -0,0 +1,11 @@
+import styles from './styles.module.scss';
+
+export default function ScrollDown() {
+  return (
+    <div className={styles.scroll_msg_container}>
+      <div className={styles.scroll_msg_inner}>
+        <div className={styles.scroll_msg_wheel}></div>
+      </div>
+    </div>
+  );
+}

src/components/ScrollDown/styles.module.scss

@@ -0,0 +1,76 @@
+// Customizable variables
+$mouse_color: #ffffff;
+$mouse_width: 32px;
+$mouse_height: 60px;
+$border_width: 2px;
+
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+  @keyframes #{$animationName} {
+    @content;
+  }
+}
+
+@mixin animation($animations) {
+  -webkit-animation: $animations;
+  -moz-animation: $animations;
+  -o-animation: $animations;
+  animation: $animations;
+}
+
+$wheel_size: $border_width * 2;
+
+@include keyframes(mouse-scroll) {
+  0% {
+    top: 10%;
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    top: 30%;
+    opacity: 0;
+  }
+}
+
+.scroll_msg_container {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+
+  width: $mouse_width + $border_width;
+  height: $mouse_height + $border_width;
+  margin-top: -($mouse_height + $border_width * 2) * 0.5;
+  margin-left: -($mouse_width + $border_width * 2) * 0.5;
+
+  -webkit-mask-image: linear-gradient(black, transparent);
+  mask-image: linear-gradient(black, transparent);
+}
+.scroll_msg_inner {
+  width: $mouse_width;
+  height: $mouse_height * 0.84;
+  position: relative;
+  border-radius: $mouse_width/2 + $border_width * 2;
+  border: $border_width solid $mouse_color;
+}
+.scroll_msg_wheel {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  width: $wheel_size;
+  height: $wheel_size * 2;
+  margin-left: -$wheel_size/2;
+  border-radius: 2.4rem;
+  background-color: $mouse_color;
+
+  @include animation(mouse-scroll 1.6s infinite);
+}

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

@@ -2,7 +2,7 @@
   flex: 1;
   flex-shrink: 0;
   cursor: pointer;
-  max-width: 450px;
+  max-width: 550px;
   min-width: 300px;
   flex: 1;
 
@@ -65,4 +65,4 @@
   @include is-mobile {
     grid-column-start: 1;
   }
-}
+}

src/modules/landing/Componets/Hero/Content/index.tsx

@@ -1,12 +1,13 @@
-import Lines from '@/interactive/Lines';
-import s from './styles.module.scss';
+import ScrollDown from '@/components/ScrollDown';
 import Chars from '@/interactive/Chars';
 import Fade from '@/interactive/Fade';
-import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
-import ModalVideo from 'react-modal-video';
+import Lines from '@/interactive/Lines';
 import { useContactUs } from '@/Providers/ContactUsProvider/hook';
 import { VIDEO_HERO_MAIN } from '@constants/common';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import ModalVideo from 'react-modal-video';
+import s from './styles.module.scss';
 
 export default function HeroContent() {
   const router = useRouter();
@@ -83,13 +84,10 @@ export default function HeroContent() {
             </div>
           </Fade>
         </div>
-        <Fade delayEnter={7}>
-          <section className={s.mouse_scroll}>
-            <span></span>
-          </section>
-        </Fade>
       </div>
-
+      <Fade delayEnter={7}>
+        <ScrollDown />
+      </Fade>
       <ModalVideo
         channel="custom"
         url={VIDEO_HERO_MAIN}

src/modules/landing/Componets/Hero/HeroLabel/index.tsx

@@ -1,12 +1,10 @@
 'use client';
-import s from './styles.module.scss';
 import ItemHero from '@/modules/landing/Componets/Hero/ItemHero';
-import React, { useState } from 'react';
+import s from './styles.module.scss';
 
-import '@splidejs/react-splide/css/core';
 import { Splide, SplideSlide } from '@splidejs/react-splide';
+import '@splidejs/react-splide/css/core';
 import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
-import Fade from '@/interactive/Fade';
 
 const DATA_HERO = [
   {
@@ -69,55 +67,55 @@ export default function HeroLabel({ isMobile }: { isMobile?: boolean }) {
   return (
     <div className={`${s.heroLabel}`}>
       {/* <Fade delayEnter={delay}> */}
-        <div className={s.content}>
-          <div className={`${s.inner} heroLabel_inner`}>
-            <div
-              className={`${s.heroLabel_listHero} ${
-                isMobile && s.heroLabel_listHero__mobile
-              }`}
-            >
-              <Splide
-                aria-label="My Favorite Images"
-                extensions={{ AutoScroll }}
-                options={{
-                  type: 'loop',
-                  drag: 'free',
-                  focus: 'center',
-                  pagination: false,
-                  arrows: false,
-                  gap: 48,
-                  perPage: 12,
-                  perMove: 1,
-                  autoScroll: {
-                    speed: 2,
+      <div className={s.content}>
+        <div className={`${s.inner} heroLabel_inner`}>
+          <div
+            className={`${s.heroLabel_listHero} ${
+              isMobile && s.heroLabel_listHero__mobile
+            }`}
+          >
+            <Splide
+              aria-label="My Favorite Images"
+              extensions={{ AutoScroll }}
+              options={{
+                type: 'loop',
+                drag: 'free',
+                focus: 'center',
+                pagination: false,
+                arrows: false,
+                gap: 48,
+                perPage: 12,
+                perMove: 1,
+                autoScroll: {
+                  speed: 1,
+                },
+                breakpoints: {
+                  1500: {
+                    perPage: 8,
+                    gap: 40,
+                  },
+                  1024: {
+                    perPage: 5,
+                    gap: 30,
                   },
-                  breakpoints: {
-                    1500: {
-                      perPage: 8,
-                      gap: 40,
-                    },
-                    1024: {
-                      perPage: 5,
-                      gap: 30,
-                    },
-                    768: {
-                      perPage: 4,
-                      gap: 20,
-                    },
+                  768: {
+                    perPage: 4,
+                    gap: 20,
                   },
-                }}
-              >
-                {DATA_HERO.map((item, index) => {
-                  return (
-                    <SplideSlide key={index}>
-                      <ItemHero delay={delay + index / 10} data={item} />
-                    </SplideSlide>
-                  );
-                })}
-              </Splide>
-            </div>
+                },
+              }}
+            >
+              {DATA_HERO.map((item, index) => {
+                return (
+                  <SplideSlide key={index}>
+                    <ItemHero delay={delay + index / 10} data={item} />
+                  </SplideSlide>
+                );
+              })}
+            </Splide>
           </div>
         </div>
+      </div>
       {/* </Fade> */}
     </div>
   );

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

@@ -1,11 +1,8 @@
-import s from './styles.module.scss';
 import BgHero from '@/modules/landing/Componets/Hero/Bg';
-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';
+import HeroLabel from '@/modules/landing/Componets/Hero/HeroLabel';
 import useAnimationStore from '@/stores/useAnimationStore';
+import s from './styles.module.scss';
 
 export default function Hero() {
   const { isPlaying } = useAnimationStore();

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

@@ -1,14 +1,15 @@
 .hero {
   width: 100%;
   position: relative;
+  --he: calc(100svh - 60px);
 
   @include is-pc {
     overflow: hidden;
-    height: 100svh;
+    height: var(--he);
   }
 
   &_wrap {
-    height: 100svh;
+    height: var(--he);
     width: 100%;
     position: relative;
     overflow: hidden;
@@ -33,9 +34,6 @@
       display: block;
     }
   }
-
-
-
 }
 
 .hero_wrap__mobile {
@@ -114,8 +112,6 @@
   z-index: 999;
   bottom: 13%;
 
-
-
   span {
     position: absolute;
     top: 0;
@@ -150,7 +146,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;
@@ -169,7 +165,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;
     }
 
@@ -188,16 +184,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 {
@@ -209,4 +203,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%);
-}
+}