Refactor FusakaHero component: replace with FusakaBanner and update HomeHero to accept dynamic images. Remove FusakaCountdown component.

Author: corwintines

app/[locale]/page.tsx

@@ -12,9 +12,9 @@ import type {
 import { CodeExample } from "@/lib/interfaces"
 
 import ActivityStats from "@/components/ActivityStats"
+import FusakaBanner from "@/components/Banners/FusakaBanner"
 import { ChevronNext } from "@/components/Chevron"
-import FusakaHero from "@/components/Hero/FusakaHero"
-// import HomeHero from "@/components/Hero/HomeHero"
+import HomeHero from "@/components/Hero/HomeHero"
 import BentoCard from "@/components/Homepage/BentoCard"
 import CodeExamples from "@/components/Homepage/CodeExamples"
 import HomepageSectionImage from "@/components/Homepage/HomepageSectionImage"
@@ -96,6 +96,7 @@ import { fetchAttestantPosts } from "@/lib/api/fetchPosts"
 import { fetchRSS } from "@/lib/api/fetchRSS"
 import { fetchTotalValueLocked } from "@/lib/api/fetchTotalValueLocked"
 import EventFallback from "@/public/images/events/event-placeholder.png"
+import RoadmapFusakaImage from "@/public/images/roadmap/roadmap-fusaka.png"
 
 const BentoCardSwiper = dynamic(
   () => import("@/components/Homepage/BentoCardSwiper"),
@@ -436,8 +437,8 @@ const Page = async ({ params }: { params: PageParams }) => {
     <>
       <IndexPageJsonLD locale={locale} />
       <MainArticle className="flex w-full flex-col items-center" dir={dir}>
-        {/* <HomeHero /> */}
-        <FusakaHero />
+        <FusakaBanner />
+        <HomeHero image={RoadmapFusakaImage} alt="Fusaka Hero" />
         <div className="w-full space-y-32 px-4 md:mx-6 lg:space-y-48">
           <div className="my-20 grid w-full grid-cols-2 gap-x-4 gap-y-8 md:grid-cols-4 md:gap-x-10">
             {subHeroCTAs.map(

src/components/Hero/FusakaHero/FusakaCountdown.tsx renamed to src/components/Banners/FusakaBanner/FusakaCountdown.tsx

@@ -0,0 +1,45 @@
+import { getLocale, getTranslations } from "next-intl/server"
+
+import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
+
+import FusakaCountdown from "./FusakaCountdown"
+
+const FusakaBanner = async () => {
+  const locale = getLocale()
+  const t = await getTranslations({ locale, namespace: "page-index" })
+
+  return (
+    <LinkBox className="w-full bg-[#333369] p-2 text-center text-white md:p-4 md:px-8">
+      <div className="flex flex-col items-center justify-between gap-2 md:flex-row md:gap-16">
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-xl font-extrabold uppercase !leading-none md:text-2xl">
+            FUSAKA
+          </p>
+          <p className="text-sm font-bold uppercase text-purple-100">
+            {t("page-index-fusaka-network-upgrade")}
+          </p>
+        </div>
+        <p className="text-xs text-white md:text-sm">
+          {t("page-index-fusaka-description")}{" "}
+          <LinkOverlay
+            href="/roadmap/fusaka"
+            className="text-white hover:text-purple-300"
+          >
+            {t("page-index-fusaka-read-more")}
+          </LinkOverlay>
+          .
+        </p>
+        <div className="flex flex-row items-center justify-center gap-4 md:mt-0 md:flex-col md:gap-0">
+          <p className="text-xs font-bold uppercase text-gray-200">
+            {t.rich("page-index-fusaka-going-live-in", {
+              br: () => <br className="md:hidden" />,
+            })}
+          </p>
+          <FusakaCountdown />
+        </div>
+      </div>
+    </LinkBox>
+  )
+}
+
+export default FusakaBanner

src/components/Banners/FusakaBanner/index.tsx

@@ -1,4 +1,4 @@
-import { getImageProps } from "next/image"
+import { getImageProps, type StaticImageData } from "next/image"
 import { getLocale, getTranslations } from "next-intl/server"
 
 import type { ClassNameProp } from "@/lib/types"
@@ -11,11 +11,24 @@ import { breakpointAsNumber } from "@/lib/utils/screen"
 import heroBase from "@/public/images/home/hero.png"
 import hero2xl from "@/public/images/home/hero-2xl.png"
 
-const HomeHero = async ({ className }: ClassNameProp) => {
+type HomeHeroProps = ClassNameProp & {
+  image?: StaticImageData
+  image2xl?: StaticImageData
+  alt?: string
+}
+
+const HomeHero = async ({
+  className,
+  image,
+  image2xl,
+  alt: altProp,
+}: HomeHeroProps) => {
   const locale = getLocale()
   const t = await getTranslations({ locale, namespace: "page-index" })
 
-  const alt = t("page-index-hero-image-alt")
+  const baseImage = image ?? heroBase
+  const xlImage = image2xl ?? image ?? hero2xl
+  const alt = altProp ?? t("page-index-hero-image-alt")
 
   const common = {
     alt,
@@ -25,15 +38,15 @@ const HomeHero = async ({ className }: ClassNameProp) => {
 
   const {
     props: { srcSet: srcSet2xl },
-  } = getImageProps({ ...common, ...hero2xl, quality: 20 })
+  } = getImageProps({ ...common, ...xlImage, quality: 20 })
 
   const {
     props: { srcSet: srcSetMd },
-  } = getImageProps({ ...common, ...heroBase, quality: 10 })
+  } = getImageProps({ ...common, ...baseImage, quality: 10 })
 
   const {
     props: { srcSet: srcSetBase, ...rest },
-  } = getImageProps({ ...common, ...heroBase, quality: 5 })
+  } = getImageProps({ ...common, ...baseImage, quality: 5 })
 
   return (
     <div className={cn("w-full", className)}>