Partner logos, styling

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>

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">
-    <div className="px-6 py-4">
-      <Link className="no-underline" to={props.url}>
         <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
-      </Link>
+        <p
-      <p
+          className="text-grey-darker text-base"
-        className="text-grey-darker text-base"
+          dangerouslySetInnerHTML={{ __html: props.excerpt }}
-        dangerouslySetInnerHTML={{ __html: props.excerpt }}
+        />
-      />
+      </div>
-    </div>
+    </Link>
   </article>
 )
 

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>

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>

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">
+        <div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around">
-          <img
+          <div className="sm:w-1/2 md:w-1/5 p-2">
-            src={LogoRicoh}
+            <img
-            className="opacity-50 hover:opacity-100 client-logo p-1"
+              src={LogoColounge}
-            alt="Ricoh Logo"
+              className="opacity-50 hover:opacity-100 client-logo p-1"
-          />
+              alt="Colounge Logo"
-          <img
+            />
-            src={LogoCoor}
+          </div>
-            className="opacity-50 hover:opacity-100 client-logo p-1"
+          <div className="sm:w-1/2 md:w-1/5 p-2">
-            alt="Coor Logo"
+            <img
-          />
+              src={LogoRicoh}
-          <img
+              className="opacity-50 hover:opacity-100 client-logo p-1"
-            src={LogoKinnarps}
+              alt="Ricoh Logo"
-            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={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

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;
+}

yarn.lock

@@ -3838,9 +3838,9 @@ gatsby-cli@^1.1.58:
     yargs "^11.1.0"
     yurnalist "^0.2.1"
 
-gatsby-image@^1.0.54:
+gatsby-image@^1.0.55:
-  version "1.0.54"
+  version "1.0.55"
-  resolved "https://registry.yarnpkg.com/gatsby-image/-/gatsby-image-1.0.54.tgz#84ab7d723e48a031eb698d8552ad331943d369fd"
+  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"