Skip to content

feat: ContentHero design update #16032

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 26, 2025
Merged

feat: ContentHero design update #16032

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d60693d
feat: ContentHero design update
wackerow Aug 8, 2025
dc57d24
Merge branch 'dev' into content-hero
wackerow Aug 14, 2025
efd7029
Merge branch 'dev' into content-hero
wackerow Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/[locale]/layer-2/learn/_components/learn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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: [
Expand Down
4 changes: 2 additions & 2 deletions app/[locale]/layer-2/networks/_components/networks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand All @@ -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"),
}
Expand Down
Binary file added public/images/heroes/translatathon-hero.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
198 changes: 0 additions & 198 deletions public/images/heroes/translatathon-hero.svg
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions src/components/Hero/ContentHero/ContentHero.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
Expand Down
75 changes: 37 additions & 38 deletions src/components/Hero/ContentHero/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Comment on lines -26 to -27
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't we keep these dimensions to keep the same aspect ratio or a calculated width & height to avoid layout shifts?

// 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>
)
Expand Down
1 change: 0 additions & 1 deletion src/layouts/Static.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,6 @@ export const StaticLayout = ({
<HubHero
heroImg={GuideHeroImage}
header={frontmatter.title}
title={""}
description={frontmatter.description}
/>
) : (
Expand Down
7 changes: 5 additions & 2 deletions src/layouts/md/Roadmap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -110,7 +114,6 @@ export const RoadmapLayout = ({
<HubHero
heroImg={RoadmapHubHeroImage}
header={frontmatter.title}
title=""
description={frontmatter.description}
/>
) : (
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/md/Staking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/layouts/md/Translatathon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -148,8 +149,7 @@ 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>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/md/Upgrade.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a bit unsure about this pattern and whether it's truly needed.

For dynamic images, I assume we'll need to pass width and height for aspect ratio. If so, I'd define these in the ContentHero component, as all images there will likely require consistent dimensions.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the image is statically imported, Next.js will automatically determine the intrinsic width and height. These values are used to determine the image ratio and prevent Cumulative Layout Shift while your image is loading.

Not sure either I guess... it's not really meant to dictate the rendered size, more to tell the aspect ratio and prevent layout shift.. but if we're already confining the image to a fixed box size then likely doesn't matter?

description: (
<>
<div>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/md/UseCases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: frontmatter.summary ? (
<p className="text-lg">{frontmatter.summary}</p>
) : (
Expand Down
2 changes: 1 addition & 1 deletion src/lib/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,7 @@ export type CommonHeroProps<
/**
* The primary title of the page
*/
title: string
title?: string
/**
* A tag name for the page
*/
Expand Down