Design tweaks and color changes

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="font-thin text-white opacity-80">Office - Sweden</p>
-            <p className="text-white my-2 opacity-80 leading-normal">
+            <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="font-thin text-white opacity-80">Office - Bosnia</p>
-            <p className="text-white my-2 opacity-80 leading-normal">
+            <p className="text-white my-2 leading-normal">
               Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
               & Herzegovina
             </p>

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

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>

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{' '}

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">

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