Add footer UI

components/footer/index.js

@@ -3,6 +3,8 @@ import './style.scss';
 const Footer = () => (
   <div className="page-footer">
     <div className="container">
+      <div className="foot-cols-wrap row">
+        <div className="site-meta-wrap col-12 col-sm-12 col-lg col-xl col-md-12">
           <div className="site-meta">
             <div className="brand-detail">
               <a href="#" className='brand'><img src="/static/brand.png" alt="" /> roadmap.sh</a>
@@ -20,6 +22,35 @@ const Footer = () => (
             </p>
           </div>
         </div>
+        <div className="site-contribute foot-col col">
+          <ul>
+            <li className='foot-header'>Contribute</li>
+            <li><a href="#">Write an Article</a></li>
+            <li><a href="#">Submit a Roadmap</a></li>
+            <li><a href="#">Add resources</a></li>
+            <li><a href="#">Codebase</a></li>
+          </ul>
+        </div>
+        <div className="site-learn foot-col col">
+          <ul>
+            <li className="foot-header">Learn</li>
+            <li><a href="#">Read Articles</a></li>
+            <li><a href="#">Follow Roadmap</a></li>
+            <li><a href="#">Review Projects</a></li>
+            <li><a href="#">Contribute</a></li>
+          </ul>
+        </div>
+        <div className="site-learn foot-col col">
+          <ul>
+            <li className="foot-header">Most Visited</li>
+            <li><a href="#">Frontend Roadmap</a></li>
+            <li><a href="#">Backend Roadmap</a></li>
+            <li><a href="#">DevOps Roadmap</a></li>
+            <li><a href="#">One for All</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 );
 

components/footer/style.scss

@@ -2,6 +2,7 @@
   padding: 65px 10px;
 
   .site-meta {
+    margin-bottom: 30px;
     width: 350px;
 
     .brand-detail {
@@ -64,4 +65,29 @@
       }
     }
   }
+
+  .foot-col {
+    max-width: 190px;
+
+    a {
+      color: #999;
+    }
+
+    .foot-header {
+      font-weight: 500;
+      margin-bottom: 7px;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      li {
+        margin-bottom: 2px;
+        font-size: 15px;
+        list-style: none;
+        margin-left: 0;
+      }
+    }
+  }
 }