changed the <img> with the next/img

next.config.js

@@ -1,5 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
 
 module.exports = {
   images: {

src/components/Moderators.jsx

@@ -1,4 +1,5 @@
 import { Container } from '@/components/Container'
+import Image from 'next/image'
 
 const people = [
   {
@@ -73,7 +74,7 @@ export function Moderators() {
         <div className="md:text-center">
           <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
             <span className="relative whitespace-nowrap">
-              <SwirlyDoodle className="fill-primary-400 absolute left-0 top-1/2 h-[1em] w-full" />
+              <SwirlyDoodle className="absolute left-0 top-1/2 h-[1em] w-full fill-primary-400" />
               <span className="relative">EddieHub</span>
             </span>{' '}
             Moderators.
@@ -91,10 +92,12 @@ export function Moderators() {
               key={person.name}
               className="rounded-2xl bg-gray-800 px-8 py-10"
             >
-              <img
-                className="mx-auto h-48 w-48 rounded-full md:h-56 md:w-56"
+              <Image
+                className="mx-auto rounded-full md:h-56 md:w-56"
                 src={person.imageUrl}
-                alt=""
+                alt="moderator image"
+                width={200}
+                height={200}
               />
               <h3 className="mt-6 text-base font-semibold leading-7 tracking-tight text-white">
                 {person.name}