refactor(Hero): sync styles to latest DS

Author: TylerAPfledderer

src/components/Hero/ContentHero/ContentHero.stories.tsx

@@ -1,10 +1,11 @@
-import { useTranslation } from "next-i18next"
 import { Meta, StoryObj } from "@storybook/react"
 
 import ContentHeroComponent, { ContentHeroProps } from "."
 
 type ContentHeroType = typeof ContentHeroComponent
 
+import { getI18n } from "react-i18next"
+
 import contentHeroImg from "../../../../public/mainnet.png"
 
 const meta = {
@@ -25,13 +26,21 @@ const meta = {
 export default meta
 
 export const ContentHero: StoryObj = {
+  parameters: {
+    // Set asPath in mock router so the Breadcrums component can render
+    // the "home" text with correct translation
+    nextjs: {
+      router: {
+        asPath: "/en",
+      },
+    },
+  },
   render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const { t } = useTranslation("page-learn")
+    const { t } = getI18n()
 
     const buttons: ContentHeroProps["buttons"] = [
       {
-        content: t("hero-button-lets-get-started"),
+        content: t("hero-button-lets-get-started", { ns: "page-learn" }),
         toId: "what-is-crypto-ethereum",
         matomo: {
           eventCategory: "learn hub hero buttons",
@@ -50,10 +59,10 @@ export const ContentHero: StoryObj = {
     ]
     return (
       <ContentHeroComponent
-        breadcrumbs={{ slug: "/en/run-a-node/" }}
+        breadcrumbs={{ slug: "/run-a-node/" }}
         heroImg={contentHeroImg}
-        title={t("hero-header")}
-        description={t("hero-subtitle")}
+        title={t("hero-header", { ns: "page-learn" })}
+        description={t("hero-subtitle", { ns: "page-learn" })}
         buttons={buttons}
       />
     )

src/components/Hero/ContentHero/index.tsx

@@ -35,12 +35,12 @@ const ContentHero = (props: ContentHeroProps) => {
               {title}
             </Heading>
             <Text fontSize="lg">{description}</Text>
-            <HStack spacing="4">
+            <Stack direction={{ base: "column", md: "row" }} spacing="4">
               {buttons!.map((button, idx) => {
                 if (!button) return
                 return <CallToAction key={idx} index={idx} {...button} />
               })}
-            </HStack>
+            </Stack>
           </Stack>
           {/* TODO:
            * Add conditional Big Stat box here

src/components/Hero/HomeHero/index.tsx

@@ -13,7 +13,7 @@ const HomeHero = ({ heroImg }: HomeHeroProps) => {
   const { t } = useTranslation("page-index")
   return (
     <Box>
-      <Box h={440}>
+      <Box h={{ base: "300px", sm: "350px", md: "380px", lg: "440px" }}>
         <Image
           src={heroImg}
           alt={t("page-index:page-index-hero-image-alt")}
@@ -33,11 +33,11 @@ const HomeHero = ({ heroImg }: HomeHeroProps) => {
           maxW="2xl"
         >
           <Morpher />
-          <VStack spacing="6">
+          <VStack spacing="6" maxW={{ lg: "2xl" }}>
             <Heading as="h1" size="2xl">
               {t("page-index:page-index-title")}
             </Heading>
-            <Text size="xl">{t("page-index:page-index-description")}</Text>
+            <Text>{t("page-index:page-index-description")}</Text>
             <ButtonLink href="/learn/">
               {t("page-index:page-index-title-button")}
             </ButtonLink>

src/components/Hero/HubHero/index.tsx

@@ -70,12 +70,16 @@ const HubHero = ({
           </Heading>
           <Text size="lg">{description}</Text>
         </Stack>
-        <HStack justify={{ md: "center", xl: "start" }} spacing="4">
+        <Stack
+          direction={{ base: "column", md: "row" }}
+          justify={{ md: "center", xl: "start" }}
+          spacing="4"
+        >
           {buttons?.map((button, idx) => {
             if (!button) return
             return <CallToAction key={idx} index={idx} {...button} />
           })}
-        </HStack>
+        </Stack>
       </Stack>
     </Box>
   )