Refactor roadmap header

components/roadmap/roadmap-page-header.tsx

@@ -1,48 +1,92 @@
 import { RoadmapType } from '../../lib/roadmap';
 import { NewAlertBanner } from './new-alert-banner';
-import { Button, Link, Stack, Tab, TabList, Tabs, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Link,
+  Stack,
+  Text,
+} from '@chakra-ui/react';
 import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
-import { PageHeader } from '../page-header';
 import React from 'react';
 
 type RoadmapPageHeaderType = {
   roadmap: RoadmapType;
-}
+};
 
 export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
   const { roadmap } = props;
 
   return (
-    <PageHeader
+    <Box
-      beforeTitle={<NewAlertBanner />}
+      pt={['25px', '20px', '45px']}
-      title={roadmap.title}
+      pb={['20px', '15px', '30px']}
-      subtitle={roadmap.description}
+      borderBottomWidth={1}
+      mb="30px"
+    >
+      <Container maxW="container.md" position="relative">
+        <NewAlertBanner />
+        <Heading
+          as="h1"
+          color="black"
+          fontSize={['28px', '33px', '40px']}
+          fontWeight={700}
+          mb={['2px', '2px', '5px']}
+        >
+          {roadmap.title}
+        </Heading>
+        <Text fontSize={['13px', '14px', '15px']}>{roadmap.description}</Text>
+        <Stack mt="20px" isInline>
+          <Button
+            d={['flex', 'flex']}
+            as={Link}
+            href={'/roadmaps'}
+            size="xs"
+            py="14px"
+            px="10px"
+            colorScheme="teal"
+            variant="solid"
+            _hover={{ textDecoration: 'none' }}
           >
-      <Stack mt='20px' isInline>
+            &larr;
-        <Button d={['flex', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px'
+            <Text as="span" d={['none', 'inline']} ml="5px">
-                colorScheme='teal' variant='solid' _hover={{ textDecoration: 'none' }}>
+              All Roadmaps
-          &larr; <Text as='span' d={['none', 'inline']} ml='5px'>All Roadmaps</Text>
+            </Text>
           </Button>
 
           {roadmap.pdfUrl && (
-          <Button as={Link}
+            <Button
+              as={Link}
               href={roadmap.pdfUrl}
-                  target='_blank'
+              target="_blank"
-                  size='xs'
+              size="xs"
-                  py='14px'
+              py="14px"
-                  px='10px'
+              px="10px"
               leftIcon={<DownloadIcon />}
-                  colorScheme='yellow'
+              colorScheme="yellow"
-                  variant='solid'
+              variant="solid"
-                  _hover={{ textDecoration: 'none' }}>
+              _hover={{ textDecoration: 'none' }}
+            >
               Download
             </Button>
           )}
-        <Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<AtSignIcon />}
+          <Button
-                colorScheme='yellow' variant='solid' _hover={{ textDecoration: 'none' }}>
+            as={Link}
+            href={'/signup'}
+            size="xs"
+            py="14px"
+            px="10px"
+            leftIcon={<AtSignIcon />}
+            colorScheme="yellow"
+            variant="solid"
+            _hover={{ textDecoration: 'none' }}
+          >
             Subscribe
           </Button>
         </Stack>
-    </PageHeader>
+      </Container>
+    </Box>
   );
 }