From 2b65a5a288e025cf902641322c4e82ea6975a369 Mon Sep 17 00:00:00 2001
From: Gina Lee <gina@gina-lee.com>
Date: Thu, 14 Nov 2024 02:48:40 +0800
Subject: [PATCH] Add learn/wallets page specific component

---
 src/components/learn/WalletsHero.jsx         |  91 +++++++++
 src/components/learn/WalletsHero.module.scss | 193 +++++++++++++++++++
 2 files changed, 284 insertions(+)
 create mode 100644 src/components/learn/WalletsHero.jsx
 create mode 100644 src/components/learn/WalletsHero.module.scss

diff --git a/src/components/learn/WalletsHero.jsx b/src/components/learn/WalletsHero.jsx
new file mode 100644
index 000000000..705f1eb9a
--- /dev/null
+++ b/src/components/learn/WalletsHero.jsx
@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "next-i18next";
+import classNames from "classnames";
+
+import useReducedMotion from "@/hooks/useReducedMotion";
+
+import Button from "@/components/solutions/Button";
+import { OpacityInText } from "@/components/shared/Text";
+
+import styles from "./WalletsHero.module.scss";
+
+import { MotionSlideIn } from "@/components/shared/Motions";
+
+const WalletsHero = () => {
+  const { t } = useTranslation();
+
+  const [active, setActive] = useState(false);
+  const videoRef = useRef(null);
+  const [prefersReducedMotion] = useReducedMotion();
+
+  useEffect(() => {
+    setTimeout(() => setActive(true), 500);
+  }, []);
+
+  useEffect(() => {
+    prefersReducedMotion && videoRef.current.pause();
+  }, [prefersReducedMotion]);
+
+  return (
+    <section className={classNames(styles.WalletsHero)}>
+      <div className={styles.ContentWrapper}>
+        <div className={styles.ContentInnerWrapper}>
+          <OpacityInText
+            element="p"
+            as="paragraph"
+            className={styles.Kicker}
+            delayIndex={0}
+          >
+            {t("learn-wallets.hero.kicker")}
+          </OpacityInText>
+
+          <OpacityInText
+            element="h1"
+            as="heading"
+            className={styles.Title}
+            delayIndex={0}
+          >
+            {t("learn-wallets.hero.title")}
+          </OpacityInText>
+
+          <OpacityInText
+            element="p"
+            as="paragraph"
+            className={styles.Subtitle}
+            delayIndex={0}
+          >
+            {t("learn-wallets.hero.subtitle")}
+          </OpacityInText>
+
+          <MotionSlideIn className={styles.Buttons} delayIndex={0}>
+            <Button
+              text={t("learn-wallets.hero.find-btn")}
+              url="/solutions/wallets-explorer"
+            />
+          </MotionSlideIn>
+        </div>
+      </div>
+
+      <div
+        className={classNames(styles.VideoWrapper, active ? styles.Active : "")}
+      >
+        <video
+          width="710"
+          height="900"
+          muted
+          loop
+          autoPlay
+          poster="/src/img/learn/wallets/learn-wallets-hero.webp"
+          ref={videoRef}
+        >
+          <source
+            src="https://player.vimeo.com/progressive_redirect/playback/1028498351/rendition/720p/file.mp4?loc=external&signature=ee73d35d27fa64d553a4dd6da5c661eac19fc9b48467e5b6a897e0028a300feb"
+            type="video/mp4"
+          />
+        </video>
+      </div>
+    </section>
+  );
+};
+
+export default WalletsHero;
diff --git a/src/components/learn/WalletsHero.module.scss b/src/components/learn/WalletsHero.module.scss
new file mode 100644
index 000000000..5621205ed
--- /dev/null
+++ b/src/components/learn/WalletsHero.module.scss
@@ -0,0 +1,193 @@
+@import "~@/scss/solutions/_variables.scss";
+
+.WalletsHero {
+  padding: 64px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+
+  .ContentWrapper {
+    padding: 0 24px;
+
+    .ContentInnerWrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    p,
+    h1 {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  .Kicker {
+    font-size: 16px;
+    font-weight: 800;
+    line-height: 1.25;
+    letter-spacing: -0.02em;
+    text-align: center;
+    color: var(--blue);
+  }
+
+  .Title {
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 1.14;
+    letter-spacing: -0.01em;
+    text-align: center;
+  }
+
+  .Subtitle {
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.2;
+    text-align: center;
+    color: var(--grey-250);
+  }
+
+  .Buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: max-content;
+    margin: 0 auto;
+  }
+}
+
+.VideoWrapper {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity $duration-standard $easeInQuart;
+  transition-delay: 300ms;
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(
+      360deg,
+      rgba(15, 10, 22, 0) 10.27%,
+      rgb(13 8 23) 95.48%
+    );
+    top: 0;
+    left: 0;
+
+    @include breakpoint(xl) {
+      background: linear-gradient(
+        270deg,
+        rgba(15, 10, 22, 0) 10.27%,
+        rgb(13, 8, 23) 95.48%
+      );
+    }
+  }
+
+  &.Active {
+    opacity: 1;
+  }
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+@include breakpoint(md) {
+  .WalletsHero {
+    padding: 80px 0;
+
+    .ContentWrapper {
+      .ContentInnerWrapper {
+        @include max-width(650px);
+      }
+    }
+
+    .Title {
+      font-size: 64px;
+    }
+
+    .Subtitle {
+      font-size: 24px;
+    }
+
+    .Buttons {
+      flex-direction: row;
+    }
+  }
+}
+
+@include breakpoint(xl) {
+  .WalletsHero {
+    padding: 92px 0;
+    flex-direction: row;
+    justify-content: space-between;
+    overflow: hidden;
+    position: relative;
+    height: 81vh;
+
+    .ContentWrapper {
+      flex: 1;
+      position: relative;
+      z-index: 1;
+
+      .ContentInnerWrapper {
+        justify-content: center;
+        @include max-width(1068px);
+        height: 100%;
+
+        p {
+          max-width: 519px;
+          margin-left: 0;
+        }
+      }
+
+      * {
+        text-align: left;
+      }
+    }
+
+    .VideoWrapper {
+      flex: 1;
+      height: 100%;
+      max-width: 60%;
+      margin-left: 0;
+      margin-right: auto;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    .Kicker {
+      margin-left: 0;
+      font-size: 22px;
+    }
+
+    .Title {
+      line-height: 1;
+      letter-spacing: -0.02em;
+      max-width: 519px;
+    }
+
+    .Subtitle {
+      font-size: 28px;
+      line-height: 1.15;
+      letter-spacing: -0.02em;
+      max-width: 100%;
+    }
+
+    .Buttons {
+      flex-direction: row;
+      margin-left: 0;
+
+      a {
+        padding: 12px;
+      }
+    }
+  }
+}