Style 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/logo-saburly-colorful.svg'
+import LogoSaburly from '../images/logo-saburly-white.svg'
 
 import Facebook from '../images/facebook.svg'
 import Instagram from '../images/instagram.svg'
@@ -10,20 +10,24 @@ import Twitter from '../images/twitter.svg'
 import LinkedIn from '../images/linkedin.svg'
 
 let menuClasses =
-  'no-underline mt-4 lg:inline-block opacity-100 lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'
+  'no-underline mt-4 lg:inline-block lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'
 
 const Footer = () => (
   <footer className="bg-indigo-darker">
     <div className="container mx-auto py-10 lg:flex">
       <div className="lg:w-1/4 p-4">
-        <img src={LogoSaburly} alt="Saburly Logo" className="w-full" />
+        <img
+          src={LogoSaburly}
+          alt="Saburly Logo"
+          className="w-full opacity-80"
+        />
         <div className="flex justify-between social-icons py-2">
           <div>
             <a href="https://facebook.com/saburly" target="_blank">
               <img
                 src={Facebook}
                 alt="Facebook Social Media"
-                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
               />
             </a>
           </div>
@@ -32,7 +36,7 @@ const Footer = () => (
               <img
                 src={Instagram}
                 alt="Instagram Social Media"
-                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
               />
             </a>
           </div>
@@ -41,7 +45,7 @@ const Footer = () => (
               <img
                 src={Twitter}
                 alt="Twitter Social Media"
-                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
               />
             </a>
           </div>
@@ -50,7 +54,7 @@ const Footer = () => (
               <img
                 src={LinkedIn}
                 alt="LinkedIn Social Media"
-                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
               />
             </a>
           </div>

src/components/Header.css

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

src/components/Header.js

@@ -1,17 +1,17 @@
 import React, { Component } from 'react'
 import Link from 'gatsby-link'
-import LogoSaburly from '../images/logo-saburly-white.svg'
+import LogoSaburly from '../images/logo-saburly-colorful.svg'
 import Button from './Button'
 
 import './Header.css'
 
 let menuClasses =
-  'no-underline mt-4 lg:inline-block opacity-80 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
+  'no-underline mt-4 lg:inline-block opacity-80 text-black lg:mt-0 hover:opacity-100 uppercase mr-4'
 
 class Header extends Component {
   render() {
     return (
-      <header className="bg-saburly-indigo">
+      <header className="bg-saburly-light">
         <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
           <Link to="/">
             <div className="max-w-xs mr-8">
@@ -42,7 +42,7 @@ class Header extends Component {
               <Button
                 text="Contact"
                 standard
-                classes="rounded-full text-white hover:shadow"
+                classes="rounded-full font-normal text-black hover:shadow"
                 url="/contact"
               />
             </ul>

src/components/PageIntro.js

@@ -4,11 +4,10 @@ import SectionIntro from './SectionIntro'
 import Button from './Button'
 
 const PageIntro = ({ ...props }) => (
-  <section className="bg-saburly-indigo relative">
+  <section className="bg-saburly-light relative">
     <div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse p-4">
       <div className="text-center lg:text-left lg:mt-4">
         <SectionIntro
-          light
           intro={props.intro}
           classes={`lg:text-left lg:max-w-sm content-center ${
             props.sectionClasses

src/components/SectionIntro.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'gatsby-link'
 
 let headlineDark = 'text-white'
-let headlineLight = 'text-indigo'
+let headlineLight = 'text-indigo-darker'
 
 const IntroDefault = ({ ...props }) => (
   <div className={`${props.classes}`}>

src/components/SideMenu.js

@@ -57,12 +57,12 @@ class SideMenu extends Component {
           </Link>
           <Link to="/services" className="no-underline">
             <li className="text-right no-underline text-2xl uppercase p-2 text-white">
-              What We Do
+              Services
             </li>
           </Link>
           <Link to="/about" className="no-underline">
             <li className="text-right no-underline text-2xl uppercase p-2 text-white">
-              Team
+              About Us
             </li>
           </Link>
           <Link to="/blog" className="no-underline">
@@ -70,6 +70,11 @@ class SideMenu extends Component {
               Blog
             </li>
           </Link>
+          <Link to="/contact" className="no-underline">
+            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
+              Contact
+            </li>
+          </Link>
         </ul>
       </div>
     )

src/pages/index.js

@@ -24,7 +24,7 @@ const IndexPage = ({ ...props }) => (
       button
       buttonText="Let's Connect"
       url="/contact"
-      buttonClasses="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20"
+      buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
       intro="Welcome To Saburly"
       headline="We build the right software for your business goals"
       text="We are a team of highly experienced, creative and passionate engineers. Our mission is clear: to make you stand out and gain competitive advantages with the help of modern technologies."
@@ -108,7 +108,7 @@ const IndexPage = ({ ...props }) => (
           filled
           text="Get a free proposal"
           url="/proposal"
-          classes="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green"
+          classes="text-white font-normal shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
         />
       </section>
 

src/styles/general.css

@@ -1,3 +1,13 @@
+html {
+  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  overflow: scroll;
+  height: 100%;
+}
+
 .bg-saburly-indigo {
   background: rgb(69, 76, 183);
   background: linear-gradient(
@@ -7,6 +17,16 @@
   );
 }
 
+.bg-saburly-light {
+  background: rgb(69, 76, 183);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(241, 245, 248, 1) 100%
+  );
+}
+
+.bg-saburly-light svg,
 .bg-saburly-indigo svg {
   position: absolute;
   bottom: 0;