From 2b0d7aa01c7e20cd69502d077d0678421ac3d62a Mon Sep 17 00:00:00 2001
From: Monica Powell <monica@aboutmonica.com>
Date: Mon, 28 Sep 2020 19:40:58 -0400
Subject: [PATCH] add banner  to header and enhance banner

---
 site/src/components/banner.js | 28 ++++++++++++++++++++--------
 site/src/components/header.js |  3 ++-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/site/src/components/banner.js b/site/src/components/banner.js
index 3442bf6..82a594a 100644
--- a/site/src/components/banner.js
+++ b/site/src/components/banner.js
@@ -1,12 +1,24 @@
-import React from "react"
+import React from "react";
+import { useStaticQuery, graphql, Link } from "gatsby";
+
 export default function Banner() {
+  const data = useStaticQuery(graphql`
+    query BannerQuery {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `);
+
   return (
-    <div className="bg-blue-500 text-white p-4 text-center">
-      <blockquote>
-      
-        Tickets are on sale now for X Conf! 
-       
-      </blockquote>
-    </div>
+    <Link to="/tickets">
+      <div className="bg-blue-500 text-white p-4 text-center">
+        <blockquote>
+          Tickets are on sale now for {data.site.siteMetadata.title}!
+        </blockquote>
+      </div>
+    </Link>
   );
 }
diff --git a/site/src/components/header.js b/site/src/components/header.js
index e64301b..a02d46f 100644
--- a/site/src/components/header.js
+++ b/site/src/components/header.js
@@ -2,7 +2,7 @@ import { Link } from "gatsby";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 import Logo from "../images/pencil-icon.png";
-
+import Banner from "../components/banner";
 function Header({ siteTitle }) {
   const [isExpanded, toggleExpansion] = useState(false);
   const NavLinks = [
@@ -12,6 +12,7 @@ function Header({ siteTitle }) {
 
   return (
     <nav className="bg-white">
+      <Banner />
       <div className="flex flex-wrap items-center justify-between max-w-4xl mx-auto p-4 md:p-8">
         <Link to="/" className="flex items-center no-underline text-black">
           <img src={Logo} alt="Logo" className="w-8" />