Move roadmap block to separate component

components/featured-content/roadmaps.js

@@ -1,13 +1,14 @@
-import { FeaturedContentWrap } from './style';
 import Link from 'next/link';
+import { FeaturedContentWrap } from './style';
 import roadmaps from '../../data/roadmaps';
+import RoadmapBlock from '../roadmap-block';
 
 const FeaturedRoadmaps = () => (
   <FeaturedContentWrap className="featured-content-wrap">
     <div className="container">
       <div className="featured-head">
         <h3>Featured Content</h3>
-        <p className="border-through  featured-separator">
+        <p className="border-through featured-separator">
             <span>
               List of roadmaps mostly visited by the community&nbsp;
               <Link href='/roadmaps'>
@@ -20,14 +21,7 @@ const FeaturedRoadmaps = () => (
         { roadmaps
           .filter(({ featured }) => featured)
           .map(roadmap => (
-            <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container" key={roadmap.slug}>
+            <RoadmapBlock roadmap={ roadmap } key={ roadmap.slug } />
-              <Link href={ roadmap.slug }>
-                <a className="featured-block">
-                  <h4>{ roadmap.title }</h4>
-                  <p>{ roadmap.featuredDescription || roadmap.description }</p>
-                </a>
-              </Link>
-            </div>
           )) }
       </div>
     </div>

components/featured-content/style.js

@@ -39,38 +39,6 @@ export const FeaturedContentWrap = styled.div`
 
   .swim-lane {
     .featured-block {
-      border: 1px solid #f7f7f7;
-      display: block;
-      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;
-      margin-bottom: 32px;
-
-      &:hover {
-        box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
-      }
-
-      h4 {
-        line-height: 27px;
-        font-weight: 600;
-        font-size: 22px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        flex: 0 0 auto;
-        overflow: hidden;
-      }
-
-      p {
-        font-size: 15px;
-        line-height: 25px;
-        color: #999999;
-        margin-bottom: 0;
-      }
     }
   }
 

components/roadmap-block/index.js

@@ -0,0 +1,15 @@
+import Link from 'next/link';
+import { BlockLink, BlockSubtitle, BlockTitle } from './style';
+
+const RoadmapBlock = ({ roadmap }) => (
+  <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+    <Link href={ roadmap.slug } passHref>
+      <BlockLink>
+        <BlockTitle>{ roadmap.title }</BlockTitle>
+        <BlockSubtitle>{ roadmap.featuredDescription || roadmap.description }</BlockSubtitle>
+      </BlockLink>
+    </Link>
+  </div>
+);
+
+export default RoadmapBlock;

components/roadmap-block/style.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+export const BlockLink = styled.a`
+  border: 1px solid #f7f7f7;
+  display: block;
+  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;
+  margin-bottom: 32px;
+  
+  &:hover {
+    text-decoration: none;
+    color: #000000;
+    box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+  }
+`;
+
+export const BlockTitle = styled.h4`
+  line-height: 27px;
+  font-weight: 600;
+  font-size: 22px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 0 0 auto;
+  overflow: hidden;
+`;
+
+export const BlockSubtitle = styled.p`
+  font-size: 15px;
+  line-height: 25px;
+  color: #999999;
+  margin-bottom: 0;
+`;