add alt tags and fix more legacy image imports

Author: cherylli

components/containers/Member.js

@@ -9,13 +9,12 @@ export default function Member({
   about,
   linkedIn,
   portfolio,
-  customClass,
 }) {
   return (
     <div className={styles.card}>
       {image && (
         <div className={styles.card__image}>
-          <Image src={image} alt={name} className={styles.img} fill />
+          <Image src={image} alt={name} fill />
         </div>
       )}
 

components/layout/Footer.js

@@ -1,7 +1,7 @@
+import Image from 'next/image';
 import footerStyles from '@/styles/Footer.module.scss';
 import { linksNav, linksSocial } from '@/utils/links';
 import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
-import Image from 'next/legacy/image';
 import Container from '@/components/containers/Container';
 
 export default function Footer() {

components/layout/Hero.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Image from 'next/legacy/image';
+import Image from 'next/image';
 import Nav from '@/components/layout/Nav';
 import Container from '@/components/containers/Container';
 import styles from '@/styles/Hero.module.scss';
@@ -29,9 +29,7 @@ export default function Hero({
         src={imgBg}
         alt={imgAlt}
         className={styles.imageBg}
-        layout='fill'
-        objectFit='cover'
-        objectPosition='center'
+        fill
         priority
       />
       <Container customClass={styles.header__content}>

components/layout/Nav.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
 import Container from '@/components/containers/Container';
 import styles from '@/styles/Nav.module.scss';
 import { linksNav } from '@/utils/links';
@@ -54,14 +55,14 @@ export default function Nav() {
       <Container>
         <div ref={containerRef}>
           <nav className={styles.nav}>
-            <a href='/' passhref='true'>
+            <Link href='/'>
               <img
                 className={styles.nav__logo}
                 src='/images/svg/logo.svg'
                 alt='Logo'
                 title='Go to the Homepage'
               />
-            </a>
+            </Link>
             <ul
               className={`${styles.nav__links} ${active ? styles.active : ''}`}
             >

components/mailchimp/NewsletterForm.js

@@ -1,5 +1,5 @@
 import { createRef, useState } from 'react';
-import Image from 'next/legacy/image';
+import Image from 'next/image';
 import { decode } from 'html-entities';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Container from '@/components/containers/Container';
@@ -124,7 +124,6 @@ const NewsletterForm = ({ status, message, onValidated }) => {
               height={18}
               width={18}
               alt='Right Chevron SVG'
-              className={newsletterStyles.newsletter__right_chevron_image}
             />
           </span>
         </h2>

pages/about.js

@@ -12,7 +12,7 @@ import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import Row from '@/components/containers/Row';
 import Member from '@/components/containers/Member';
-import { whoWeAre } from '../utils/about';
+import { whoWeAre } from '@/utils/about';
 
 export default function AboutUs() {
   return (
@@ -34,6 +34,7 @@ export default function AboutUs() {
           }
           rowOrder='row'
           image='/images/svg/square-brackets.svg'
+          altTag='Square Brackets'
           color={primary}
           bgColor={primaryAccent}
           customInnerClass='our-background'
@@ -74,6 +75,7 @@ export default function AboutUs() {
           }
           rowOrder='row-reverse'
           image='/images/svg/open-angle-bracket.svg'
+          altTag='Open angle bracket'
           color={primary}
           bgColor={white}
           customInnerClass='our-process'
@@ -95,6 +97,7 @@ export default function AboutUs() {
             </div>
           }
           image='/images/svg/close-angle-bracket.svg'
+          altTag='close-angle-bracket'
           color={primary}
           bgColor={white}
           customInnerClass='our-process'
@@ -138,6 +141,7 @@ export default function AboutUs() {
           }
           rowOrder='row-reverse'
           image='/images/svg/semi-colon.svg'
+          altTag='Semi-colon'
           color={primary}
           bgColor={white}
           customInnerClass='our-purpose'
@@ -148,6 +152,7 @@ export default function AboutUs() {
           title='Wanna learn more?'
           content={''}
           image='/images/svg/close-curly-bracket.svg'
+          altTag='Close curly bracket'
           color={primary}
           bgColor={lightBgColor}
           customInnerClass='wanna-learn-more'
@@ -216,6 +221,7 @@ export default function AboutUs() {
           }
           rowOrder='row-reverse'
           image='/images/svg/slash.svg'
+          altTag='Slash'
           color={primary}
           bgColor={white}
           customInnerClass='get-started'
@@ -252,6 +258,7 @@ export default function AboutUs() {
           title='Still got questions?'
           content='Feel free to contact us.'
           image='/images/svg/hashtag.svg'
+          altTag='Hashtag'
           color={primary}
           bgColor={white}
           customInnerClass='questions'

styles/Hero.module.scss

@@ -43,3 +43,8 @@
     }
   }
 }
+
+.imageBg {
+  object-fit: cover;
+  object-position: center;
+}