feat: introduce @awwsmith pattern header

src/components/header.css

@@ -3,7 +3,6 @@
 header {
   width: 100%;
   text-align: left;
-  padding: 0 var(--base-content-spacing);
 }
 header svg {
   max-height: 125px;

src/components/header.tsx

@@ -1,17 +1,26 @@
 import { Link } from "gatsby"
 import React from "react"
 
-import "./header.css"
 import Logo from "../svg/MITH-logostack-blk.svg"
+import { StaticImage } from "gatsby-plugin-image"
 
 const Header = () => (
   // siteTitle currently unused.
   <header>
-    <div className="logo">
+    <div className="bg-white flex flex-row items-center justify-center py-4">
       <Link to="/">
-        <Logo />
+        <Logo height="8rem" />
       </Link>
     </div>
+    <div className="h-96 overflow-hidden absolute top-0 left-0 w-full -z-10">
+      <StaticImage
+        src="../images/mith-pattern-header.png"
+        alt="Header Pattern"
+        layout="fullWidth"
+        className="no-repeat object-cover align-middle"
+        placeholder="blurred"
+      />
+    </div>
   </header>
 )
 

src/components/layout.tsx

@@ -41,7 +41,7 @@ const Layout = ({ children }: LayoutProps) => {
       <div className="flex flex-col min-h-screen">
         <Header />
         <Nav />
-        <main id="main-content" className="grow">
+        <main id="main-content" className="mt-56 grow">
           {children}
         </main>
         <Footer />