Update page header and add roadmap button

components/icon-row-block/style.js

@@ -9,7 +9,7 @@ export const SubmitWrap = styled.div`
 
   svg {
     height: 25px;
-    color: dimgrey;
+    color: #d6d6d6;
   }
 `;
 

components/page-header/index.js

@@ -1,10 +1,27 @@
-import { HeaderWrap, Subtitle, Title } from './style';
+import { HeaderWrap, HeaderButtons, HeaderButton, Subtitle, Title } from './style';
 
-const PageHeader = (props) => (
+const PageHeader = ({
+  title,
+  subtitle,
+  children,
+  primaryButtonText,
+  primaryButtonUrl,
+  secondaryButtonText,
+  secondaryButtonUrl,
+}) => (
   <HeaderWrap>
-    <Title>Developer Roadmaps</Title>
+    <Title>{ title }</Title>
-    <Subtitle>We continue to improve these roadmaps and add new ones, subscribe to get occasional updates</Subtitle>
+    <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />
-    { props.children }
+
+    {
+      (primaryButtonText || secondaryButtonText) &&
+      <HeaderButtons>
+        { primaryButtonText && <HeaderButton primary href={primaryButtonUrl}>{ primaryButtonText }</HeaderButton> }
+        { secondaryButtonText && <HeaderButton href={secondaryButtonUrl}>{ secondaryButtonText }</HeaderButton> }
+      </HeaderButtons>
+    }
+
+    { children }
   </HeaderWrap>
 );
 

components/page-header/style.js

@@ -8,9 +8,31 @@ export const HeaderWrap = styled.div`
 export const Title = styled.h1`
   font-size: 48px;
   font-weight: 700;
+  margin-bottom: 12px;
 `;
 
 export const Subtitle = styled.p`
   font-size: 16px;
   color: #444;
+  
+  a {
+    color: inherit;
+    font-weight: 700;
+  }
+`;
+
+export const HeaderButton = styled.a`
+  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px 0;
+  padding: 9px 25px;
+  background: ${ props => props.primary ? '#101010' : '#ffffff' } !important;
+  color: ${ props => props.primary ? '#ffffff' : '#101010' } !important;
+  border-radius: 4px;
+  margin-left: ${ props => !props.primary ? '15px': 0 };
+  cursor: pointer;
+  font-size: 15px;
+  display: inline-block;
+`;
+
+export const HeaderButtons = styled.div`
+  margin: 30px 0 0;
 `;

pages/roadmaps.js

@@ -13,7 +13,10 @@ const RoadmapsList = () => (
   <DefaultLayout>
     <SiteNav />
     <div className="container">
-      <PageHeader />
+      <PageHeader
+        title="Developer Roadmaps"
+        subtitle="We continue to improve these roadmaps and add new ones, <a href='/signup'>subscribe to get occasional updates</a>"
+      />
     </div>
     <div className="pt-5 pb-5 bg-light border-top">
       <div className="container">