Redesign swim lanes

components/swim-lane/index.js

@@ -2,6 +2,10 @@ 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>
     <div className={ `swim-lane ${props.className}` }>
       <a className="lane-item" href='#'>
         <h4>Frontend Developer</h4>

components/swim-lane/style.scss

@@ -1,9 +1,19 @@
 .lane-head {
-  color: #000000;
+  text-align: left;
-  margin-bottom: 12px;
+  margin: 0 0 40px 0;
   display: block;
-  font-weight: 600;
+
+  h3 {
+    font-weight: 700;
+    font-size: 35px;
+    margin-bottom: 14px;
+  }
+
+  p {
+    font-weight: 400;
     font-size: 18px;
+    margin-bottom: 0;
+  }
 }
 
 .swim-lane {
@@ -20,10 +30,12 @@
     margin-bottom: 1px;
     text-decoration: none;
     color: #000000;
-    padding: 25px;
+    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;
@@ -33,7 +45,7 @@
       font-size: 24px;
       line-height: 22px;
       font-weight: 700;
-      margin-bottom: 15px;
+      margin-bottom: 16px;
     }
 
     p {

pages/home/index.js

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

pages/home/style.scss

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