feat(ui-ux): add missing assets and fix assets placement

src/components/commons/HeroBanner.tsx

@@ -80,6 +80,28 @@ export function HeroBanner({
             "lg:-right-[10rem] md:-right-[7em] -right-[5em] md:-top-[5rem] top-0"
         )}
       />
+
+      {heroBg === HeroBannerBg.COIN_ARROW && (
+        <div
+          className={classNames(
+            "absolute bg-contain bg-no-repeat lg:rotate-90",
+            "lg:w-[682px] lg:h-[341.33px] lg:-right-[17.5em] lg:top-[25em]",
+            "md:h-[505.52px] md:w-[253.01px] md:top-[8em] md:-right-[4.5em]",
+            "h-[433.23px] w-[216.83px] top-[6em] -right-[8em]",
+            "lg:bg-[url('/assets/img/background/explore/masternodes/benefits-accent-desktop.png')]",
+            "bg-[url(/assets/img/herobanner/background/coin-arrow-bg.png)]"
+          )}
+        />
+      )}
+      {heroBg === HeroBannerBg.CUBE && (
+        <div
+          className={classNames(
+            "absolute bg-contain bg-no-repeat lg:rotate-90",
+            "lg:w-[682px] lg:h-[341.33px] lg:-right-[32em] lg:top-[25em]",
+            "lg:bg-[url('/assets/img/background/explore/masternodes/benefits-accent-desktop.png')]"
+          )}
+        />
+      )}
     </Container>
   );
 }

src/pages/explore/dfi/_components/DFIStatisticsDisplay.tsx

@@ -4,6 +4,7 @@ import { StatisticPanel } from "@components/commons/StatisticPanel";
 import { Container } from "@components/commons/Container";
 import { useUnitSuffix } from "@hooks/useUnitSuffix";
 import { useTranslation } from "next-i18next";
+import classNames from "classnames";
 import { useWhaleApiClient } from "../../../../layouts/context/WhaleContext";
 import { calculatePercentage } from "../../../../shared/calculatePercentage";
 
@@ -48,12 +49,21 @@ export function DFIStatisticsDisplay() {
   ];
 
   return (
-    <Container className="lg:mt-[69px] md:mt-[33px] mt-0 lg:mb-[180px] mb-[72px]">
+    <Container className="lg:mt-[69px] md:mt-[33px] mt-0 lg:mb-[180px] mb-[72px] relative">
       <StatisticPanel
         displayItem={supplyItems}
         displayStripCustomStyle="scroll-mt-[200px]"
         displayId="statistics-display-dfi"
       />
+      <div
+        className={classNames(
+          "absolute bg-contain bg-no-repeat z-[-1]",
+          "bg-[url(/assets/img/background/explore/dfi/stats-accent.png)]",
+          "lg:h-[689px] lg:w-[354px] lg:-left-[4.2em] lg:-bottom-[25em]",
+          "md:h-[558px] md:w-[287px] md:-left-[3.2em] md:-bottom-[20em] md:-left-[8em]",
+          "w-[364.07px] h-[187.25px] -bottom-[9em] -left-[7em]"
+        )}
+      />
     </Container>
   );
 }

src/pages/explore/dfi/_components/HarnessDFISection.tsx

@@ -55,7 +55,7 @@ export default function HarnessDFISection() {
   ];
 
   return (
-    <Container className="lg:mb-[303px] md:mb-[180px] mb-24">
+    <Container className="lg:mb-[303px] md:mb-[180px] mb-24 relative z-[10]">
       <div className="flex flex-col w-full mx-auto gap-y-5">
         <div className="flex md:justify-center justify-start">
           <SectionTitle text={t("harnessDFISection.title")} />
@@ -88,6 +88,25 @@ export default function HarnessDFISection() {
           <HarnessDFIGrid gridItems={harnessDFIItems.slice(3)} isMobile />
         </Slider>
       </div>
+      <div
+        className={classNames(
+          "absolute bg-contain bg-no-repeat ",
+          "lg:h-[45px] lg:w-[45px] lg:right-[2.3em]",
+          "md:h-8 md:w-8 md:-right-[0.25em] md:bottom-[8em]",
+          "h-7 w-7 -right-[0.8em] bottom-[15em]",
+          "bg-[url('/assets/img/background/explore/masternodes/masternodesBenefitsBg.png')]"
+        )}
+      />
+      <div
+        className={classNames(
+          "absolute bg-contain bg-no-repeat ",
+          "lg:h-[682px] lg:w-[341.33px] lg:-bottom-[50em] lg:-right-[1em]",
+          "md:h-[480px] md:w-[240.24px] md:-right-[2.5em] md:-bottom-[35em] md:left-auto",
+          "w-[203.76px] h-[152.08px] left-[12.5em] -bottom-[3.5em]",
+          "md:bg-[url('/assets/img/background/explore/dfi/harness-accent-desktop.png')]",
+          "bg-[url('/assets/img/background/explore/dfi/harness-accent-mobile.png')]"
+        )}
+      />
     </Container>
   );
 }

src/pages/explore/masternodes/MasternodesBenefitsSection.tsx

@@ -2,6 +2,7 @@ import { Button } from "@components/commons/Buttons";
 import { Container } from "@components/commons/Container";
 import { useTranslation } from "next-i18next";
 import { SectionTitle } from "@components/commons/SectionTitle";
+import classNames from "classnames";
 import { MasternodesBenefitsColumn } from "./MasternodesBenefitsColumn";
 
 export const masternodesBenefitsItems = [
@@ -28,10 +29,10 @@ export function MasternodesBenefitsSection(): JSX.Element {
 
   return (
     <section
-      className="pb-24 pt-0 md:pb-28 lg:pb-[120px] lg:mb-[120px] relative"
+      className="pb-24 pt-0 md:pb-28 lg:pb-[120px] lg:mb-[120px]"
       data-testid="masternodesBenefits"
     >
-      <Container className="flex flex-col justify-between lg:flex-row 2xl:max-w-[1920px] 2xl:mx-[300px]">
+      <Container className="flex flex-col justify-between lg:flex-row 2xl:max-w-[1920px] 2xl:mx-[300px] relative">
         <div className="flex lg:w-[551px]">
           <div
             className="w-full flex flex-col space-y-5 md:space-y-5 lg:space-y-5"
@@ -62,9 +63,30 @@ export function MasternodesBenefitsSection(): JSX.Element {
             id="tablet-desktop-screen"
           />
         </div>
+        <div
+          className={classNames(
+            "hidden md:block absolute bg-contain bg-no-repeat ",
+            "lg:h-[45px] lg:w-[45px] lg:top-[169px] lg:-right-[1.5em]",
+            "md:h-8 md:w-8 md:-right-[2em] md:bottom-[10em]",
+            "bg-[url('/assets/img/background/explore/masternodes/masternodesBenefitsBg.png')]"
+          )}
+        />
+        <div
+          className={classNames(
+            "lg:hidden md:block hidden absolute right-0 opacity-70 bg-contain bg-no-repeat",
+            " md:h-[445.91px] md:w-[290.56px] md:top-[5em] md:-right-[4.5em]",
+            "bg-[url('/assets/img/background/explore/masternodes/masternodesGridBg.png')]"
+          )}
+        />
+        <div
+          className={classNames(
+            "hidden md:block absolute bg-contain bg-no-repeat rotate-90",
+            "lg:w-[682px] lg:h-[341.33px] lg:-right-[17.5em] lg:top-[31em]",
+            "md:h-[240.24px] md:w-[480px] md:-bottom-[28em] md:-right-[10em]",
+            "bg-[url('/assets/img/background/explore/masternodes/benefits-accent-desktop.png')]"
+          )}
+        />
       </Container>
-      <div className="hidden md:block absolute md:h-8 md:w-8 md:right-8 md:bottom-[249px] lg:h-[45px] lg:w-[45px] lg:top-[169px] lg:right-[98px] bg-contain bg-no-repeat mix-blend-screen bg-[url('/assets/img/masternodesBenefits/masternodesBenefitsBg.png')]" />
-      <div className="hidden md:block absolute right-0 opacity-70 md:top-[85px] md:h-[445.91px] md:w-[290.56px] lg:top-auto lg:bottom-[-251.33px] bg-contain bg-no-repeat mix-blend-screen bg-[url('/assets/img/masternodesBenefits/masternodesGridBg.png')]" />
     </section>
   );
 }

src/pages/explore/masternodes/_components/MasternodesStatisticsDisplay.tsx

@@ -4,6 +4,7 @@ import { StatisticPanel } from "@components/commons/StatisticPanel";
 import { useUnitSuffix } from "@hooks/useUnitSuffix";
 import { Container } from "@components/commons/Container";
 import { useTranslation } from "next-i18next";
+import classNames from "classnames";
 import { useWhaleApiClient } from "../../../../layouts/context/WhaleContext";
 
 export function MasternodesStatisticsDisplay() {
@@ -50,12 +51,31 @@ export function MasternodesStatisticsDisplay() {
     },
   ];
   return (
-    <Container className="lg:mt-[69px] md:mt-[33px] mt-0 lg:mb-[180px] mb-[72px]">
+    <Container className="lg:mt-[69px] md:mt-[33px] mt-0 lg:mb-[180px] mb-[72px] relative">
       <StatisticPanel
         displayItem={statsItems}
         displayStripCustomStyle="scroll-mt-[200px]"
         displayId="statistics_display_masternodes"
       />
+      <div
+        className={classNames(
+          "z-[-1] lg:block hidden absolute bg-contain bg-no-repeat md:rotate-0",
+          "bg-[url(/assets/img/background/explore/masternodes/stats-accent-desktop.png)]",
+          "lg:h-[386.45px] lg:w-[772.13px] lg:-left-[7.5em] lg:-bottom-[2em]",
+          "h-[183.04px] w-[292.57px] rotate-90 -right-[11em] -bottom-[6.5em]"
+        )}
+      />
+      <div
+        className={classNames(
+          "absolute bg-contain bg-no-repeat z-[-1]",
+          "lg:bg-[url(/assets/img/background/explore/masternodes/stats-greendot-desktop.png)]",
+          "md:bg-[url(/assets/img/background/explore/masternodes/stats-greendot-tablet.png)]",
+          "bg-[url(/assets/img/background/explore/masternodes/stats-greendot-mobile.png)]",
+          "lg:h-[127.67px] lg:w-[430.42px] lg:-left-[7.5em] lg:bottom-[1em]",
+          "md:h-[287px] md:w-[558px] md:-left-[3.2em] md:-bottom-[2.2em]",
+          "h-[364.07px] w-[187.25px] -bottom-[7.5em] -left-[1.5em]"
+        )}
+      />
     </Container>
   );
 }

src/pages/explore/wallets/_components/AdvanceUsageSection.tsx

@@ -11,7 +11,7 @@ export function AdvanceUsageSection() {
   const { t } = useTranslation(["page-explore-wallets"]);
 
   return (
-    <Container className="mt-[120px] md:mt-[96px] lg:mt-[240px] lg:mb-[240px] md:mb-[112px] mb-[72px]">
+    <Container className="mt-[120px] md:mt-[96px] lg:mt-[240px] lg:mb-[240px] md:mb-[112px] mb-[72px] relative">
       <div className="flex flex-col gap-y-5">
         <div className="flex md:justify-center justify-start">
           <SectionTitle text="SUITABLE FOR ADVANCE USAGE" />
@@ -90,6 +90,22 @@ export function AdvanceUsageSection() {
           }}
         />
       </div>
+      <div
+        className={classNames(
+          "z-[-1] absolute bg-contain bg-no-repeat md:rotate-0",
+          "bg-[url(/assets/img/background/explore/wallet/grids-accent.png)]",
+          "lg:h-[300.18px] lg:w-[479.8px] lg:-right-[15em] lg:-bottom-[7.75em]",
+          "md:h-[281.94px] md:w-[450.65px] md:-right-[10.7em] md:-bottom-[5em]",
+          "h-[183.04px] w-[292.57px] rotate-90 -right-[11em] -bottom-[6.5em]"
+        )}
+      />
+      <div
+        className={classNames(
+          "hidden md:block absolute bg-contain bg-no-repeat mix-blend-screen bg-[url(/assets/img/background/explore/wallet/union.png)]",
+          "lg:h-[45px] lg:w-[45px] lg:-right-[1.5em] lg:-bottom-[1.5em]",
+          "md:h-8 md:w-8 -right-[1.2em] -bottom-[4.75em]"
+        )}
+      />
     </Container>
   );
 }