Add journey list on homepage

components/featured-content/index.js

@@ -83,6 +83,54 @@ const FeaturedContent = (props) => (
         </div>
       </div>
     </div>
+    <div className="featured-content-wrap">
+      <div className="container">
+        <p className='border-through featured-separator'>
+          <span>
+            List of most visited Journeys&nbsp;
+            <a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Journeys &rarr;</a>
+          </span>
+        </p>
+        <div className="swim-lane row featured-journeys">
+          <div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
+            <a href="#">
+              <img src="/static/kamran.jpeg" alt="" />
+              <div className="journey-meta">
+                <h4>Kamran Ahmed</h4>
+                <p>Engineering Lead at Al-tayer</p>
+              </div>
+            </a>
+          </div>
+          <div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
+            <a href="#">
+              <img src="/static/aras.jpeg" alt="" />
+              <div className="journey-meta">
+                <h4>Aras Atasaygin</h4>
+                <p>Engg. Manager at Al-tayer</p>
+              </div>
+            </a>
+          </div>
+          <div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
+            <a href="#">
+              <img src="/static/dan-abramove.jpeg" alt="" />
+              <div className="journey-meta">
+                <h4>Dan Abramov</h4>
+                <p>Co-founder and CTO at Blink</p>
+              </div>
+            </a>
+          </div>
+          <div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
+            <a href="#">
+              <img src="/static/chris-coyier.jpeg" alt="" />
+              <div className="journey-meta">
+                <h4>Chris Coyier</h4>
+                <p>Co-founder of Codepen</p>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
   </>
 );
 

components/featured-content/style.scss

@@ -16,8 +16,6 @@
     margin-bottom: 40px;
     margin-top: 25px;
 
-    border-bottom: 2px solid #e8e8e8;
-
     span {
       background: #f8f9fa;
     }
@@ -69,4 +67,70 @@
       }
     }
   }
+
+  .guide-item {
+    border-bottom: 1px solid #dee2e6;
+    padding: 15px 10px;
+
+    p {
+      margin-bottom: 0;
+      font-size: 15px;
+      color: #999;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .journey-block {
+    a {
+      border: 1px solid #f7f7f7;
+      display: block;
+      text-decoration: none;
+      color: #000000;
+      background: #ffffff;
+      box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+      transition: box-shadow 0.2s ease 0s;
+      cursor: pointer;
+      margin-bottom: 32px;
+      border-radius: 0 0 10px 10px;
+
+      &:hover {
+        box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+
+        img {
+          filter: grayscale(0);
+        }
+      }
+    }
+
+    .journey-meta {
+      padding: 18px 25px 20px;
+
+      h4 {
+        line-height: 27px;
+        font-weight: 600;
+        margin-bottom: 0;
+        font-size: 18px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        flex: 0 0 auto;
+        overflow: hidden;
+      }
+
+      p {
+        font-size: 15px;
+        line-height: 25px;
+        color: #999999;
+        margin-bottom: 0;
+      }
+    }
+
+    img {
+      width: 100%;
+      filter: grayscale(1);
+      border-radius: 10px 10px 0 0;
+    }
+  }
 }