Add registration form in hero section

components/hero-section/index.js

@@ -2,12 +2,12 @@ import './style.scss';
 
 const HeroSection = () => (
   <div className='hero-section'>
-    <h1>Roadmaps for Developers</h1>
+    <h1>Developer Roadmaps</h1>
     <p>Community driven, roadmaps, articles and resources for developers</p>
 
-    <div className="register-form d-flex">
+    <div className="register-form">
-      <input type="text" />
+      <input type="text" className='email-input' placeholder='Enter Email Address' />
-      <a href="#" className="btn btn-primary">Register</a>
+      <a href="#" className="btn btn-dark">Register</a>
 
     </div>
   </div>

components/hero-section/style.scss

@@ -10,5 +10,32 @@
 
   p {
     color: #333;
+    margin-bottom: 25px;
+  }
+
+  .register-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 42px;
+
+    .email-input {
+      border: 3px solid #000000;
+      border-radius: 3px;
+      outline: none;
+      padding: 5px 13px;
+      min-width: 300px;
+    }
+
+    input, .btn {
+      height: 100%;
+    }
+
+    .btn {
+      display: flex;
+      align-items: center;
+      margin-left: 15px;
+      padding: 5px 15px;
+    }
   }
 }

package.json

@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.10.2",
     "@zeit/next-css": "latest",
     "@zeit/next-sass": "^1.0.1",
     "autoprefixer": "^9.6.1",

pages/global.scss

@@ -1,4 +1,5 @@
 body {
+  border-top: 5px solid #000000;
   color: #000;
 }
 

yarn.lock

@@ -797,6 +797,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-free@^5.10.2":
+  version "5.10.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.10.2.tgz#27e02da1e34b50c9869179d364fb46627b521130"
+  integrity sha512-9pw+Nsnunl9unstGEHQ+u41wBEQue6XPBsILXtJF/4fNN1L3avJcMF/gGF86rIjeTAgfLjTY9ndm68/X4f4idQ==
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"