From 39465efc1657f25415e10f8519d6fda87dff3f56 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 30 Aug 2018 14:28:31 +0200
Subject: [PATCH] Quickfix styling landing page

---
 src/pages/index.js | 102 +++++++++++++++++++++++----------------------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 4166b72..458a81b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -52,7 +52,7 @@ const IndexPage = ({ ...props }) => (
         />
       </section>
 
-      <section className="bg-saburly relative bg-saburly-fadeout">
+      <section className="bg-saburly relative">
         <Service
           img={ImgDesign}
           title="User Experience Design"
@@ -79,63 +79,65 @@ const IndexPage = ({ ...props }) => (
             standard
             text="More About What We Do"
             url="/services"
-            classes="font-medium mb-8 lg:mb-24 rounded-full hover:shadow-md text-grey-darker hover:shadow"
+            classes="font-medium rounded-full hover:shadow-md text-grey-darker hover:shadow"
           />
         </div>
       </section>
 
-      <section className="container mx-auto max-w-lg text-center p-4 my-12">
-        <SectionIntro
-          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 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"
-            />
+      <section className="bg-saburly-lighter text-center p-4 my-12">
+        <div className="my-8 container mx-auto max-w-lg">
+          <SectionIntro
+            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 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>
-          <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
-          filled
-          text="Let's Get In Touch"
-          url="/contact"
-          classes="text-white font-medium shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
-        />
+          <Button
+            filled
+            text="Let's Get In Touch"
+            url="/contact"
+            classes="text-white font-medium shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
+          />
+        </div>
       </section>
 
-      <section className="text-center p-8 relative bg-saburly-lighter">
+      <section className="text-center p-8 relative">
         <SectionIntro headline="Occasionally we have fun & publish" />
         <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
           {props.data.allWordpressPost.edges.map(({ node }) => (