Add roadmap summary page

components/featured-content/roadmaps.js

@@ -1,4 +1,6 @@
 import { FeaturedContentWrap } from './style';
+import Link from 'next/link';
+import roadmaps from '../../data/roadmaps';
 
 const FeaturedRoadmaps = () => (
   <FeaturedContentWrap className="featured-content-wrap">
@@ -8,29 +10,25 @@ const FeaturedRoadmaps = () => (
         <p className="border-through  featured-separator">
             <span>
               List of roadmaps mostly visited by the community&nbsp;
-              <a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
+              <Link href='/roadmaps'>
+                <a className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
+              </Link>
             </span>
         </p>
       </div>
       <div className="swim-lane row">
-        <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-          <a className="featured-block" href='#'>
-            <h4>Frontend Developer</h4>
-            <p>Step by step guide to becoming a modern frontend developer in 2019</p>
-          </a>
-        </div>
-        <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-          <a className="featured-block" href='#'>
-            <h4>Backend Developer</h4>
-            <p>Step by step guide to becoming a modern backend developer in 2019</p>
-          </a>
-        </div>
-        <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-          <a className="featured-block" href='#'>
-            <h4>DevOps Roadmap</h4>
-            <p>Step by step guide to become an SRE or for any operations role in 2019</p>
-          </a>
-        </div>
+        { roadmaps
+          .filter(({ featured }) => featured)
+          .map(roadmap => (
+            <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+              <Link href={ roadmap.slug }>
+                <a className="featured-block">
+                  <h4>{ roadmap.title }</h4>
+                  <p>{ roadmap.featuredDescription || roadmap.description }</p>
+                </a>
+              </Link>
+            </div>
+          )) }
       </div>
     </div>
   </FeaturedContentWrap>

components/roadmap-summary/index.js

@@ -0,0 +1,24 @@
+import {
+  SummaryContainer,
+  Title,
+  Description,
+  Image,
+  Header,
+  Summary,
+} from './style';
+
+const RoadmapSummary = ({ roadmap }) => (
+  <SummaryContainer>
+    <Header>
+      <Title>{ roadmap.title }</Title>
+      <Description>{ roadmap.description }</Description>
+    </Header>
+    <Summary className="border-top border-bottom">
+      <div className="container">
+        <Image src={ roadmap.picture } />
+      </div>
+    </Summary>
+  </SummaryContainer>
+);
+
+export default RoadmapSummary;

components/roadmap-summary/style.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const SummaryContainer = styled.div``;
+
+export const Header = styled.div`
+  text-align: center;
+  padding: 55px 0 45px;
+`;
+
+export const Summary = styled.div`
+  text-align: center;
+  padding: 50px 0;
+`;
+
+export const Title = styled.h1`
+  font-weight: 700;
+  margin-bottom: 12px;
+  font-size: 42px;
+`;
+export const Description = styled.p`
+  font-size: 19px;
+  margin-bottom: 0;
+`;
+export const Image = styled.img`
+  width: 100%;
+`;

data/roadmaps.json

@@ -1,20 +1,26 @@
 [
   {
     "title": "Frontend Developer",
-    "description": "Roadmap to becoming a frontend developer",
+    "description": "Step by step guide to becoming a modern frontend developer",
+    "featuredDescription": "Step by step guide to becoming a modern frontend developer in 2019",
     "slug": "/frontend",
-    "picture": "/static/roadmaps/frontend.png"
+    "picture": "/static/roadmaps/frontend.png",
+    "featured": true
   },
   {
     "title": "Backend Developer",
     "description": "Roadmap to becoming a backend developer",
+    "featuredDescription": "Step by step guide to becoming a modern backend developer in 2019",
     "slug": "/backend",
-    "picture": "/static/roadmaps/backend.png"
+    "picture": "/static/roadmaps/backend.png",
+    "featured": true
   },
   {
-    "title": "DevOps",
+    "title": "DevOps Roadmap",
     "description": "Roadmap for DevOps or any other Operations Role",
+    "featuredDescription": "Step by step guide to become an SRE or for any operations role in 2019",
     "slug": "/devops",
-    "picture": "/static/roadmaps/devops.png"
+    "picture": "/static/roadmaps/devops.png",
+    "featured": true
   }
 ]

pages/roadmaps/[roadmap].js

@@ -2,14 +2,15 @@ import roadmaps from "../../data/roadmaps";
 import DefaultLayout from '../../layouts/default/index';
 import PageHeader from '../../components/page-header/index';
 import { serverOnlyProps } from '../../lib/server';
+import RoadmapSummary from '../../components/roadmap-summary';
+import PageFooter from '../../components/page-footer';
 
 const Roadmap = ({ roadmap }) => {
   return (
     <DefaultLayout>
       <PageHeader />
-      <div className="container">
-        <img src={ roadmap.picture } alt="" />
-      </div>
+      <RoadmapSummary roadmap={ roadmap } />
+      <PageFooter />
     </DefaultLayout>
   );
 };