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

Add responsive footer

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-28 13:04:40 +02:00
parent d3ee830e26
commit 8bb36c1451
1 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/footer.tsx
View File

@ -1,17 +1,35 @@
import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react'; import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
function NavigationLinks() {
return (
<>
<Stack isInline d={['none', 'none', 'flex']} 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>
<Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Guides</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Videos</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Podcasts</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Thanks</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>About</Link>
<Link py='7px' _hover={{ color: 'white' }} href='#'>YouTube</Link>
</Stack>
</>
);
}
export function Footer() { export function Footer() {
return ( return (
<Box bg='gray.900' p='40px 30px'> <Box bg='gray.900' p='40px 0'>
<Container maxW='container.md'> <Container maxW='container.md'>
<Stack isInline color='gray.400' fontWeight={600} spacing='30px'> <NavigationLinks />
<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'> <Box my='50px' maxW='500px'>
<Flex spacing={0} alignItems='center' color='gray.400'> <Flex spacing={0} alignItems='center' color='gray.400'>