Rename featured content component

components/featured-content/index.js

@@ -1,28 +1,30 @@
 import './style.scss';
 
-const SwimLane = (props) => (
+const FeaturedContent = (props) => (
   <>
-    <div className="lane-wrap">
+    <div className="featured-content-wrap">
       <div className="container">
-        <div className="lane-head">
+        <div className="featured-head">
           <h3>Featured Content</h3>
-          <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>
+          <p className="border-through  featured-separator">
+            <span>List of roadmaps mostly visited by the community <a href="#" className="dark-link">View all Roadmaps</a></span>
+          </p>
         </div>
         <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='#'>
+            <a className="featured-block" href='#'>
               <h4>Frontend Developer</h4>
               <p>Step by step guide to becoming a modern frontend developer in 2019</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='#'>
+            <a className="featured-block" href='#'>
               <h4>Backend Developer</h4>
               <p>Step by step guide to becoming a modern backend developer in 2019</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='#'>
+            <a className="featured-block" href='#'>
               <h4>DevOps Roadmap</h4>
               <p>Step by step guide to become an SRE or for any operations role in 2019</p>
             </a>
@@ -30,48 +32,54 @@ const SwimLane = (props) => (
         </div>
       </div>
     </div>
-    <div className="lane-wrap">
+    <div className="featured-content-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>
+        <p className='border-through featured-separator'><span>List of most visited guides <a href="#" className="dark-link">View all Guides</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='#'>
+            <a className="featured-block" 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='#'>
+            <a className="featured-block" 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='#'>
+            <a className="featured-block" 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='#'>
+            <a className="featured-block" 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='#'>
+            <a className="featured-block" href='#'>
               <h4>Using React Hooks</h4>
               <p>Start using React hooks in your react applications today with this guide.</p>
             </a>
           </div>
+          <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+            <a className="featured-block" href='#'>
+              <h4>HTTP Caching</h4>
+              <p>Everything you need to know about web caching</p>
+            </a>
+          </div>
         </div>
       </div>
     </div>
   </>
 );
 
-SwimLane.defaultProps = {
+FeaturedContent.defaultProps = {
   className: '',
 };
 
-export default SwimLane;
+export default FeaturedContent;

components/featured-content/style.scss

@@ -1,5 +1,5 @@
-.lane-wrap {
+.featured-content-wrap {
-  .lane-head {
+  .featured-head {
     text-align: center;
     display: block;
 
@@ -15,10 +15,20 @@
     font-size: 18px;
     margin-bottom: 40px;
     margin-top: 25px;
+
+    a {
+      background: black;
+      color: white;
+      padding: 3px 8px;
+      border-radius: 6px;
+      font-size: 14px;
+      text-decoration: none;
+      margin-left: 5px;
+    }
   }
 
   .swim-lane {
-    .lane-item {
+    .featured-block {
       border: 1px solid #f7f7f7;
       display: block;
       text-decoration: none;

pages/home/index.js

@@ -1,5 +1,5 @@
 import Header from '../../components/header/index';
-import SwimLane from '../../components/swim-lane';
+import FeaturedContent from '../../components/featured-content';
 import './style.scss';
 import HeroSection from '../../components/hero-section';
 
@@ -8,7 +8,7 @@ export const Home = (props) => (
     <Header />
     <HeroSection />
     <div className="swim-lanes border-top border-bottom">
-      <SwimLane />
+      <FeaturedContent />
     </div>
   </div>
 );

pages/index.js

@@ -1,11 +1,12 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faGithub, fab } from '@fortawesome/free-brands-svg-icons';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './global.scss';
 import Home from './home/index';
 
-library.add(fab, faGithub);
+library.add(fab, faGithub, faArrowRight);
 
 const Index = () => (
   <div>