Merge pull request #12875 from TylerAPfledderer/refactor/update-hero-ds

refactor(Hero): sync styles to latest DS

Author: pettinarip

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

@@ -1,3 +1,4 @@
+import { getI18n } from "react-i18next"
 import { Meta, StoryObj } from "@storybook/react"
 
 import { getTranslation } from "@/storybook-utils"
@@ -22,6 +23,15 @@ 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: () => {
     const PAGE_LEARN_NS = "page-learn"
     const buttons: ContentHeroProps["buttons"] = [
@@ -45,7 +55,7 @@ export const ContentHero: StoryObj = {
     ]
     return (
       <ContentHeroComponent
-        breadcrumbs={{ slug: "/en/run-a-node/" }}
+        breadcrumbs={{ slug: "/run-a-node/" }}
         heroImg="/images/upgrades/merge.png"
         // Can not properly hardcode this URL. So it's left blank
         blurDataURL=""

src/components/Hero/ContentHero/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Heading, HStack, SimpleGrid, Stack, Text } from "@chakra-ui/react"
+import { Box, Heading, SimpleGrid, Stack, Text } from "@chakra-ui/react"
 
 import type { CommonHeroProps } from "@/lib/types"
 
@@ -45,12 +45,12 @@ const ContentHero = (props: ContentHeroProps) => {
               description
             )}
             {buttons && (
-              <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:

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")}
@@ -34,11 +34,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 size="lg">{t("page-index:page-index-description")}</Text>
             <ButtonLink href="/learn/">
               {t("page-index:page-index-title-button")}
             </ButtonLink>

src/components/Hero/HubHero/index.tsx

@@ -38,7 +38,7 @@ const HubHero = ({
         }}
       />
       <Stack
-        spacing={{ base: "3", md: "4" }}
+        spacing="4"
         p={{ base: "4", lg: "8" }}
         textAlign={{ base: "center", xl: "start" }}
         borderRadius={{ xl: "base" }}
@@ -73,12 +73,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>
   )