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

Divide home in components

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-14 14:01:42 +02:00
parent 14c03912f9
commit c84e7d41bb
8 changed files with 157 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/footer.tsx Normal file
View File

@ -0,0 +1,41 @@
import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
export function Footer() {
return (
<Box bg='gray.900' p='40px 30px'>
<Container maxW='container.md'>
<Stack isInline color='gray.400' fontWeight={600} spacing='30px'>
<Link _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
<Link _hover={{ color: 'white' }} href='#'>Guides</Link>
<Link _hover={{ color: 'white' }} href='#'>Videos</Link>
<Link _hover={{ color: 'white' }} href='#'>Podcasts</Link>
<Link _hover={{ color: 'white' }} href='#'>About</Link>
<Link _hover={{ color: 'white' }} href='#'>YouTube</Link>
</Stack>
<Box my='50px' maxW='500px'>
<Flex spacing={0} alignItems='center' color='gray.400'>
<Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
href='/'>
<Image h='25px' w='25px' src='/logo.svg' mr='6px' />
roadmap.sh
</Link>
<Text as='span' mx='7px'>by</Text>
<Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
_hover={{ textDecoration: 'none', bg: 'blue.600' }} href='/'>@kamranahmedse</Link>
</Flex>
<Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
journeys to help you choose your path and grow in your career.</Text>
<Text fontSize='14px' color='gray.500'>
<Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>FAQs</Link>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Terms</Link>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Privacy</Link>
</Text>
</Box>
</Container>
</Box>
);
}

28
components/header.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Box, Container, Flex, Image, Link, Stack } from '@chakra-ui/react';
export function Header() {
return (
<Box bg='gray.900' p='20px 30px'>
<Container maxW='container.md'>
<Flex justifyContent='space-between'>
<Link d='flex' href='/' alignItems='center' color='white' fontWeight={600}
_hover={{ textDecoration: 'none' }} fontSize='18px'>
<Image h='30px' w='30px' src='/logo.svg' mr='10px' />
roadmap.sh
</Link>
<Stack shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50' fontSize='15px'>
<Link borderBottomWidth={0} borderBottomColor='gray.500'
_hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
href='#'>Read</Link>
<Link borderBottomWidth={0} borderBottomColor='gray.500'
_hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
href='#'>Watch</Link>
<Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
_hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
fontWeight={500} href={'#'}>Get Updates</Link>
</Stack>
</Flex>
</Container>
</Box>
);
}

46
components/opensource-banner.tsx Normal file
View File

@ -0,0 +1,46 @@
import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
export function OpensourceBanner() {
return (
<Box borderTopWidth={1} mt='60px' pt='70px' pb='80px' 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;
<Link
_hover={{ textDecoration: 'none' }}
href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
target='_blank'
borderBottomWidth={1}
fontWeight={600}
>7th most starred project on GitHub</Link> and is visited by hundreds of thousands of
developers every month.</Text>
<iframe
src='https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large'
frameBorder='0'
scrolling='0'
width='170'
height='30'
style={{ margin: 'auto', marginBottom: '30px' }}
title='GitHub'
/>
<Text lineHeight='26px' fontSize='16px' mb='15px'>A considerable amount of my time is spent doing unpaid
community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to
produce more open-source and free educational material consumed by hundreds of thousands of developers every
month.</Text>
<Box>
<iframe
src='https://ghbtns.com/github-btn.html?user=kamranahmedse&type=sponsor&size=large'
frameBorder='0'
scrolling='0'
width='260'
height='30'
title='GitHub'
style={{ margin: 'auto' }}
/>
</Box>
</Container>
</Box>
);
}

28
components/updates-banner.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Box, Button, Container, Heading, Stack, Text } from '@chakra-ui/react';
export function UpdatesBanner() {
return (
<Box borderTopWidth={1} mt='60px' pt='70px' pb='80px' textAlign='left' bg='gray.800'>
<Container maxW='container.md'>
<Heading color={'gray.100'} fontSize='35px' mb='15px'>Stay Informed</Heading>
<Text color='gray.400' lineHeight='26px' fontSize='16px' mb='20px'>Subscribe yourself to get updates, new
guides, videos and roadmaps in your inbox.</Text>
<Stack isInline spacing='15px'>
<Box>
<Button variant='outline' borderWidth={2} colorScheme='green' _hover={{ color: 'green.200' }}>
Subscribe to Updates
</Button>
<Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
</Box>
<Box>
<Button colorScheme='yellow'>Updates & Paid Content</Button>
<Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
fontWeight={600}>5$
per month</Text></Text>
</Box>
</Stack>
</Container>
</Box>
);
}

0
pages/icons/video-icon.tsx → icons/video-icon.tsx
View File

20
pages/icons/text-icon.tsx
View File

@ -1,20 +0,0 @@
export function TextIcon(props: any) {
return (
<svg
stroke='currentColor'
fill='currentColor'
strokeWidth='0'
viewBox='0 0 20 20'
height='1em'
width='1em'
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<path
fillRule='evenodd'
d='M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z'
clipRule='evenodd'
/>
</svg>
);
}

136
pages/index.tsx
View File

@ -14,36 +14,16 @@ import {
VStack
} from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
import { VideoIcon } from './icons/video-icon';
import { VideoIcon } from '../icons/video-icon';
import { Header } from '../components/header';
import { Footer } from '../components/footer';
import { UpdatesBanner } from '../components/updates-banner';
import { OpensourceBanner } from '../components/opensource-banner';
export default function Home() {
return (
<Box bg='teal.50' minH='100vh'>
<Box bg='gray.900' p='20px 30px'>
<Container maxW='container.md'>
<Flex justifyContent='space-between'>
<Link d='flex' href='/' alignItems='center' color='white' fontWeight={600}
_hover={{ textDecoration: 'none' }} fontSize='18px'>
<Image h='30px' w='30px' src='/logo.svg' mr='10px' />
roadmap.sh
</Link>
{/*<Link d='flex' href='/' color='white' fontWeight={600} fontSize='20px'>*/}
{/* roadmap.sh*/}
{/*</Link>*/}
<Stack shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50' fontSize='15px'>
<Link borderBottomWidth={0} borderBottomColor='gray.500'
_hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
href='#'>Read</Link>
<Link borderBottomWidth={0} borderBottomColor='gray.500'
_hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
href='#'>Watch</Link>
<Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
_hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
fontWeight={500} href={'#'}>Get Updates</Link>
</Stack>
</Flex>
</Container>
</Box>
<Header />
<Box>
<Container maxW='container.md'>
<Box py='30px'>
@ -98,9 +78,6 @@ export default function Home() {
</Tooltip>
<Heading fontSize='22px' mb='5px'>Android</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
{/*<Badge mt='10px' variant="subtle" colorScheme="green">*/}
{/* Community*/}
{/*</Badge>*/}
</Link>
</SimpleGrid>
</Container>
@ -590,104 +567,9 @@ export default function Home() {
</Container>
</Box>
<Box borderTopWidth={1} mt='60px' pt='70px' pb='80px' 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;
<Link
_hover={{ textDecoration: 'none' }}
href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
target='_blank'
borderBottomWidth={1}
fontWeight={600}
>7th most starred project on GitHub</Link> and is visited by hundreds of thousands of
developers every month.</Text>
<iframe
src='https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large'
frameBorder='0'
scrolling='0'
width='170'
height='30'
style={{ margin: 'auto', marginBottom: '30px' }}
title='GitHub'
/>
<Text lineHeight='26px' fontSize='16px' mb='15px'>A considerable amount of my time is spent doing unpaid
community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to
produce more open-source and free educational material consumed by hundreds of thousands of developers every
month.</Text>
<Box>
<iframe
src='https://ghbtns.com/github-btn.html?user=kamranahmedse&type=sponsor&size=large'
frameBorder='0'
scrolling='0'
width='260'
height='30'
title='GitHub'
style={{ margin: 'auto' }}
/>
</Box>
</Container>
</Box>
<Box borderTopWidth={1} mt='60px' pt='70px' pb='80px' textAlign='left' bg='gray.800'>
<Container maxW='container.md'>
<Heading color={'gray.100'} fontSize='35px' mb='15px'>Stay Informed</Heading>
<Text color='gray.400' lineHeight='26px' fontSize='16px' mb='20px'>Subscribe yourself to get updates, new
guides, videos and roadmaps in your inbox.</Text>
<Stack isInline spacing='15px'>
<Box>
<Button variant='outline' borderWidth={2} colorScheme='green' _hover={{ color: 'green.200' }}>
Subscribe to Updates
</Button>
<Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
</Box>
<Box>
<Button colorScheme='yellow'>Updates & Paid Content</Button>
<Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
fontWeight={600}>5$
per month</Text></Text>
</Box>
</Stack>
</Container>
</Box>
<Box bg='gray.900' p='40px 30px'>
<Container maxW='container.md'>
<Stack isInline color='gray.400' fontWeight={600} spacing='30px'>
<Link _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
<Link _hover={{ color: 'white' }} href='#'>Guides</Link>
<Link _hover={{ color: 'white' }} href='#'>Videos</Link>
<Link _hover={{ color: 'white' }} href='#'>Podcasts</Link>
<Link _hover={{ color: 'white' }} href='#'>About</Link>
<Link _hover={{ color: 'white' }} href='#'>YouTube</Link>
</Stack>
<Box my='50px' maxW='500px'>
<Flex spacing={0} alignItems='center' color='gray.400' mb='10px'>
<Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
href='/'>
<Image h='25px' w='25px' src='/logo.svg' mr='6px' />
roadmap.sh
</Link>
<Text as='span' mx='7px'>by</Text>
<Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
_hover={{ textDecoration: 'none', bg: 'blue.600' }} href='/'>@kamranahmedse</Link>
</Flex>
<Text mb='10px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.</Text>
<Text fontSize='14px' color='gray.500'>
<Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white'}} color='gray.400' mx='10px'>FAQs</Link>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white'}} color='gray.400' mx='10px'>Terms</Link>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white'}} color='gray.400' mx='10px'>Privacy</Link>
</Text>
</Box>
</Container>
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}

5
pages/roadmaps/index.tsx Normal file
View File

@ -0,0 +1,5 @@
export default function Roadmaps() {
return (
<h1>Hello world</h1>
);
}