Footer component markup and styling changes

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