Merge pull request #15681 from ethereum/fix-hero

Fix home hero

Author: pettinarip

.storybook/main.ts

@@ -77,5 +77,8 @@ const config: StorybookConfig = {
 
     reactDocgen: "react-docgen-typescript",
   },
+  features: {
+    experimentalRSC: true,
+  },
 }
 export default config

app/[locale]/page.tsx

@@ -447,7 +447,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
           </Link>
         </p>
       </BannerNotification>
-      <HomeHero heroImg={Hero} className="w-full" />
+      <HomeHero heroImg={Hero} className="w-full" locale={locale} />
       <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/HomeHero/HomeHero.stories.tsx

@@ -1,21 +1,24 @@
-import type { ClassNameProp, CommonHeroProps } from "@/lib/types"
+import { getTranslations } from "next-intl/server"
+
+import type { ClassNameProp, CommonHeroProps, Lang } from "@/lib/types"
 
 import LanguageMorpher from "@/components/Homepage/LanguageMorpher"
 import { Image } from "@/components/Image"
 
-import useTranslation from "@/hooks/useTranslation"
-
-export type HomeHeroProps = Pick<CommonHeroProps, "heroImg"> & ClassNameProp
+export type HomeHeroProps = Pick<CommonHeroProps, "heroImg"> &
+  ClassNameProp & {
+    locale: Lang
+  }
 
-const HomeHero = ({ heroImg, className }: HomeHeroProps) => {
-  const { t } = useTranslation("page-index")
+const HomeHero = async ({ heroImg, className, locale }: HomeHeroProps) => {
+  const t = await getTranslations({ locale, namespace: "page-index" })
 
   return (
     <div className={className}>
       <div className="h-[240px] md:h-[380px] lg:h-[480px]">
         <Image
           src={heroImg}
-          alt={t("page-index:page-index-hero-image-alt")}
+          alt={t("page-index-hero-image-alt")}
           // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
           sizes="(max-width: 1504px) 100vw, 1504px"
           className="h-full w-full object-cover"
@@ -25,9 +28,9 @@ const HomeHero = ({ heroImg, className }: HomeHeroProps) => {
       <div className="flex flex-col items-center border-t-[3px] border-primary-low-contrast px-4 py-10 text-center">
         <LanguageMorpher />
         <div className="flex flex-col items-center gap-y-5 lg:max-w-2xl">
-          <h1 className="font-black">{t("page-index:page-index-title")}</h1>
+          <h1 className="font-black">{t("page-index-title")}</h1>
           <p className="max-w-96 text-md text-body-medium lg:text-lg">
-            {t("page-index:page-index-description")}
+            {t("page-index-description")}
           </p>
         </div>
       </div>