diff --git a/src/components/commons/HeroBanner.tsx b/src/components/commons/HeroBanner.tsx
new file mode 100644
index 000000000..ef6da8f23
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ {subtitle}
+
+
+ {desc}
+
+ {hasCtaButton && ctaButtonText && (
+
+ )}
+
+
+
+ );
+}
+
+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)]",
+};
diff --git a/src/components/commons/SectionTitle.tsx b/src/components/commons/SectionTitle.tsx
new file mode 100644
index 000000000..2bb71325d
--- /dev/null
+++ b/src/components/commons/SectionTitle.tsx
@@ -0,0 +1,21 @@
+import classNames from "classnames";
+
+export function SectionTitle({
+ text,
+ customStyle,
+}: {
+ text: string;
+ customStyle?: string;
+}) {
+ return (
+
+ {text}
+
+ );
+}
diff --git a/src/components/commons/StartExploringButton.tsx b/src/components/commons/StartExploringButton.tsx
new file mode 100644
index 000000000..39ba80f14
--- /dev/null
+++ b/src/components/commons/StartExploringButton.tsx
@@ -0,0 +1,28 @@
+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 (
+
+
+
+ );
+}
diff --git a/src/components/commons/StatisticPanel.tsx b/src/components/commons/StatisticPanel.tsx
new file mode 100644
index 000000000..a82945b08
--- /dev/null
+++ b/src/components/commons/StatisticPanel.tsx
@@ -0,0 +1,137 @@
+import { useUnitSuffix } from "@hooks/useUnitSuffix";
+import CountUp from "react-countup";
+import classNames from "classnames";
+
+interface StatisticPanelItemProps {
+ title: string;
+ stats?: number;
+ desc?: string;
+ prefix?: string;
+ descStyle?: string;
+ displayId?: string;
+ displayStripCustomStyle?: string;
+}
+
+export function StatisticPanel({
+ displayId,
+ displayStripCustomStyle,
+ displayItem,
+}: {
+ displayItem: StatisticPanelItemProps[];
+ displayId?: string;
+ displayStripCustomStyle?: string;
+}) {
+ const isHorizontalInTablet = displayItem.length <= 2;
+
+ return (
+
+
+
+ {displayItem.map((item, key) => (
+
+ ))}
+
+
+
+ );
+}
+
+function StatisticsPanelItem({
+ title,
+ stats,
+ desc,
+ prefix,
+ descStyle,
+ isTabletHorizontal = false,
+}: {
+ title: string;
+ stats?: number;
+ desc?: string;
+ prefix?: string;
+ descStyle?: string;
+ isTabletHorizontal?: boolean;
+}) {
+ const { suffix, value } = useUnitSuffix(
+ stats === undefined ? "N/A" : stats.toString()
+ );
+
+ return (
+
+
+ {title}
+
+
+
+ {stats ? (
+ <>
+ {prefix ?? ""}
+ {
+ reset();
+ start();
+ }}
+ end={Number(value)}
+ enableScrollSpy
+ duration={0.5}
+ />
+ {suffix !== "" ? `${suffix}+` : `+`}
+
+ ) : (
+ <>N/A
+ )}
+
+
+ {desc !== undefined && (
+
+ {desc}
+
+ )}
+
+
+ );
+}
diff --git a/src/components/commons/Video.tsx b/src/components/commons/Video.tsx
new file mode 100644
index 000000000..078a5c97d
--- /dev/null
+++ b/src/components/commons/Video.tsx
@@ -0,0 +1,17 @@
+interface VideoProps {
+ src: string;
+ poster?: string;
+ width?: number;
+ height?: number;
+ id?: string;
+ loop?: boolean;
+}
+
+export function Video(props: VideoProps): JSX.Element {
+ const { src, width, height, poster, id, loop } = props;
+ return (
+
+ );
+}
diff --git a/src/components/icons/DeFiChainLogo.tsx b/src/components/icons/DeFiChainLogo.tsx
index 7809c794a..3a9646568 100644
--- a/src/components/icons/DeFiChainLogo.tsx
+++ b/src/components/icons/DeFiChainLogo.tsx
@@ -1,23 +1,26 @@
import { SVGProps } from "react";
-export function DeFiChainLogo(props: SVGProps
): JSX.Element {
+export default function DeFiChainLogo(
+ props: SVGProps
+): JSX.Element {
return (
-