From 3b9aa808ee081ea459373f126ead164d027e77ec Mon Sep 17 00:00:00 2001
From: wilsonTrigo <wilsontrigo@untile.pt>
Date: Mon, 20 Nov 2023 13:33:34 +0000
Subject: [PATCH] Add missing h1 titles

---
 workspaces/website/src/blocks/MarkdownBlock.tsx                 | 1 +
 workspaces/website/src/components/HeroImage/HeroImage.tsx       | 1 +
 .../website/src/components/SectionHeader/SectionHeader.tsx      | 1 +
 workspaces/website/src/components/Typography/Heading.tsx        | 2 +-
 workspaces/website/src/pages/(components)/CMSPage.tsx           | 1 +
 .../website/src/pages/roadmap/(components)/RoadmapPage.tsx      | 2 +-
 6 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/workspaces/website/src/blocks/MarkdownBlock.tsx b/workspaces/website/src/blocks/MarkdownBlock.tsx
index a49c4bbfd8..a1762a1249 100644
--- a/workspaces/website/src/blocks/MarkdownBlock.tsx
+++ b/workspaces/website/src/blocks/MarkdownBlock.tsx
@@ -31,6 +31,7 @@ export function MarkdownBlock({ body }: Props): JSX.Element {
                 id={`toc-${slugify(props.children.join(" "))}`}
               /> */}
               <Heading
+                as={"h1"}
                 id={`toc-${slugify(props.children.join(" "))}`}
                 color="heading-navy-fg"
                 variant="h2"
diff --git a/workspaces/website/src/components/HeroImage/HeroImage.tsx b/workspaces/website/src/components/HeroImage/HeroImage.tsx
index 53e15d1221..3ec5b4d544 100644
--- a/workspaces/website/src/components/HeroImage/HeroImage.tsx
+++ b/workspaces/website/src/components/HeroImage/HeroImage.tsx
@@ -259,6 +259,7 @@ export const HeroImage = ({
                   </Box>
 
                   <Heading
+                    as="h1"
                     color="heading-navy-fg"
                     variant="h2"
                     size={useBreakpointValue({ base: "md", md: "lg" })}
diff --git a/workspaces/website/src/components/SectionHeader/SectionHeader.tsx b/workspaces/website/src/components/SectionHeader/SectionHeader.tsx
index fcbffedcd5..4c8f7b20ac 100644
--- a/workspaces/website/src/components/SectionHeader/SectionHeader.tsx
+++ b/workspaces/website/src/components/SectionHeader/SectionHeader.tsx
@@ -25,6 +25,7 @@ export const SectionHeader = ({
       <Stack spacing="3" pb={6}>
         <Box>
           <Heading
+            as="h1"
             variant="h2"
             color="heading-navy-fg"
             fontWeight="extrabold"
diff --git a/workspaces/website/src/components/Typography/Heading.tsx b/workspaces/website/src/components/Typography/Heading.tsx
index 0e869520ad..c026e1cc02 100644
--- a/workspaces/website/src/components/Typography/Heading.tsx
+++ b/workspaces/website/src/components/Typography/Heading.tsx
@@ -12,5 +12,5 @@ export const Heading: React.FC<CustomHeadingProps> = ({
 }) => {
   const { ...rest } = props;
   const Tag = variant || "h2";
-  return <ChakraHeading {...headingTheme[Tag as keyof typeof headingTheme]} as={variant as typeof as} {...rest} />;
+  return <ChakraHeading {...headingTheme[Tag as keyof typeof headingTheme]} as={as || variant} {...rest} />;
 };
diff --git a/workspaces/website/src/pages/(components)/CMSPage.tsx b/workspaces/website/src/pages/(components)/CMSPage.tsx
index 1943adcd2a..2c46f905d9 100644
--- a/workspaces/website/src/pages/(components)/CMSPage.tsx
+++ b/workspaces/website/src/pages/(components)/CMSPage.tsx
@@ -74,6 +74,7 @@ export default function CMSPage({
             {data.show_title ? <>
               <Box pb="6">
                 <Heading
+                  as="h1"
                   variant="h2"
                   color="heading-navy-fg"
                   fontWeight="extrabold"
diff --git a/workspaces/website/src/pages/roadmap/(components)/RoadmapPage.tsx b/workspaces/website/src/pages/roadmap/(components)/RoadmapPage.tsx
index 3db5469993..a620abb881 100644
--- a/workspaces/website/src/pages/roadmap/(components)/RoadmapPage.tsx
+++ b/workspaces/website/src/pages/roadmap/(components)/RoadmapPage.tsx
@@ -49,7 +49,7 @@ export default function RoadmapPage({
 
         return (
           <Box key={stage.value} mb="5rem">
-            <Heading variant="h4" display="flex" alignItems="center" mb="2rem" color="heading-navy-fg">
+            <Heading as="h1" variant="h4" display="flex" alignItems="center" mb="2rem" color="heading-navy-fg">
               <Icon
                 boxSize="22px"
                 as={stage.icon}