add banner

Signed-off-by: Alistair Hey <[email protected]>

src/components/Banner.jsx

@@ -0,0 +1,15 @@
+export default function Banner() {
+ return (
+ <div className="items-center justify-center gap-x-6 bg-white px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+ <p className="text-sm leading-6 text-black fit-content">
+ <a className="w-items" href="https://conf.techmids.io">
+ <strong className="font-semibold">TechMids Conf October 2023</strong>
+ <svg viewBox="0 0 2 2" className="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
+ <circle cx={1} cy={1} r={1} />
+ </svg>
+ Join us in Birmingham's ICC on 20th October 2023<span aria-hidden="true">&rarr;</span>
+ </a>
+ </p>
+ </div>
+ )
+}

src/pages/_app.jsx

@@ -5,6 +5,7 @@ import { Header } from '@/components/Header'
 
 import '@/styles/tailwind.css'
 import 'focus-visible'
+import Banner from "@/components/Banner";
 
 function usePrevious(value) {
  let ref = useRef()
@@ -27,6 +28,7 @@ export default function App({ Component, pageProps, router }) {
  </div>
  </div>
  <div className="relative">
+ <Banner />
  <Header />
  <main>
  <Component previousPathname={previousPathname} {...pageProps} />

src/pages/index.jsx

@@ -21,6 +21,7 @@ import { getAllArticles } from '@/lib/getAllArticles'
 import { formatDate } from '@/lib/formatDate'
 import { meetups } from "../../meetups";
 import { config } from "../../config";
+import Banner from "@/components/Banner";
 
 function MailIcon(props) {
  return (