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

Make opensource and updates banner responsive

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-28 14:30:33 +02:00
parent 3f2ef9ae48
commit ae463059dd
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/opensource-banner.tsx
View File

@ -2,10 +2,10 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
export function OpensourceBanner() {
return (
<Box borderTopWidth={1} pt='70px' pb='30px' textAlign='center'>
<Box borderTopWidth={1} pt={['35px', '40px', '70px']} pb={['20px', '20px', '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;
<Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
<Text lineHeight='26px' fontSize={['13px', '14px', '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'
@ -24,7 +24,7 @@ export function OpensourceBanner() {
title='GitHub'
/>
<Text lineHeight='26px' fontSize='16px' mb='15px'>A considerable amount of my time is spent doing unpaid
<Text lineHeight={['21px', '23px', '26px']} fontSize={['13px', '14px', '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>

16
components/updates-banner.tsx
View File

@ -2,21 +2,25 @@ import { Box, Button, Container, Flex, Heading, Stack, Text } from '@chakra-ui/r
export function UpdatesBanner() {
return (
<Box borderTopWidth={1} mt='60px' pt='70px' pb='80px' textAlign='left' bg='gray.800'>
<Box borderTopWidth={1} mt='60px' pt={['35px', '40px', '70px']} pb={['45px', '45px', '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
<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='20px' mb={['15px', '15px', 0]}>
<Button variant='outline' borderWidth={2} colorScheme='green' _hover={{ color: 'green.200' }}>
<Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
<Button width={['full', 'auto']} fontSize={['14px', '14px', '16px']} 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>
<Button width={['full', 'auto']} fontSize={['14px', '14px', '16px']} 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>