gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add guides listing page

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-15 10:39:46 +02:00
parent 6dbf170076
commit 7d27cb0b9f
3 changed files with 70 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/opensource-banner.tsx
View File

@ -2,7 +2,7 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
export function OpensourceBanner() {
return (
<Box borderTopWidth={1} mt='60px' pt='70px' pb='30px' textAlign='center'>
<Box borderTopWidth={1} pt='70px' pb='30px' textAlign='center'>
<Container maxW='container.md'>
<Heading fontSize='35px' mb='20px'>Open Source</Heading>
<Text lineHeight='26px' fontSize='16px' mb='20px'>The project is OpenSource,&nbsp;

69
pages/guides/index.tsx
View File

@ -1,5 +1,72 @@
import { Badge, Box, Button, Container, Heading, Link, Stack, Text } from '@chakra-ui/react';
import { Header } from '../../components/header';
import { LinksList } from '../../components/links-list';
import { LinksListItem } from '../../components/links-list-item';
import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
export default function Guides() {
return (
<h1>Hello world</h1>
<Box bg='white' minH='100vh'>
<Header />
<Box mb='60px'>
<Box pt='50px' pb='30px' borderBottomWidth={1}>
<Container maxW='container.md' position='relative'>
<Heading as='h1' color='black' fontSize='40px' fontWeight={700} mb='5px'>Visual Guides</Heading>
<Text>Succinct graphical explanations to development related topics.</Text>
</Container>
</Box>
<Container maxW='container.md' position='relative'>
<Badge mt='40px' mb='10px' variant='solid' colorScheme='green'>Recent Guides</Badge>
{/*<Text mt='40px' mb='10px' fontWeight={700} color='green.500'>Recent Guides</Text>*/}
{/*<Heading mt='40px' mb='15px' color='green.500' fontSize='20px'>Recent Guides</Heading>*/}
<Stack isInline mb='30px' spacing='15px'>
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px' py='25px' rounded='10px' bg={'gray.700'} flex={1}>
<Text mb='10px' fontSize='13px' color='gray.400'>June 25, 2021</Text>
<Heading color='white' mb={'6px'} fontSize='22px'>Session Based Authentication</Heading>
<Text color='gray.300' fontSize='14px'>Learn what the Session Based Authentication is, the pros and cons
.</Text>
</Link>
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px' py='25px' rounded='10px' bg={'purple.800'} flex={1}>
<Text mb='10px' fontSize='13px' color='gray.400'>June 25, 2021</Text>
<Heading color='white' mb={'6px'} fontSize='22px'>JSON Web Tokens</Heading>
<Text color='gray.300' fontSize='14px'>Learn what the Session Based Authentication is, the pros and cons
and how you can implement it in your
apps.</Text>
</Link>
</Stack>
<Badge mt='30px' mb='10px' variant='solid' colorScheme='green'>Past Guides</Badge>
<LinksList>
<LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' />
<LinksListItem title='Session based Authentication' subtitle='June 12, 2021' />
<LinksListItem title='JSON Web Tokens' subtitle='June 05, 2021' />
<LinksListItem title='Token Based Authentication' subtitle='May 15, 2021' />
<LinksListItem title='Character Encodings' badgeText='pro' subtitle='March 06, 2021' />
<LinksListItem title='SSL vs TLS vs HTTPs vs SSH' subtitle='February 15, 2021' />
<LinksListItem title='Continuous Integration and Deployment' subtitle='February 15, 2021' />
<LinksListItem title='Authentication' subtitle='February 01, 2021' />
<LinksListItem title='DHCP in One Picture' subtitle='February 01, 2021' />
<LinksListItem title='Session Based Authentication' subtitle='February 01, 2021' />
<LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' />
<LinksListItem title='Session based Authentication' subtitle='June 12, 2021' />
<LinksListItem title='JSON Web Tokens' subtitle='June 05, 2021' />
<LinksListItem title='Token Based Authentication' subtitle='May 15, 2021' />
<LinksListItem title='Character Encodings' badgeText='pro' subtitle='March 06, 2021' />
<LinksListItem title='SSL vs TLS vs HTTPs vs SSH' subtitle='February 15, 2021' />
<LinksListItem title='Continuous Integration and Deployment' subtitle='February 15, 2021' />
<LinksListItem title='Authentication' subtitle='February 01, 2021' />
<LinksListItem title='DHCP in One Picture' subtitle='February 01, 2021' />
<LinksListItem title='Session Based Authentication' subtitle='February 01, 2021' />
</LinksList>
</Container>
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}

2
pages/index.tsx
View File

@ -66,7 +66,7 @@ export default function Home() {
</Container>
</Box>
<Box>
<Box mb='60px'>
<Container maxW='container.md'>
<Box pt='40px' mb='20px'>
<Heading color='green.500' fontSize='25px' mb='5px'>Video Explanations</Heading>