From ac1956a1716bd8169de7f9c154334bccd6fb2a8e Mon Sep 17 00:00:00 2001
From: Mikael Siidorow <mikael.siidorow@aalto.fi>
Date: Tue, 23 Jan 2024 10:36:07 +0200
Subject: [PATCH] optimize hero images with next/image

---
 apps/web/src/components/hero/index.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/hero/index.tsx b/apps/web/src/components/hero/index.tsx
index 34a37a9f..cbf53c01 100644
--- a/apps/web/src/components/hero/index.tsx
+++ b/apps/web/src/components/hero/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { useEffect, useState } from "react";
 import { cn } from "../../lib/utils";
 
@@ -20,16 +21,19 @@ export function Hero({ images, text }: { images: string[]; text: string }) {
 
   return (
     <section className="relative flex h-[85vh] items-end bg-gray-900 py-24">
-      {images.map((image, idx) => (
-        <div
+      {images.map((image, imageIndex) => (
+        <Image
+          alt=""
           className={cn(
-            "absolute bottom-0 left-0 right-0 top-0 z-10 bg-cover bg-center transition-opacity duration-1000",
-            idx === currentImage ? "opacity-25" : "opacity-0",
+            "z-10 transition-opacity duration-1000",
+            imageIndex === currentImage ? "opacity-25" : "opacity-0",
           )}
           key={image}
-          style={{
-            backgroundImage: `url(${image})`,
-          }}
+          layout="fill"
+          objectFit="cover"
+          objectPosition="center"
+          priority
+          src={image}
         />
       ))}
       <p className="container z-20 mx-auto px-6 font-mono text-5xl text-gray-100">