diff --git a/components/home/featured-roadmaps-list.tsx b/components/home/featured-roadmaps-list.tsx
index f15291e5a..8d350f6bf 100644
--- a/components/home/featured-roadmaps-list.tsx
+++ b/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,18 +36,32 @@ export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) {
<>
{title}
- {roadmaps.map((roadmap: RoadmapType, counter: number) => (
-
- ))}
+ <>
+ {roadmaps.map((roadmap: RoadmapType, counter: number) => (
+
+ ))}
+ {upcomingRoadmaps
+ .filter(roadmap => roadmap.type === title)
+ .map((roadmap, counter) => (
+
+ ))}
+ >
>
);
diff --git a/pages/upcoming.tsx b/pages/upcoming.tsx
new file mode 100644
index 000000000..d37b88e25
--- /dev/null
+++ b/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 (
+
+
+
+
+ }
+ title={title}
+ subtitle={description}
+ />
+
+
+
+ Upcoming Roadmap
+ Please check back later or subscribe below.
+
+
+
+
+
+
+
+
+
+ );
+}