add Image component

Author: panoramine

components/Footer.js

@@ -2,6 +2,7 @@ import Link from "next/link";
 import footerStyles from "../styles/Footer.module.scss";
 import { linksNav, linksSocial } from "../utils/links";
 import NewsletterSubscribe from "./mailchimp/NewsletterSubscribe";
+import Image from "next/image";
 
 export default function Footer() {
   return (
@@ -19,7 +20,7 @@ export default function Footer() {
               </li>
             ))}
           </ul>
-          <img
+          <Image width={77} height={72}
             className={footerStyles.logo}
             src="/images/web-dev-path-logo-small.png"
             alt="Logo"
@@ -36,13 +37,14 @@ export default function Footer() {
           </div>
           <div className={footerStyles.socialMedia}>
             {linksSocial.map((link) => (
-              <Link href={link.href} key={link.text}>
-                <img
-                  className={footerStyles.socialMedia}
-                  src={link.src}
-                  alt={link.text}
-                />
-              </Link>
+              <section className={footerStyles.socialMedia}>
+                <Link href={link.href} key={link.text}>
+                  <Image width={32} height={32}
+                    src={link.src}
+                    alt={link.text}
+                  />
+                </Link>
+              </section>
             ))}
           </div>
         </div>

components/Nav.js

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import styles from "../styles/Nav.module.scss";
 import { linksNav } from "../utils/links";
+import Image from "next/image";
 
 export default function Nav() {
   const [active, setActive] = useState(false);
@@ -27,7 +28,7 @@ export default function Nav() {
       >
         <div className={styles.align}>
           <Link href="/">
-            <img
+            <Image width={86} height={80}
               className={styles.logo}
               src="/images/web-dev-path-logo-small.png"
               alt="Logo"

package-lock.json

@@ -38,7 +38,7 @@
 .logo {
 	border-radius: 50%;
 	height: 4.5em;
-	cursor: pointer;
+	cursor: pointer;	
 
 	&:hover {
 		opacity: 0.6;
@@ -98,7 +98,7 @@
 	}
 
 	img {
-		height: 2rem;
+		padding: 10px;
 
 		&:hover {
 			opacity: 65%;
@@ -156,3 +156,4 @@
 		text-align: left;
 	}
 }
+