github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Divide home in components

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 14c03912f9
commit c84e7d41bb
8 changed files with 157 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 41
      components/footer.tsx
  2. 28
      components/header.tsx
  3. 46
      components/opensource-banner.tsx
  4. 28
      components/updates-banner.tsx
  5. 0
      icons/video-icon.tsx
  6. 20
      pages/icons/text-icon.tsx
  7. 136
      pages/index.tsx
  8. 5
      pages/roadmaps/index.tsx

41
components/footer.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape View File

20
pages/icons/text-icon.tsx
Unescape 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
Unescape View File

@ -14,36 +14,16 @@ import {
VStack VStack
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons'; 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() { export default function Home() {
return ( return (
<Box bg='teal.50' minH='100vh'> <Box bg='teal.50' minH='100vh'>
<Box bg='gray.900' p='20px 30px'> <Header />
<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>
<Box> <Box>
<Container maxW='container.md'> <Container maxW='container.md'>
<Box py='30px'> <Box py='30px'>
@ -98,9 +78,6 @@ export default function Home() {
</Tooltip> </Tooltip>
<Heading fontSize='22px' mb='5px'>Android</Heading> <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> <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> </Link>
</SimpleGrid> </SimpleGrid>
</Container> </Container>
@ -590,104 +567,9 @@ export default function Home() {
</Container> </Container>
</Box> </Box>
<Box borderTopWidth={1} mt='60px' pt='70px' pb='80px' textAlign='center'> <OpensourceBanner />
<Container maxW='container.md'> <UpdatesBanner />
<Heading fontSize='35px' mb='20px'>Open Source</Heading> <Footer />
<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>
</Box> </Box>
); );
} }

5
pages/roadmaps/index.tsx
Unescape View File

@ -0,0 +1,5 @@
export default function Roadmaps() {
return (
<h1>Hello world</h1>
);
}
Write Preview
Loading…
Cancel
Save