From 2826a5302f765a78b2e70864c1282f5a8737de52 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 28 Oct 2019 00:20:59 +0400
Subject: [PATCH] Split featured content into separate components

---
 components/featured-content/guides.js   |  54 ++++++++++
 components/featured-content/index.js    | 137 ++----------------------
 components/featured-content/journeys.js |  54 ++++++++++
 components/featured-content/roadmaps.js |  39 +++++++
 4 files changed, 154 insertions(+), 130 deletions(-)
 create mode 100644 components/featured-content/guides.js
 create mode 100644 components/featured-content/journeys.js
 create mode 100644 components/featured-content/roadmaps.js

diff --git a/components/featured-content/guides.js b/components/featured-content/guides.js
new file mode 100644
index 000000000..13c98d500
--- /dev/null
+++ b/components/featured-content/guides.js
@@ -0,0 +1,54 @@
+import { FeaturedContentWrap } from './style';
+
+const FeaturedGuides = () => (
+  <FeaturedContentWrap className="featured-content-wrap">
+    <div className="container">
+      <p className='border-through featured-separator'>
+          <span>
+            List of most visited guides&nbsp;
+            <a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</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="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="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="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="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="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>
+  </FeaturedContentWrap>
+);
+
+export default FeaturedGuides;
\ No newline at end of file
diff --git a/components/featured-content/index.js b/components/featured-content/index.js
index 52fbd0bc3..e14496cf0 100644
--- a/components/featured-content/index.js
+++ b/components/featured-content/index.js
@@ -1,136 +1,13 @@
-import { FeaturedContentWrap, FeaturedWrap } from './style';
+import { FeaturedWrap } from './style';
+import FeaturedJourneys from './journeys';
+import FeaturedGuides from './guides';
+import FeaturedRoadmaps from './roadmaps';
 
 const FeaturedContent = (props) => (
   <FeaturedWrap className="border-top border-bottom bg-light">
-    <FeaturedContentWrap className="featured-content-wrap">
-      <div className="container">
-        <div className="featured-head">
-          <h3>Featured Content</h3>
-          <p className="border-through  featured-separator">
-            <span>
-              List of roadmaps mostly visited by the community&nbsp;
-              <a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</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="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="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="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>
-          </div>
-        </div>
-      </div>
-    </FeaturedContentWrap>
-    <FeaturedContentWrap className="featured-content-wrap">
-      <div className="container">
-        <p className='border-through featured-separator'>
-          <span>
-            List of most visited guides&nbsp;
-            <a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</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="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="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="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="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="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>
-    </FeaturedContentWrap>
-    <FeaturedContentWrap 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>
-    </FeaturedContentWrap>
+    <FeaturedRoadmaps />
+    <FeaturedGuides />
+    <FeaturedJourneys />
   </FeaturedWrap>
 );
 
diff --git a/components/featured-content/journeys.js b/components/featured-content/journeys.js
new file mode 100644
index 000000000..f0a8b341c
--- /dev/null
+++ b/components/featured-content/journeys.js
@@ -0,0 +1,54 @@
+import { FeaturedContentWrap } from './style';
+
+const FeaturedJourneys = () => (
+  <FeaturedContentWrap 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>
+  </FeaturedContentWrap>
+);
+
+export default FeaturedJourneys;
\ No newline at end of file
diff --git a/components/featured-content/roadmaps.js b/components/featured-content/roadmaps.js
new file mode 100644
index 000000000..ab52a2f77
--- /dev/null
+++ b/components/featured-content/roadmaps.js
@@ -0,0 +1,39 @@
+import { FeaturedContentWrap } from './style';
+
+const FeaturedRoadmaps = () => (
+  <FeaturedContentWrap className="featured-content-wrap">
+    <div className="container">
+      <div className="featured-head">
+        <h3>Featured Content</h3>
+        <p className="border-through  featured-separator">
+            <span>
+              List of roadmaps mostly visited by the community&nbsp;
+              <a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</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="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="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="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>
+        </div>
+      </div>
+    </div>
+  </FeaturedContentWrap>
+);
+
+export default FeaturedRoadmaps;
\ No newline at end of file