Design upgrades, responsiveness and tweaks

src/components/Header.css

@@ -1,5 +1,5 @@
 .menu_icon [class*='menu_bar-'] {
-  background: #8448f7;
+  background: #fff;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: 0.2s ease all;

src/components/Header.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Link, { withPrefix } from 'gatsby-link'
 import LogoSaburly from '../images/saburly-logo-purple.svg'
+import LogoSaburlyWhite from '../images/logo-saburly-white.svg'
 import Button from './Button'
 
 import './Header.css'
@@ -11,11 +12,20 @@ let menuClasses =
 class Header extends Component {
   render() {
     return (
-      <header className="bg-saburly-light">
+      <header className="bg-saburly-light-header">
         <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={LogoSaburly} className="w-full" alt="Saburly Logo" />
+              <img
+                src={LogoSaburly}
+                className="w-full lg:block hidden"
+                alt="Saburly Logo"
+              />
+              <img
+                src={LogoSaburlyWhite}
+                className="w-full lg:hidden"
+                alt="Saburly Logo"
+              />
             </div>
           </Link>
 

src/components/SideMenu.css

@@ -8,7 +8,7 @@
   -webkit-overflow-scrolling: touch;
   z-index: 0;
   display: none;
-  background-color: #2f365f;
+  background-color: #5640a6;
 }
 
 .slideout-menu-left {

src/images/saburly-logo-darkblue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274.9 34.6"><title>saburly-logo-darkblue</title><path d="M11.7,20.7h-.5a9.1,9.1,0,0,1-8.8-9.2,9.1,9.1,0,0,1,8.8-9.1H33.4V.2H11.2a11.3,11.3,0,0,0,0,22.5h.3" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><path d="M11.5,23h-.3A11.6,11.6,0,0,1,.1,11.5,11.5,11.5,0,0,1,11.2.1H33.6V2.5H11.2a9.1,9.1,0,0,0-8.7,9,9,9,0,0,0,8.7,9h.5v.3h-.5a9.4,9.4,0,0,1-9-9.3,9.4,9.4,0,0,1,9-9.3H33.3V.4H11.2A11.2,11.2,0,0,0,.4,11.5,11.2,11.2,0,0,0,11.2,22.7h.3Z" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><path d="M22,14.2h.4a9.2,9.2,0,0,1,0,18.3H.3v2.2H22.5a11.3,11.3,0,0,0,0-22.5h-.3" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><polygon points="69.6 34.6 54.5 5.2 39.4 34.6 37.3 33.6 54.5 0 71.8 33.6 69.6 34.6" style="fill:#43439f"/><path d="M100.6,11.8h-.3v2.4h.3a9,9,0,0,1,0,18h-20V23H78.2V34.6h22.4a11.4,11.4,0,0,0,0-22.8" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><path d="M100.6,20.5h-20V2.5h20a9.1,9.1,0,0,1,8.7,9,9,9,0,0,1-8.7,9m0-20.4H78.2V23h22.4a11.6,11.6,0,0,0,11.1-11.5A11.5,11.5,0,0,0,100.6.1" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><path d="M136.3,34.7c-9.1,0-16.6-7.7-16.6-17.1v-.4a2.2,2.2,0,0,1-.1-.8V.1H122V17.6a14.4,14.4,0,0,0,28.7.8V16.2h2.4v2.7a17,17,0,0,1-16.7,15.9" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><path d="M128.9,12.8a1.9,1.9,0,1,1,1.9,1.8,1.9,1.9,0,0,1-1.9-1.8" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><path d="M140.5,12.8a1.9,1.9,0,0,1,1.9-1.9,1.8,1.8,0,0,1,1.9,1.9,1.8,1.8,0,0,1-1.9,1.8,1.9,1.9,0,0,1-1.9-1.8" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><path d="M182.2,23H179l11.5,11.7h3.2L182.3,23h-.1Z" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><polygon points="162.2 2.5 162.2 2.5 162.2 20.5 162.2 20.5 162.2 5.9 176.5 20.5 179.9 20.5 162.2 2.5" style="fill:#43439f"/><polygon points="159.8 22.9 159.8 13.8 159.8 34.6 162.2 34.6 162.2 22.9 162.2 22.9 159.8 22.9" style="fill:#43439f"/><path d="M182.3.1H159.9V23h2.4V20.6h0V2.5h20a9.1,9.1,0,0,1,8.7,9,9,9,0,0,1-8.7,9h-5.6L179,23h3.3a11.6,11.6,0,0,0,11.1-11.5A11.5,11.5,0,0,0,182.3.1" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><path d="M206.1,2.6H219V32.2H206.1Zm-2.4,32.1h17.7V.2H203.7Z" transform="translate(-0.1 -0.1)" style="fill:#43439f"/><polygon points="237 34.6 203.6 34.6 203.6 23.6 205.9 23.6 205.9 32.2 234.7 32.2 234.7 23.6 237 23.6 237 34.6" style="fill:#43439f"/><polygon points="265.5 34.5 265.5 0.2 263.1 0.2 263.1 32.1 248.7 32.2 248.7 34.5 265.5 34.5" style="fill:#43439f"/><path d="M275,1.2V.2h-2.3V2.5a14.6,14.6,0,0,1-14.4,13.9A14.6,14.6,0,0,1,243.9,1.7V.1h-2.4V.5a1.9,1.9,0,0,0,.1.8v.4c0,9.4,7.5,17.1,16.6,17.1A17,17,0,0,0,274.9,2.9V1.2" transform="translate(-0.1 -0.1)" style="fill:#43439f"/></svg>

src/pages/index.js

@@ -8,7 +8,7 @@ import PageIntro from '../components/PageIntro'
 import InfoBox from '../components/InfoBox'
 import Technologies from '../components/Technologies'
 
-import ImgIntro from '../images/web-development-agency.svg'
+import ImgIntro from '../images/web-development-services-agency.svg'
 import ImgDesign from '../images/ux-ui-design-company.svg'
 import ImgFullstack from '../images/fullstack-web-development-company.svg'
 import ImgMobile from '../images/mobile-development-company.svg'
@@ -31,6 +31,7 @@ const IndexPage = ({ ...props }) => (
       text="Saburly is a team of highly experienced, creative and passionate engineers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
       sectionClasses="md:pt-10"
       image={ImgIntro}
+      imgClasses="-mb-20 lg:-mt-12"
     />
 
     <main>
@@ -71,15 +72,6 @@ const IndexPage = ({ ...props }) => (
             classes="mb-8 lg:mb-24 rounded-full hover:shadow-md text-grey-darker hover:shadow"
           />
         </div>
-
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
-          <title>bg-saburly-white</title>
-          <path
-            d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
-            transform="translate(0 0)"
-            style={{ fill: '#fff' }}
-          />
-        </svg>
       </section>
 
       <section className="container mx-auto max-w-lg text-center p-4 my-12">
@@ -114,7 +106,7 @@ const IndexPage = ({ ...props }) => (
         />
       </section>
 
-      <section className="text-center p-8 relative bg-saburly-fadeout">
+      <section className="text-center p-8 relative bg-saburly-lighter">
         <SectionIntro
           intro="Blog & Social Media"
           headline="Occasionally we find the time to have fun and publish"

src/pages/services.js

@@ -7,7 +7,7 @@ import WorkStyle from '../components/WorkStyle'
 import Technologies from '../components/Technologies'
 
 import FullstackDev from '../images/fullstack-web-development.svg'
-import WebdevServices from '../images/web-development-services-agency.svg'
+import WebdevServices from '../images/web-development-agency.svg'
 import UXdesign from '../images/ux-ui-design-services.svg'
 import HowWeWork from '../images/how-we-work.svg'
 

src/styles/general.css

@@ -8,7 +8,7 @@
 }
 
 .bg-saburly-lighter {
-  background: rgba(132, 72, 247, 0.04);
+  background: rgba(245, 247, 250, 1);
 }
 
 .bg-saburly-light {
@@ -20,6 +20,18 @@
   );
 }
 
+.bg-saburly-light-header {
+  background: #5640a6;
+  @media (min-width: 992px) {
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(245, 247, 250, 0.7) 49%,
+      rgba(245, 247, 250, 1) 100%
+    );
+  }
+}
+
 .bg-saburly-fadeout {
   background: rgb(255, 255, 255);
   background: linear-gradient(
@@ -50,7 +62,7 @@
 }
 
 .bg-saburly-dark {
-  background-color: #210b44;
+  background-color: #393990;
 }
 
 .bg-saburly svg,