Skip to content

Commit d60693d

Browse files
wackerowwackerow
committed
feat: ContentHero design update
1 parent 95faa73 commit d60693d

File tree

13 files changed

+57
-254
lines changed

13 files changed

+57
-254
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: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,52 @@ import type { CommonHeroProps } from "@/lib/types"
22

33
import Breadcrumbs from "@/components/Breadcrumbs"
44
import { Image } from "@/components/Image"
5-
import { Stack } from "@/components/ui/flex"
5+
6+
import { breakpointAsNumber, screens } from "@/lib/utils/screen"
67

78
import { CallToAction } from "../CallToAction"
89

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

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

‎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: 4 additions & 4 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,14 +149,13 @@ 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 ethereum.org Translatathon!</p>
156156
<p>
157-
The translatathon is a translation competition where you can
158-
compete for prizes by translating ethereum.org content into different
157+
The translatathon is a translation competition where you can compete
158+
for prizes by translating ethereum.org content into different
159159
languages.
160160
</p>
161161
</>

0 commit comments

Comments
 (0)