Update topbar & footer

components/footer.js

@@ -15,12 +15,16 @@ export default () => (
           <Link href='https://github.com/badgen/badgen.net'><a>GitHub</a></Link>
           <em>/</em>
           <Link href='https://twitter.com/badgen_net'><a>Twitter</a></Link>
+          <em>/</em>
+          <Link href='https://opencollective.com/badgen'><a>OpenCollective</a></Link>
           <br />
         </div>
       </div>
       <div className='bottom'>
         <div>
-          Built with ♥ by <a href='https://github.com/amio'>Amio</a> and awesome <a href='https://github.com/badgen/badgen.net/graphs/contributors'>contributors</a>. Hosted on <a href='https://zeit.co/now'>Now</a>. License under <a href='https://github.com/badgen/badgen.net/blob/master/LICENSE.md'>ISC</a>.
+          Built with ♥ by <a href='https://github.com/amio'>Amio</a> and
+          awesome <a href='https://github.com/badgen/badgen.net/graphs/contributors'>contributors</a>.
+          Love Badgen? Please consider <a href="https://opencollective.com/badgen">donating</a> to sustain our service!
         </div>
         <div className='links'>
           <a href='https://twitter.com/badgen_net'>

components/top-bar.jsx

@@ -0,0 +1,39 @@
+const TopBar = () => {
+  return (
+    <div className="topbar">
+      <div className="navs">
+        <a href="https://badgen.net">CLASSIC STYLE</a>
+        <a href="https://flat.badgen.net">FLAT STYLE</a>
+        <a href="/builder">BADGE BUILDER</a>
+      </div>
+      <div className="news">
+        <a href="https://opencollective.com/badgen">
+          Consider donating to help us sustain our service ❤️
+        </a>
+      </div>
+      <style jsx>{`
+        .topbar {
+          height: 50px;
+          line-height: 50px;
+          padding: 0 0.5em;
+          display: grid;
+          grid-template-columns: 1fr 460px;
+        }
+        .navs {
+          letter-spacing: 0.04em;
+        }
+        .news {
+          text-align: right;
+        }
+        a {
+          display: inline-block;
+          font-size: 14px;
+          margin: 0 1em;
+          color: #777;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default TopBar

pages/index.js

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import BadgeExamples from '../components/badge-examples.js'
 import BadgenTitle from '../components/badgen-title.jsx'
+import TopBar from '../components/top-bar.jsx'
 import Intro from '../components/home-intro.js'
 import Footer from '../components/footer.js'
 import examples from '../static/.meta/badges.json'
@@ -16,6 +17,7 @@ const Index = () => {
   })
 
   return <>
+    <TopBar />
     <BadgenTitle host={host} />
     <div className='docs' style={{ width: '980px', margin: '0 auto' }}>
       <Intro />