Changing to self hosting, restructure, logo and color changes

src/components/Header.js

@@ -1,22 +1,26 @@
 import React, { Component } from 'react'
 import Link, { withPrefix } from 'gatsby-link'
-import LogoSaburly from '../images/logo-saburly-colorful.svg'
-import LogoSaburlyWhite from '../images/logo-saburly-white.svg'
+import LogoSaburly from '../images/saburly-logo-4.svg'
+import LogoSaburlyWhite from '../images/saburly-logo-white.svg'
 import Button from './Button'
 
 import './Header.css'
 
 let menuClasses =
-  'no-underline mt-4 lg:inline-block text-black-light font-medium lg:mt-0 hover:opacity-70 uppercase mr-4'
+  'no-underline mt-4 lg:inline-block text-white font-medium lg:mt-0 hover:opacity-80 uppercase mr-4'
 
 class Header extends Component {
   render() {
     return (
-      <header className="bg-saburly-light-header">
+      <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">
           <Link to="/">
             <div className="max-w-xs mr-8">
-              <img src={LogoSaburly} className="w-full" alt="Saburly Logo" />
+              <img
+                src={LogoSaburlyWhite}
+                className="w-full saburly-logo"
+                alt="Saburly Logo"
+              />
             </div>
           </Link>
 
@@ -43,7 +47,7 @@ class Header extends Component {
               <Button
                 text="Contact"
                 standard
-                classes="rounded-full font-medium text-black-light hover:shadow"
+                classes="rounded-full font-medium text-white hover:shadow"
                 url="/contact"
               />
             </ul>