From c615c03318ae68ffa953b8868fd2c54bda5d4363 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 30 Aug 2018 12:17:36 +0200
Subject: [PATCH] Partner logos, styling

---
 src/components/Button.js     |   4 ++-
 src/components/Card.js       |  21 +++++++-------
 src/components/Footer.js     |  12 ++++----
 src/images/logo-colounge.svg |   1 +
 src/images/logo-imcg.png     | Bin 0 -> 5792 bytes
 src/pages/index.js           |  54 ++++++++++++++++++++++++-----------
 src/styles/general.css       |  30 ++++++++++++++++---
 yarn.lock                    |   6 ++--
 8 files changed, 88 insertions(+), 40 deletions(-)
 create mode 100644 src/images/logo-colounge.svg
 create mode 100644 src/images/logo-imcg.png

diff --git a/src/components/Button.js b/src/components/Button.js
index 2eb8acc..ae23105 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -9,7 +9,9 @@ let standardBtn = 'border hover:bg-teal hover:text-white hover:border-teal'
 const Button = ({ ...props }) => (
   <Link
     to={props.url}
-    className={`${props.standard ? standardBtn : ''} ${defaultClasses} ${props.classes}`}
+    className={`${props.standard ? standardBtn : ''} ${defaultClasses} ${
+      props.classes
+    }`}
   >
     {props.text}
   </Link>
diff --git a/src/components/Card.js b/src/components/Card.js
index eb11c87..7b83d3e 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -5,22 +5,23 @@ import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
   <article className="h-full w-full rounded overflow-hidden shadow bg-white border-bottom-saburly hover:shadow-md">
-    <Link to={props.url}>
+    <Link
+      to={props.url}
+      className="no-underline saburly-transition hover:opacity-50"
+    >
       {props.image ? (
         <img className="w-full" src={props.image.src} />
       ) : (
         <img className="w-full" src={ImgSprint} alt="Sprint Work" />
       )}
-    </Link>
-    <div className="px-6 py-4">
-      <Link className="no-underline" to={props.url}>
+      <div className="px-6 py-4">
         <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
-      </Link>
-      <p
-        className="text-grey-darker text-base"
-        dangerouslySetInnerHTML={{ __html: props.excerpt }}
-      />
-    </div>
+        <p
+          className="text-grey-darker text-base"
+          dangerouslySetInnerHTML={{ __html: props.excerpt }}
+        />
+      </div>
+    </Link>
   </article>
 )
 
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 4134608..99d4c12 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -20,10 +20,10 @@ const Footer = () => (
           className="p-2 items-center text-white leading-none lg:rounded-full flex lg:inline-flex"
           role="alert"
         >
-          <span className="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">
+          <span className="flex bg-teal hover:bg-teal-dark saburly-transition rounded-full uppercase px-3 py-1 text-xs font-bold mr-3">
             Let's Connect
           </span>
-          <span className="font-normal mr-2 text-left flex-auto">
+          <span className="font-normal mr-2 hover:opacity-80 saburly-transition text-left flex-auto">
             Tell us about your project and get a free proposal
           </span>
           <svg
@@ -49,7 +49,7 @@ const Footer = () => (
               <img
                 src={Facebook}
                 alt="Facebook Social Media"
-                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
+                className="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full"
               />
             </a>
           </div>
@@ -58,7 +58,7 @@ const Footer = () => (
               <img
                 src={Instagram}
                 alt="Instagram Social Media"
-                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
+                className="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full"
               />
             </a>
           </div>
@@ -67,7 +67,7 @@ const Footer = () => (
               <img
                 src={Twitter}
                 alt="Twitter Social Media"
-                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
+                className="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full"
               />
             </a>
           </div>
@@ -76,7 +76,7 @@ const Footer = () => (
               <img
                 src={LinkedIn}
                 alt="LinkedIn Social Media"
-                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
+                className="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full"
               />
             </a>
           </div>
diff --git a/src/images/logo-colounge.svg b/src/images/logo-colounge.svg
new file mode 100644
index 0000000..f87ee44
--- /dev/null
+++ b/src/images/logo-colounge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 370.5 91.8"><title>Asset 2</title><path d="M99.4,39.6h17c1.6,0,.9-2.3-.4-2.3H99c-1.6,0-1,2.3.4,2.3Z" style="fill:#1d1d1b"/><path d="M368.5,36.2a9.7,9.7,0,0,1-.7,3.9,9.4,9.4,0,0,1-5,4.9,8.4,8.4,0,0,1-3.5.7,9.2,9.2,0,0,1-3.8-.7,10,10,0,0,1-2.9-2,9.8,9.8,0,0,1-2-3,11.7,11.7,0,0,1-.7-3.8,9.9,9.9,0,0,1,2.8-6.8,9.5,9.5,0,0,1,3-1.9,8.6,8.6,0,0,1,3.6-.7,8.4,8.4,0,0,1,3.5.7,9.4,9.4,0,0,1,5,4.9A9.2,9.2,0,0,1,368.5,36.2Zm-2,0a7.8,7.8,0,0,0-.6-3.1,7,7,0,0,0-1.5-2.5,7.3,7.3,0,0,0-2.3-1.6,6.7,6.7,0,0,0-2.8-.6,6.8,6.8,0,0,0-2.9.6,6.3,6.3,0,0,0-2.3,1.6,7.2,7.2,0,0,0-1.6,2.5,10.1,10.1,0,0,0-.5,3.1,8.1,8.1,0,0,0,.5,3.1,7.2,7.2,0,0,0,1.4,2.4,6.3,6.3,0,0,0,2.3,1.7,7.5,7.5,0,0,0,3.1.6,6.6,6.6,0,0,0,2.8-.5,7.3,7.3,0,0,0,2.3-1.6,7,7,0,0,0,1.5-2.5A7.9,7.9,0,0,0,366.5,36.2Zm-9.1,5.4h-1.7V31.2h3.9a4.8,4.8,0,0,1,2.9.7,2.7,2.7,0,0,1,.9,2.3,2.8,2.8,0,0,1-.7,2.1,3.5,3.5,0,0,1-2,.7l3,4.6h-2L359,37.2h-1.6Zm1.9-5.9h.9l.8-.2.5-.5a1.5,1.5,0,0,0,.2-.9c0-.4,0-.6-.2-.8a1,1,0,0,0-.5-.4l-.8-.2h-2.8v3.1Z" style="fill:#1d1d1b"/><path d="M20.2,63.1C1.9,63.1.6,52.9.2,49.6-1.5,36.9,10.6,18.1,36.3,8.4A39.2,39.2,0,0,1,61.8,7.2,28.7,28.7,0,0,1,71.6,12a1,1,0,1,1-1.3,1.5c-.1-.1-13.6-10.7-33.3-3.2C12.3,19.6.6,37.4,2.1,49.3c1.1,8.2,6.7,11.8,18.1,11.8,9.6,0,31.7-10.7,49.2-23.9a.9.9,0,0,1,1.3.1,1,1,0,0,1,.1,1.3A13.7,13.7,0,0,0,69.4,41c3.1-.7,7.8-1,11.4,1a9.2,9.2,0,0,1,5,8.8A10.3,10.3,0,0,1,80,59.6a8.5,8.5,0,0,1-7.3-.3c-3.7-1.9-6.3-6.2-7-9.5a12,12,0,0,1,.4-6,1,1,0,0,1-.8-.6.6.6,0,0,1,0-.6C48.5,54.2,29.2,63.1,20.2,63.1ZM68.4,43.2a10.9,10.9,0,0,0-.7,6.2c.6,2.7,2.8,6.5,5.9,8.1a6.2,6.2,0,0,0,5.6.2,8.2,8.2,0,0,0,4.6-7,7.2,7.2,0,0,0-3.9-6.9C76.2,41.7,71,42.6,68.4,43.2Zm-1.5-1.7h0Z" style="fill:#1d1d1b"/><path d="M297.3,91.8a5,5,0,0,1-3.8-2.2c-4.4-5.7,3.7-20,19-33.5.7-2.8,1.2-5.5,1.8-8.2a11.1,11.1,0,0,1-2.9,1.4,7.1,7.1,0,0,1-7.8-2.5c-1.7-2.1-1.2-4.6-.2-6.5l-1.5,1c-2.8,1.7-4.8,4.2-6.9,6.7s-2,2.5-3.1,3.6a4,4,0,0,1-2.5,1.4c-2.4.3-4.5-1.7-5-3.8a13.8,13.8,0,0,1,.2-5,2.8,2.8,0,0,1,.1-.9,4.2,4.2,0,0,0-1.4-3.8,8.7,8.7,0,0,0-7.1-2c-5.5,1-7.7,5.7-10,10.7L265,50.9a1,1,0,0,1-1.9-.7c.5-2.6,1-4.8,1.6-7.3a26.1,26.1,0,0,1,.6-2.7c0-.2.1-.5.1-.7l-1.6,2.9a33.1,33.1,0,0,1-4.5,7.1c-2.8,3.2-5.1,2.6-6.3,2a7.7,7.7,0,0,1-3.1-5.1c-.9,2.4-2.3,4.8-4.4,5.7a4.6,4.6,0,0,1-4.2-.5,7.6,7.6,0,0,1-3.8-6.7,15.3,15.3,0,0,1,1.1-4.8c.8-2.2,1.5-4.2.2-6.3s-5.2-4.7-9.5-5.3h-1.5c-.5.6-.9,1.3-1.4,2l2.5,2.7c3.2,3.4,6.9,7.4,6,12.8-1.4,8.3-6.2,8.7-8.2,8.6-4.7-.5-9.3-5.5-9.3-10.3a5.7,5.7,0,0,0,.1-1.3c-4.1,4.7-9.1,8.4-15.3,8.1s-11.2-3.3-16.3-6.2a56.6,56.6,0,0,0-7.7-4H178c-6.7,8.1-14.5,14.1-22.3,17.1s-21.4,4.1-28.2-2.6a6.1,6.1,0,0,1-2.1-4.2c-.1-5.1,6-8.6,11.3-11.1a54.1,54.1,0,0,1,40.7-1.6C192.1,19.8,196.5,1,196.5.8a1,1,0,0,1,1.2-.8,1.1,1.1,0,0,1,.8,1.2A105.9,105.9,0,0,1,179.3,39c2.6,1.2,5.2,2.6,7.6,4,4.9,2.8,10,5.7,15.4,6,7,.3,12.5-5.2,17-11.5a38.1,38.1,0,0,1,2.3-4l.4-.6a18.1,18.1,0,0,1,1.8-2.7l-.9-1.3a1.4,1.4,0,0,1,0-.9c.5-1.4,2.2-1.7,4.1-1.7.2-.1.4,0,.7,0l1.8.3c2.4.3,8.1,1.6,11,6.1s.8,5.7,0,8.1a12.3,12.3,0,0,0-1,4.1,5.9,5.9,0,0,0,2.8,5,2.8,2.8,0,0,0,2.5.3c1.6-.6,3-3.2,4.1-7.1,2.2-8.4,5.3-9.1,6-9.2a.9.9,0,0,1,.9.6.9.9,0,0,1-.1,1.1,22.4,22.4,0,0,0-3.8,7.6c-.5,2,.4,5.5,2.1,6.5s2.3.1,3.8-1.5a38.1,38.1,0,0,0,4.3-6.8c.9-1.7,1.9-3.6,3.2-5.7.3-.4.9-1.4,1.9-1s1.1,1.2,0,6a11.7,11.7,0,0,1-.5,2c2-3.5,4.6-6.4,9.1-7.2a11.2,11.2,0,0,1,8.9,2.5,6.5,6.5,0,0,1,2,5.6c-.1.3-.1.6-.2.9a12.4,12.4,0,0,0-.1,4.3,3,3,0,0,0,2.7,2.3,3.1,3.1,0,0,0,1.3-.8l3-3.5c2.1-2.6,4.3-5.3,7.4-7.2,10.5-6.6,14.3-2.2,14.5-2a1.1,1.1,0,0,1,.1,1.2,1,1,0,0,1-1.1.4c-1.6-.4-6.2-1-7.9.5s-3,3.6-1.2,5.9a5.3,5.3,0,0,0,5.6,1.8,6.3,6.3,0,0,0,4.5-4.3c0-.2.1-.4.1-.7a1.1,1.1,0,0,1,1.2-.7.9.9,0,0,1,.8,1.1,2.4,2.4,0,0,1-.2.8l-.6,2.9-1.5,7.4c3.5-2.8,8-6,12.1-8.7a7.2,7.2,0,0,1,.6-7.7,8.1,8.1,0,0,1,3-2.6,6.2,6.2,0,0,1,5-.3c.1,0,4.3,2.3,4.5,3.8a1.1,1.1,0,0,1-.7,1.1c0,.1-4.3,2.7-9.6,6.2,3.2,3.3,10.7,5.3,39.6,7.9a1,1,0,0,1,.9,1.1,1.1,1.1,0,0,1-1.1.9c-31.4-2.8-37.8-5-41.1-8.8-4.8,3.3-10.2,7.1-13.8,10.2l-.2.2C311.9,67.5,308.8,77.8,303,87c-1.6,2.4-3.3,4.7-5.6,4.8Zm14.4-32.3c-13.6,12.8-19.7,25-16.6,28.8.8,1,1.5,1.6,2.2,1.5s2.9-2.1,4-3.9C306.4,77.8,309.4,68.8,311.7,59.5ZM159.2,37.1a51.9,51.9,0,0,0-21.7,4.6c-2.8,1.3-10.2,4.8-10.1,9.3a4.6,4.6,0,0,0,1.5,2.8c5.9,5.8,17.6,5.5,26,2.2s14.7-8.5,21.1-16.1A49.8,49.8,0,0,0,159.2,37.1Zm61.9,1.3a15.9,15.9,0,0,0-1.7,5.9c0,3.7,3.7,7.8,7.5,8.2s5.2-2.2,6-7-2.3-7.6-5.5-11.1l-2.1-2.3Q223.4,35.3,221.1,38.4Zm112.5-2.2a3.8,3.8,0,0,0-1.9.5,4.6,4.6,0,0,0-2.2,2,5.2,5.2,0,0,0-.7,5.4l9-5.8a17.8,17.8,0,0,0-2.7-1.8A4,4,0,0,0,333.6,36.2Zm5.1,1.6h0ZM225.1,28.5Z" style="fill:#1d1d1b"/></svg>
\ No newline at end of file
diff --git a/src/images/logo-imcg.png b/src/images/logo-imcg.png
new file mode 100644
index 0000000000000000000000000000000000000000..47232b3e876be4161bcaca78b71c8f715286f39d
GIT binary patch
literal 5792
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

literal 0
HcmV?d00001

diff --git a/src/pages/index.js b/src/pages/index.js
index 5dd87a1..4166b72 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -19,6 +19,8 @@ import LogoIBM from '../images/logo-ibm-color.svg'
 import LogoRicoh from '../images/logo-ricoh-color.svg'
 import LogoKinnarps from '../images/logo-kinnarps-color.svg'
 import LogoCoor from '../images/logo-coor-color.svg'
+import LogoIMCG from '../images/logo-imcg.png'
+import LogoColounge from '../images/logo-colounge.svg'
 
 import PageTransition from 'gatsby-plugin-page-transitions'
 
@@ -87,22 +89,42 @@ const IndexPage = ({ ...props }) => (
           headline="Ambitious projects bring great responsibility"
           text="By thinking big, designing smart and developing fast, we have helped organizations of various sizes bring life to ideas and existing products. We're now eager to hear what challenges you have for us"
         />
-        <div className="p-4 md:flex items-center max-w-full justify-center">
-          <img
-            src={LogoRicoh}
-            className="opacity-50 hover:opacity-100 client-logo p-1"
-            alt="Ricoh Logo"
-          />
-          <img
-            src={LogoCoor}
-            className="opacity-50 hover:opacity-100 client-logo p-1"
-            alt="Coor Logo"
-          />
-          <img
-            src={LogoKinnarps}
-            className="opacity-50 hover:opacity-100 client-logo p-1"
-            alt="Kinnarps Logo"
-          />
+        <div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around">
+          <div className="sm:w-1/2 md:w-1/5 p-2">
+            <img
+              src={LogoColounge}
+              className="opacity-50 hover:opacity-100 client-logo p-1"
+              alt="Colounge Logo"
+            />
+          </div>
+          <div className="sm:w-1/2 md:w-1/5 p-2">
+            <img
+              src={LogoRicoh}
+              className="opacity-50 hover:opacity-100 client-logo p-1"
+              alt="Ricoh Logo"
+            />
+          </div>
+          <div className="sm:w-1/3 md:w-1/5 p-2">
+            <img
+              src={LogoCoor}
+              className="opacity-50 hover:opacity-100 client-logo p-1"
+              alt="Coor Logo"
+            />
+          </div>
+          <div className="sm:w-1/3 md:w-1/5 p-2">
+            <img
+              src={LogoKinnarps}
+              className="opacity-50 hover:opacity-100 client-logo p-1"
+              alt="Kinnarps Logo"
+            />
+          </div>
+          <div className="sm:w-1/3 md:w-1/5 p-2">
+            <img
+              src={LogoIMCG}
+              className="opacity-50 hover:opacity-100 client-logo p-1"
+              alt="IMCG Logo"
+            />
+          </div>
         </div>
 
         <Button
diff --git a/src/styles/general.css b/src/styles/general.css
index dfb6604..b00d31c 100644
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -92,6 +92,20 @@ body {
 
 .client-logo {
   max-height: 3rem;
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  filter: grayscale(100%);
+  transition: all 0.3s ease;
+}
+
+.client-logo:hover {
+  -webkit-filter: grayscale(0%);
+  -moz-filter: grayscale(0%);
+  -o-filter: grayscale(0%);
+  -ms-filter: grayscale(0%);
+  filter: grayscale(0%);
 }
 
 .border-bottom-saburly {
@@ -99,6 +113,12 @@ body {
     0 2px 3px 0 rgba(51, 6, 13, 0.12);
 }
 
+.saburly-bottom-shadow {
+  -webkit-box-shadow: 0 7px 6px 6px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 7px 6px -6px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 7px 6px -6px rgba(0, 0, 0, 0.3);
+}
+
 .border-contact {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
@@ -115,10 +135,6 @@ body {
   margin-bottom: -0.4rem;
 }
 
-.border-saburly-header {
-  box-shadow: 0 4px 2px -2px #000000;
-}
-
 .saburly-overlay-shadow {
   background-color: RGBA(0, 0, 0, 0.1);
 }
@@ -130,3 +146,9 @@ body {
 h2 span {
   color: #5763ab;
 }
+
+.saburly-transition,
+a li,
+a {
+  transition: all 0.25s ease;
+}
diff --git a/yarn.lock b/yarn.lock
index 300fe21..e8d3fca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3838,9 +3838,9 @@ gatsby-cli@^1.1.58:
     yargs "^11.1.0"
     yurnalist "^0.2.1"
 
-gatsby-image@^1.0.54:
-  version "1.0.54"
-  resolved "https://registry.yarnpkg.com/gatsby-image/-/gatsby-image-1.0.54.tgz#84ab7d723e48a031eb698d8552ad331943d369fd"
+gatsby-image@^1.0.55:
+  version "1.0.55"
+  resolved "https://registry.yarnpkg.com/gatsby-image/-/gatsby-image-1.0.55.tgz#716c7f44d9949864c55331bd3316b751c94ca0c8"
   dependencies:
     babel-runtime "^6.26.0"
     prop-types "^15.6.0"