Update Background Image

Dynamic background dependant on current theme
This commit is contained in:
Nick Bland
2022-07-25 13:27:08 +10:00
parent fd5e8fc200
commit a80d1e3fc4
2 changed files with 14 additions and 14 deletions
+7 -10
View File
@@ -1,8 +1,11 @@
import type {NextPage} from 'next';
import Image from "next/image";
import Image from "next/future/image";
import NavBar from "../components/navbar";
import {Footer} from "../components/footer"
import splashDark from "../public/splashDarkFinal.jpg"
import splashLight from "../public/splashLightFinal.jpg"
const Home: NextPage = () => {
return (
<div className="">
@@ -10,15 +13,9 @@ const Home: NextPage = () => {
<main className="">
{/* MAIN BANNER SECTION BELOW */}
<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 className="container relative min-w-full min-h-screen flex flex-col items-center py-12">
<div className="dark:block hidden"><Image className="flex-shrink-0 h-full w-auto" src={splashDark}/></div>
<div className="dark:hidden block"><Image className="flex-shrink-0 h-full w-auto" src={splashLight}/></div>
</div>
{/* <div className="w-full mt-8 relat" */}
</main>