Stylistic fixes and using reusable components

src/components/Header.css

@@ -5,6 +5,7 @@
   -webkit-transition: 0.2s ease all;
   transition: 0.2s ease all;
   height: 0.17rem;
+  display: block;
   margin-bottom: 0.3rem;
 }
 

src/components/Header.js

@@ -1,19 +1,20 @@
 import React from 'react'
 import Link from 'gatsby-link'
 import SaburlyLogo from "../images/Saburly-Logo.svg"
+import Button from './Button'
 
 import "./Header.css"
 
 const Header = () => (
   <header>
-    <nav className="flex items-center justify-between flex-wrap lg:p-6">
+    <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={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
         </Link>
       </div>
 
-      <button className="menu_icon block">
+      <button className="menu_icon lg:invisible">
         <span className="menu_bar-top" />
         <span className="menu_bar-mid" />
         <span className="menu_bar-bot" />
@@ -35,9 +36,8 @@ const Header = () => (
           </Link>
         </ul>
 
-        <Link to="/contact" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-darkest border-teal-darkest hover:border-teal hover:text-white hover:bg-teal mt-4 lg:mt-0 uppercase mr-3 rounded-full">Contact</Link>
+        <Button text="Contact" classes="rounded-full" url="/contact" />
 
-        <Link to="/proposal" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest border-grey-darkest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal rounded-full ">Get a free proposal</Link>
       </div>
     </nav>
   </header>

src/components/IntroDefault.js

@@ -4,14 +4,12 @@ import Link from 'gatsby-link'
 import Button from './Button'
 
 const IntroDefault = ({ intro, headline, text }) => (
-  <section className="lg:flex items-center p-3">
+  <div className="max-w-xs">
-    <div className="max-w-xs">
+    <h3>{intro}</h3>
-      <h3>{intro}</h3>
+    <h1>{headline}</h1>
-      <h1>{headline}</h1>
+    <p>{text}</p>
-      <p>{text}</p>
+    <Button text="Let's Get In Touch" url="/proposal" classes="rounded-full" />
-      <Button text="Let's Get In Touch" url="/proposal" classes="rounded-full" />
+  </div>
-    </div>
-  </section >
 )
 
 export default IntroDefault

src/pages/contact.js

@@ -1,9 +1,9 @@
 import React from 'react'
 
-const BlogPage = () => (
+const ContactPage = () => (
   <div>
-    <h1>Blog page</h1>
+    <h1>Contact page</h1>
   </div>
 )
 
-export default BlogPage
+export default ContactPage

src/pages/index.js

@@ -5,10 +5,10 @@ import IntroDefault from '../components/IntroDefault'
 import ImgBuildSite from '../images/programming-company.svg'
 
 const IndexPage = () => (
-  <div>
+  <section className="lg:flex items-center p-3">
     <IntroDefault intro="Welcome To Saburly" headline="We build the right software for your needs" text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day." />
-      <img src={ImgBuildSite} className="overflow-hidden" />
+    <img src={ImgBuildSite} className="overflow-hidden" />
-  </div>
+  </section>
 )
 
 export default IndexPage