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

docs/ds-implementation.md

@@ -17,10 +17,10 @@ Follow the new component directory structure:
 ```markdown
 src/
 └── components/
-    └── ComponentA/
-        ├── index.tsx
-        ├── ComponentA.stories.tsx
-        └── // Any other files as applicable (utils, child components, useHook, etc.)
+└── ComponentA/
+├── index.tsx
+├── ComponentA.stories.tsx
+└── // Any other files as applicable (utils, child components, useHook, etc.)
 ```
 
 ## Components creation/modification from the DS

src/components/Hero/CallToAction.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import Button, { IProps as ButtonProps } from "../Button"
+import { MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"
+import { ReactNode } from "react"
+
+type CallToActionProps = Omit<ButtonProps, "children"> & {
+  content: ReactNode
+  matomo: MatomoEventOptions
+  index: React.Key
+}
+
+export function CallToAction(props: CallToActionProps) {
+  const { content, matomo, index, ...rest } = props
+
+  const handleClick = () => trackCustomEvent(matomo)
+
+  const buttonProps: ButtonProps = {
+    variant: index === 0 ? "solid" : "outline",
+    isSecondary: index !== 0,
+    flex: { base: 1, md: "initial" },
+  }
+
+  return (
+    <Button onClick={handleClick} {...buttonProps} {...rest}>
+      {content}
+    </Button>
+  )
+}
+
+/**
+ * Props to be passed to through the hero component. `index` prop not used here.
+ */
+export type CTAParentProps = Omit<CallToActionProps, "index">

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
+        breadcrumbSlug="/en/run-a-node/"
+        heroImgSrc={mockGatsbyImgData}
+        header={t("hero-header")}
+        description={t("hero-subtitle")}
+        buttons={buttons}
+      />
+    )
+  },
+}

src/components/Hero/ContentHero/index.tsx

@@ -0,0 +1,59 @@
+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 CommonHeroProps {
+  breadcrumbSlug: BreadcrumbsProps["slug"]
+}
+
+const ContentHero = (props: ContentHeroProps) => {
+  const { breadcrumbSlug, heroImgSrc, buttons, header, 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">
+          {/* TODO:
+           * Recommend the Breadcrumbs component
+           * not have a spacing style (`mb`) and
+           * let the parent handle the spacing.
+           *
+           * This change would be done when the component is applied
+           * to prod.
+           */}
+          <Breadcrumbs slug={breadcrumbSlug} mb="0" />
+          <Stack spacing="6">
+            <Heading size="2xl">{header}</Heading>
+            <Text fontSize="lg">{description}</Text>
+            <HStack spacing="4">
+              {buttons
+                ? buttons.map((button, idx) => (
+                    <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/GatsbyImage.tsx

@@ -0,0 +1,20 @@
+import {
+  GatsbyImage as Image,
+  type GatsbyImageProps,
+} from "gatsby-plugin-image"
+import { chakra, ChakraComponent } from "@chakra-ui/react"
+
+/**
+ * The `GatsbyImage` component optimized for Chakra.
+ *
+ * @deprecated
+ * To be deprecated in favor of a global component version.
+ */
+export const GatsbyImage: ChakraComponent<"img", GatsbyImageProps> = chakra(
+  Image,
+  {
+    shouldForwardProp: (prop) => {
+      return ["image", "loading", "objectFit", "alt"].includes(prop)
+    },
+  }
+)

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 "../../ButtonLink"
+import Morpher from "../../Morpher"
+import Translation from "../../Translation"
+import { GatsbyImage } from "../GatsbyImage"
+import { CommonHeroProps } from "../utils"
+
+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