Swim lane updates

components/swim-lane/index.js

@@ -1,7 +1,8 @@
 import './style.scss';
 
 const SwimLane = (props) => (
-  <>
+  <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>
@@ -20,7 +21,8 @@ const SwimLane = (props) => (
           <p>Step by step guide to become an SRE or for any operations role</p>
         </a>
       </div>
-  </>
+    </div>
+  </div>
 );
 
 SwimLane.defaultProps = {

components/swim-lane/style.scss

@@ -1,4 +1,9 @@
-.lane-head {
+.lane-wrap {
+  padding: 50px 0;
+  border-top: 1px solid #eaeaea;
+  border-bottom: 1px solid #eaeaea;
+
+  .lane-head {
     text-align: left;
     margin: 0 0 40px 0;
     display: block;
@@ -14,9 +19,9 @@
       font-size: 18px;
       margin-bottom: 0;
     }
-}
+  }
 
-.swim-lane {
+  .swim-lane {
     display: flex;
     flex-direction: row;
 
@@ -55,4 +60,5 @@
         margin-bottom: 0;
       }
     }
+  }
 }

pages/home/index.js

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

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;
 }