Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

81 lines
2.2 KiB

import {
Box,
Button,
Container,
Flex,
Heading,
Link,
Text,
} from '@chakra-ui/react';
import siteConfig from '../content/site.json';
export function UpdatesBanner() {
return (
<Box
borderTopWidth={1}
pt={['40px', '40px', '70px']}
pb={['40px', '45px', '80px']}
textAlign="left"
bg="brand.footer"
>
<Container maxW="container.md">
<Heading
color={'gray.100'}
fontSize={['25px', '25px', '35px']}
mb={['5px', '5px', '15px']}
>
Stay Informed
</Heading>
<Text
color="gray.400"
lineHeight="26px"
fontSize={['15px', '15px', '16px']}
mb="20px"
>
Subscribe yourself to get updates, new guides, videos and roadmaps in
your inbox.
</Text>
<Flex flexDirection={['column', 'column', 'row']}>
<Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
<Button
as={Link}
href="/signup"
width={['full', 'auto']}
fontSize={['14px', '14px', '16px']}
variant="outline"
borderWidth={2}
colorScheme="green"
_hover={{ color: 'green.200', textDecoration: 'none' }}
>
Subscribe to Updates
</Button>
<Text color="gray.500" fontSize="13px" mt="5px">
Free subscription for updates
</Text>
</Box>
<Box>
<Button
as={Link}
href={siteConfig.url.sponsor}
target="_blank"
width={['full', 'auto']}
fontSize={['14px', '14px', '16px']}
_hover={{ textDecoration: 'none', bg: 'yellow.500' }}
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>
</Flex>
</Container>
</Box>
);
}