From 93db393474ff38ffa2366d1e2c1b4b279a72c10f Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 8 Sep 2019 00:03:40 +0400
Subject: [PATCH] Add footer basic style

---
 components/footer/index.js   | 26 ++++++++++++++
 components/footer/style.scss | 67 ++++++++++++++++++++++++++++++++++++
 pages/home/index.js          |  2 ++
 3 files changed, 95 insertions(+)
 create mode 100644 components/footer/index.js
 create mode 100644 components/footer/style.scss

diff --git a/components/footer/index.js b/components/footer/index.js
new file mode 100644
index 000000000..13ee851aa
--- /dev/null
+++ b/components/footer/index.js
@@ -0,0 +1,26 @@
+import './style.scss';
+
+const Footer = () => (
+  <div className="page-footer">
+    <div className="container">
+      <div className="site-meta">
+        <div className="brand-detail">
+          <a href="#" className='brand'><img src="/static/brand.png" alt="" /> roadmap.sh</a>
+          <span className="preposition">by</span>
+          <a href="#" className='follow-author'>@kamranahmedse</a>
+        </div>
+        <div className="brand-explanation">
+          <p>Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.</p>
+        </div>
+        <p className='meta-links'>
+          &copy; roadmap.sh &middot;
+          &nbsp; <a href="#">FAQ</a> &middot;
+          &nbsp; <a href="#">Terms</a> &middot;
+          &nbsp; <a href="#">Privacy</a>
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+export default Footer;
\ No newline at end of file
diff --git a/components/footer/style.scss b/components/footer/style.scss
new file mode 100644
index 000000000..ea54a5865
--- /dev/null
+++ b/components/footer/style.scss
@@ -0,0 +1,67 @@
+.page-footer {
+  padding: 65px 10px;
+
+  .site-meta {
+    width: 350px;
+
+    .brand-detail {
+      display: flex;
+      align-items: center;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      font-weight: 600;
+      color: #000;
+      text-decoration: none;
+
+      img {
+        height: 25px;
+        width: 25px;
+        margin-right: 8px;
+      }
+    }
+
+    .preposition {
+      margin: 0 7px;
+    }
+
+    .follow-author {
+      background-color: #1e99e6;
+      border-radius: 3px;
+      color: #fff;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      padding: 0 6px;
+      white-space: nowrap;
+      text-decoration: none;
+
+      &:hover {
+        background: #43aaea;
+      }
+    }
+
+    .brand-explanation {
+      color: #999;
+
+      p {
+        font-size: 15px;
+        line-height: 24px;
+        margin: 15px 0;
+      }
+    }
+
+    .meta-links {
+        color: #a3a3a3;
+      font-size: 15px;
+
+      a {
+        color: #000;
+        text-decoration: none;
+      }
+    }
+  }
+}
diff --git a/pages/home/index.js b/pages/home/index.js
index 390e06e06..1d012f4e1 100644
--- a/pages/home/index.js
+++ b/pages/home/index.js
@@ -2,6 +2,7 @@ import Header from '../../components/header/index';
 import FeaturedContent from '../../components/featured-content';
 import './style.scss';
 import HeroSection from '../../components/hero-section';
+import Footer from '../../components/footer';
 
 export const Home = (props) => (
   <div className='home-container'>
@@ -10,6 +11,7 @@ export const Home = (props) => (
     <div className="featured-content border-top border-bottom bg-light">
       <FeaturedContent />
     </div>
+    <Footer />
   </div>
 );