Add featured content guides

components/header/index.js

@@ -10,7 +10,7 @@ const Header = () => (
       </div>
       <div className="nav-links">
         <a href="#">Roadmaps</a>
-        <a href="#">Articles</a>
+        <a href="#">Guides</a>
         <a href="#">Journeys</a>
         <a href="#">FAQs</a>
         <a href="#" className='signup'>Sign Up</a>

components/swim-lane/index.js

@@ -1,28 +1,73 @@
 import './style.scss';
 
 const SwimLane = (props) => (
-  <div className="lane-wrap bg-light">
+  <>
-    <div className="container">
+    <div className="lane-wrap">
-      <div className="lane-head">
+      <div className="container">
-        <h3>Featured Roadmaps</h3>
+        <div className="lane-head">
-        <p>List of roadmaps mostly visited by the community. There are <a href="#">more roadmaps also</a>.</p>
+          <h3>Featured Content</h3>
-      </div>
+          <p className="border-through  featured-separator"><span>List of roadmaps mostly visited by the community. There are <a href="#" className="dark-link">more roadmaps also</a>.</span></p>
-      <div className={ `swim-lane ${props.className}` }>
+        </div>
-        <a className="lane-item" href='#'>
+        <div className="swim-lane row">
-          <h4>Frontend Developer</h4>
+          <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-          <p>Step by step guide to becoming a modern frontend developer in 2019</p>
+            <a className="lane-item" href='#'>
-        </a>
+              <h4>Frontend Developer</h4>
-        <a className="lane-item" href='#'>
+              <p>Step by step guide to becoming a modern frontend developer in 2019</p>
-          <h4>Backend Developer</h4>
+            </a>
-          <p>Step by step guide to becoming a modern backend developer in 2019</p>
+          </div>
-        </a>
+          <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-        <a className="lane-item" href='#'>
+            <a className="lane-item" href='#'>
-          <h4>DevOps Roadmap</h4>
+              <h4>Backend Developer</h4>
-          <p>Step by step guide to become an SRE or for any operations role</p>
+              <p>Step by step guide to becoming a modern backend developer in 2019</p>
-        </a>
+            </a>
+          </div>
+          <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+            <a className="lane-item" href='#'>
+              <h4>DevOps Roadmap</h4>
+              <p>Step by step guide to become an SRE or for any operations role in 2019</p>
+            </a>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
+    <div className="lane-wrap">
+      <div className="container">
+        <p className='border-through featured-separator'><span>List of most visited guides. There are <a href="#" className="dark-link">more guides also</a>.</span></p>
+        <div className="swim-lane row">
+          <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+            <a className="lane-item" href='#'>
+              <h4>Design Patterns for Humans</h4>
+              <p>A language agnostic, ultra-simplified explanation to design patterns</p>
+            </a>
+          </div>
+          <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+            <a className="lane-item" href='#'>
+              <h4>Learn Regex</h4>
+              <p>An easy to understand guide on regular expressions with real world examples</p>
+            </a>
+          </div>
+          <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+            <a className="lane-item" href='#'>
+              <h4>Bash Guide</h4>
+              <p>Easy to understand guide for bash with real world usage examples.</p>
+            </a>
+          </div>
+          <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+            <a className="lane-item" href='#'>
+              <h4>DNS in One Picture</h4>
+              <p>Quick illustrative guide on how a website is found on the internet.</p>
+            </a>
+          </div>
+          <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+            <a className="lane-item" href='#'>
+              <h4>Using React Hooks</h4>
+              <p>Start using React hooks in your react applications today with this guide.</p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </>
 );
 
 SwimLane.defaultProps = {

components/swim-lane/style.scss

@@ -1,38 +1,26 @@
 .lane-wrap {
-  padding: 50px 0;
-  border-top: 1px solid #eaeaea;
-  border-bottom: 1px solid #eaeaea;
-
   .lane-head {
-    text-align: left;
+    text-align: center;
-    margin: 0 0 40px 0;
     display: block;
 
     h3 {
       font-weight: 700;
       font-size: 35px;
-      margin-bottom: 14px;
+      margin-bottom: 30px;
-    }
-
-    p {
-      font-weight: 400;
-      font-size: 18px;
-      margin-bottom: 0;
     }
   }
 
+  .featured-separator {
+    font-weight: 400;
+    font-size: 18px;
+    margin-bottom: 40px;
+    margin-top: 25px;
+  }
+
   .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;
       background: #ffffff;
@@ -41,16 +29,20 @@
       box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
       transition: box-shadow 0.2s ease 0s;
       cursor: pointer;
+      margin-bottom: 32px;
 
       &:hover {
         box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
       }
 
       h4 {
-        font-size: 24px;
+        line-height: 27px;
-        line-height: 22px;
+        font-weight: 600;
-        font-weight: 700;
+        font-size: 22px;
-        margin-bottom: 16px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        flex: 0 0 auto;
+        overflow: hidden;
       }
 
       p {

pages/global.scss

@@ -0,0 +1,30 @@
+.border-top {
+  border-top: 1px solid #eaeaea;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #eaeaea;
+}
+
+.dark-link {
+  font-weight: 500;
+  color: #000000;
+  text-decoration: none;
+
+  &:hover {
+    color: #101010;
+  }
+}
+
+.border-through {
+  width: 100%;
+  text-align: center;
+  border-bottom: 2px solid #f5f5f5;
+  line-height: 0.1em;
+  margin: 10px 0 20px;
+
+  span {
+    background: #fff;
+    padding: 0 10px
+  }
+}

pages/home/index.js

@@ -7,7 +7,7 @@ export const Home = (props) => (
   <div className='home-container'>
     <Header />
     <HeroSection />
-    <div className="swim-lanes">
+    <div className="swim-lanes border-top border-bottom">
       <SwimLane />
     </div>
   </div>

pages/home/style.scss

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