From b5334fb4ffc62637d25d34e10e3b664e7dacde1d Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 5 Jul 2018 13:32:53 +0200
Subject: [PATCH] Restructuring and styling of footer

---
 src/components/Footer.js | 52 +++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/components/Footer.js b/src/components/Footer.js
index 17fedf2..41ba70d 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -14,9 +14,9 @@ let menuClasses =
 
 const Footer = () => (
   <footer className="bg-indigo-darker">
-    <div className="container mx-auto pt-10 pb-10 lg:flex">
+    <div className="container mx-auto pt-10 lg:flex">
       <div className="lg:w-1/4 p-4">
-        <img src={LogoSaburly} alt="Saburly Logo" className="max-w-full" />
+        <img src={LogoSaburly} alt="Saburly Logo" className="w-full" />
         <div className="flex justify-between social-icons py-2">
           <div>
             <img
@@ -47,34 +47,24 @@ const Footer = () => (
             />
           </div>
         </div>
-        <a
-          className="opacity-70 hover:opacity-100 pb-1 no-underline text-white block"
-          href="mailto:info@saburly.com"
-        >
-          E-mail: info@saburly.com
-        </a>
-        <a
-          className="opacity-70 hover:opacity-100 pt-1 no-underline text-white block"
-          href="tel:+46760477717"
-        >
-          Phone: +46760477717
-        </a>
+        <div>
+          <a
+            className="text-center lg:text-left opacity-70 hover:opacity-100 py-4 lg:py-1 text-xl lg:text-sm no-underline text-white block"
+            href="mailto:info@saburly.com"
+          >
+            E-mail: info@saburly.com
+          </a>
+          <a
+            className="text-center text-xl lg:text-sm lg:text-left opacity-70 hover:opacity-100 no-underline text-white block"
+            href="tel:+46760477717"
+          >
+            Phone: +46760477717
+          </a>
+        </div>
       </div>
 
       <div className="lg:w-3/4 ml-10 p-4">
-        <div className="lg:flex items-center justify-around">
-          <h3 className="text-white font-light">
-            Let's start a new project together
-          </h3>
-          <Button
-            text="Contact Us"
-            standard
-            classes="rounded-full text-white hover:shadow"
-            url="/contact"
-          />
-        </div>
-
-        <div className="mt-4 lg:flex justify-between">
+        <div className="p-4 text-center lg:text-left sm:flex justify-between">
           <nav>
             <p className="font-thin text-white opacity-50">Sitemap</p>
             <ul className="list-reset text-sm inline-block">
@@ -108,6 +98,14 @@ const Footer = () => (
         </div>
       </div>
     </div>
+    <div className="sm:flex items-center text-center justify-center pb-8">
+      <Button
+        text="Say Hello"
+        standard
+        classes="rounded-full text-white hover:shadow mx-2"
+        url="/contact"
+      />
+    </div>
   </footer>
 )