feat: optimize home hero image

Author: SidonieBouthors

app/page.tsx

@@ -1,9 +1,16 @@
 import InfoBox from "@/components/InfoBox";
+import ExportedImage from "next-image-export-optimizer";
 
 export default function Home() {
   return (
     <>
       <div className="home-hero">
+        <ExportedImage
+          className="home-hero-image"
+          src="/home-hero.jpg"
+          alt="Hero image"
+          fill={true}
+        />
         <h1>Welcome to my website!</h1>
         <div className="subtitle">Recipes, projects & more</div>
       </div>

styles/pages/_home.scss

@@ -2,19 +2,26 @@
 @use "sass:map";
 
 .home-hero {
-  background-image: url(/home-hero.jpg);
   background-color: rgba(0, 0, 0, 0.5);
   background-blend-mode: overlay;
   background-size: cover;
   background-position: center;
   padding: 0.5em;
   height: 90vh;
 
+  position: relative;
+
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 
+  .home-hero-image {
+    object-fit: cover;
+    pointer-events: none;
+    z-index: -1;
+  }
+
   h1 {
     font-family: $font-black;
     font-size: 3rem;