Add upcoming roadmap page

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;
+export default BlockQuote;

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`

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
   }
 ]

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.
+
+**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup) 
+
+
+
+ 

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 } />