Stylistic fixes and using reusable components

This commit is contained in:
Moris Zen
2018-06-30 15:04:24 +02:00
parent 05e9635c7c
commit 1d1a9d5271
5 changed files with 17 additions and 18 deletions

View File

@@ -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>