refactor: replace <img> tags

components/Content.jsx

@@ -1,4 +1,5 @@
 import { Zoom } from 'react-awesome-reveal';
+import Image from 'next/image';
 
 const Content = ({ content }) => {
   const renderBlock = (block) =>
@@ -82,12 +83,12 @@ const Content = ({ content }) => {
       }
       return (
         <Zoom key={block.id}>
-          <img
+          <Image
             alt="Image"
             className="my-10"
-            height="auto"
+            height={1500}
             src={block.image}
-            width="auto"
+            width={1500}
           />
         </Zoom>
       );

components/Contributors/index.jsx

@@ -3,6 +3,7 @@ import { Zoom } from 'react-awesome-reveal';
 import themeContext from '../../context/defaultTheme';
 import ContributorFilter from './ContributorFilter';
 import { FaMastodon, FaXTwitter } from 'react-icons/fa6';
+import Image from 'next/image';
 
 function Contributors({ contributors }) {
   const [showMorePositions, setShowMorePositions] = useState([]);
@@ -261,13 +262,14 @@ function Contributors({ contributors }) {
           <Zoom key={contributor.id}>
             <div className="w-full rounded-lg border-2 shadow-lg hover:shadow-md my-5 hover:bg-gray-100  dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800 dark:border-gray-800 dark:hover:border-gray-900 transition-all">
               <div className="flex md:flex-row flex-col transition-all">
-                <img
+                <Image
                   alt={contributor.name}
                   className="md:rounded-l-lg md:rounded-t-none rounded-t-lg md:w-36 md:h-36 object-cover"
-                  height="auto"
+                  height={150}
                   src={contributor.image}
-                  width="auto"
-                ></img>
+                  // unoptimized
+                  width={150}
+                />
                 <div className="flex flex-col justify-between flex-grow p-4 sm:flex-row">
                   <div className="flex flex-col">
                     <div className="flex flex-row gap-2 items-baseline">

components/Footer.jsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 
 function Footer() {
   const footers = [
@@ -130,12 +131,12 @@ function Footer() {
               rel="noopener noreferrer"
               target="_blank"
             >
-              <img
+              <Image
                 alt="elixir-cloud-aai-logo"
-                className="inline-block w-14 md:w-20 mx-3 mr-3 md:mr-7"
-                height="auto"
+                className="inline-block w-14 md:w-20 mx-3 mr-3 md:mr-7 h-full top-0 left-0 object-cover rounded-2xl"
+                height={200}
                 src="/elixir-cloud-aai.png"
-                width="auto"
+                width={200}
               />
             </a>
             <a
@@ -144,12 +145,12 @@ function Footer() {
               rel="noopener noreferrer"
               target="_blank"
             >
-              <img
+              <Image
                 alt="elixir-logo"
-                className="inline-block w-14 md:w-20 mr-3 md:mx-5"
-                height="auto"
+                className="inline-block w-14 md:w-20 mr-3 md:mx-5 h-full top-0 left-0 object-cover rounded-2xl"
+                height={200}
                 src="/elixir.png"
-                width="auto"
+                width={200}
               />
             </a>
             <a
@@ -158,12 +159,12 @@ function Footer() {
               rel="noopener noreferrer"
               target="_blank"
             >
-              <img
+              <Image
                 alt="ga4gh-logo"
-                className="inline-block w-14 md:w-20 mr-3 md:mx-5"
-                height="auto"
+                className="inline-block w-14 md:w-20 mr-3 md:mx-5 h-full top-0 left-0 object-cover rounded-2xl"
+                height={200}
                 src="/ga4gh.png"
-                width="auto"
+                width={200}
               />
             </a>
           </div>

components/Funders.jsx

@@ -1,6 +1,7 @@
 import { useContext, useState } from 'react';
 import { Zoom } from 'react-awesome-reveal';
 import themeContext from '../context/defaultTheme';
+import Image from 'next/image';
 
 function Partners({ funders }) {
   const [query, setQuery] = useState('');
@@ -43,15 +44,15 @@ function Partners({ funders }) {
         <Zoom key={funder.id}>
           <a href={funder.website} rel="noopener noreferrer" target="_blank">
             <div className="w-full rounded-lg border-2 shadow-lg hover:shadow-md my-5 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:border-gray-800 dark:hover:border-gray-900 cursor-pointer ">
-              <div className="flex md:flex-row flex-col">
-                <img
+              <div className="flex lg:flex-row flex-col">
+                <Image
                   alt="Icon"
-                  className={`md:rounded-l-lg md:rounded-t-none rounded-t-lg md:w-32 md:h-32 p-5 ${
+                  className={`m-auto md:rounded-l-lg md:rounded-t-none rounded-t-lg p-5 lg:w-40 lg:h-40 lg:mt-0 ${
                     theme === 'dark' ? 'darkMode' : ''
                   }`}
-                  height="auto"
+                  height={400}
                   src={theme !== 'dark' ? funder.icon : funder.iconDark}
-                  width="auto"
+                  width={400}
                 />
                 <div className="flex-grow p-5">
                   <div className="text-xl font-semibold dark:text-gray-200">

components/Home.jsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import TextTransition, { presets } from 'react-text-transition';
 import { Zoom } from 'react-awesome-reveal';
 import window from 'global/window';
+import Image from 'next/image';
 
 const TEXTS = [
   <span className="text-elixirred" key="findable">
@@ -114,7 +115,14 @@ function Home() {
                 </Link>
               </div>
               <div>
-                <img alt="globe" height="auto" src="/Earth.svg" width="auto" />
+                <Image
+                  alt="globe"
+                  height={0}
+                  sizes="100vw"
+                  src="/Earth.svg"
+                  style={{ width: '100%', height: 'auto' }}
+                  width={0}
+                />
               </div>
             </div>
           </div>

components/NavBar.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { Slide } from 'react-awesome-reveal';
 import { useRouter } from 'next/router';
+import Image from 'next/image';
 
 function NavBar({ scroll, toggleDarkMode, theme, showBanner, setShowBanner }) {
   const router = useRouter();
@@ -199,17 +200,18 @@ function NavBar({ scroll, toggleDarkMode, theme, showBanner, setShowBanner }) {
         <div className="flex items-center justify-between">
           <Link href="/" passHref>
             <div
-              className="cursor-pointer"
+              className="cursor-pointerflex md:space-x-4 sm:space-x-2"
               onClick={() => {
                 setLocation('/');
               }}
             >
-              <img
+              <Image
                 alt="logo"
-                className="inline-block w-6 md:w-7 mx-3 pb-1.5"
-                height="auto"
+                className="inline-block pb-1.5"
+                height={20}
                 src="/elixir-cloud-aai.png"
-                width="auto"
+                style={{ width: 'auto', height: 'auto' }}
+                width={20}
               />
               <div className="inline-block font-semibold text-lg md:text-2xl">
                 ELIXIR Cloud & AAI

components/Partners.jsx

@@ -1,6 +1,7 @@
 import { useContext, useState } from 'react';
 import { Zoom } from 'react-awesome-reveal';
 import themeContext from '../context/defaultTheme';
+import Image from 'next/image';
 
 function Partners({ partners }) {
   const [query, setQuery] = useState('');
@@ -22,14 +23,14 @@ function Partners({ partners }) {
       <Zoom key={partner.id}>
         <a href={partner.website} rel="noopener noreferrer" target="_blank">
           <div className="w-full rounded-lg border-2 shadow-lg hover:shadow-md my-5 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:border-gray-800 dark:hover:border-gray-900 cursor-pointer ">
-            <div className="flex md:flex-row flex-col">
-              <img
+            <div className="flex flex-col lg:flex-row">
+              <Image
                 alt="Icon"
-                className="md:rounded-l-lg md:rounded-t-none rounded-t-lg md:w-32 md:h-32 p-5"
-                height="auto"
+                className="md:rounded-l-lg md:rounded-t-none rounded-t-lg m-auto mt-0 p-5 lg:w-32 lg:h-32"
+                height={400}
                 id={theme.theme === 'dark' ? 'darkMode' : ''}
                 src={theme.theme === 'light' ? partner.icon : partner.iconDark}
-                width="auto"
+                width={400}
               />
               <div className="flex-grow p-5">
                 <div className="text-xl font-semibold flex justify-between dark:text-gray-200">

components/Solutions.jsx

@@ -2,6 +2,7 @@ import { useContext, useState } from 'react';
 import Link from 'next/link';
 import { Zoom } from 'react-awesome-reveal';
 import themeContext from '../context/defaultTheme';
+import Image from 'next/image';
 
 function Solutions({ solutions }) {
   const [query, setQuery] = useState('');
@@ -23,15 +24,15 @@ function Solutions({ solutions }) {
       <Zoom key={solution.id}>
         <Link href={`solution/${solution.id}`} passHref>
           <div className="w-full my-5 border-2 rounded-lg shadow-lg cursor-pointer hover:shadow-md dark:bg-gray-900 dark:hover:bg-gray-800 dark:border-gray-800 dark:hover:border-gray-900 hover:bg-gray-100">
-            <div className="flex flex-col md:flex-row">
-              <img
+            <div className="flex flex-col lg:flex-row">
+              <Image
                 alt="Icon"
-                className={`md:rounded-l-lg md:rounded-t-none rounded-t-lg md:w-32 md:h-32 p-5 ${
+                className={`md:rounded-l-lg md:rounded-t-none rounded-t-lg lg:w-32 lg:h-32 m-auto p-5 lg:mt-0 ${
                   theme === 'dark' ? 'darkMode' : ''
                 }`}
-                height="auto"
+                height={400}
                 src={theme !== 'dark' ? solution.icon : solution.iconDark}
-                width="auto"
+                width={400}
               />
               <div className="flex-grow p-5">
                 <div className="flex justify-between text-xl font-semibold">

next.config.js

@@ -1,3 +1,10 @@
 module.exports = {
+  images: {
+    domains: [
+      'raw.githubusercontent.com',
+      'thumbs2.imgbox.com',
+      'user-images.githubusercontent.com',
+    ],
+  },
   reactStrictMode: true,
 };

pages/solution/[id].js

@@ -5,6 +5,7 @@ import { NextSeo } from 'next-seo';
 import Content from '../../components/Content';
 import getSolutions from '../../utils/solutions';
 import getSolution from '../../utils/solution';
+import Image from 'next/image';
 
 function Solution({ data }) {
   return (
@@ -13,12 +14,12 @@ function Solution({ data }) {
       <div className="mt-32 md:mx-64 mx-10 font-pop text-gray-700 tracking-wide">
         <Zoom>
           <div className="flex justify-around">
-            <img
+            <Image
               alt="Icon"
-              className="rounded-lg w-28 h-28 md:w-32 md:h-32"
-              height="auto"
+              className="rounded-lg"
+              height={150}
               src={data.icon}
-              width="auto"
+              width={150}
             />
           </div>
         </Zoom>