Add roadmap page

pull/1331/head
Kamran Ahmed 3 years ago
parent bdee14009b
commit 8902100baa
  1. 10
      components/page-header.tsx
  2. 3
      next-env.d.ts
  3. 9651
      package-lock.json
  4. 6
      package.json
  5. 76
      pages/[roadmap]/index.tsx
  6. 1
      pages/roadmaps/index.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>
);
}

3
next-env.d.ts vendored

@ -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.

9651
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -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",

@ -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>
);
}

@ -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() {

Loading…
Cancel
Save