Add initial splash image

Add just dark splash image to confirm container size. Needed to do this so that I could work out bugs in content rendering.

pages/index.tsx

@@ -1,4 +1,5 @@
 import type {NextPage} from 'next';
+import Image from "next/image";
 import NavBar from "../components/navbar";
 import {Footer} from "../components/footer"
 
@@ -9,10 +10,17 @@ const Home: NextPage = () => {
             
             <main className="">
                 {/* MAIN BANNER SECTION BELOW */}
-                <div className="">
-
+                <div className="container relative min-w-full min-h-screen flex flex-col items-center py-12 ">
+                    <Image
+                    className=""
+                    src="/splashDarkFinal.jpg"
+                    alt="Dark background splash screen"
+                    layout="fill"     
+                    quality="100"
+                    priority
+                    />
                 </div>
-                
+                {/* <div className="w-full mt-8 relat" */}
             </main>
             <Footer></Footer>   
         </div>

tailwind.config.js

@@ -25,6 +25,10 @@ module.exports = {
         },
       },
       display: ['dark'],
+      backgroundImage: {
+        'splashDark': "url('/splashDarkFinal.jpg')",
+        'splashLight': "url('/splashLightFinal.jpg')",
+      },
     },
   },
   plugins: [],