refactor(ContentHero): constrain image component styling

Author: TylerAPfledderer

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

@@ -49,7 +49,9 @@ export const ContentHero: StoryObj = {
     return (
       <ContentHeroComponent
         breadcrumbs={{ slug: "/en/run-a-node/" }}
-        heroImg="/mainnet.png"
+        heroImg="/upgrades/merge.png"
+        // Can not properly hardcode this URL. So it's left blank
+        blurDataURL=""
         title={t("hero-header")}
         description={t("hero-subtitle")}
         buttons={buttons}

src/components/Hero/ContentHero/index.tsx

@@ -10,20 +10,26 @@ import { CallToAction } from "../CallToAction"
 export type ContentHeroProps = Omit<CommonHeroProps<string>, "header">
 
 const ContentHero = (props: ContentHeroProps) => {
-  const { breadcrumbs, heroImg, buttons, title, description } = props
+  const { breadcrumbs, heroImg, buttons, title, description, blurDataURL } =
+    props
   return (
     <Box bgImg="bgMainGradient">
-      <SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto" gap="4">
+      <SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto">
         <Box
-          height={{ base: "300px", md: "400px", lg: "full" }}
           order={{ lg: 1 }}
+          height={{ base: "300px", md: "400px", lg: "full" }}
         >
           <Image
             src={heroImg}
             alt=""
             priority
-            style={{ objectFit: "contain" }}
+            blurDataURL={blurDataURL}
+            width={760}
+            height={451}
+            sizes="100vw"
             boxSize="full"
+            style={{ objectFit: "contain" }}
+            flex={{ base: "1 1 100%", md: "none" }}
           />
         </Box>
         <Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">

src/components/Hero/HomeHero/index.tsx

@@ -1,4 +1,3 @@
-import type { StaticImageData } from "next/image"
 import { useTranslation } from "next-i18next"
 import { Box, Heading, Stack, Text, VStack } from "@chakra-ui/react"
 

src/components/Hero/HubHero/index.tsx

@@ -5,7 +5,7 @@ import type { CommonHeroProps } from "@/lib/types"
 import { CallToAction } from "@/components/Hero/CallToAction"
 import { Image } from "@/components/Image"
 
-export type HubHeroProps = Omit<CommonHeroProps, "breadcrumbs">
+export type HubHeroProps = Omit<CommonHeroProps, "breadcrumbs" | "blurDataURL">
 
 const HubHero = ({
   heroImg,

src/lib/types.ts

@@ -391,6 +391,10 @@ export type CommonHeroProps<
    * for the given hero component.
    */
   heroImg: HeroImg
+  /**
+   * File path for the image to show on prerender.
+   */
+  blurDataURL: string
   /**
    * Object of props to render the `Breadcrumbs` component.
    */