Upcoming roadmap page

components/guide-body/index.js

@@ -8,11 +8,13 @@ const GuideBody = ({ guide }) => {
     <GuideBodyWrap>
       <MdRenderer>
         <GuideContent />
-        <SharePage
-          title={ guide.title }
-          url={ guide.url }
-          twitterUsername={ guide.author.twitter }
-        />
+        {
+          guide.author && <SharePage
+            title={ guide.title }
+            url={ guide.url }
+            twitterUsername={ guide.author.twitter }
+          />
+        }
       </MdRenderer>
     </GuideBodyWrap>
   );

components/roadmap-body/index.js

@@ -1,29 +1,24 @@
-import { Summary, SummaryContainer } from './style';
+import { Summary, SummaryContainer, UpcomingContainer } from './style';
 import SharePage from 'components/share-page';
-import MdRenderer from 'components/md-renderer';
-
-const UpcomingGuide = require(`../../storage/guides/upcoming.md`).default;
+import GuideBody from 'components/guide-body';
 
 const RoadmapBody = ({ roadmap }) => {
+  if (roadmap.upcoming) {
+    return (
+      <UpcomingContainer>
+        <GuideBody guide={{ fileName: 'upcoming' }} />
+      </UpcomingContainer>
+    );
+  }
+
   return (
     <SummaryContainer>
       <Summary>
         {
-          roadmap.upcoming && (
-            <div className="container container-small">
-              <MdRenderer>
-                <UpcomingGuide />
-              </MdRenderer>
-            </div>
-          )
-        }
-        {
-          !roadmap.upcoming && (
             <div className="container container-small text-left">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis commodi, consequatur, dicta distinctio esse et id, ipsa labore libero nisi odit placeat possimus saepe sed vel vitae voluptate?</p>
               <SharePage title={ roadmap.description } url={ roadmap.url } />
             </div>
-          )
         }
       </Summary>
     </SummaryContainer>

components/roadmap-body/style.js

@@ -2,6 +2,15 @@ import styled from 'styled-components';
 
 export const SummaryContainer = styled.div``;
 
+export const UpcomingContainer = styled.div`
+  text-align: center;
+  padding: 40px 0 50px;
+
+  .container {
+    position: relative;
+  }
+`;
+
 export const Summary = styled.div`
   text-align: center;
   padding: 40px 0 50px;