Add hero section and prepare header

components/header/index.js

@@ -1,14 +1,19 @@
-import Link from 'next/link';
+import './style.scss';
 
 const Header = () => (
-  <div>
-    <Link href="/">
-      <a title="Homepage">Home</a>
-    </Link>
-    &nbsp; |&nbsp;
-    <Link href="/about">
-      <a title="About Page">About Page</a>
-    </Link>
+  <div className='page-header'>
+    <div className="d-flex">
+      <div className="flex-grow-1 brand">
+        <a href="#">roadmap.sh</a>
+      </div>
+      <div className="nav-links">
+        <a href="#">Roadmaps</a>
+        <a href="#">Articles</a>
+        <a href="#">Journeys</a>
+        <a href="#">FAQs</a>
+        <a href="#" className='signup'>Sign Up</a>
+      </div>
+    </div>
   </div>
 );
 

components/header/style.scss

@@ -0,0 +1,32 @@
+.page-header {
+  padding-top: 25px;
+  font-size: 18px;
+
+  .brand a {
+    background: #101010;
+    color: white;
+    padding: 5px 10px;
+    text-decoration: none;
+    border-radius: 2px;
+  }
+
+  .nav-links {
+    a {
+      padding: 0 10px;
+      text-decoration: none;
+      font-size: 16px;
+      color: #101010;
+    }
+
+    .signup {
+      background: #101010;
+      color: #ffffff;
+      padding: 7px 10px;
+      margin-left: 15px;
+
+      &:hover {
+        background: #2d2d2d;
+      }
+    }
+  }
+}