diff --git a/app/[locale]/layer-2/learn/_components/learn.tsx b/app/[locale]/layer-2/learn/_components/learn.tsx index 76f0bbcaf2c..2751930fb07 100644 --- a/app/[locale]/layer-2/learn/_components/learn.tsx +++ b/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: [ diff --git a/app/[locale]/layer-2/networks/_components/networks.tsx b/app/[locale]/layer-2/networks/_components/networks.tsx index 66de0628a8f..d1b707a622c 100644 --- a/app/[locale]/layer-2/networks/_components/networks.tsx +++ b/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"), } diff --git a/public/images/heroes/translatathon-hero.png b/public/images/heroes/translatathon-hero.png new file mode 100644 index 00000000000..4302d070b18 Binary files /dev/null and b/public/images/heroes/translatathon-hero.png differ diff --git a/public/images/heroes/translatathon-hero.svg b/public/images/heroes/translatathon-hero.svg deleted file mode 100644 index 16dcb2c4de1..00000000000 --- a/public/images/heroes/translatathon-hero.svg +++ /dev/null @@ -1,198 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/Hero/ContentHero/ContentHero.stories.tsx b/src/components/Hero/ContentHero/ContentHero.stories.tsx index a6767b46b31..785017be34c 100644 --- a/src/components/Hero/ContentHero/ContentHero.stories.tsx +++ b/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 ( , "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 ( -
-
-
- +
+
+ +
+
+ +
+

{title}

+ {typeof description === "string" ? ( +

{description}

+ ) : ( + description + )} + {buttons && ( +
+ {buttons.map((button, idx) => { + if (!button) return + // If it's a React element, render it directly + if (typeof button === "object" && "type" in button) { + return
{button as ReactElement}
+ } + // Otherwise, render as button props + return + })} +
+ )}
- - - -

{title}

- {typeof description === "string" ? ( -

{description}

- ) : ( - description - )} - {buttons && ( - - {buttons.map((button, idx) => { - if (!button) return - // If it's a React element, render it directly - if (typeof button === "object" && "type" in button) { - return
{button as ReactElement}
- } - // Otherwise, render as button props - return - })} - - )} - - {/* TODO: - * Add conditional Big Stat box here - */} - + {/* TODO: + * Add conditional Big Stat box here + */}
) diff --git a/src/layouts/Static.tsx b/src/layouts/Static.tsx index 03ddac7948d..1ad0f0521a7 100644 --- a/src/layouts/Static.tsx +++ b/src/layouts/Static.tsx @@ -110,7 +110,6 @@ export const StaticLayout = ({ ) : ( diff --git a/src/layouts/md/Roadmap.tsx b/src/layouts/md/Roadmap.tsx index fac90dcac5b..18cb9eb0f88 100644 --- a/src/layouts/md/Roadmap.tsx +++ b/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 = ({ ) : ( diff --git a/src/layouts/md/Staking.tsx b/src/layouts/md/Staking.tsx index fc848dc9a95..0df3431c9d1 100644 --- a/src/layouts/md/Staking.tsx +++ b/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: ( <>
diff --git a/src/layouts/md/Translatathon.tsx b/src/layouts/md/Translatathon.tsx index 20af89449fd..1baa6b538d3 100644 --- a/src/layouts/md/Translatathon.tsx +++ b/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,8 +149,7 @@ export const TranslatathonLayout = ({ const heroProps = { ...frontmatter, breadcrumbs: { slug, startDepth: 1 }, - heroImg: "/images/heroes/translatathon-hero.svg", - blurDataURL: "", + heroImg, description: ( <>

Welcome to the Translatathon!

diff --git a/src/layouts/md/Upgrade.tsx b/src/layouts/md/Upgrade.tsx index de874db2dc8..400a515eb86 100644 --- a/src/layouts/md/Upgrade.tsx +++ b/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: ( <>
diff --git a/src/layouts/md/UseCases.tsx b/src/layouts/md/UseCases.tsx index 99427d8cfdc..c6c6504e5d6 100644 --- a/src/layouts/md/UseCases.tsx +++ b/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: frontmatter.summary ? (

{frontmatter.summary}

) : ( diff --git a/src/lib/types.ts b/src/lib/types.ts index f3e29bda929..8648cfd3020 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -468,7 +468,7 @@ export type CommonHeroProps< /** * The primary title of the page */ - title: string + title?: string /** * A tag name for the page */