feat(ui-ux): add common component HeroBanner

public/locales/de/common.json

@@ -2,5 +2,8 @@
   "title": "DeFiChain",
   "Punctuation": {
     "fullStop": "."
+  },
+  "StartExploring": {
+    "button": "Beginne mit der Erkundung"
   }
 }

public/locales/de/page-index.json

@@ -7,9 +7,6 @@
     "title": "Die Verbindung von alten und neuen Welten",
     "desc": "Eine Blockchain für schnelle, intelligente und transparente dezentrale Finanzdienstleistungen, die für jeden zugänglich sind."
   },
-  "HeroBannerSection": {
-    "button": "Beginne mit der Erkundung"
-  },
   "StatisticsSection": {
     "dfiMinted": {
       "title": "INSGESAMT GEMINTETE DFI",

public/locales/en-US/common.json

@@ -2,5 +2,8 @@
   "title": "DeFiChain",
   "Punctuation": {
     "fullStop": "."
+  },
+  "StartExploring": {
+    "button": "Start exploring"
   }
 }

public/locales/en-US/page-explore-masternodes.json

@@ -0,0 +1,19 @@
+{
+  "heroBanner": {
+    "title": "LEARN ABOUT MASTERNODES",
+    "subtitle": "DeFiChain Masternodes",
+    "desc": "Secure, incentivized, community-driven nodes powering decentralized blockchain networks."
+  },
+  "footerCards": {
+    "cardTitle": "EXPLORE DEFICHAIN",
+    "cards": [
+      {
+        "title": "Choose your wallet"
+      },
+      {
+        "title": "Get $DFI"
+      }
+    ]
+  }
+}
+

public/locales/en-US/page-explore-wallets.json

@@ -0,0 +1,18 @@
+{
+  "heroBanner": {
+    "title": "CHOOSE A WALLET THAT SUITS YOU",
+    "subtitle": "DeFiChain Wallets",
+    "desc": "Gain access to the DeFi landscape through non-custodial wallets designed for a multitude of requirements."
+  },
+  "footerCards": {
+    "cardTitle": "EXPLORE DEFICHAIN",
+    "cards": [
+      {
+        "title": "Trade with DEX"
+      },
+      {
+        "title": "Get $DFI"
+      }
+    ]
+  }
+}

public/locales/en-US/page-index.json

@@ -7,9 +7,6 @@
     "title": "Connecting old and new worlds",
     "desc": "A blockchain dedicated to fast, intelligent and transparent decentralized financial services, accessible by everyone."
   },
-  "HeroBannerSection": {
-    "button": "Start exploring"
-  },
   "StatisticsSection": {
     "dfiMinted": {
       "title": "TOTAL DFI MINTED",

public/locales/fr/common.json

@@ -2,5 +2,8 @@
   "title": "DeFiChain",
   "Punctuation": {
     "fullStop": "."
+  },
+  "StartExploring": {
+    "button": "Commencer à explorer"
   }
 }

public/locales/fr/page-index.json

@@ -7,9 +7,6 @@
     "title": "Connecter l'ancien et le nouveau monde",
     "desc": "Une blockchain dédiée aux services financiers décentralisés rapides, intelligents et transparents, accessibles à tous."
   },
-  "HeroBannerSection": {
-    "button": "Commencer à explorer"
-  },
   "StatisticsSection": {
     "dfiMinted": {
       "title": "TOTAL DES DFI MINTÉS",

public/locales/zh-Hans/common.json

@@ -2,5 +2,8 @@
   "title": "比特币生态中的DeFi",
   "Punctuation": {
     "fullStop": "。"
+  },
+  "StartExploring": {
+    "button": "开始探索"
   }
 }

public/locales/zh-Hans/page-index.json

@@ -7,9 +7,6 @@
     "title": "旧世界与新世界之间的桥梁",
     "desc": "每个人都可以访问，一个致力于快速、智能和透明的去中心化金融服务区块链"
   },
-  "HeroBannerSection": {
-    "button": "开始探索"
-  },
   "StatisticsSection": {
     "dfiMinted": {
       "title": "DFI 铸造总量",

public/locales/zh-Hant/common.json

@@ -2,5 +2,8 @@
   "title": "比特幣生態中的DeFi",
   "Punctuation": {
     "fullStop": "。"
+  },
+  "StartExploring": {
+    "button": "開始探索"
   }
 }

public/locales/zh-Hant/page-index.json

@@ -7,9 +7,6 @@
     "title": "舊世界與新世界之間的橋樑",
     "desc": "每個人都可以訪問，一個致力於快速、智能和透明的去中心化金融服務區塊鏈"
   },
-  "HeroBannerSection": {
-    "button": "開始探索"
-  },
   "StatisticsSection": {
     "dfiMinted": {
       "title": "DFI 鑄造總量",

src/components/commons/HeroBanner.tsx

@@ -0,0 +1,105 @@
+import { Container } from "@components/commons/Container";
+import classNames from "classnames";
+import { SectionTitle } from "@components/commons/SectionTitle";
+import { Button } from "@components/commons/Buttons";
+import { StartExploringButton } from "@components/commons/StartExploringButton";
+
+// The HeroBanner component takes in title, subtitle, desc and HeroBannerBG
+// currently only COIN_ARROW, DFI_COIN, DIAMOND_COIN and CUBE image are available
+// it also takes in optional params on the customBgPosStyle
+// if cta button is required, to pass in hasCtaButton, ctaButtonText and ctaButtonLink
+// if start exploring button is required, to pass in hasStartExploringButton and startExploringJumpLink
+export function HeroBanner({
+  title,
+  subtitle,
+  desc,
+  customBgPosStyle,
+  heroBg,
+  hasCtaButton = false,
+  ctaButtonLink,
+  ctaButtonText,
+  hasStartExploringButton = false,
+  startExploringJumpLink,
+}: {
+  title: string;
+  subtitle: string;
+  desc: string;
+  customBgPosStyle?: string;
+  heroBg: HeroBannerBg;
+  hasCtaButton?: boolean;
+  ctaButtonLink?: string;
+  ctaButtonText?: string;
+  hasStartExploringButton?: boolean;
+  startExploringJumpLink?: string;
+}) {
+  return (
+    <div className="relative z-0">
+      <Container className={classNames("md:mt-[25px] mt-6")}>
+        <div
+          className={classNames(
+            "flex flex-col md:gap-y-5 gap-y-2",
+            "md:w-1/2 w-auto",
+            "md:pt-[88px] pt-[380px]",
+            "lg:mb-[278px] md:mb-[148px] mb-24"
+          )}
+        >
+          <SectionTitle text={title} />
+          <div
+            className={classNames(
+              "text-dark-1000 text-[40px] leading-[44px] tracking-[-0.02em]",
+              "md:text-5xl md:leading-[52px] md:tracking-normal",
+              "lg:text-[80px] lg:leading-[84px] md:tracking-normal"
+            )}
+          >
+            {subtitle}
+          </div>
+          <div
+            className={classNames(
+              "font-desc tracking-[0.03em] text-xl text-dark-700",
+              "lg:text-2xl tracking-normal"
+            )}
+          >
+            {desc}
+          </div>
+          {hasCtaButton && ctaButtonText && (
+            <Button
+              className="lg:py-4 py-3 md:w-1/2 w-auto lg:text-base text-sm md:mt-7 mt-10"
+              text={ctaButtonText}
+              href={ctaButtonLink}
+            />
+          )}
+        </div>
+        {hasStartExploringButton && startExploringJumpLink && (
+          <StartExploringButton
+            startExploringJumpLink={startExploringJumpLink}
+          />
+        )}
+      </Container>
+      <div
+        className={classNames(
+          bgMapping[heroBg],
+          "absolute bg-contain bg-no-repeat bg-right-top inset-0 z-[-1]",
+          "lg:h-[686px] md:h-[512px] h-[358px]",
+          customBgPosStyle ??
+            "xl:right-0 2xl:right-0 md:-right-[5%] -right-[3rem] md:-top-[5rem] top-0"
+        )}
+      />
+    </div>
+  );
+}
+
+export enum HeroBannerBg {
+  COIN_ARROW,
+  CUBE,
+  DFI_COIN,
+  DIAMOND_COIN,
+}
+const bgMapping = {
+  [HeroBannerBg.COIN_ARROW]:
+    "bg-[url(/assets/img/herobanner/hero-banner-coin-arrow.png)]",
+  [HeroBannerBg.CUBE]: "bg-[url(/assets/img/herobanner/hero-banner-cube.png)]",
+  [HeroBannerBg.DFI_COIN]:
+    "bg-[url(/assets/img/herobanner/hero-banner-dfi-coin.png)]",
+  [HeroBannerBg.DIAMOND_COIN]:
+    "bg-[url(/assets/img/herobanner/hero-banner-diamond-coin.png)]",
+};

src/components/commons/StartExploringButton.tsx

@@ -0,0 +1,29 @@
+import { IoChevronDown } from "react-icons/io5";
+
+import classNames from "classnames";
+import { useTranslation } from "next-i18next";
+
+export function StartExploringButton({
+  startExploringJumpLink,
+}: {
+  startExploringJumpLink: string;
+}) {
+  const { t } = useTranslation("common");
+
+  return (
+    <a
+      href={startExploringJumpLink}
+      className={classNames("hidden md:flex justify-center")}
+    >
+      <button
+        type="button"
+        className="group flex flex-col items-center gap-y-[17px]"
+      >
+        <div className="text-sm text-dark-700 group-hover:text-brand-100">
+          {t("StartExploring.button")}
+        </div>
+        <IoChevronDown className="group-hover:text-brand-100" />
+      </button>
+    </a>
+  );
+}

src/pages/explore/masternodes/index.page.tsx

@@ -1,31 +1,42 @@
 import { Container } from "@components/commons/Container";
 import { SSRConfig, useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { HeroBanner, HeroBannerBg } from "@components/commons/HeroBanner";
 import { ExploreCards, ExploreCardsImage } from "../_components/ExploreCards";
 
 export default function ExploreMasternodes() {
-  const { t } = useTranslation("page-explore");
+  const { t } = useTranslation("page-explore-masternodes");
   const entries: Array<{ title: string; subtitle: string }> = t(
-    "MasternodesFooterCards.cards",
+    "footerCards.cards",
     { returnObjects: true }
   );
   return (
-    <Container className="lg:mb-8 md:mb-6 mb-4">
-      <div className="flex flex-row overflow-x-scroll lg:gap-x-[32.97px] md:gap-x-[24.97px] gap-x-[16.97px]">
-        <ExploreCards
-          title={t("MasternodesFooterCards.cardTitle")}
-          desc={entries[0].title}
-          bgImage={ExploreCardsImage.PHONE}
-          href=""
-        />
-        <ExploreCards
-          title={t("MasternodesFooterCards.cardTitle")}
-          desc={entries[1].title}
-          bgImage={ExploreCardsImage.METALCOIN}
-          href=""
-        />
-      </div>
-    </Container>
+    <>
+      <HeroBanner
+        title={t("heroBanner.title")}
+        subtitle={t("heroBanner.subtitle")}
+        desc={t("heroBanner.desc")}
+        heroBg={HeroBannerBg.CUBE}
+        hasStartExploringButton
+        startExploringJumpLink=""
+      />
+      <Container className="lg:mb-8 md:mb-6 mb-4">
+        <div className="flex flex-row overflow-x-scroll lg:gap-x-[32.97px] md:gap-x-[24.97px] gap-x-[16.97px]">
+          <ExploreCards
+            title={t("footerCards.cardTitle")}
+            desc={entries[0].title}
+            bgImage={ExploreCardsImage.PHONE}
+            href=""
+          />
+          <ExploreCards
+            title={t("footerCards.cardTitle")}
+            desc={entries[1].title}
+            bgImage={ExploreCardsImage.METALCOIN}
+            href=""
+          />
+        </div>
+      </Container>
+    </>
   );
 }
 
@@ -37,7 +48,7 @@ export async function getStaticProps({
       ...(await serverSideTranslations(locale, [
         "common",
         "layout",
-        "page-explore",
+        "page-explore-masternodes",
       ])),
     },
   };