From 7bafe821addcf9b09cca3099ddedce5b50a108db Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 5 Jul 2018 15:09:12 +0200
Subject: [PATCH] Social media changes and styling

---
 src/components/Card.js   |  2 +-
 src/components/Footer.js | 48 +++++++++++++++++++++++-----------------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/Card.js b/src/components/Card.js
index e8f183f..f132ed3 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -4,7 +4,7 @@ import Link from 'gatsby-link'
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <div className="m-4 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
+  <div className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover: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">
diff --git a/src/components/Footer.js b/src/components/Footer.js
index c14da2a..fcb6f1a 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -19,32 +19,40 @@ const Footer = () => (
         <img src={LogoSaburly} alt="Saburly Logo" className="w-full" />
         <div className="flex justify-between social-icons py-2">
           <div>
-            <img
-              src={Facebook}
-              alt="Facebook Social Media"
-              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
-            />
+            <a href="https://facebook.com/saburly" target="_blank">
+              <img
+                src={Facebook}
+                alt="Facebook Social Media"
+                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+              />
+            </a>
           </div>
           <div>
-            <img
-              src={Instagram}
-              alt="Instagram Social Media"
-              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
-            />
+            <a href="https://instagram.com/saburly" target="_blank">
+              <img
+                src={Instagram}
+                alt="Instagram Social Media"
+                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+              />
+            </a>
           </div>
           <div>
-            <img
-              src={Twitter}
-              alt="Twitter Social Media"
-              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
-            />
+            <a href="https://twitter.com/saburly" target="_blank">
+              <img
+                src={Twitter}
+                alt="Twitter Social Media"
+                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+              />
+            </a>
           </div>
           <div>
-            <img
-              src={LinkedIn}
-              alt="LinkedIn Social Media"
-              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
-            />
+            <a href="https://www.linkedin.com/company/saburly/" target="_blank">
+              <img
+                src={LinkedIn}
+                alt="LinkedIn Social Media"
+                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+              />
+            </a>
           </div>
         </div>
         <div>