Add links and modify roadmap header

components/hero-section/index.js

@@ -1,10 +1,11 @@
+import Link from 'next/link';
 import { HeroSectionWrap } from './style';
 
 const HeroSection = () => (
   <HeroSectionWrap>
     <div className="container">
       <h1>Developer Roadmaps</h1>
-      <p>Community driven roadmaps, articles and resources for developers. <a href="#">Sign up</a> to share your journey, write guides, track your skillset and get your work reviewed</p>
+      <p>Community driven roadmaps, articles and resources for developers. <Link href="/signup"><a>Sign up</a></Link> to share your journey, write guides, track your skillset and get your work reviewed</p>
     </div>
   </HeroSectionWrap>
 );

components/page-header/index.js

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { HeaderWrap } from './style';
 
 const PageHeader = () => (
@@ -9,10 +10,10 @@ const PageHeader = () => (
         </a>
       </div>
       <div className="nav-links">
-        <a href="#">Roadmaps</a>
-        <a href="#">Guides</a>
-        <a href="#">FAQs</a>
-        <a href="#" className='signup'>Sign Up</a>
+        <Link href="/roadmaps"><a>Roadmaps</a></Link>
+        <Link href="/guides"><a>Guides</a></Link>
+        <Link href="/faq"><a>FAQs</a></Link>
+        <Link href="/signup"><a>Sign Up</a></Link>
       </div>
     </div>
   </HeaderWrap>

components/roadmap-summary/style.js

@@ -4,7 +4,7 @@ export const SummaryContainer = styled.div``;
 
 export const Header = styled.div`
   text-align: center;
-  padding: 55px 0 45px;
+  padding: 60px 0 55px;
 `;
 
 export const Summary = styled.div`
@@ -15,11 +15,12 @@ export const Summary = styled.div`
 export const Title = styled.h1`
   font-weight: 700;
   margin-bottom: 12px;
-  font-size: 42px;
+  font-size: 46px;
 `;
 
 export const Description = styled.p`
-  font-size: 19px;
+  font-size: 16px;
+  color: #444444;
 `;
 
 export const Image = styled.img`