feat(Hero): create multiple hero components for new DS

.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",
 ]

.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,
   }),

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>
+  )
+}

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}
+      />
+    )
+  },
+}

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

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} />,
+}

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

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}
+      />
+    )
+  },
+}