Add style after new guidelines, markup and restructuring of components

src/components/Button.js

@@ -1,16 +1,14 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-let defaultClasses = 'px-4 py-2 leading-none inline-block text-sm no-underline uppercase'
+let defaultClasses = 'px-6 py-3 leading-none inline-block text-sm no-underline uppercase'
 
 let standardBtn = 'border hover:bg-teal hover:text-white hover:border-teal'
 
 let filledBtn = 'text-grey-lightest bg-grey-darkest hover:bg-teal'
 
 const Button = ({ ...props }) => (
-  <div>
     <Link to={props.url} className={`${props.standard ? standardBtn : ''} ${props.filled ? filledBtn : ''} ${defaultClasses} ${props.classes}`}>{props.text}</Link>
-  </div>
 )
 
 export default Button

src/components/Header.js

@@ -1,18 +1,18 @@
 import React from 'react'
 import Link from 'gatsby-link'
-import LogoSaburly from "../images/logo-saburly.svg"
+import LogoSaburly from "../images/logo-saburly-white.svg"
 import Button from './Button'
 
 import "./Header.css"
 
+let menuClasses = "no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4"
+
 const Header = () => (
-  <header>
-    <nav className="flex items-center justify-between lg:p-6">
-      <div className="flex items-center flex-no-shrink text-white mr-6">
-        <Link to="/">
-          <img src={LogoSaburly} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
-        </Link>
-      </div>
+  <header className="bg-saburly-default">
+    <nav className="container mx-auto flex justify-between lg:p-6 p-4">
+      <Link to="/">
+        <img src={LogoSaburly} alt='Saburly Logo' className="max-w-xs" />
+      </Link>
 
       <button className="menu_icon lg:invisible">
         <span className="menu_bar-top" />
@@ -20,24 +20,20 @@ const Header = () => (
         <span className="menu_bar-bot" />
       </button>
 
-      <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
-        <ul className="flex text-sm justify-center lg:flex-grow">
+      <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
+        <ul className="text-sm">
           <Link to="/services">
-            <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">What We Do
-        </li>
+            <li className={menuClasses}>What We Do</li>
           </Link>
           <Link to="/about">
-            <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">TEAM
-        </li>
+            <li className={menuClasses}>TEAM</li>
           </Link>
           <Link to="/blog">
-            <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">BLOG
-        </li>
+            <li className={menuClasses}>BLOG</li>
           </Link>
+
+          <Button text="Contact" standard classes="rounded-full text-white" url="/contact" />
         </ul>
-
-        <Button text="Contact" standard classes="rounded-full" url="/contact" />
-
       </div>
     </nav>
   </header>

src/components/SectionIntro.js

@@ -3,9 +3,9 @@ import Link from 'gatsby-link'
 
 const IntroDefault = ({ intro, headline, text, classes }) => (
   <div className={`${classes}`}>
-    <h3>{intro}</h3>
-    <h1>{headline}</h1>
-    <p>{text}</p>
+    <h3 className="text-white opacity-50 text-sm font-light uppercase pt-2 pb-2">{intro}</h3>
+    <h1 className="text-white font-light pt-2 pb-2">{headline}</h1>
+    <p className="font-light leading-normal text-white opacity-50">{text}</p>
   </div>
 )