Add upcoming roadmap links

components/home/featured-roadmaps-list.tsx

@@ -8,6 +8,27 @@ type FeaturedRoadmapsListProps = {
 
 };
 
+export const upcomingRoadmaps = [
+  {
+    type: 'Role Based',
+    title: 'Software Architect',
+    description: 'Roadmap to become a modern Software Architect',
+    id: 'software-architect'
+  },
+  {
+    type: 'Role Based',
+    title: 'React Native',
+    description: 'Step by step guide to become a React Native Developer',
+    id: 'react-native'
+  },
+  {
+    type: 'Skill Based',
+    title: 'Design System',
+    description: 'Flowchart to help you plan and build your Design System',
+    id: 'design-system'
+  }
+];
+
 export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) {
   const { roadmaps, title } = props;
 
@@ -15,6 +36,7 @@ export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) {
     <>
       <Tag bg='gray.400' mb={4}>{title}</Tag>
       <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='40px'>
+        <>
           {roadmaps.map((roadmap: RoadmapType, counter: number) => (
             <HomeRoadmapItem
               isUpcoming={roadmap.isUpcoming}
@@ -27,6 +49,19 @@ export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) {
               subtitle={roadmap.featuredDescription}
             />
           ))}
+          {upcomingRoadmaps
+            .filter(roadmap => roadmap.type === title)
+            .map((roadmap, counter) => (
+              <HomeRoadmapItem
+                isUpcoming={true}
+                url={`/upcoming?id=${roadmap.id}`}
+                key={`upcoming-${roadmap.id}`}
+                colorIndex={9}
+                title={roadmap.title}
+                subtitle={roadmap.description}
+              />
+            ))}
+        </>
       </SimpleGrid>
     </>
   );

pages/upcoming.tsx

@@ -0,0 +1,63 @@
+import { Box, Button, Container, Flex, Heading, Input, Text } from '@chakra-ui/react';
+import { GlobalHeader } from '../components/global-header';
+import { OpensourceBanner } from '../components/opensource-banner';
+import { Footer } from '../components/footer';
+import { PageHeader } from '../components/page-header';
+import Helmet from '../components/helmet';
+import { NewAlertBanner } from '../components/roadmap/new-alert-banner';
+import { BellIcon, EmailIcon } from '@chakra-ui/icons';
+import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from './signup';
+import React from 'react';
+import { upcomingRoadmaps } from '../components/home/featured-roadmaps-list';
+
+function getParameterByName(name: string, url: string = (typeof window !== 'undefined' ? window : {} as any)?.location?.href) {
+  name = name.replace(/[\[\]]/g, '\\$&');
+
+  let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+  let results = regex.exec(url);
+
+  if (!results) return null;
+  if (!results[2]) return '';
+
+  return decodeURIComponent(results[2].replace(/\+/g, ' '));
+}
+
+export default function Upcoming() {
+  const roadmapId = getParameterByName('id');
+  const foundRoadmap = upcomingRoadmaps.find(roadmap => roadmap.id === roadmapId) || {} as any;
+
+  const title = foundRoadmap?.title || 'Upcoming Roadmap';
+  const description = foundRoadmap.description || 'Roadmap is not yet ready. Subscribe yourself below to get notified.';
+
+  return (
+    <Box bg='white' minH='100vh'>
+      <GlobalHeader />
+      <Helmet
+        title={title}
+        description={description}
+      />
+      <Box mb='60px'>
+        <PageHeader
+          beforeTitle={<NewAlertBanner />}
+          title={title}
+          subtitle={description}
+        />
+        <Container maxW='container.md' position='relative'>
+          <Flex flexDir='column' alignItems='center' borderWidth={1} rounded='lg' py={10} boxShadow='inner' px={5}>
+            <BellIcon w='90px' h='90px' color='gray.200' mb={5} />
+            <Heading mb={2} fontSize='2xl' >Upcoming Roadmap</Heading>
+            <Text fontSize='sm' mb={4}>Please check back later or subscribe below.</Text>
+
+            <form action={SIGNUP_FORM_ACTION} method='post'>
+              <Input type='email' bg={'white'} size='lg' placeholder='Enter your email' mb={2} name={SIGNUP_EMAIL_INPUT_NAME} required />
+              <Button size='lg' isFullWidth colorScheme='teal' leftIcon={<EmailIcon />} type='submit'>Get Notified</Button>
+            </form>
+          </Flex>
+        </Container>
+      </Box>
+
+      <OpensourceBanner />
+      <Footer />
+    </Box>
+  );
+}