Skip to content

Commit 71c881d

Browse files
corwintinescorwintines
authored
Merge pull request #16032 from ethereum/content-hero
feat: ContentHero design update
2 parents 4d1fc6d + efd7029 commit 71c881d

File tree

13 files changed

+63
-257
lines changed

13 files changed

+63
-257
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { ButtonLink } from "@/components/ui/buttons/Button"
1515
import useTranslation from "@/hooks/useTranslation"
1616
import { usePathname } from "@/i18n/routing"
1717
import Callout2Image from "@/public/images/layer-2/learn-hero.png"
18+
import heroImg from "@/public/images/layer-2/learn-hero.png"
1819
import OptimisticRollupImage from "@/public/images/layer-2/optimistic_rollup.png"
1920
import RollupImage from "@/public/images/layer-2/rollup-2.png"
2021
import ZKRollupImage from "@/public/images/layer-2/zk_rollup.png"
@@ -31,8 +32,7 @@ const Layer2Learn = ({
3132

3233
const heroProps: ContentHeroProps = {
3334
breadcrumbs: { slug: pathname, startDepth: 1 },
34-
heroImg: "/images/layer-2/learn-hero.png",
35-
blurDataURL: "/images/layer-2/learn-hero.png",
35+
heroImg,
3636
title: t("page-layer-2-learn-title"),
3737
description: t("page-layer-2-learn-description"),
3838
buttons: [

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { ButtonLink } from "@/components/ui/buttons/Button"
1010
import useTranslation from "@/hooks/useTranslation"
1111
import { usePathname } from "@/i18n/routing"
1212
import Callout2Image from "@/public/images/layer-2/layer-2-walking.png"
13+
import heroImg from "@/public/images/layer-2/learn-hero.png"
1314
import Callout1Image from "@/public/images/man-and-dog-playing.png"
1415

1516
const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
@@ -18,8 +19,7 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
1819

1920
const heroProps: ContentHeroProps = {
2021
breadcrumbs: { slug: pathname, startDepth: 1 },
21-
heroImg: "/images/layer-2/learn-hero.png",
22-
blurDataURL: "/images/layer-2/learn-hero.png",
22+
heroImg,
2323
title: t("common:nav-networks-explore-networks-label"),
2424
description: t("page-layer-2-networks-hero-description"),
2525
}

‎public/images/heroes/translatathon-hero.png

102 KB
Loading

‎public/images/heroes/translatathon-hero.svg

Lines changed: 0 additions & 198 deletions
This file was deleted.

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { langViewportModes } from "@/storybook/modes"
55

66
import ContentHeroComponent, { ContentHeroProps } from "."
77

8+
import heroImg from "@/public/images/upgrades/merge.png"
9+
810
const meta = {
911
title: "Organisms / Layouts / Hero",
1012
component: ContentHeroComponent,
@@ -55,9 +57,7 @@ export const ContentHero: StoryObj = {
5557
return (
5658
<ContentHeroComponent
5759
breadcrumbs={{ slug: "/run-a-node/" }}
58-
heroImg="/images/upgrades/merge.png"
59-
// Can not properly hardcode this URL. So it's left blank
60-
blurDataURL=""
60+
heroImg={heroImg}
6161
title={t("hero-header")}
6262
description={t("hero-subtitle")}
6363
buttons={buttons}

‎src/components/Hero/ContentHero/index.tsx

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,60 @@ import type { CommonHeroProps } from "@/lib/types"
44

55
import Breadcrumbs from "@/components/Breadcrumbs"
66
import { Image } from "@/components/Image"
7-
import { Stack } from "@/components/ui/flex"
7+
8+
import { breakpointAsNumber, screens } from "@/lib/utils/screen"
89

910
import { CallToAction } from "../CallToAction"
1011

11-
export type ContentHeroProps = Omit<CommonHeroProps<string>, "header">
12+
export type ContentHeroProps = Omit<
13+
CommonHeroProps,
14+
"header" | "blurDataURL"
15+
> & {
16+
blurDataURL?: CommonHeroProps["blurDataURL"]
17+
}
1218

1319
const ContentHero = (props: ContentHeroProps) => {
1420
const { breadcrumbs, heroImg, buttons, title, description, blurDataURL } =
1521
props
22+
if (blurDataURL) heroImg.blurDataURL = blurDataURL
23+
1624
return (
17-
<div className="bg-gradient-main">
18-
<div className="mx-auto grid max-w-screen-2xl grid-cols-1 items-center lg:grid-cols-2">
19-
<div className="h-[300px] md:h-[400px] lg:order-1 lg:h-full">
20-
<Image
21-
className="box h-full max-h-[451px] w-full flex-auto object-contain md:flex-none"
22-
src={heroImg}
23-
alt=""
24-
priority
25-
blurDataURL={blurDataURL}
26-
width={760}
27-
height={451}
28-
// TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
29-
sizes="(max-width: 992px) 100vw, 760px"
30-
/>
25+
<div className="mx-auto grid w-full max-w-screen-2xl grid-cols-1 items-center border-b pb-16 lg:grid-cols-2">
26+
<div className="flex h-[300px] items-center justify-center md:h-[400px] lg:col-start-2 lg:h-full">
27+
<Image
28+
className="my-auto h-full max-h-[479px] w-full flex-auto object-contain md:flex-none"
29+
src={heroImg}
30+
alt=""
31+
priority
32+
sizes={`(max-width: ${screens.lg}) 100vw, ${breakpointAsNumber["2xl"] / 2}px`}
33+
/>
34+
</div>
35+
<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">
36+
<Breadcrumbs {...breadcrumbs} />
37+
<div className="flex flex-col gap-6">
38+
<h1 className="text-4xl font-black lg:text-7xl">{title}</h1>
39+
{typeof description === "string" ? (
40+
<p className="text-lg">{description}</p>
41+
) : (
42+
description
43+
)}
44+
{buttons && (
45+
<div className="flex flex-col gap-4 md:flex-row">
46+
{buttons.map((button, idx) => {
47+
if (!button) return
48+
// If it's a React element, render it directly
49+
if (typeof button === "object" && "type" in button) {
50+
return <div key={idx}>{button as ReactElement}</div>
51+
}
52+
// Otherwise, render as button props
53+
return <CallToAction key={idx} index={idx} {...button} />
54+
})}
55+
</div>
56+
)}
3157
</div>
32-
<Stack className="justify-center gap-9 p-8 lg:p-16">
33-
<Breadcrumbs {...breadcrumbs} />
34-
<Stack className="gap-6">
35-
<h1>{title}</h1>
36-
{typeof description === "string" ? (
37-
<p className="text-lg">{description}</p>
38-
) : (
39-
description
40-
)}
41-
{buttons && (
42-
<Stack className="flex-col gap-4 md:flex-row">
43-
{buttons.map((button, idx) => {
44-
if (!button) return
45-
// If it's a React element, render it directly
46-
if (typeof button === "object" && "type" in button) {
47-
return <div key={idx}>{button as ReactElement}</div>
48-
}
49-
// Otherwise, render as button props
50-
return <CallToAction key={idx} index={idx} {...button} />
51-
})}
52-
</Stack>
53-
)}
54-
</Stack>
55-
{/* TODO:
56-
* Add conditional Big Stat box here
57-
*/}
58-
</Stack>
58+
{/* TODO:
59+
* Add conditional Big Stat box here
60+
*/}
5961
</div>
6062
</div>
6163
)

‎src/layouts/Static.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@ export const StaticLayout = ({
110110
<HubHero
111111
heroImg={GuideHeroImage}
112112
header={frontmatter.title}
113-
title={""}
114113
description={frontmatter.description}
115114
/>
116115
) : (

‎src/layouts/md/Roadmap.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,11 @@ export const RoadmapLayout = ({
9494
const heroProps = {
9595
...frontmatter,
9696
breadcrumbs: { slug, startDepth: 1 },
97-
heroImg: frontmatter.image,
97+
heroImg: {
98+
src: frontmatter.image,
99+
width: 1456,
100+
height: 816,
101+
},
98102
}
99103

100104
return (
@@ -110,7 +114,6 @@ export const RoadmapLayout = ({
110114
<HubHero
111115
heroImg={RoadmapHubHeroImage}
112116
header={frontmatter.title}
113-
title=""
114117
description={frontmatter.description}
115118
/>
116119
) : (

‎src/layouts/md/Staking.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export const StakingLayout = ({
153153
const heroProps = {
154154
...frontmatter,
155155
breadcrumbs: { slug, startDepth: 1 },
156-
heroImg: frontmatter.image,
156+
heroImg: { src: frontmatter.image, width: 800, height: 605 },
157157
description: (
158158
<>
159159
<div>

‎src/layouts/md/Translatathon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { Flex } from "@/components/ui/flex"
1616

1717
import { ContentLayout } from "../ContentLayout"
1818

19+
import heroImg from "@/public/images/heroes/translatathon-hero.png"
1920
import WhyWeDoItImage from "@/public/images/translatathon/man-baby-woman.png"
2021
import HowDoesItWorkImage from "@/public/images/translatathon/round-table.png"
2122
import robotImage from "@/public/images/wallet.png"
@@ -148,8 +149,7 @@ export const TranslatathonLayout = ({
148149
const heroProps = {
149150
...frontmatter,
150151
breadcrumbs: { slug, startDepth: 1 },
151-
heroImg: "/images/heroes/translatathon-hero.svg",
152-
blurDataURL: "",
152+
heroImg,
153153
description: (
154154
<>
155155
<p>Welcome to the Translatathon!</p>

0 commit comments

Comments
 (0)