Rename page header to top nav

components/top-nav/index.js

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { HeaderWrap } from './style';
 
-const PageHeader = () => (
+const TopNav = () => (
   <HeaderWrap>
     <div className="top-row container">
       <div className="flex-grow-1 brand">
@@ -19,4 +19,4 @@ const PageHeader = () => (
   </HeaderWrap>
 );
 
-export default PageHeader;
+export default TopNav;

data/roadmaps.json

@@ -37,5 +37,16 @@
       "2018",
       "2017"
     ]
+  },
+  {
+    "title": "React Developer Roadmap",
+    "description": "Step by step guide for DevOps or any other Operations Role",
+    "featuredDescription": "Step by step guide to become an SRE or for any operations role in 2019",
+    "url": "/signup",
+    "versions": [
+      "latest",
+      "2018",
+      "2017"
+    ]
   }
 ]

layouts/guide/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import DefaultLayout from 'layouts/default';
-import PageHeader from 'components/page-header';
+import TopNav from 'components/top-nav';
 import PageFooter from 'components/page-footer';
 
 class GuideLayout extends React.Component {
@@ -9,7 +9,7 @@ class GuideLayout extends React.Component {
 
     return (
       <DefaultLayout>
-        <PageHeader />
+        <TopNav />
         { children }
         <PageFooter />
       </DefaultLayout>

pages/[roadmap]/index.js

@@ -1,6 +1,6 @@
 import Error from 'next/error';
 import DefaultLayout from 'layouts/default';
-import PageHeader from 'components/page-header';
+import TopNav from 'components/top-nav';
 import PageFooter from 'components/page-footer';
 import RoadmapSummary from 'components/roadmap-summary';
 import { serverOnlyProps } from 'lib/server';
@@ -15,7 +15,7 @@ const Roadmap = ({ roadmap }) => {
   return (
     <DefaultLayout>
       <Helmet title={ roadmap.title } description={ roadmap.description } />
-      <PageHeader />
+      <TopNav />
       <RoadmapSummary roadmap={ roadmap } />
       <PageFooter />
     </DefaultLayout>

pages/about.js

@@ -1,12 +1,12 @@
 import AboutHeader from 'components/about-header/index';
 import PageFooter from 'components/page-footer/index';
-import PageHeader from 'components/page-header/index';
+import TopNav from 'components/top-nav';
 import DefaultLayout from 'layouts/default/index';
 import FaqList from 'components/faq-list/index';
 
 const About = () => (
   <DefaultLayout>
-    <PageHeader />
+    <TopNav />
     <AboutHeader />
     <FaqList />
     <PageFooter />

pages/guides/index.js

@@ -1,9 +1,9 @@
 import DefaultLayout from 'layouts/default/index';
-import PageHeader from 'components/page-header/index';
+import TopNav from 'components/top-nav';
 
 const Roadmap = () => (
   <DefaultLayout>
-    <PageHeader />
+    <TopNav />
     <div className="container">
       <p>Show all guides here</p>
     </div>

pages/index.js

@@ -1,12 +1,12 @@
 import FeaturedContent from 'components/featured-content/index';
 import HeroSection from 'components/hero-section/index';
 import PageFooter from 'components/page-footer/index';
-import PageHeader from 'components/page-header/index';
+import TopNav from 'components/top-nav';
 import DefaultLayout from 'layouts/default/index';
 
 const Home = (props) => (
   <DefaultLayout>
-    <PageHeader />
+    <TopNav />
     <HeroSection />
     <FeaturedContent />
     <PageFooter />

pages/privacy.js

@@ -1,4 +1,4 @@
-import PageHeader from 'components/page-header/index';
+import TopNav from 'components/top-nav';
 import PageFooter from 'components/page-footer/index';
 import { TosPage } from 'components/tos-page/index';
 import DefaultLayout from 'layouts/default/index';
@@ -6,7 +6,7 @@ import DefaultLayout from 'layouts/default/index';
 const Privacy = () => (
   <DefaultLayout>
     <TosPage>
-      <PageHeader />
+      <TopNav />
       <div className="bg-light border-top privacy-wrap">
         <div className="container pt-5 pb-5">
           <h2 className='font-weight-bold mb-3'>Privacy Policy</h2>

pages/roadmaps.js

@@ -1,11 +1,18 @@
+import roadmaps from 'data/roadmaps';
 import DefaultLayout from 'layouts/default/index';
-import PageHeader from 'components/page-header/index';
+import TopNav from 'components/top-nav';
+import RoadmapBlock from 'components/roadmap-block';
 
 const RoadmapsList = () => (
   <DefaultLayout>
-    <PageHeader />
+    <TopNav />
     <div className="container">
-      <p>Show all roadmaps here</p>
+      <div className="row">
+        { roadmaps
+          .map(roadmap => (
+            <RoadmapBlock roadmap={ roadmap } key={ roadmap.url } />
+          )) }
+      </div>
     </div>
   </DefaultLayout>
 );

pages/terms.js

@@ -1,12 +1,12 @@
 import PageFooter from 'components/page-footer/index';
-import PageHeader from 'components/page-header/index';
+import TopNav from 'components/top-nav';
 import { TosPage } from 'components/tos-page/index';
 import DefaultLayout from 'layouts/default/index';
 
 const Terms = () => (
   <DefaultLayout>
     <TosPage>
-      <PageHeader />
+      <TopNav />
       <div className="bg-light border-top tos-wrap">
         <div className="container pt-5 pb-5">
           <h2>Terms of Service</h2>