Add guide footer

components/guide-footer/index.js

@@ -1,29 +1,42 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'
-import { AuthorImg, FooterWrap, AuthorInfoWrap, WrittenBy, AuthorBio } from './style';
+import { faGithub, faFacebookSquare, faTwitterSquare, faTwitter, faHackerNewsSquare, faRedditSquare } from '@fortawesome/free-brands-svg-icons'
+import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterWrap, ShareIcons, ShareWrap, WrittenBy } from './style';
 
 
 const GuideFooter = (props) => (
   <FooterWrap>
-    <AuthorImg src="/static/authors/kamranahmedse.jpeg" alt="" />
-    <AuthorInfoWrap>
-      <WrittenBy>Written By</WrittenBy>
-      <h4><a href="#">Kamran Ahmed</a></h4>
-      <AuthorBio>Lead engineer at Tajawal. Created roadmap.sh. Lover of web and opensource</AuthorBio>
-      <p className="social-links">
-        <a href="#">
-          <FontAwesomeIcon icon={ faTwitter } />
-          Follow on Twitter
-        </a>
+    <ShareWrap>
+      <ContributeIcon>
         <a href="#">
+          <span>Improve this Guide </span>
           <FontAwesomeIcon icon={ faGithub } />
-          Follow on GitHub
         </a>
-      </p>
-      { /*<span className="social-icons">*/ }
-      { /*<a href="#"><TwitterIcon /></a>*/ }
-      { /*<a href="#"><GitHubIcon /></a>*/ }
-      { /*</span>*/ }
+      </ContributeIcon>
+      <ShareIcons>
+        <span>Help spread the word</span>
+        <a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a>
+        <a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a>
+        <a href="#"><FontAwesomeIcon icon={ faRedditSquare } /></a>
+        <a href="#"><FontAwesomeIcon icon={ faHackerNewsSquare } /></a>
+      </ShareIcons>
+    </ShareWrap>
+    <AuthorInfoWrap className="border-top">
+      <AuthorImg src="/static/authors/kamranahmedse.jpeg" alt="" />
+      <AuthorMeta>
+        <WrittenBy>Written By</WrittenBy>
+        <h4><a href="#">Kamran Ahmed</a></h4>
+        <AuthorBio>Lead engineer at Tajawal. Created roadmap.sh. Lover of web and opensource</AuthorBio>
+        <p className="social-links">
+          <a href="#">
+            <FontAwesomeIcon icon={ faTwitter } />
+            Follow on Twitter
+          </a>
+          <a href="#">
+            <FontAwesomeIcon icon={ faGithub } />
+            Follow on GitHub
+          </a>
+        </p>
+      </AuthorMeta>
     </AuthorInfoWrap>
   </FooterWrap>
 );

components/guide-footer/style.js

@@ -1,10 +1,43 @@
 import styled from 'styled-components';
 
 export const FooterWrap = styled.div`
+  display: block;
+  margin-top: 40px;
+`;
+
+export const ShareWrap = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  align-items: center;
+
+  a {
+    display: flex;  
+    align-items: center;
+    color: #101010;
+  }
+
+  svg {
+    height: 22px;
+    color: #101010;
+    margin-left: 7px;
+  }
+`;
+
+export const ContributeIcon = styled.div`
   display: flex;
   align-items: center;
-  padding: 20px 0 70px;
-  margin-top: 70px;
+  justify-content: center;
+`;
+
+export const ShareIcons = styled.div`
+  display: flex;
+`;
+
+export const AuthorInfoWrap = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 30px 0 70px;
 
   h4 {
     position: relative;
@@ -74,7 +107,8 @@ export const WrittenBy = styled.p`
   display: block;
   margin-bottom: 0;
 `;
-export const AuthorInfoWrap = styled.div`
+
+export const AuthorMeta = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: column;

components/share-guide/index.js

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFacebookSquare, faHackerNewsSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
+import { faFacebookSquare, faRedditSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
 
 import { ShareIcon, ShareIconsList, ShareWrap } from './style';
 
@@ -8,7 +8,7 @@ const ShareGuide = (props) => (
     <ShareIconsList className="d-sm-none d-md-none d-lg-flex d-xl-flex">
       <ShareIcon><a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a></ShareIcon>
       <ShareIcon><a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a></ShareIcon>
-      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faHackerNewsSquare } /></a></ShareIcon>
+      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faRedditSquare } /></a></ShareIcon>
     </ShareIconsList>
   </ShareWrap>
 );

layouts/default/index.js

@@ -1,6 +1,3 @@
-import { fab } from '@fortawesome/free-brands-svg-icons';
-import { library } from '@fortawesome/fontawesome-svg-core';
-
 import Head from './head';
 import './global.scss';