feat: ContentHero design update

app/[locale]/layer-2/learn/_components/learn.tsx

@@ -15,6 +15,7 @@ import { ButtonLink } from "@/components/ui/buttons/Button"
 import useTranslation from "@/hooks/useTranslation"
 import { usePathname } from "@/i18n/routing"
 import Callout2Image from "@/public/images/layer-2/learn-hero.png"
+import heroImg from "@/public/images/layer-2/learn-hero.png"
 import OptimisticRollupImage from "@/public/images/layer-2/optimistic_rollup.png"
 import RollupImage from "@/public/images/layer-2/rollup-2.png"
 import ZKRollupImage from "@/public/images/layer-2/zk_rollup.png"
@@ -31,8 +32,7 @@ const Layer2Learn = ({
 
   const heroProps: ContentHeroProps = {
     breadcrumbs: { slug: pathname, startDepth: 1 },
-    heroImg: "/images/layer-2/learn-hero.png",
-    blurDataURL: "/images/layer-2/learn-hero.png",
+    heroImg,
     title: t("page-layer-2-learn-title"),
     description: t("page-layer-2-learn-description"),
     buttons: [

app/[locale]/layer-2/networks/_components/networks.tsx

@@ -10,6 +10,7 @@ import { ButtonLink } from "@/components/ui/buttons/Button"
 import useTranslation from "@/hooks/useTranslation"
 import { usePathname } from "@/i18n/routing"
 import Callout2Image from "@/public/images/layer-2/layer-2-walking.png"
+import heroImg from "@/public/images/layer-2/learn-hero.png"
 import Callout1Image from "@/public/images/man-and-dog-playing.png"
 
 const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
@@ -18,8 +19,7 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
 
   const heroProps: ContentHeroProps = {
     breadcrumbs: { slug: pathname, startDepth: 1 },
-    heroImg: "/images/layer-2/learn-hero.png",
-    blurDataURL: "/images/layer-2/learn-hero.png",
+    heroImg,
     title: t("common:nav-networks-explore-networks-label"),
     description: t("page-layer-2-networks-hero-description"),
   }

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

@@ -5,6 +5,8 @@ import { langViewportModes } from "@/storybook/modes"
 
 import ContentHeroComponent, { ContentHeroProps } from "."
 
+import heroImg from "@/public/images/upgrades/merge.png"
+
 const meta = {
   title: "Organisms / Layouts / Hero",
   component: ContentHeroComponent,
@@ -55,9 +57,7 @@ export const ContentHero: StoryObj = {
     return (
       <ContentHeroComponent
         breadcrumbs={{ slug: "/run-a-node/" }}
-        heroImg="/images/upgrades/merge.png"
-        // Can not properly hardcode this URL. So it's left blank
-        blurDataURL=""
+        heroImg={heroImg}
         title={t("hero-header")}
         description={t("hero-subtitle")}
         buttons={buttons}

src/components/Hero/ContentHero/index.tsx

@@ -2,53 +2,52 @@ import type { CommonHeroProps } from "@/lib/types"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
 import { Image } from "@/components/Image"
-import { Stack } from "@/components/ui/flex"
+
+import { breakpointAsNumber, screens } from "@/lib/utils/screen"
 
 import { CallToAction } from "../CallToAction"
 
-export type ContentHeroProps = Omit<CommonHeroProps<string>, "header">
+export type ContentHeroProps = Omit<
+  CommonHeroProps,
+  "header" | "blurDataURL"
+> & {
+  blurDataURL?: CommonHeroProps["blurDataURL"]
+}
 
 const ContentHero = (props: ContentHeroProps) => {
   const { breadcrumbs, heroImg, buttons, title, description, blurDataURL } =
     props
+  if (blurDataURL) heroImg.blurDataURL = blurDataURL
+
   return (
-    <div className="bg-gradient-main">
-      <div className="mx-auto grid max-w-screen-2xl grid-cols-1 items-center lg:grid-cols-2">
-        <div className="h-[300px] md:h-[400px] lg:order-1 lg:h-full">
-          <Image
-            className="box h-full max-h-[451px] w-full flex-auto object-contain md:flex-none"
-            src={heroImg}
-            alt=""
-            priority
-            blurDataURL={blurDataURL}
-            width={760}
-            height={451}
-            // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
-            sizes="(max-width: 992px) 100vw, 760px"
-          />
+    <div className="mx-auto grid w-full max-w-screen-2xl grid-cols-1 items-center border-b pb-16 lg:grid-cols-2">
+      <div className="flex h-[300px] items-center justify-center md:h-[400px] lg:col-start-2 lg:h-full">
+        <Image
+          className="my-auto h-full max-h-[479px] w-full flex-auto object-contain md:flex-none"
+          src={heroImg}
+          alt=""
+          priority
+          sizes={`(max-width: ${screens.lg}) 100vw, ${breakpointAsNumber["2xl"] / 2}px`}
+        />
+      </div>
+      <div className="flex h-full flex-col gap-9 p-8 lg:col-start-1 lg:row-start-1 lg:px-11 lg:py-16">
+        <Breadcrumbs {...breadcrumbs} />
+        <div className="flex flex-col gap-6">
+          <h1 className="text-4xl font-black lg:text-7xl">{title}</h1>
+          {typeof description === "string" ? (
+            <p className="text-lg">{description}</p>
+          ) : (
+            description
+          )}
+          {buttons && (
+            <div className="flex flex-col gap-4 md:flex-row">
+              {buttons.map((button, idx) => {
+                if (!button) return
+                return <CallToAction key={idx} index={idx} {...button} />
+              })}
+            </div>
+          )}
         </div>
-        <Stack className="justify-center gap-9 p-8 lg:p-16">
-          <Breadcrumbs {...breadcrumbs} />
-          <Stack className="gap-6">
-            <h1>{title}</h1>
-            {typeof description === "string" ? (
-              <p className="text-lg">{description}</p>
-            ) : (
-              description
-            )}
-            {buttons && (
-              <Stack className="flex-col gap-4 md:flex-row">
-                {buttons.map((button, idx) => {
-                  if (!button) return
-                  return <CallToAction key={idx} index={idx} {...button} />
-                })}
-              </Stack>
-            )}
-          </Stack>
-          {/* TODO:
-           * Add conditional Big Stat box here
-           */}
-        </Stack>
       </div>
     </div>
   )

src/layouts/Static.tsx

@@ -110,7 +110,6 @@ export const StaticLayout = ({
             <HubHero
               heroImg={GuideHeroImage}
               header={frontmatter.title}
-              title={""}
               description={frontmatter.description}
             />
           ) : (

src/layouts/md/Roadmap.tsx

@@ -94,7 +94,11 @@ export const RoadmapLayout = ({
   const heroProps = {
     ...frontmatter,
     breadcrumbs: { slug, startDepth: 1 },
-    heroImg: frontmatter.image,
+    heroImg: {
+      src: frontmatter.image,
+      width: 1456,
+      height: 816,
+    },
   }
 
   return (
@@ -110,7 +114,6 @@ export const RoadmapLayout = ({
           <HubHero
             heroImg={RoadmapHubHeroImage}
             header={frontmatter.title}
-            title=""
             description={frontmatter.description}
           />
         ) : (

src/layouts/md/Staking.tsx

@@ -153,7 +153,7 @@ export const StakingLayout = ({
   const heroProps = {
     ...frontmatter,
     breadcrumbs: { slug, startDepth: 1 },
-    heroImg: frontmatter.image,
+    heroImg: { src: frontmatter.image, width: 800, height: 605 },
     description: (
       <>
         <div>

src/layouts/md/Translatathon.tsx

@@ -16,6 +16,7 @@ import { Flex } from "@/components/ui/flex"
 
 import { ContentLayout } from "../ContentLayout"
 
+import heroImg from "@/public/images/heroes/translatathon-hero.png"
 import WhyWeDoItImage from "@/public/images/translatathon/man-baby-woman.png"
 import HowDoesItWorkImage from "@/public/images/translatathon/round-table.png"
 import robotImage from "@/public/images/wallet.png"
@@ -148,14 +149,13 @@ export const TranslatathonLayout = ({
   const heroProps = {
     ...frontmatter,
     breadcrumbs: { slug, startDepth: 1 },
-    heroImg: "/images/heroes/translatathon-hero.svg",
-    blurDataURL: "",
+    heroImg,
     description: (
       <>
         <p>Welcome to the ethereum.org Translatathon!</p>
         <p>
-          The translatathon is a translation competition where you can
-          compete for prizes by translating ethereum.org content into different
+          The translatathon is a translation competition where you can compete
+          for prizes by translating ethereum.org content into different
           languages.
         </p>
       </>

src/layouts/md/Upgrade.tsx

@@ -73,7 +73,7 @@ export const UpgradeLayout = ({
   const heroProps = {
     ...frontmatter,
     breadcrumbs: { slug, startDepth: 1 },
-    heroImg: frontmatter.image,
+    heroImg: { src: frontmatter.image, width: 5750, height: 4332 },
     description: (
       <>
         <div>

src/layouts/md/UseCases.tsx

@@ -170,7 +170,7 @@ export const UseCasesLayout = ({
   const heroProps = {
     ...frontmatter,
     breadcrumbs: { slug, startDepth: 1 },
-    heroImg: frontmatter.image,
+    heroImg: { src: frontmatter.image, width: 760, height: 450 },
     description: (
       <div>
         <List>

src/lib/types.ts

@@ -467,7 +467,7 @@ export type CommonHeroProps<
   /**
    * The primary title of the page
    */
-  title: string
+  title?: string
   /**
    * A tag name for the page
    */