Add roadmap page

components/page-header.tsx

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

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -14,12 +14,14 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "framer-motion": "^4.1.17",
-    "next": "11.0.1",
+    "next": "^11.1.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
     "@types/react": "17.0.16",
+    "@types/styled-components": "^5.1.12",
     "eslint": "7.32.0",
     "eslint-config-next": "11.0.1",
     "eslint-config-prettier": "^8.3.0",

pages/[roadmap]/index.tsx

@@ -0,0 +1,76 @@
+import { Box, Button, Container, SimpleGrid, Stack } from '@chakra-ui/react';
+import { DownloadIcon, EmailIcon } from '@chakra-ui/icons';
+import styled from 'styled-components';
+import { Header } from '../../components/header';
+import { OpensourceBanner } from '../../components/opensource-banner';
+import { UpdatesBanner } from '../../components/updates-banner';
+import { Footer } from '../../components/footer';
+import { PageHeader } from '../../components/page-header';
+
+const RoadmapBody = styled.div`
+  margin-bottom: 30px;
+  font-size: 15px;
+
+  h1 {
+    font-size: 32px;
+    font-weight: 700;
+  }
+
+  p {
+    line-height: 25px;
+    margin-bottom: 20px
+  }
+
+  ul, ol {
+    margin: 0 0 20px 40px;
+
+    li + li {
+      margin-top: 11px;
+    }
+  }
+`;
+
+export default function Roadmap() {
+  return (
+    <Box bg='white' minH='100vh'>
+      <Header />
+      <Box mb='60px'>
+        <PageHeader
+          title={'Frontend Developer'}
+          subtitle={'Step by step guide to becoming a modern frontend developer'}
+        >
+          <Stack mt='20px' isInline>
+            <Button size='xs' py='14px' px='10px' leftIcon={<DownloadIcon />} colorScheme='yellow' variant='solid'>
+              Download PDF
+            </Button>
+            <Button size='xs' py='14px' px='10px' leftIcon={<EmailIcon />} colorScheme='yellow' variant='solid'>
+              Subscribe
+            </Button>
+          </Stack>
+        </PageHeader>
+        <Container maxW='container.md' position='relative'>
+          <RoadmapBody>
+            <p>Frontend web developers work on the frontend of the websites producing HTML, CSS and JavaScript i.e. to
+              produce the part of the website that users normally interact with. Alternative Job titles for a frontend
+              developer include:</p>
+            <ul>
+              <li>Frontend Developer or Engineer</li>
+              <li>Frontend Web Developer</li>
+              <li>Frontend HTML/CSS Developer</li>
+              <li>JavaScript Developer</li>
+              <li>React Developer</li>
+              <li>Vue.js Developer</li>
+              <li>Angular Developer</li>
+            </ul>
+
+            <p>The diagram below shows the landscape of all the tools, technologies available for the frontend developers as well as the recommended order in which you should be learning the.</p>
+          </RoadmapBody>
+        </Container>
+      </Box>
+
+      <OpensourceBanner />
+      <UpdatesBanner />
+      <Footer />
+    </Box>
+  );
+}

pages/roadmaps/index.tsx

@@ -4,7 +4,6 @@ import { OpensourceBanner } from '../../components/opensource-banner';
 import { UpdatesBanner } from '../../components/updates-banner';
 import { Footer } from '../../components/footer';
 import { PageHeader } from '../../components/page-header';
-import { HomeRoadmapItem } from './components/home-roadmap-item';
 import { RoadmapGridItem } from './components/roadmap-grid-item';
 
 export default function Roadmaps() {