Footer component markup and styling changes

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
+export default Card

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>
+  <footer className="bg-indigo-darker">
-    <h1>Footer</h1>
+    <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>
 )
 

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 />