Swim lane updates

components/swim-lane/index.js

@@ -1,26 +1,28 @@
 import './style.scss';
 
 const SwimLane = (props) => (
-  <>
-    <div className="lane-head">
-      <h3>Featured Roadmaps</h3>
-      <p>List of roadmaps mostly visited by the community. There are <a href="#">more roadmaps also</a>.</p>
+  <div className="lane-wrap bg-light">
+    <div className="container">
+      <div className="lane-head">
+        <h3>Featured Roadmaps</h3>
+        <p>List of roadmaps mostly visited by the community. There are <a href="#">more roadmaps also</a>.</p>
+      </div>
+      <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>
     </div>
-    <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>
-  </>
+  </div>
 );
 
 SwimLane.defaultProps = {

components/swim-lane/style.scss

@@ -1,58 +1,64 @@
-.lane-head {
-  text-align: left;
-  margin: 0 0 40px 0;
-  display: block;
-
-  h3 {
-    font-weight: 700;
-    font-size: 35px;
-    margin-bottom: 14px;
-  }
-
-  p {
-    font-weight: 400;
-    font-size: 18px;
-    margin-bottom: 0;
-  }
-}
-
-.swim-lane {
-  display: flex;
-  flex-direction: row;
+.lane-wrap {
+  padding: 50px 0;
+  border-top: 1px solid #eaeaea;
+  border-bottom: 1px solid #eaeaea;
 
-  .lane-item + .lane-item {
-    margin-left: 35px;
-  }
-
-  .lane-item {
-    border: 1px solid #f7f7f7;
+  .lane-head {
+    text-align: left;
+    margin: 0 0 40px 0;
     display: block;
-    margin-bottom: 1px;
-    text-decoration: none;
-    color: #000000;
-    background: #ffffff;
-    padding: 28px 25px 25px;
-    border-radius: 10px;
-    box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
-    transition: box-shadow 0.2s ease 0s;
-    cursor: pointer;
-
-    &:hover {
-      box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
-    }
 
-    h4 {
-      font-size: 24px;
-      line-height: 22px;
+    h3 {
       font-weight: 700;
-      margin-bottom: 16px;
+      font-size: 35px;
+      margin-bottom: 14px;
     }
 
     p {
-      font-size: 15px;
-      line-height: 25px;
-      color: #999999;
+      font-weight: 400;
+      font-size: 18px;
       margin-bottom: 0;
     }
   }
-}
+
+  .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;
+      padding: 28px 25px 25px;
+      border-radius: 10px;
+      box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+      transition: box-shadow 0.2s ease 0s;
+      cursor: pointer;
+
+      &:hover {
+        box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+      }
+
+      h4 {
+        font-size: 24px;
+        line-height: 22px;
+        font-weight: 700;
+        margin-bottom: 16px;
+      }
+
+      p {
+        font-size: 15px;
+        line-height: 25px;
+        color: #999999;
+        margin-bottom: 0;
+      }
+    }
+  }
+}

pages/home/index.js

@@ -7,10 +7,8 @@ export const Home = (props) => (
   <div className='home-container'>
     <Header />
     <HeroSection />
-    <div className="swim-lanes bg-light">
-      <div className="container">
-        <SwimLane />
-      </div>
+    <div className="swim-lanes">
+      <SwimLane />
     </div>
   </div>
 );

pages/home/style.scss

@@ -1,6 +1,3 @@
 .swim-lanes {
-  border-top: 1px solid #eaeaea;
-  border-bottom: 1px solid #eaeaea;
-  padding: 50px 0;
   margin-top: 25px;
 }