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

Integrate revue subscription

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 929e6c0a51
commit 63b297ca34
1 changed files with 67 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 118
      pages/signup.tsx

118
pages/signup.tsx
Unescape 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>

Write Preview
Loading…
Cancel
Save