update subtitles to paragraph elements

currently rendering as divs, despite being text elements, thus being skipped by crawlers

Author: wackerow

src/components/PageHero.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import { Box, Flex, Heading, Wrap, WrapItem } from "@chakra-ui/react"
+import { Box, Flex, Heading, Text, Wrap, WrapItem } from "@chakra-ui/react"
 
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
@@ -82,15 +82,15 @@ const PageHero: React.FC<IProps> = ({
           >
             {header}
           </Heading>
-          <Box
+          <Text
             fontSize={{ base: "xl", lg: "2xl" }}
             lineHeight={1.4}
             color="text200"
             mt={4}
             mb={8}
           >
             {subtitle}
-          </Box>
+          </Text>
           {buttons && (
             <Wrap spacing={2} overflow="visible">
               {buttons.map((button, idx) => {

src/pages-conditional/dapps.tsx

@@ -146,7 +146,7 @@ const ImageContainer = (props: Pick<FlexProps, "children" | "id">) => (
 )
 
 const Subtitle = (props: ChildOnlyProp) => (
-  <Box
+  <Text
     fontSize={{ base: "xl", lg: "2xl" }}
     lineHeight="140%"
     color="text200"

src/pages-conditional/eth.tsx

@@ -56,12 +56,12 @@ const StyledTwoColumnContent = styled(TwoColumnContent)`
   align-items: flex-start;
 `
 
-const Subtitle = styled.div`
+const Subtitle = styled.p`
   font-size: 1.25rem;
   line-height: 140%;
   color: ${(props) => props.theme.colors.text200};
 `
-const SubtitleTwo = styled.div`
+const SubtitleTwo = styled.p`
   font-size: 1.25rem;
   line-height: 140%;
   margin-bottom: 2rem;

src/pages-conditional/what-is-ethereum.tsx

@@ -70,7 +70,7 @@ const Title = styled.h1`
   color: ${({ theme }) => theme.colors.textTableOfContents};
 `
 
-const Subtitle = styled.div`
+const Subtitle = styled.p`
   font-size: 1.25rem;
   line-height: 140%;
   color: ${({ theme }) => theme.colors.text200};

src/pages/bug-bounty.tsx

@@ -69,7 +69,7 @@ const H2 = (props: ChildOnlyProp) => (
 )
 
 const Subtitle = (props: ChildOnlyProp) => (
-  <Box
+  <Text
     fontSize="1.5rem"
     lineHeight="140%"
     color="text200"

src/pages/community.tsx

@@ -6,6 +6,7 @@ import {
   HeadingProps,
   Image,
   SimpleGrid,
+  Text,
   useTheme,
 } from "@chakra-ui/react"
 import { GatsbyImage } from "gatsby-plugin-image"
@@ -99,9 +100,9 @@ const ImageContainer = ({ children }: ChildOnlyProp) => {
 
 const Subtitle = ({ children }: ChildOnlyProp) => {
   return (
-    <Box mb={8} fontSize={{ base: "md", sm: "xl" }} lineHeight={1.4}>
+    <Text mb={8} fontSize={{ base: "md", sm: "xl" }} lineHeight={1.4}>
       {children}
-    </Box>
+    </Text>
   )
 }
 

src/pages/developers/index.tsx

@@ -4,13 +4,13 @@ import { graphql, PageProps } from "gatsby"
 import { useTranslation } from "gatsby-plugin-react-i18next"
 import {
   Box,
-  BoxProps,
   chakra,
   Flex,
   Heading,
-  Hide,
   Image,
   SimpleGrid,
+  Text,
+  TextProps,
   useColorModeValue,
 } from "@chakra-ui/react"
 
@@ -102,8 +102,8 @@ const Content = (props: ChildOnlyProp) => (
   <Box py={4} px={8} w="full" {...props} />
 )
 
-const Subtitle = (props: BoxProps) => (
-  <Box fontSize="xl" lineHeight="140%" color="text200" {...props} />
+const Subtitle = (props: TextProps) => (
+  <Text fontSize="xl" lineHeight="140%" color="text200" {...props} />
 )
 
 const MonoSubtitle = (props: ChildOnlyProp) => <Box as="h2" mb={0} {...props} />

src/pages/wallets/find-wallet.tsx

@@ -40,7 +40,7 @@ import type { ChildOnlyProp } from "../../types"
 
 const Subtitle = ({ children }: ChildOnlyProp) => {
   return (
-    <Box
+    <Text
       fontSize="xl"
       lineHeight={1.4}
       color="text200"
@@ -49,7 +49,7 @@ const Subtitle = ({ children }: ChildOnlyProp) => {
       }}
     >
       {children}
-    </Box>
+    </Text>
   )
 }