Fix error and warning when the app is build

components/footer.js

@@ -1,6 +1,3 @@
-import Link from 'next/link';
-
-
 export default function Footer() {
     const footer = [
         {
@@ -35,13 +32,15 @@ export default function Footer() {
         <footer className="bg-white">
             <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
                 <div className="flex justify-center space-x-6 md:order-2">
+                    {/*
                     <Link href={"/legals"}>
                     <p key={"legals"} className="text-gray-400 hover:text-gray-500">
                         <span className="text-md hover:text-black cursor-pointer">
                         Mentions légales
                         </span>
                     </p>
                     </Link>
+                    */}
                     {footer.map((item) => (
                     <a
                         key={item.name}

components/navbar.js

@@ -1,6 +1,7 @@
 // components/Navbar.js
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image'
 import { withRouter } from "next/router";
 import { Disclosure } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
@@ -32,14 +33,18 @@ const Navbar = ({ router }) => {
                   </Disclosure.Button>
                 </div>
                 <div className="flex-shrink-0 flex items-center">
-                  <img
+                  <Image
                     className="block lg:hidden h-8 w-auto"
                     src="/logo.png"
+                    width={250}
+                    height={250}
                     alt="Fablab"
                   />
-                  <img
+                  <Image
                     className="hidden lg:block h-8 w-auto"
                     src="/logoName.png"
+                    width={250}
+                    height={250}
                     alt="Fablab"
                   />
                 </div>

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "tailwind": "npx tailwindcss -i ./styles/globals.css -o ./public/output.css"
+    "tailwind": "npx tailwindcss -i ./styles/globals.css -o ./styles/tailwind.css"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",

pages/_app.js

@@ -1,4 +1,4 @@
-import '../styles/globals.css'
+import '../styles/tailwind.css'
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

pages/index.js

@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import Head from '../components/head'
 import Navbar from '../components/navbar'
 import Footer from '../components/footer'
@@ -19,7 +20,7 @@ export default function Home() {
             !
           </h2>
           <h3 className="text-lg md:text-xl md:leading-relaxed font-medium text-gray-600 lg:w-2/3 mx-auto">
-            Le FabLab est un lieu d'échange et de création du pôle universitaire
+            Le FabLab est un lieu d&apos;échange et de création du pôle universitaire
             Léonard de Vinci. Que vous soyez étudiant ou non, venez découvrir
             nos créations, articles et tutos !
           </h3>
@@ -60,34 +61,40 @@ export default function Home() {
               </h2>
               <p className="mt-10 text-lg leading-6 text-gray-500 text-justify">
                 Le DeVinci FabLab est une association étudiante du Pôle Léonard
-                De Vinci qui s'occupe de l'espace de fabrication situé au fond
+                De Vinci qui s&apos;occupe de l&apos;espace de fabrication situé au fond
                 du Leaning center. Le but de notre association est de vous aider
                 dans vos projets académiques comme personnels, que ce soit avec
                 des outils, des machines, des matériaux ou des formations. Nous
-                gérons ainsi le parc d'imprimante 3D qui vous permettra de
+                gérons ainsi le parc d&apos;imprimante 3D qui vous permettra de
                 réaliser toutes les pièces que vous aurez conçues, ainsi que les
                 ateliers mis à la disposition de tous où vous pourrez faire
-                votre bricolage. L'espace a les mêmes horaires d'ouverture que
-                le pôle donc n'hésitez pas à venir nous y rencontrer !
+                votre bricolage. L&apos;espace a les mêmes horaires d&apos;ouverture que
+                le pôle donc n&apos;hésitez pas à venir nous y rencontrer !
               </p>
             </div>
           </div>
           <div className="order-1 max-w-md m-auto md:m-0 md:w-full">
             <div className="items-center justify-center">
-              <img
+              <Image
                 className="rounded-lg shadow-2xl"
                 src="/photo/home_001.jpg"
+                width={500}
+                height={500}
                 alt="Banner"
               />
               <div className="grid grid-cols-2 gap-2 content-start mt-5">
-                <img
+                <Image
                   className="rounded-lg shadow-lg"
                   src="/photo/home_002.jpg"
+                  width={250}
+                  height={250}
                   alt="Banner"
                 />
-                <img
+                <Image
                   className="rounded-lg shadow-lg"
                   src="/photo/home_003.jpg"
+                  width={250}
+                  height={250}
                   alt="Banner"
                 />
               </div>