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

Integrate revue subscription

Browse Source
This commit is contained in:
Kamran Ahmed
2021-09-04 19:25:07 +02:00
parent 929e6c0a51
commit 63b297ca34
1 changed files with 67 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
pages/signup.tsx
View File

@ -17,6 +17,71 @@ import { OpensourceBanner } from '../components/opensource-banner';
import { UpdatesBanner } from '../components/updates-banner';
import { Footer } from '../components/footer';
import { CheckCircleIcon } from '@chakra-ui/icons';
import siteConfig from '../content/site.json';
function FreeSignUp() {
return (
<Box p='20px' rounded='5px' borderWidth={2}>
<Box textAlign='left'>
<Heading mb='10px' fontSize='23px' fontWeight={700}>Monthly Updates</Heading>
<Text mb='14px' fontSize='14px' lineHeight='20px'>Enter your email below to get notified about the new
roadmaps, guides and updates</Text>
<form action='https://www.getrevue.co/profile/roadmap/add_subscriber' method='post' target='_blank'>
<Input size='sm' fontSize='15px' py='18px' rounded='4px' placeholder='Your email'
borderWidth={2} mb={'10px'} name='member[email]' />
<Button type={'submit'} bg='gray.700' _hover={{ bg: 'black' }} fontWeight={500} color={'white'}
w='100%'>Subscribe</Button>
</form>
<Text color='gray.500' fontSize='12px' mt='10px'>
<Text as='span'>Once a month email</Text> about the changes to roadmaps, new roadmaps, free guides and
videos.
</Text>
</Box>
</Box>
);
}
function PaidSignUp() {
return (
<Box p='20px' rounded='5px' borderWidth={2} bg='yellow.100' borderColor='yellow.200'>
<Heading mb='10px' fontSize='23px' fontWeight={700}>Updates and Paid Content</Heading>
<Text mb='20px' fontSize='14px' lineHeight='20px'>People sponsoring me on GitHub get access to the updates
as well as paid content.</Text>
<List spacing={2}>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Get notified about the updates
</ListItem>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Access to paid guides and Videos
</ListItem>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Support the Project
</ListItem>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Get a shoutout on <Link fontWeight={600} textDecoration='underline'
href={siteConfig.url.twitter} target='_blank'>Twitter</Link>
</ListItem>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Your name will be added to <Link fontWeight={600} textDecoration='underline'
href='/thanks'>Thanks</Link>
</ListItem>
</List>
<Button target='_blank' mt='20px' color='white' bg='green.500'
_hover={{ textDecoration: 'none', bg: 'green.700' }} w='100%'
as={Link} href={siteConfig.url.sponsor}>Sponsor
on GitHub</Button>
</Box>
);
}
export default function SignUp() {
return (
@ -25,57 +90,8 @@ export default function SignUp() {
<Box mb='60px'>
<Container maxW={'container.md'} position='relative'>
<SimpleGrid columns={[1, 1, 2]} spacing='15px' my={['30px', '30px', '80px']}>
<Box p='20px' rounded='5px' borderWidth={2}>
<Box textAlign='left'>
<Heading mb='10px' fontSize='23px' fontWeight={700}>Monthly Updates</Heading>
<Text mb='14px' fontSize='14px' lineHeight='20px'>Enter your email below to get notified about the new
roadmaps, guides and updates</Text>
<Input size='sm' fontSize='15px' py='18px' rounded='4px' placeholder='Your email'
borderWidth={2} mb={'10px'} />
<Button bg='gray.700' _hover={{ bg: 'black' }} fontWeight={500} color={'white'}
w='100%'>Subscribe</Button>
<Text color='gray.500' fontSize='12px' mt='10px'>
<Text as='span'>Once a month email</Text> about the changes to roadmaps, new roadmaps, free guides and
videos.
</Text>
</Box>
</Box>
<Box p='20px' rounded='5px' borderWidth={2} bg='yellow.100' borderColor='yellow.200'>
<Heading mb='10px' fontSize='23px' fontWeight={700}>Updates and Paid Content</Heading>
<Text mb='20px' fontSize='14px' lineHeight='20px'>People sponsoring me on GitHub get access to the updates
as well as paid content.</Text>
<List spacing={2}>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Get notified about the updates
</ListItem>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Access to paid guides and Videos
</ListItem>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Support the Project
</ListItem>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Get a shoutout on <Link fontWeight={600} textDecoration='underline'
href='https://twitter.com/kamranahmedse' target='_blank'>Twitter</Link>
</ListItem>
<ListItem fontSize='14px'>
<ListIcon as={CheckCircleIcon} color='green.500' />
Your name will be added to <Link fontWeight={600} textDecoration='underline'
href='https://twitter.com/kamranahmedse'
target='_blank'>Thanks</Link>
</ListItem>
</List>
<Link mt='20px' color='white' bg='green.500' _hover={{ textDecoration: 'none', bg: 'green.700' }} w='100%'
as={Button} href={'#'}>Sponsor
on GitHub</Link>
</Box>
<FreeSignUp />
<PaidSignUp />
</SimpleGrid>
</Container>
</Box>