refactor(Heading): replace customer heading component

Author: TylerAPfledderer

src/components/Heading/index.tsx

@@ -8,7 +8,6 @@ import { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
 import Callout from "@/components/Callout"
 import Card, { CardProps } from "@/components/Card"
 import FeedbackCard from "@/components/FeedbackCard"
-import Heading from "@/components/Heading"
 import HubHero from "@/components/Hero/HubHero"
 import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
@@ -120,7 +119,7 @@ const SpeedRunEthereumBanner = ({
       style={{ width: "100vw", objectFit: "cover", objectPosition: "20%" }}
     />
     <Stack className="absolute top-0 max-w-lg items-start space-y-3 break-words p-6 md:top-12 md:ms-8 md:space-y-4 lg:p-8 xl:max-w-xl">
-      <Heading>{title}</Heading>
+      <h2>{title}</h2>
       <ButtonLink href="https://speedrunethereum.com/">{linkLabel}</ButtonLink>
     </Stack>
   </div>

src/pages/developers/index.tsx

@@ -7,7 +7,6 @@ import { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
 import { Framework } from "@/lib/interfaces"
 
 import FeedbackCard from "@/components/FeedbackCard"
-import Heading from "@/components/Heading"
 import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
@@ -87,20 +86,9 @@ const LocalEnvironmentPage = ({
         description={t("page-local-environment-setup-meta-desc")}
       />
       <div className="mb-8 w-full justify-center px-8 pb-8 pt-0 xl:pb-4 xl:pt-4">
-        <Heading
-          as="h1"
-          fontStyle="normal"
-          fontFamily="monospace"
-          textTransform="uppercase"
-          fontWeight="semibold"
-          fontSize="2rem"
-          lineHeight={1.4}
-          textAlign="center"
-          mt={0}
-          mb="1.625rem"
-        >
+        <h1 className="mb-[1.625rem] text-center font-monospace text-[2rem] font-semibold uppercase not-italic leading-[1.4]">
           <Translation id="page-developers-local-environment:page-local-environment-setup-title" />
-        </Heading>
+        </h1>
         <Text className="mb-2 text-center leading-xs text-body-medium">
           <Translation id="page-developers-local-environment:page-local-environment-setup-subtitle" />
           <br />
@@ -110,14 +98,9 @@ const LocalEnvironmentPage = ({
       <Content>
         <Flex className="w-full flex-col-reverse items-start justify-between lg:flex-row lg:items-center">
           <Column>
-            <Heading
-              fontSize={{ base: "2xl", md: "2rem" }}
-              lineHeight={1.4}
-              mt={0}
-              mb="1.625rem"
-            >
+            <h2 className="mb-[1.625rem] text-2xl leading-[1.4] md:text-[2rem]">
               <Translation id="page-developers-local-environment:page-local-environment-frameworks-title" />
-            </Heading>
+            </h2>
             <Text>
               <Translation id="page-developers-local-environment:page-local-environment-frameworks-desc" />
             </Text>

src/pages/developers/local-environment.tsx

@@ -16,7 +16,6 @@ import { BasePageProps, Lang } from "@/lib/types"
 
 import Emoji from "@/components/Emoji"
 import FeedbackCard from "@/components/FeedbackCard"
-import Heading from "@/components/Heading"
 import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
 import Translation from "@/components/Translation"
@@ -218,21 +217,9 @@ const TutorialPage = ({
           "page-developers-tutorials:page-tutorials-meta-description"
         )}
       />
-      <Heading
-        as="h1"
-        fontStyle="normal"
-        fontWeight="semibold"
-        fontFamily="monospace"
-        textTransform="uppercase"
-        fontSize="2rem"
-        lineHeight="140%"
-        textAlign="center"
-        mt={{ base: 4, sm: 0 }}
-        mx={{ base: 4, sm: 0 }}
-        mb={{ base: 4, sm: "1.625rem" }}
-      >
+      <h1 className="no-italic mb-4 text-center font-monospace text-[2rem] font-semibold uppercase leading-[1.4] max-sm:mx-4 max-sm:mt-4 sm:mb-[1.625rem]">
         <Translation id="page-developers-tutorials:page-tutorial-title" />
-      </Heading>
+      </h1>
       <Text className="mb-4 text-center leading-xs text-body-medium">
         <Translation id="page-developers-tutorials:page-tutorial-subtitle" />
       </Text>

src/pages/developers/tutorials.tsx

@@ -17,7 +17,6 @@ import CardList from "@/components/CardList"
 import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
 import FeedbackCard from "@/components/FeedbackCard"
-import Heading from "@/components/Heading"
 import { Image } from "@/components/Image"
 import InfoBanner from "@/components/InfoBanner"
 import MainArticle from "@/components/MainArticle"
@@ -127,14 +126,7 @@ const Row = (props: ChildOnlyProp) => (
 )
 
 const CardTitle = (props: ChildOnlyProp) => (
-  <Heading
-    as="h2"
-    mb={4}
-    fontWeight="600"
-    fontSize="2rem"
-    lineHeight={1.4}
-    {...props}
-  />
+  <h2 className="mb-4 text-[2rem] font-semibold leading-[1.4]" {...props} />
 )
 
 const Caption = (props: ChildOnlyProp) => (