Integrate revue subscription

pages/signup.tsx

@@ -17,23 +17,22 @@ 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';
 
-export default function SignUp() {
+function FreeSignUp() {
   return (
-    <Box bg='white' minH='100vh'>
-      <GlobalHeader />
-      <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>
+
+        <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'} />
+                 borderWidth={2} mb={'10px'} name='member[email]' />
-                <Button bg='gray.700' _hover={{ bg: 'black' }} fontWeight={500} color={'white'}
+          <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
@@ -41,6 +40,11 @@ export default function SignUp() {
         </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
@@ -62,20 +66,32 @@ export default function SignUp() {
         <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>
+                                  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='https://twitter.com/kamranahmedse'
+                                           href='/thanks'>Thanks</Link>
-                                                   target='_blank'>Thanks</Link>
         </ListItem>
 
       </List>
-              <Link mt='20px' color='white' bg='green.500' _hover={{ textDecoration: 'none', bg: 'green.700' }} w='100%'
+      <Button target='_blank' mt='20px' color='white' bg='green.500'
-                    as={Button} href={'#'}>Sponsor
+              _hover={{ textDecoration: 'none', bg: 'green.700' }} w='100%'
-                on GitHub</Link>
+              as={Link} href={siteConfig.url.sponsor}>Sponsor
+        on GitHub</Button>
     </Box>
+  );
+}
+
+export default function SignUp() {
+  return (
+    <Box bg='white' minH='100vh'>
+      <GlobalHeader />
+      <Box mb='60px'>
+        <Container maxW={'container.md'} position='relative'>
+          <SimpleGrid columns={[1, 1, 2]} spacing='15px' my={['30px', '30px', '80px']}>
+            <FreeSignUp />
+            <PaidSignUp />
           </SimpleGrid>
         </Container>
       </Box>