Make roadmaps page responsive

components/page-header.tsx

@@ -11,10 +11,18 @@ export function PageHeader(props: PageHeaderProps) {
   const { title, subtitle, children } = props;
 
   return (
-    <Box pt='45px' pb='30px' borderBottomWidth={1} mb='30px'>
+    <Box pt={['20px', '20px', '45px']} pb={['15px', '15px', '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>
+        <Heading
+          as='h1'
+          color='black'
+          fontSize={['25px', '25px', '35px']}
+          fontWeight={700}
+          mb={['2px', '2px', '5px']}
+        >
+          {title}
+        </Heading>
+        <Text fontSize={['14px', '14px', '15px']}>{subtitle}</Text>
       </Container>
 
       {children && (