diff --git a/.storybook/i18next.ts b/.storybook/i18next.ts
index 4f1030040fc..5f8c98f4116 100644
--- a/.storybook/i18next.ts
+++ b/.storybook/i18next.ts
@@ -1,6 +1,5 @@
 import i18n, { Resource } from "i18next"
 import { initReactI18next } from "gatsby-plugin-react-i18next"
-import fs from "fs"
 
 export const baseLocales = {
   en: { title: "English", left: "En" },
@@ -15,6 +14,7 @@ const ns = [
   "glossary",
   "page-about",
   "page-index",
+  "page-learn",
   "page-upgrades",
   "page-developers-index",
 ]
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 9f3bb88a066..b8c350a0fce 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -13,7 +13,7 @@ const config: StorybookConfig = {
     "@chakra-ui/storybook-addon",
     "storybook-react-i18next",
   ],
-  staticDirs: ["../static"],
+  staticDirs: ["../static", "../src/assets"],
   babel: async () => ({
     ...babelConfig,
   }),
diff --git a/src/assets/heroes/learn-hub-hero.png b/src/assets/heroes/learn-hub-hero.png
new file mode 100644
index 00000000000..41b03361cda
Binary files /dev/null and b/src/assets/heroes/learn-hub-hero.png differ
diff --git a/src/assets/mainnet.png b/src/assets/mainnet.png
new file mode 100644
index 00000000000..c8290ba2271
Binary files /dev/null and b/src/assets/mainnet.png differ
diff --git a/src/components/Hero/CallToAction.tsx b/src/components/Hero/CallToAction.tsx
new file mode 100644
index 00000000000..17aa71a76d4
--- /dev/null
+++ b/src/components/Hero/CallToAction.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import { MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"
+import { Button, type IButtonProps } from "../Buttons"
+
+export type CallToActionProps = Omit<IButtonProps, "children" | "content"> & {
+  content: React.ReactNode
+  matomo: MatomoEventOptions
+}
+
+export function CallToAction(props: CallToActionProps & { index: React.Key }) {
+  const { content, matomo, index, ...rest } = props
+
+  const handleClick = () => trackCustomEvent(matomo)
+
+  const buttonProps: IButtonProps = {
+    variant: index === 0 ? "solid" : "outline",
+    isSecondary: index !== 0,
+    flex: { base: 1, md: "initial" },
+  }
+
+  return (
+    <Button onClick={handleClick} {...buttonProps} {...rest}>
+      {content}
+    </Button>
+  )
+}
diff --git a/src/components/Hero/ContentHero/ContentHero.stories.tsx b/src/components/Hero/ContentHero/ContentHero.stories.tsx
new file mode 100644
index 00000000000..8554a32807f
--- /dev/null
+++ b/src/components/Hero/ContentHero/ContentHero.stories.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import ContentHeroComponent, { ContentHeroProps } from "."
+import { IGatsbyImageData } from "gatsby-plugin-image"
+import { useTranslation } from "gatsby-plugin-react-i18next"
+
+type ContentHeroType = typeof ContentHeroComponent
+
+const meta = {
+  title: "Organisms / Layouts / Hero",
+  component: ContentHeroComponent,
+  parameters: {
+    layout: "none",
+  },
+  argTypes: {
+    heroImgSrc: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<ContentHeroType>
+
+export default meta
+
+// Comes from the original compiled querying
+const mockGatsbyImgData: IGatsbyImageData = {
+  layout: "constrained",
+  images: {
+    fallback: {
+      src: "/mainnet.png",
+      sizes: "100vw",
+    },
+    sources: [
+      {
+        srcSet: "/mainnet.png",
+        type: "image/webp",
+        sizes: "100vw",
+      },
+    ],
+  },
+  width: 1,
+  height: 1,
+}
+
+export const ContentHero: StoryObj = {
+  render: () => {
+    const { t } = useTranslation()
+
+    const buttons: ContentHeroProps["buttons"] = [
+      {
+        content: t("hero-button-lets-get-started"),
+        toId: "what-is-crypto-ethereum",
+        matomo: {
+          eventCategory: "learn hub hero buttons",
+          eventAction: "click",
+          eventName: "lets get started",
+        },
+      },
+      {
+        content: "Button",
+        matomo: {
+          eventCategory: "learn hub hero buttons",
+          eventAction: "click",
+          eventName: "lets get started",
+        },
+      },
+    ]
+    return (
+      <ContentHeroComponent
+        breadcrumbs={{ slug: "/en/run-a-node/" }}
+        heroImgSrc={mockGatsbyImgData}
+        title={t("hero-header")}
+        description={t("hero-subtitle")}
+        buttons={buttons}
+      />
+    )
+  },
+}
diff --git a/src/components/Hero/ContentHero/index.tsx b/src/components/Hero/ContentHero/index.tsx
new file mode 100644
index 00000000000..d5c975e4214
--- /dev/null
+++ b/src/components/Hero/ContentHero/index.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Box, Heading, HStack, SimpleGrid, Stack, Text } from "@chakra-ui/react"
+import Breadcrumbs, { IProps as BreadcrumbsProps } from "../../Breadcrumbs"
+import GatsbyImage from "../../GatsbyImage"
+import { CallToAction } from "../CallToAction"
+import { CommonHeroProps } from "../utils"
+
+export interface ContentHeroProps extends Omit<CommonHeroProps, "header"> {
+  breadcrumbs: BreadcrumbsProps
+}
+
+const ContentHero = (props: ContentHeroProps) => {
+  const { breadcrumbs, heroImgSrc, buttons, title, description } = props
+  return (
+    <Box bgImg="bgMainGradient">
+      <SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto" gap="4">
+        <Box
+          height={{ base: "300px", md: "400px", lg: "full" }}
+          order={{ lg: 1 }}
+        >
+          <GatsbyImage
+            alt=""
+            image={heroImgSrc}
+            loading="eager"
+            objectFit="contain"
+            boxSize="full"
+          />
+        </Box>
+        <Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">
+          <Breadcrumbs {...breadcrumbs} />
+          <Stack spacing="6">
+            <Heading as="h1" size="2xl">
+              {title}
+            </Heading>
+            <Text fontSize="lg">{description}</Text>
+            <HStack spacing="4">
+              {buttons
+                ? buttons.map((button, idx) => {
+                    if (!button) return
+
+                    return <CallToAction key={idx} index={idx} {...button} />
+                  })
+                : null}
+            </HStack>
+          </Stack>
+          {/* TODO:
+           * Add conditional Big Stat box here
+           */}
+        </Stack>
+      </SimpleGrid>
+    </Box>
+  )
+}
+
+export default ContentHero
diff --git a/src/components/Hero/HomeHero/HomeHero.stories.tsx b/src/components/Hero/HomeHero/HomeHero.stories.tsx
new file mode 100644
index 00000000000..12b8f012f56
--- /dev/null
+++ b/src/components/Hero/HomeHero/HomeHero.stories.tsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import HomeHeroComponent from "."
+import { IGatsbyImageData } from "gatsby-plugin-image"
+
+type HomeHeroType = typeof HomeHeroComponent
+
+const meta = {
+  title: "Organisms / Layouts / Hero",
+  component: HomeHeroComponent,
+  parameters: {
+    layout: "none",
+  },
+  argTypes: {
+    heroImgSrc: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<HomeHeroType>
+
+export default meta
+
+// Comes from the original compiled querying
+const mockGatsbyImgData: IGatsbyImageData = {
+  layout: "fullWidth",
+  images: {
+    fallback: {
+      src: "/home/hero.png",
+      sizes: "100vw",
+    },
+    sources: [
+      {
+        srcSet: "/home/hero.png",
+        type: "image/webp",
+        sizes: "100vw",
+      },
+    ],
+  },
+  width: 1,
+  height: 1,
+}
+
+export const HomeHero: StoryObj<typeof meta> = {
+  args: {
+    heroImgSrc: mockGatsbyImgData,
+  },
+  render: (args) => <HomeHeroComponent {...args} />,
+}
diff --git a/src/components/Hero/HomeHero/index.tsx b/src/components/Hero/HomeHero/index.tsx
new file mode 100644
index 00000000000..ffd25565ddd
--- /dev/null
+++ b/src/components/Hero/HomeHero/index.tsx
@@ -0,0 +1,49 @@
+import * as React from "react"
+import { useTranslation } from "react-i18next"
+import { Box, Heading, Stack, Text, VStack } from "@chakra-ui/react"
+import { ButtonLink } from "../../Buttons"
+import Morpher from "../../Morpher"
+import Translation from "../../Translation"
+import GatsbyImage from "../../GatsbyImage"
+import { CommonHeroProps } from "../utils"
+
+export interface HomeHeroProps extends Pick<CommonHeroProps, "heroImgSrc"> {}
+
+const HomeHero = ({ heroImgSrc }: HomeHeroProps) => {
+  const { t } = useTranslation()
+  return (
+    <Box>
+      <GatsbyImage
+        image={heroImgSrc}
+        alt={t("page-index-hero-image-alt")}
+        loading="eager"
+        w="full"
+        height={{ base: "300px", sm: "350px", md: "380px", lg: "440px" }}
+      />
+      <VStack>
+        <Stack
+          spacing={{ base: "4", lg: "7" }}
+          textAlign="center"
+          mx="4"
+          py="8"
+          maxW="2xl"
+        >
+          <Morpher />
+          <VStack spacing="6">
+            <Heading as="h1" size="2xl">
+              <Translation id="page-index-title" />
+            </Heading>
+            <Text size="xl">
+              <Translation id="page-index-description" />
+            </Text>
+            <ButtonLink to="/learn/">
+              <Translation id="page-index-title-button" />
+            </ButtonLink>
+          </VStack>
+        </Stack>
+      </VStack>
+    </Box>
+  )
+}
+
+export default HomeHero
diff --git a/src/components/Hero/HubHero/HubHero.stories.tsx b/src/components/Hero/HubHero/HubHero.stories.tsx
new file mode 100644
index 00000000000..2a87854b78f
--- /dev/null
+++ b/src/components/Hero/HubHero/HubHero.stories.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import HubHeroComponent, { HubHeroProps } from "./"
+import { Box } from "@chakra-ui/react"
+import { IGatsbyImageData } from "gatsby-plugin-image"
+import { useTranslation } from "react-i18next"
+
+type HubHeroType = typeof HubHeroComponent
+
+const meta = {
+  title: "Organisms / Layouts / Hero",
+  component: HubHeroComponent,
+  parameters: {
+    layout: "none",
+  },
+  decorators: [
+    (Story) => (
+      <Box maxW="container.2xl" mx="auto">
+        <Story />
+      </Box>
+    ),
+  ],
+} satisfies Meta<HubHeroType>
+
+export default meta
+
+const mockGatsbyImgData: IGatsbyImageData = {
+  layout: "fullWidth",
+  images: {
+    fallback: {
+      src: "/heroes/learn-hub-hero.png",
+      sizes: "100vw",
+    },
+    sources: [
+      {
+        srcSet: "/heroes/learn-hub-hero.png",
+        type: "image/webp",
+        sizes: "100vw",
+      },
+    ],
+  },
+  width: 1,
+  height: 1,
+}
+
+export const HubHero: StoryObj<typeof meta> = {
+  args: {
+    title: "learn-hub",
+    header: "hero-header",
+    description: "hero-subtitle",
+    heroImgSrc: mockGatsbyImgData,
+  },
+  render: (args) => {
+    const { t } = useTranslation()
+    const { title, header, description, ...rest } = args
+
+    const buttons: HubHeroProps["buttons"] = [
+      {
+        content: t("hero-button-lets-get-started"),
+        toId: "what-is-crypto-ethereum",
+        matomo: {
+          eventCategory: "learn hub hero buttons",
+          eventAction: "click",
+          eventName: "lets get started",
+        },
+      },
+      {
+        content: "Button",
+        matomo: {
+          eventCategory: "learn hub hero buttons",
+          eventAction: "click",
+          eventName: "lets get started",
+        },
+      },
+    ]
+
+    return (
+      <HubHeroComponent
+        title={t(title)}
+        header={t(header)}
+        description={t(description)}
+        buttons={buttons}
+        {...rest}
+      />
+    )
+  },
+}
diff --git a/src/components/Hero/HubHero/index.tsx b/src/components/Hero/HubHero/index.tsx
new file mode 100644
index 00000000000..b51c690074a
--- /dev/null
+++ b/src/components/Hero/HubHero/index.tsx
@@ -0,0 +1,89 @@
+import * as React from "react"
+import {
+  Box,
+  Heading,
+  HStack,
+  Stack,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react"
+import GatsbyImage from "../../GatsbyImage"
+import { CallToAction } from "../CallToAction"
+import { CommonHeroProps } from "../utils"
+
+export interface HubHeroProps extends CommonHeroProps {}
+
+const HubHero = (props: HubHeroProps) => {
+  const { heroImgSrc, title, header, description, buttons } = props
+
+  if (buttons && buttons.length > 2) {
+    throw Error(
+      "Can not have more than two call-to-action buttons in this hero component."
+    )
+  }
+
+  const largeContentBg = useColorModeValue(
+    "rgba(255, 255, 255, 0.80)",
+    "rgba(34, 34, 34, 0.80)"
+  )
+
+  return (
+    <Box position="relative">
+      <GatsbyImage
+        image={heroImgSrc}
+        alt=""
+        w="full"
+        height={{
+          base: "192px",
+          md: "256px",
+          lg: "320px",
+          xl: "576px",
+          "2xl": "672px",
+        }}
+        loading="eager"
+      />
+      <Stack
+        spacing={{ base: "3", md: "4" }}
+        p={{ base: "4", lg: "8" }}
+        textAlign={{ base: "center", xl: "start" }}
+        borderRadius={{ xl: "base" }}
+        bg={{ xl: largeContentBg }}
+        position={{ xl: "absolute" }}
+        insetStart={{ xl: "8" }}
+        maxW={{ xl: "sm" }}
+        top={{ xl: "50%" }}
+        transform={{ xl: "translateY(-50%)" }}
+        backdropFilter={{ xl: "auto" }}
+        backdropBlur={{ xl: "base" }}
+      >
+        <Heading
+          as="h1"
+          size="sm"
+          color="body.medium"
+          fontWeight="normal"
+          textTransform="uppercase"
+        >
+          {title}
+        </Heading>
+        <Stack
+          alignSelf="center"
+          spacing={{ base: "2", md: "1" }}
+          maxW="container.md"
+        >
+          <Heading size="2xl">{header}</Heading>
+          <Text size="lg">{description}</Text>
+        </Stack>
+        <HStack justify={{ md: "center", xl: "start" }} spacing="4">
+          {buttons
+            ? buttons.map((button, idx) => {
+                if (!button) return
+                return <CallToAction key={idx} {...button} index={idx} />
+              })
+            : null}
+        </HStack>
+      </Stack>
+    </Box>
+  )
+}
+
+export default HubHero
diff --git a/src/components/Hero/MdxHero/MdxHero.stories.tsx b/src/components/Hero/MdxHero/MdxHero.stories.tsx
new file mode 100644
index 00000000000..bdaa1d54538
--- /dev/null
+++ b/src/components/Hero/MdxHero/MdxHero.stories.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import MdxHeroComponent from "./"
+import { HStack } from "@chakra-ui/react"
+
+type MdxHeroType = typeof MdxHeroComponent
+
+const meta = {
+  title: "Organisms / Layouts / Hero",
+  parameters: {
+    layout: "none",
+  },
+  decorators: [
+    (Story) => (
+      <HStack maxW="container.2xl" m="auto" height="100vh">
+        <Story />
+      </HStack>
+    ),
+  ],
+} satisfies Meta<MdxHeroType>
+
+export default meta
+
+export const MdxHero: StoryObj<MdxHeroType> = {
+  args: {
+    breadcrumbs: { slug: "/en/staking/solo/" },
+    title: "Solo stake your Eth",
+  },
+  render: (args) => <MdxHeroComponent {...args} />,
+}
diff --git a/src/components/Hero/MdxHero/index.tsx b/src/components/Hero/MdxHero/index.tsx
new file mode 100644
index 00000000000..40fadf700bb
--- /dev/null
+++ b/src/components/Hero/MdxHero/index.tsx
@@ -0,0 +1,22 @@
+import { Heading, Stack } from "@chakra-ui/react"
+import * as React from "react"
+import Breadcrumbs, { IProps as BreadcrumbsProps } from "../../Breadcrumbs"
+import { CommonHeroProps } from "../utils"
+
+export interface MdxHeroProps extends Pick<CommonHeroProps, "title"> {
+  breadcrumbs: BreadcrumbsProps
+}
+
+const MdxHero = (props: MdxHeroProps) => {
+  const { breadcrumbs, title } = props
+  return (
+    <Stack py="8" px="6" spacing="6" w="full">
+      <Breadcrumbs {...breadcrumbs} />
+      <Heading as="h1" size="2xl">
+        {title}
+      </Heading>
+    </Stack>
+  )
+}
+
+export default MdxHero
diff --git a/src/components/Hero/index.ts b/src/components/Hero/index.ts
new file mode 100644
index 00000000000..d49fb7397bf
--- /dev/null
+++ b/src/components/Hero/index.ts
@@ -0,0 +1,4 @@
+export { default as ContentHero, type ContentHeroProps } from "./ContentHero"
+export { default as HomeHero, type HomeHeroProps } from "./HomeHero"
+export { default as HubHero, type HubHeroProps } from "./HubHero"
+export { default as MdxHero, type MdxHeroProps } from "./MdxHero"
diff --git a/src/components/Hero/utils.ts b/src/components/Hero/utils.ts
new file mode 100644
index 00000000000..94e1afb2a2d
--- /dev/null
+++ b/src/components/Hero/utils.ts
@@ -0,0 +1,10 @@
+import { IGatsbyImageData } from "gatsby-plugin-image"
+import { CallToActionProps } from "./CallToAction"
+
+export type CommonHeroProps = {
+  heroImgSrc: IGatsbyImageData
+  header: string
+  title: string
+  description: string
+  buttons?: [CallToActionProps, CallToActionProps?]
+}
diff --git a/src/components/Morpher.tsx b/src/components/Morpher.tsx
index 3e52a18d332..8e55b5ca07b 100644
--- a/src/components/Morpher.tsx
+++ b/src/components/Morpher.tsx
@@ -143,7 +143,7 @@ const Morpher = () => {
     <BaseLink
       textDecor="none"
       fontSize="md"
-      color="text"
+      color="body.medium"
       _hover={{ color: "primary.base" }}
       to="/languages/"
     >
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6bbcc690853..ee89c5452a8 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,7 +10,6 @@ import {
   Heading,
   HeadingProps,
   Icon,
-  Img,
   SimpleGridProps,
   Stack,
   useToken,
@@ -25,14 +24,13 @@ import CalloutBanner from "../components/CalloutBanner"
 import CodeModal from "../components/CodeModal"
 import Codeblock from "../components/Codeblock"
 import CommunityEvents from "../components/CommunityEvents"
-import Morpher from "../components/Morpher"
 import PageMetadata from "../components/PageMetadata"
 import StatsBoxGrid from "../components/StatsBoxGrid"
 import Translation from "../components/Translation"
 import TitleCardList, { ITitleCardItem } from "../components/TitleCardList"
-import Text from "../components/OldText"
 import GatsbyImage from "../components/GatsbyImage"
 import WritersCohortBanner from "../components/Banners/Implementations/WritersCohortBanner"
+import { HomeHero } from "../components/Hero"
 
 import { isLangRightToLeft } from "../utils/translations"
 import { getImage } from "../utils/image"
@@ -153,30 +151,6 @@ const ButtonLinkRow = (props: ChildOnlyProp) => (
   />
 )
 
-const PageHeader = () => (
-  <Flex
-    as="header"
-    flexDirection="column"
-    alignItems="center"
-    textAlign="center"
-    mt={4}
-    mb={8}
-    px={8}
-  >
-    <Heading as="h1" fontSize={{ base: "2rem", sm: "2.5rem" }}>
-      <Translation id="page-index-title" />
-    </Heading>
-    <Text color="text200" maxW="55ch" fontSize="xl" mt={4}>
-      <Translation id="page-index-description" />
-    </Text>
-    <ButtonLinkRow>
-      <ButtonLink to="/learn/">
-        <Translation id="page-index-title-button" />
-      </ButtonLink>
-    </ButtonLinkRow>
-  </Flex>
-)
-
 const HomePage = ({
   data,
   pageContext: { language = "en" },
@@ -288,19 +262,9 @@ const HomePage = ({
         title={t("page-index-meta-title")}
         description={t("page-index-meta-description")}
       />
-      <GatsbyImage
-        image={getImage(data.hero)!}
-        alt={t("page-index-hero-image-alt")}
-        loading="eager"
-        width="full"
-        minH="380px"
-        maxH="440px"
-        backgroundSize="cover"
-        background="no-repeat 50px"
-        mb={8}
-      />
-      <Morpher />
-      <PageHeader />
+      <Box w="full">
+        <HomeHero heroImgSrc={getImage(data.hero)!} />
+      </Box>
       {/* Getting Started Section */}
       <GrayContainer>
         <ContentBox>
diff --git a/src/pages/learn/index.tsx b/src/pages/learn/index.tsx
index 0a2e63411bb..d38f2ea8102 100644
--- a/src/pages/learn/index.tsx
+++ b/src/pages/learn/index.tsx
@@ -22,7 +22,7 @@ import InlineLink from "../../components/Link"
 import OriginalCard, {
   IProps as IOriginalCardProps,
 } from "../../components/Card"
-import PageHero from "../../components/PageHero"
+import { HubHero, type HubHeroProps } from "../../components/Hero"
 import PageMetadata from "../../components/PageMetadata"
 import Translation from "../../components/Translation"
 import UpgradeTableOfContents from "../../components/UpgradeTableOfContents"
@@ -166,12 +166,11 @@ const LearnPage = ({ data }: PageProps<Queries.LearnPageQuery, Context>) => {
     },
   ]
 
-  const heroContent = {
+  const heroContent: HubHeroProps = {
     title: t("learn-hub"),
     header: t("hero-header"),
-    subtitle: t("hero-subtitle"),
-    image: getImage(data.heroImage)!,
-    alt: "",
+    description: t("hero-subtitle"),
+    heroImgSrc: getImage(data.heroImage)!,
     buttons: [
       {
         content: t("hero-button-lets-get-started"),
@@ -189,11 +188,7 @@ const LearnPage = ({ data }: PageProps<Queries.LearnPageQuery, Context>) => {
     <Box position="relative" w="full">
       <PageMetadata title={t("learn-hub")} description={t("hero-subtitle")} />
 
-      <Box bg="layer2Gradient">
-        <Box>
-          <Box as={PageHero} pb={8} content={heroContent} isReverse />
-        </Box>
-      </Box>
+      <HubHero {...heroContent} />
 
       <Flex
         direction={{ base: "column", lg: "row" }}
@@ -201,7 +196,7 @@ const LearnPage = ({ data }: PageProps<Queries.LearnPageQuery, Context>) => {
         w="full"
         mb={16}
         mx="auto"
-        pt={{ lg: 16 }}
+        pt={{ base: "10", lg: "16" }}
         dir={isRightToLeft ? "rtl" : "ltr"}
       >
         <Show above={lgBp}>
@@ -811,10 +806,10 @@ export const query = graphql`
         }
       }
     }
-    heroImage: file(relativePath: { eq: "eth.png" }) {
+    heroImage: file(relativePath: { eq: "heroes/learn-hub-hero.png" }) {
       childImageSharp {
         gatsbyImageData(
-          width: 500
+          width: 1504
           layout: CONSTRAINED
           placeholder: BLURRED
           quality: 100