3 files changed, 50 insertions, 0 deletions
diff --git a/components/footer.js b/components/footer.js
new file mode 100644
index 0000000..defef0d
--- /dev/null
+++ b/components/footer.js
@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+      <>
+      <footer>
+<p class="text-center text-slate-800 hover:text-slate-500 transition duration-150 ease-out hover:ease-in">This website was created for the Southeastern Government of BNBMC, a fictional world created within Minecraft. The content you see on this website should NOT be taken seriously. With design work by <a href="https://nosi.uk/">Tomas North</a>.</p>
+        </footer>
+      </>
+    )
+  }
diff --git a/components/header.js b/components/header.js
new file mode 100644
index 0000000..9cc7d44
--- /dev/null
+++ b/components/header.js
@@ -0,0 +1,27 @@
+export default function Header() {
+    return (
+        <>
+        <header>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
+        <div class="bg-green-800 py-3 px-2 text-white font-semibold text-right"><a href="https://aircs.racing/"><i class="fa fa-arrow-left mr-2"></i> aircs.racing</a></div>
+        <div class="flex items-center justify-between flex-wrap p-6 bg-slate-950">
+           <div class="flex items-center flex-shrink-0 text-white mr-6">
+            <p class="font-semibold text-xl tracking-tight">SEI.GOV</p>
+            </div>
+            <div class="flex items-center w-auto">
+            <div class="text-sm flex-grow">
+                {[
+                    ['fas fa-home', 'Home', '/'],
+                    ['fas fa-person', 'Life in SEI', '/life'],
+                    ['fas fa-door-open', 'Cabinet', '/cabinet'],
+                    ['fas fa-note-sticky', 'Reports', '/reports'],
+                ].map(([icon, title, url]) => (
+                   <a href={url} className="transition duration-150 ease-out hover:ease-in inline-block mt-0 text-base text-slate-300 hover:text-white mr-4 hover:bg-green-800 rounded-lg p-2"><span class="mr-1"><i class={icon}></i></span> {title}</a>
+                ))}
+            </div>
+        </div>
+ </div>
+ </header>
+        </>
+  )
+}
+\ No newline at end of file
diff --git a/components/layout.js b/components/layout.js
new file mode 100644
index 0000000..14eeff7
--- /dev/null
+++ b/components/layout.js
@@ -0,0 +1,14 @@
+import Header from './header';
+import Footer from './footer';
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <html class="bg-gray-950 text-white">
+        <Header />
+        <body class="h-screen"><main>{children}</main></body>
+        <Footer />
+</html>
+</>
+  );
+}