From bcc6a948cbcf814e56a97fcffeb349a42b9012e7 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 5 Jul 2018 07:14:42 +0200
Subject: [PATCH] Footer component markup and styling changes

---
 src/components/Card.js   | 15 ++++++++++-----
 src/components/Footer.js | 33 +++++++++++++++++++++++++++++++--
 src/pages/index.js       |  2 +-
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/components/Card.js b/src/components/Card.js
index deab45c..6e8931e 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -4,19 +4,24 @@ import Link from 'gatsby-link'
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <div className="m-3 max-w-sm rounded overflow-hidden shadow-lg">
+  <div className="m-3 w-full rounded overflow-hidden shadow-lg">
     <img className="w-full" src={ImgSprint} alt="Sprint Work" />
     <div className="px-6 py-4">
-      <div className="font-bold text-xl mb-2">How we do remote design sprints
+      <div className="font-bold text-xl mb-2">
+        How we do remote design sprints
       </div>
       <p className="text-grey-darker text-base">
-        It’s amazing how design can impact business and people making the world a better and a friendlier place. Knowing the how important design today is, here’s a complete rundown of our design process in it’s fully glory.
+        It’s amazing how design can impact business and people making the world
+        a better and a friendlier place. Knowing the how important design today
+        is, here’s a complete rundown of our design process in it’s fully glory.
       </p>
     </div>
     <div className="px-6 py-4">
-      <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#workstyle</span>
+      <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">
+        #workstyle
+      </span>
     </div>
   </div>
 )
 
-export default Card
\ No newline at end of file
+export default Card
diff --git a/src/components/Footer.js b/src/components/Footer.js
index f4fd6d7..258ab5c 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,9 +1,38 @@
 import React from 'react'
 import Link from 'gatsby-link'
+import Button from './Button'
+
+import LogoSaburly from '../images/logo-saburly-colorful.svg'
+
+let menuClasses =
+  'no-underline mt-4 lg:inline-block opacity-75 lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'
 
 const Footer = () => (
-  <footer>
-    <h1>Footer</h1>
+  <footer className="bg-indigo-darker">
+    <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
+    <p className="text-white font-light">
+      Nam imperdiet et massa ut lacinia. Praesent nec sem ut sem efficitur
+      imperdiet.
+    </p>
+    <h4>Home</h4>
+    <ul className="text-sm">
+      <Link to="/services">
+        <li className={menuClasses}>What We Do</li>
+      </Link>
+      <Link to="/about">
+        <li className={menuClasses}>TEAM</li>
+      </Link>
+      <Link to="/blog">
+        <li className={menuClasses}>BLOG</li>
+      </Link>
+    </ul>
+
+    <Button
+      text="Contact Us"
+      standard
+      classes="rounded-full text-white hover:shadow"
+      url="/contact"
+    />
   </footer>
 )
 
diff --git a/src/pages/index.js b/src/pages/index.js
index 53237c2..41150be 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -135,7 +135,7 @@ const IndexPage = () => (
         intro="Blog & Social Media"
         headline="But occasionally we find the time to have fun and publish stuff"
       />
-      <div className="lg:flex">
+      <div className="lg:flex justify-center mt-8">
         <Card />
         <Card />
         <Card />