From e0702bbb59c91cc5705ec5fa9a78972e7196c5e1 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 9 Nov 2019 14:56:56 +0400
Subject: [PATCH] Add upcoming roadmap page

---
 components/mdx-components/blockquote.js | 14 +++++++++++++-
 components/roadmap-summary/style.js     |  4 ++--
 data/roadmaps.json                      |  4 ++--
 data/roadmaps/upcoming.md               | 11 +++++++++++
 pages/[roadmap]/index.js                | 25 ++++++++++++++++++++++++-
 5 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 data/roadmaps/upcoming.md

diff --git a/components/mdx-components/blockquote.js b/components/mdx-components/blockquote.js
index d53cfd27c..1e552f268 100644
--- a/components/mdx-components/blockquote.js
+++ b/components/mdx-components/blockquote.js
@@ -6,9 +6,21 @@ const BlockQuote = styled.blockquote`
   background: #e8e8e8;
   border-radius: 5px;
 
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+  }
+  
+  p + h4 {
+    margin-top: 15px;
+  }
+
   p {
     margin: 0;
+    
+    & + p {
+    margin-top: 10px;
+    }
   }
 `;
 
-export default BlockQuote;
\ No newline at end of file
+export default BlockQuote;
diff --git a/components/roadmap-summary/style.js b/components/roadmap-summary/style.js
index 5e1d77298..1270b710a 100644
--- a/components/roadmap-summary/style.js
+++ b/components/roadmap-summary/style.js
@@ -4,7 +4,7 @@ export const SummaryContainer = styled.div``;
 
 export const Header = styled.div`
   text-align: center;
-  padding: 60px 0 55px;
+  padding: 45px 30px 55px;
 `;
 
 export const Summary = styled.div`
@@ -19,7 +19,7 @@ export const Summary = styled.div`
 export const Title = styled.h1`
   font-weight: 700;
   margin-bottom: 12px;
-  font-size: 46px;
+  font-size: 48px;
 `;
 
 export const Description = styled.p`
diff --git a/data/roadmaps.json b/data/roadmaps.json
index 434cbdaea..3bfb83eca 100644
--- a/data/roadmaps.json
+++ b/data/roadmaps.json
@@ -41,13 +41,13 @@
   {
     "title": "Full Stack Developer",
     "description": "Step by step guide to becoming a modern full stack developer in 2019",
-    "url": "/signup",
+    "url": "/fullstack",
     "upcoming": true
   },
   {
     "title": "QA Engineer",
     "description": "Steps to follow in order to become a modern QA Engineer in 2019",
-    "url": "/signup",
+    "url": "/qa-engineer",
     "upcoming": true
   }
 ]
diff --git a/data/roadmaps/upcoming.md b/data/roadmaps/upcoming.md
new file mode 100644
index 000000000..e38192e38
--- /dev/null
+++ b/data/roadmaps/upcoming.md
@@ -0,0 +1,11 @@
+> **Roadmap is not ready yet**. Please check back later or [subscribe to get notified](/signup).
+
+While we prepare the roadmap, follow this simple advice to learn anything
+ 
+> Just **pick a project and start working on it**, you will learn all that you need along the way.
+
+**&rarr;** &nbsp; [All Roadmaps](/roadmaps) &nbsp;&bull;&nbsp; [Programming guides](/guides) &nbsp;&bull;&nbsp; [Subscribe](/signup) 
+
+
+
+ 
diff --git a/pages/[roadmap]/index.js b/pages/[roadmap]/index.js
index cb5ee8819..98c48e5d4 100644
--- a/pages/[roadmap]/index.js
+++ b/pages/[roadmap]/index.js
@@ -5,13 +5,36 @@ import PageFooter from 'components/page-footer';
 import RoadmapSummary from 'components/roadmap-summary';
 import { serverOnlyProps } from 'lib/server';
 import { getRequestedRoadmap } from 'lib/roadmap';
-import Helmet from '../../components/helmet';
+import Helmet from 'components/helmet';
+import PageHeader from 'components/page-header';
+import GuideBody from 'components/guide-body';
 
 const Roadmap = ({ roadmap }) => {
   if (!roadmap) {
     return <Error statusCode={ 404 } />
   }
 
+  if (roadmap.upcoming) {
+    const GuideContent = require(`../../data/roadmaps/upcoming.md`).default;
+
+    return (
+      <DefaultLayout>
+        <Helmet title={ roadmap.title } description={ roadmap.description } />
+        <SiteNav />
+          <PageHeader
+            title={ roadmap.title}
+            subtitle={roadmap.description}
+          />
+          <div className="border-top pt-5">
+            <GuideBody >
+              <GuideContent />
+            </GuideBody>
+          </div>
+        <PageFooter />
+      </DefaultLayout>
+    );
+  }
+
   return (
     <DefaultLayout>
       <Helmet title={ roadmap.title } description={ roadmap.description } />