Redesign the homepage

components/header/index.js

@@ -2,9 +2,11 @@ import './style.scss';
 
 const Header = () => (
   <div className='page-header'>
-    <div className="d-flex">
+    <div className="top-row container">
       <div className="flex-grow-1 brand">
-        <a href="#">roadmap.sh</a>
+        <a href="#">
+          <img src="/static/brand.png" alt="" />
+        </a>
       </div>
       <div className="nav-links">
         <a href="#">Roadmaps</a>

components/header/style.scss

@@ -1,11 +1,15 @@
 .page-header {
-  padding-top: 25px;
+  padding: 15px 0;
   font-size: 18px;
 
-  .brand a {
+  .top-row {
-    background: #101010;
+    display: flex;
-    color: white;
+    align-items: center;
+  }
+
+  .brand img {
     padding: 5px 10px;
+    height: 50px;
     text-decoration: none;
     border-radius: 2px;
   }
@@ -15,11 +19,12 @@
       padding: 0 10px;
       text-decoration: none;
       font-size: 16px;
-      color: #101010;
+      color: #666;
     }
 
     .signup {
       background: #101010;
+      border-radius: 5px;
       color: #ffffff;
       padding: 7px 10px;
       margin-left: 15px;

components/hero-section/index.js

@@ -1,16 +1,10 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import './style.scss';
 
 const HeroSection = () => (
   <div className='hero-section'>
-    <h1>Developer Roadmaps</h1>
+    <div className="container">
-    <p>Community driven, roadmaps, articles and resources for developers</p>
+      <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>
-    <div className="register-form">
-      <input type="text" className='email-input' placeholder='Enter Email Address' />
-      <a href="#" className="btn btn-dark">Register</a>
-      <a href="#" className='icon-link'><FontAwesomeIcon icon={ ["fab", "github"] } /></a>
-      <a href="#" className='icon-link'><FontAwesomeIcon icon={ ["fab", "twitter"] } /></a>
     </div>
   </div>
 );

components/hero-section/style.scss

@@ -1,54 +1,28 @@
 .hero-section {
   text-align: center;
-  padding: 80px 20px;
+  padding: 70px 20px;
+  margin: 0 auto;
+
+  .container {
+    max-width: 800px;
+  }
 
   h1 {
-    font-size: 35px;
+    font-size: 70px;
     font-weight: 700;
-    margin-bottom: 10px;
+    margin-bottom: 25px;
   }
 
   p {
+    font-size: 20px;
     color: #333;
-    font-weight: 500;
+    font-weight: 400;
-    margin-bottom: 35px;
+    margin-bottom: 0;
+    line-height: 35px;
   }
 
-  .register-form {
+  a {
-    display: flex;
+    font-weight: 700;
-    align-items: center;
+    color: #000;
-    justify-content: center;
-    height: 42px;
-
-    .email-input {
-      border: 3px solid #000000;
-      outline: none;
-      padding: 5px 13px;
-      min-width: 320px;
-    }
-
-    input, .btn {
-      border-radius: 0;
-      height: 100%;
-    }
-
-    .icon-link {
-      color: #000000;
-      margin-left: 15px;
-    }
-
-    .btn {
-      display: flex;
-      align-items: center;
-      margin-left: 15px;
-      margin-right: 8px;
-      padding: 5px 15px;
-    }
-
-    svg {
-      display: flex;
-      width: 30px;
-      height: 30px;
-    }
   }
 }

components/swim-lane/index.js

@@ -0,0 +1,26 @@
+import './style.scss';
+
+const SwimLane = (props) => (
+  <>
+    <div className={ `swim-lane ${props.className}` }>
+      <a className="lane-item" href='#'>
+        <h4>Frontend Developer</h4>
+        <p>Step by step guide to becoming a modern frontend developer in 2019</p>
+      </a>
+      <a className="lane-item" href='#'>
+        <h4>Backend Developer</h4>
+        <p>Step by step guide to becoming a modern backend developer in 2019</p>
+      </a>
+      <a className="lane-item" href='#'>
+        <h4>DevOps Roadmap</h4>
+        <p>Step by step guide to become an SRE or for any operations role</p>
+      </a>
+    </div>
+  </>
+);
+
+SwimLane.defaultProps = {
+  className: '',
+};
+
+export default SwimLane;

components/swim-lane/style.scss

@@ -0,0 +1,46 @@
+.lane-head {
+  color: #000000;
+  margin-bottom: 12px;
+  display: block;
+  font-weight: 600;
+  font-size: 18px;
+}
+
+.swim-lane {
+  display: flex;
+  flex-direction: row;
+
+  .lane-item + .lane-item {
+    margin-left: 35px;
+  }
+
+  .lane-item {
+    border: 1px solid #f7f7f7;
+    display: block;
+    margin-bottom: 1px;
+    text-decoration: none;
+    color: #000000;
+    padding: 25px;
+    border-radius: 10px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+    transition: box-shadow 0.2s ease 0s;
+
+    &:hover {
+      box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+    }
+
+    h4 {
+      font-size: 24px;
+      line-height: 22px;
+      font-weight: 700;
+      margin-bottom: 15px;
+    }
+
+    p {
+      font-size: 15px;
+      line-height: 25px;
+      color: #999999;
+      margin-bottom: 0;
+    }
+  }
+}

pages/about/index.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import Header from '../../components/header/index';
-
-export default function About() {
-  return (
-    <div>
-      <Header />
-      <p>This is the about page</p>
-    </div>
-  );
-}

pages/global.scss

@@ -1,8 +0,0 @@
-body {
-  border-top: 5px solid #000000;
-  color: #000;
-}
-
-.container {
-  max-width: 1000px;
-}

pages/home/index.js

@@ -1,10 +1,17 @@
 import Header from '../../components/header/index';
+import SwimLane from '../../components/swim-lane';
+import './style.scss';
 import HeroSection from '../../components/hero-section';
 
 export const Home = (props) => (
-  <div className='container'>
+  <div className='home-container'>
     <Header />
     <HeroSection />
+    <div className="container">
+      <div className="swim-lanes">
+        <SwimLane />
+      </div>
+    </div>
   </div>
 );
 

pages/home/style.scss

@@ -0,0 +1,3 @@
+.swim-lanes {
+  margin-top: 25px;
+}