From 90c05a76c2da05a1f5b9b9bf9aeeb16e8125c490 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Wed, 29 Aug 2018 14:52:49 +0200
Subject: [PATCH] Design tweaks and color changes

---
 src/components/Footer.js   | 32 +++++++++-----------------------
 src/components/Header.js   |  2 +-
 src/components/SideMenu.js | 10 +++++-----
 src/pages/index.js         |  2 +-
 src/pages/services.js      |  2 +-
 src/styles/general.css     | 14 +++++++++++---
 6 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/src/components/Footer.js b/src/components/Footer.js
index 8106cc7..4134608 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'gatsby-link'
 import Button from './Button'
 
-import LogoSaburly from '../images/Saburly-logo.svg'
+import LogoSaburly from '../images/saburly-logo-white.svg'
 
 import Facebook from '../images/facebook.svg'
 import Instagram from '../images/instagram.svg'
@@ -14,10 +14,10 @@ let menuClasses =
 
 const Footer = () => (
   <footer className="saburly-main-bg">
-    <div className="text-center py-4 lg:px-4">
+    <div className="text-center py-4 lg:px-4 saburly-overlay-shadow">
       <Link className="no-underline text-white" to="/contact">
         <div
-          className="p-2 items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
+          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">
@@ -36,7 +36,7 @@ const Footer = () => (
         </div>
       </Link>
     </div>
-    <div className="container mx-auto lg:flex">
+    <div className="container mx-auto my-4 lg:flex">
       <div className="lg:w-1/4 p-4">
         <img
           src={LogoSaburly}
@@ -81,26 +81,12 @@ const Footer = () => (
             </a>
           </div>
         </div>
-        <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">
         <div className="p-4 text-center lg:text-left sm:flex justify-around">
           <nav>
-            <p className="font-thin text-white opacity-50">Sitemap</p>
+            <p className="font-thin text-white opacity-80">Sitemap</p>
             <ul className="list-reset text-sm inline-block">
               <Link className="block my-2 hover:opacity-70" to="/">
                 <li className={menuClasses}>Home</li>
@@ -117,14 +103,14 @@ const Footer = () => (
             </ul>
           </nav>
           <div>
-            <p className="font-thin text-white opacity-50">Office - Sweden</p>
-            <p className="text-white my-2 opacity-80 leading-normal">
+            <p className="font-thin text-white opacity-80">Office - Sweden</p>
+            <p className="text-white my-2 leading-normal">
               Saburly AB<br />Vretenvägen 13<br />171 54 Solna<br />Sweden
             </p>
           </div>
           <div>
-            <p className="font-thin text-white opacity-50">Office - Bosnia</p>
-            <p className="text-white my-2 opacity-80 leading-normal">
+            <p className="font-thin text-white opacity-80">Office - Bosnia</p>
+            <p className="text-white my-2 leading-normal">
               Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
               & Herzegovina
             </p>
diff --git a/src/components/Header.js b/src/components/Header.js
index 08596b3..8bd15ff 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -13,7 +13,7 @@ class Header extends Component {
   render() {
     return (
       <header className="saburly-main-bg saburly-bottom-shadow">
-        <nav className="container border-saburly-header mx-auto flex items-center justify-between lg:p-6 p-4">
+        <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
           <Link to="/">
             <div className="max-w-xs mr-8">
               <img
diff --git a/src/components/SideMenu.js b/src/components/SideMenu.js
index 28a824c..0ca6d2d 100644
--- a/src/components/SideMenu.js
+++ b/src/components/SideMenu.js
@@ -51,7 +51,7 @@ class SideMenu extends Component {
             X
           </button>
           <Link to="/" className="side-close menu-home no-underline">
-            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
               Home
             </li>
           </Link>
@@ -59,22 +59,22 @@ class SideMenu extends Component {
             to="/services"
             className="side-close menu-services no-underline"
           >
-            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
               Services
             </li>
           </Link>
           <Link to="/about" className="side-close menu-about no-underline">
-            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
               About Us
             </li>
           </Link>
           <Link to="/blog" className="side-close menu-blog no-underline">
-            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
               Blog
             </li>
           </Link>
           <Link to="/contact" className="side-close menu-contact no-underline">
-            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
               Contact
             </li>
           </Link>
diff --git a/src/pages/index.js b/src/pages/index.js
index bb6c225..ac451e8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -25,7 +25,7 @@ const IndexPage = ({ ...props }) => (
     <PageIntro
       text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
       image={ImgIntro}
-      imgClasses="-mb-20 lg:-mt-12"
+      imgClasses="-mb-20"
     >
       <h2 className="text-black pt-1 pb-2">
         We{' '}
diff --git a/src/pages/services.js b/src/pages/services.js
index 3e73a9a..1f04e9a 100644
--- a/src/pages/services.js
+++ b/src/pages/services.js
@@ -19,7 +19,7 @@ const ServicesPage = () => (
       headline="Agile Practitioners"
       text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
       image={IntroImage}
-      imgClasses="-mb-12 lg:-mt-8 border-white border-8 rounded"
+      imgClasses="-mb-12 border-white border-8 rounded"
     />
     <section className="px-4 py-16">
       <div className="container mx-auto">
diff --git a/src/styles/general.css b/src/styles/general.css
index 6a64726..31827b7 100644
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -16,7 +16,7 @@ body {
 }
 
 .bg-saburly-light {
-  background: #f8f8f8;
+  background: rgba(87, 99, 171, 0.05);
 }
 
 .bg-saburly-light-header {
@@ -47,7 +47,7 @@ body {
   background: linear-gradient(
     180deg,
     RGBA(116, 68, 207, 1) 0%,
-    RGBA(57, 57, 144, 1) 100%
+    RGBA(87, 99, 171, 1) 100%
   );
 }
 
@@ -94,7 +94,7 @@ body {
   max-height: 3rem;
 }
 
-.saburly-bottom-shadow {
+.border-bottom-saburly {
   box-shadow: 0 6px 14px 0 rgba(51, 6, 13, 0.04),
     0 2px 3px 0 rgba(51, 6, 13, 0.12);
 }
@@ -114,3 +114,11 @@ body {
 .saburly-logo {
   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);
+}