Merge pull request #24 from CodeWithAloha/16-utilize-vercel-image-opt…

…imizations

16 utilize vercel image optimizations

src/components/Clients.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import Image from 'next/image'
+
 
 const Clients = () => {
   return (
@@ -9,16 +11,22 @@ const Clients = () => {
       </h2>
 
       <div className="flex items-center justify-center pb-40">
-        <img
-          src="./assets/projectsAssets/client1.png"
+        <Image
+          alt='Hawaii Zoning Atlus'
+          src="/./assets/projectsAssets/client1.png"
+          width={500}
+          height={500}
           className="h-full  w-1/3 lg:w-1/4 "
         />
-        <img
-          src="./assets/projectsAssets/client2.png"
+        <Image
+          alt='The Civil Beat - Law Center For Public Interest'
+          src="/./assets/projectsAssets/client2.png"
+          width={500}
+          height={500}
           className="h-full w-1/3 lg:w-1/4 "
         />
       </div>
-    </div>
+    </div> 
   );
 }
 

src/components/HistoricalProjects.js

@@ -10,13 +10,17 @@ const HistoricalProjects = () => {
       </h2>
       <div className=" flex gap-10 flex-col xl:flex-row ">
         <ProjectCard
-          src="./assets/projectsAssets/foodoasis.jpg"
+          src="/./assets/projectsAssets/foodoasis.jpg"
+          width={400}
+          height={300}
           title="FOOD OASIS"
           text="Resource for Community Food Help"
         />
 
         <ProjectCard
-          src="./assets/projectsAssets/uipa.jpg"
+          src="/./assets/projectsAssets/uipa.jpg"
+          width={400}
+          height={300}
           title="UIPA.ORG"
           text="Publishes public records and request"
           className="max-h-1/2"

src/components/HomePage.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { FaMeetup } from "react-icons/fa";
 import NavBar from './NavBar';
 
@@ -8,7 +9,7 @@ const HomePage = () => {
       <NavBar />
       <div className="flex items-center justify-center flex-col lg:flex-row">
         <div className="scale-[80%]  2xl:scale-90 xl:pl-20 flex flex-col items-center">
-          <img src="hero-image.png" className="w-full max-w-[900px] animate-float" />
+          <Image alt='' src="/hero-image.png" width={1300} height={1300} className="w-full max-w-[900px] animate-float" />
           <div className='w-1/3 h-4 mt-12 rounded-full blur-2xl bg-gradient-to-t bg-black'></div>
         </div>
 

src/components/Logo.js

@@ -1,17 +1,20 @@
-import Link from 'next/link'
 import React from 'react'
-
+import Link from 'next/link'
+import Image from 'next/image'
 
 
 
 const Logo = () => {
   return (
 
       <Link href="/" whileHover={{ scale: 1.5 }}>
-        <img
-          src="../logo.png"
-          className="xl:max-h-24 max-h-[3rem] cursor-pointer m-2 hover:animate-pulse"
-        ></img>
+        <Image
+          alt='Code with Aloha logo'
+          src="/../public/logo.png"
+          width={500}
+          height={500}
+          className="w-full xl:max-h-24 max-h-[3rem] cursor-pointer m-2 hover:animate-pulse"
+        />
       </Link>
 
   );

src/components/OurFocus.js

@@ -1,11 +1,12 @@
 import React from "react";
+import Image from 'next/image'
 
-const TextBlock = ({ src, alt, title, text, className = "" }) => {
+const TextBlock = ({ src, alt, width, height, title, text, className = "" }) => {
   return (
     <div
       className={`flex items-center justify-between gap-10 px-4 lg:px-10 flex-col xl:flex-row ${className}`}
     >
-      <img src={src} alt={alt} className="h-100 xl:p-10 pt-20" />
+      <Image src={src} alt={alt} width={width} height={height} className="h-100 xl:p-10 pt-20" />
       <div className="max-w-lg">
         <h4 className="xl:text-5xl text-3xl font-semibold mb-10 text-center font-satisfy">
           {title}
@@ -28,26 +29,32 @@ const OurFocus = () => {
           Our focus{" "}
         </h2>
         <TextBlock
-          src="./assets/meet.png"
+          src="/./assets/meet.png"
           alt="meet illustration"
+          width={500}
+          height={283}
           title="Meet new people"
           text="Build with, not for. We are a community of people who are passionate
           about helping others. We are here to support each other and
           build together."
         />
 
         <TextBlock
-          src="./assets/progress.png"
+          src="/./assets/progress.png"
           alt="make an impact illustration"
+          width={500}
+          height={266}
           title="Make a Difference"
           text="Nobody is coming to save us. It's up to us to impact our community and drive change.
           We are the ones we've been waiting for. We are the change that we seek."
           className="xl:flex-row-reverse"
         />
 
         <TextBlock
-          src="./assets/experience.png"
+          src="/./assets/experience.png"
           alt="gain experience illustration"
+          width={500}
+          height={215}
           title="Gain Experience"
           text="Gain experience as a beginner, pay it forward as a mentor. We help
               each other grow and together we make a difference in our

src/components/Projects.js

@@ -1,16 +1,16 @@
 import React, { useState } from "react";
+import Image from 'next/image'
 import HistoricalProjects from "./HistoricalProjects";
 import Clients from "./Clients";
 
-
-export const ProjectCard = ({ src, title, text, className = "", handleClick }) => {
+export const ProjectCard = ({ src, alt, width, height, title, text, className = "" , handleClick}) => {
   return (
     <div
       className="relative flex-1 flex items-center pb-8 flex-col text-center rounded-xl 
      "
       onClick={handleClick}
     >
-      <img src={src} className={`${className}  w-2/3 rounded-lg`} />
+      <Image src={src} alt={alt} width={width} height={height} className={`${className}  w-2/3 rounded-lg`} />
       <h5 className="font-semibold text-3xl py-6">{title} </h5>
       <p className=" w-3/5  text-md xl:text-xl">{text}</p>
     </div>
@@ -43,9 +43,12 @@ const Projects = () => {
         </div>
       ) : null}
 
-      <img
-        src="./assets/projectsAssets/projects.png"
-        className="lg:h-40 h-24 mt-20"
+      <Image
+        src="/./assets/projectsAssets/projects.png"
+        alt=""
+        width={500}
+        height={500}
+        className="lg:h-40 lg:w-40 h-24 mt-20"
       />
       <h2 className="text-4xl xl:text-7xl drop-shadow-xl text-center">
         Active projects
@@ -59,15 +62,21 @@ const Projects = () => {
 
       <div className=" flex pt-10  gap-20 flex-col xl:flex-row">
         <ProjectCard
-          src="./assets/projectsAssets/HawaiiZoningAtlas.png"
+          src="/./assets/projectsAssets/HawaiiZoningAtlas.png"
+          alt="hawaii zoning atlas illustration"
+          width={1325}
+          height={985}
           title="Hawaii Zoning Atlas"
           text="An interactive map exploring how restrictive zoning laws can make it
             difficult to build diverse, affordable housing."
           handleClick={handleClick}
         />
 
         <ProjectCard
-          src="./assets/projectsAssets/habitat-full.jpg"
+          src="/./assets/projectsAssets/habitat-full.jpg"
+          alt="habitat for humanity illustration"
+          width={1080}
+          height={1080}
           title="Habitat for Humanity"
           text=" A nonprofit organization that helps people
             in your community and around the world build or improve a place they
@@ -77,7 +86,10 @@ const Projects = () => {
         />
 
         <ProjectCard
-          src="./assets/projectsAssets/HIERR.png"
+          src="/./assets/projectsAssets/HIERR.png"
+          alt="HIERR illustration"
+          width={1126}
+          height={873}
           title="HIERR"
           text="The HIERR Project aims to enable actions toward a more resilient,
             equitable, and sustainable economy."

src/components/Team.js

@@ -1,10 +1,11 @@
 import React from "react";
+import Image from 'next/image'
 import { AiOutlineMail } from "react-icons/ai";
 
 const TeamMember = ({ src, name }) => {
   return (
     <div className='flex flex-col justify-center m-8 text-center hover:scale-105'>
-      <img
+      <Image
         alt=''
         className='self-center  flex-shrink-0 w-32 h-32 mb-4 bg-center bg-cover rounded-full dark:bg-gray-500'
         src={src}

src/components/WhatToExpect.js

@@ -1,10 +1,10 @@
 import React from 'react'
+import Image from 'next/image'
 
-
-const TextBlock =({src, title, text}) => {
+const TextBlock =({src, width, height, title, text}) => {
     return (
       <div className=" flex-1 h-12 flex items-center flex-col ">
-        <img src={src} className="h-12" />
+        <Image src={src} alt='' width={width} height={height} className="h-12 w-12" />
         <h5
           className="font-extrabold py-8 text-transparent lg:text-3xl text-xl
           font-montserat bg-clip-text bg-gradient-to-r from-red-400 to-yellow-400"
@@ -26,9 +26,11 @@ const WhatToExpect = () => {
         What to expect at a meeting{" "}
       </h4>
 
-      <div className="flex gap-10 flex-col xl:flex-row lg:pb-40">
+      <div className="flex gap-10 flex-col xl:flex-row lg:pb-40 ">
         <TextBlock
-          src="./assets/one.png"
+          src="/./assets/one.png"
+          width={500}
+          height={500}
           title="Meet & Greet"
           text="We start each meeting with a land acknowledgement, Code for
             Americaʻs Code of Conduct, and a full round of introductions
@@ -37,7 +39,9 @@ const WhatToExpect = () => {
         />
 
         <TextBlock
-          src="./assets/two.png"
+          src="/./assets/two.png"
+          width={500}
+          height={500}
           title="Debrief on projects and announcements"
           text="  We will share key milestones, updates, and blockers on projects as
             well as relevant news from Code for America including participating
@@ -48,7 +52,9 @@ const WhatToExpect = () => {
         />
 
         <TextBlock
-          src="./assets/three.png"
+          src="/./assets/three.png"
+          width={500}
+          height={500}
           title="Participate in breakout rooms"
           text="Each month the brigade selects a Focus Project that we all work on
             together as a brigade. We also work on developing several other
@@ -57,7 +63,6 @@ const WhatToExpect = () => {
             milestones on the Focus Project or explore projects in our
             Discovery Track."
         />
-
 
       </div>