Refactor page header

components/page-header.tsx

@@ -0,0 +1,19 @@
+import { Box, Container, Heading, Text } from '@chakra-ui/react';
+
+type PageHeaderProps = {
+  title: string;
+  subtitle: string;
+};
+
+export function PageHeader(props: PageHeaderProps) {
+  const { title, subtitle } = props;
+
+  return (
+    <Box pt='45px' pb='30px' borderBottomWidth={1} mb='30px'>
+      <Container maxW='container.md' position='relative'>
+        <Heading as='h1' color='black' fontSize='35px' fontWeight={700} mb='5px'>{title}</Heading>
+        <Text fontSize='15px'>{subtitle}</Text>
+      </Container>
+    </Box>
+  );
+}

pages/guides/index.tsx

@@ -6,19 +6,18 @@ import { OpensourceBanner } from '../../components/opensource-banner';
 import { UpdatesBanner } from '../../components/updates-banner';
 import { Footer } from '../../components/footer';
 import { GuideGridItem } from './components/guide-grid-item';
+import { PageHeader } from '../../components/page-header';
 
 export default function Guides() {
   return (
     <Box bg='white' minH='100vh'>
       <Header />
       <Box mb='60px'>
-        <Box pt='45px' pb='30px' borderBottomWidth={1}>
+        <PageHeader
-          <Container maxW='container.md' position='relative'>
+          title={'Visual Guides'}
-            <Heading as='h1' color='black' fontSize='35px' fontWeight={700} mb='5px'>Visual Guides</Heading>
+          subtitle={'Succinct graphical explanations to development related topics.'}
-            <Text fontSize='15px'>Succinct graphical explanations to development related topics.</Text>
+        />
-          </Container>
+        <Container maxW='container.md' position='relative'>
-        </Box>
-        <Container maxW='container.md' position='relative' mt='30px'>
           <Stack isInline mb='30px' spacing='15px'>
             <GuideGridItem
               title='Session Based Authentication'