Nav.js

import styled from 'tachyons-components'

const Nav = styled('nav')
`
  center
  mw9
  pv4
  tc
`

const Logo = styled('a')
`
  dib 
  grow 
  v-mid
`

const Img = styled('img')
`
  link
`

const List = styled('ul')
`
  dib
  list
  ml4
  mv3
  pa0
  tc
`

const Item = styled('li')
`
  dib
  mh3
`

const Link = styled('a')
`
  dim 
  link 
`

const LinkPillButton = styled('a')
`
  ba
  br-pill
  bw
  dib
  dim
  f5
  no-underline
  ph4
  pv3
`

export default () => (
  <Nav>
    <Logo>
      <Img src="https://cdn.pixel2html.com/images/logo_color.svg" />
    </Logo>
    <List>
      <Item purple>
        <Link>How it Works</Link>
      </Item>
      <Item purple>
        <Link>Solutions</Link>
      </Item>
      <Item purple>
        <Link>Our Team</Link>
      </Item>
      <Item ml6>
        <LinkPillButton bg-orange b--orange white>Hire a Pixel2HTML developer</LinkPillButton>
      </Item>
    </List>
  </Nav>
)