Merge pull request #35 from CodeWithAloha/static-import-img

Statically import images

src/components/Clients.js

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

src/components/HistoricalProjects.js

@@ -1,5 +1,7 @@
 import React from "react";
 import { ProjectCard } from "./Projects";
+import foodOasisImg from "../images/foodoasis.jpg";
+import uipaImg from "../images/uipa.jpg";
 
 const HistoricalProjects = () => {
   return (
@@ -10,15 +12,15 @@ const HistoricalProjects = () => {
       </h2>
       <div className=" flex gap-10 flex-col xl:flex-row ">
         <ProjectCard
-          src="/CWAWebsite/assets/projectsAssets/foodoasis.jpg"
+          src={foodOasisImg}
           width={400}
           height={300}
           title="FOOD OASIS"
           text="Resource for Community Food Help"
         />
 
         <ProjectCard
-          src="/CWAWebsite/assets/projectsAssets/uipa.jpg"
+          src={uipaImg}
           width={400}
           height={300}
           title="UIPA.ORG"

src/components/HomePage.js

@@ -2,14 +2,15 @@ import React from 'react'
 import Image from 'next/image'
 import { FaMeetup } from "react-icons/fa";
 import NavBar from './NavBar';
+import heroImg from "../images/hero-image.png";
 
 const HomePage = () => {
   return (
     <section className="bg-gradient-to-tr from-cyan-200 to bg-white">
       <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">
-          <Image alt='' src="/CWAWebsite/hero-image.png" width={1300} height={1300} className="w-full max-w-[900px] animate-float" />
+          <Image alt='' src={heroImg} 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,15 +1,15 @@
 import React from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
-
+import logoImg from "../images/logo.png";
 
 
 const Logo = () => {
   return (
     <Link href="/" whileHover={{ scale: 1.5 }}>
       <Image
         alt="Code with Aloha logo"
-        src="/CWAWebsite/logo.png"
+        src={logoImg}
         width={500}
         height={500}
         className="w-full xl:max-h-24 max-h-[3rem] cursor-pointer m-2 hover:animate-pulse"

src/components/OurFocus.js

@@ -1,5 +1,8 @@
 import React from "react";
 import Image from 'next/image'
+import meetImg from "../images/meet.png";
+import progressImg from "../images/progress.png";
+import experienceImg from "../images/experience.png";
 
 const TextBlock = ({ src, alt, width, height, title, text, className = "" }) => {
   return (
@@ -29,7 +32,7 @@ const OurFocus = () => {
           Our focus{" "}
         </h2>
         <TextBlock
-          src="/CWAWebsite/assets/meet.png"
+          src={meetImg}
           alt="meet illustration"
           width={500}
           height={283}
@@ -40,7 +43,7 @@ const OurFocus = () => {
         />
 
         <TextBlock
-          src="/CWAWebsite/assets/progress.png"
+          src={progressImg}
           alt="make an impact illustration"
           width={500}
           height={266}
@@ -51,7 +54,7 @@ const OurFocus = () => {
         />
 
         <TextBlock
-          src="/CWAWebsite/assets/experience.png"
+          src={experienceImg}
           alt="gain experience illustration"
           width={500}
           height={215}

src/components/Projects.js

@@ -5,6 +5,10 @@ import Clients from "./Clients";
 import { IoCloseSharp } from "react-icons/io5";
 import { BsCodeSlash } from "react-icons/bs";
 import { MdLiveTv } from "react-icons/md";
+import habitatFullImg from "../images/habitat-full.jpg";
+import projectsImg from "../images/projects.png";
+import hawaiiZoningAtlasImg from "../images/HawaiiZoningAtlas.png";
+import hierrImg from "../images/HIERR.png";
 
 export const ProjectCard = ({
   id,
@@ -124,7 +128,7 @@ const Projects = () => {
       className=" flex flex-col items-center xl:p-20 px-5 bg-gradient-to-br from-cyan-200 to bg-white-200"
     >
       <Image
-        src="/CWAWebsite/assets/projectsAssets/projects.png"
+        src={projectsImg}
         alt="Project icon"
         className="mt-20"
         width={50}
@@ -143,7 +147,7 @@ const Projects = () => {
       <div className=" flex pt-10  gap-20 flex-col xl:flex-row">
         <ProjectCard
           id="hza"
-          src="/CWAWebsite/assets/projectsAssets/HawaiiZoningAtlas.png"
+          src={hawaiiZoningAtlasImg}
           title="Hawaii Zoning Atlas"
           text="An interactive map exploring how restrictive zoning laws can make it
            difficult to build diverse, affordable housing."
@@ -161,7 +165,7 @@ const Projects = () => {
 
         <ProjectCard
           id="hfu"
-          src="/CWAWebsite/assets/projectsAssets/habitat-full.jpg"
+          src={habitatFullImg}
           title="Habitat for Humanity"
           text=" A nonprofit organization that helps people
             in your community and around the world build or improve a place they
@@ -180,7 +184,7 @@ const Projects = () => {
 
         <ProjectCard
           id="hierr"
-          src="/CWAWebsite/assets/projectsAssets/HIERR.png"
+          src={hierrImg}
           title="HIERR"
           text="The HIERR (Hawaiʻi Economic Recovery & Resilience) Project aims to enable actions toward a more resilient,
             equitable, and sustainable economy."

src/components/Timeline.js

@@ -1,7 +1,13 @@
 import React, { useRef } from "react";
 import { motion, useScroll, useSpring } from "framer-motion";
 import TimelineIcon from "./TimelineIcon";
-
+import timeline1Img from "../images/timeline-1.jpg";
+import timeline2Img from "../images/timeline-2.jpg";
+import timeline3Img from "../images/timeline-3.jpg";
+import timeline4Img from "../images/timeline-4.jpg";
+import timeline5Img from "../images/timeline-5.jpg";
+import timeline6Img from "../images/timeline-6.png";
+import timeline7Img from "../images/timeline-7.png";
 
 const Details = ({ src, date, title, text }) => {
   const ref=useRef(null)
@@ -57,47 +63,47 @@ const scaleY = useSpring(scrollYProgress);
 
           <ul className="w-full flex flex-col items-start justify-between pb-[120px]">
             <Details
-              src="./assets/timeline-1.jpg"
+              src={timeline1Img}
               date="2009"
               title="Humble beginnings"
               text="Code for Hawaii was being born from idea to family."
             />
             <Details
-              src="./assets/timeline-2.jpg"
+              src={timeline2Img}
               date="2011"
               title="First Civic App Released"
               text="We made it offical and released our first app aimed to help and improve our community.”"
             />
             <Details
-              src="./assets/timeline-3.jpg"
+              src={timeline3Img}
               date="2012"
               title="Code for America"
               text="Honolulu Organizes CityCamp 2012. That was the first local event to introduce Code for America, a national organization that aims to build open source technology and organize a network of people dedicated to making government services simple, effective, and easy to use."
             />
 
             <Details
-              src="./assets/timeline-4.jpg"
+              src={timeline4Img}
               date="August 2012"
               title="Code for Hawaii joins the brigade!"
               text="Code for Hawaii joins the inaugural cohort of Brigades along with Portland, ME; Austin; Boston; Lexington; Philly; Chicago; Denver; San Diego; Grand Rapids; Detroit; Arlington; Asheville; Oakland; Bend; Alexandria"
             />
 
             <Details
-              src="./assets/timeline-5.jpg"
+              src={timeline5Img}
               date="2015"
               title="Leadership reboot"
               text="Code for Hawaii welcomes a reboot and new leadership."
             />
 
             <Details
-              src="./assets/timeline-6.png"
+              src={timeline6Img}
               date="2020"
               title="Kaiulu Strategic Promise Developed"
               text="Code for Hawaii develops Kaiulu Strategic Promise and clarifies strategic vision for the organization going forward!"
             />
 
             <Details
-              src="./assets/timeline-7.png"
+              src={timeline7Img}
               date="June 2023"
               title="Code for America Brigade Cancellation"
               text="Code for America cancels the local brigades program. Code for Hawaii rebrands as Code With Aloha and joins many other previous brigades in the Alliance of Civic Technologists."

src/components/WhatToExpect.js

@@ -1,5 +1,8 @@
 import React from 'react'
 import Image from 'next/image'
+import oneImg from "../images/one.png";
+import twoImg from "../images/two.png";
+import threeImg from "../images/three.png";
 
 const TextBlock =({src, width, height, title, text}) => {
     return (
@@ -28,7 +31,7 @@ const WhatToExpect = () => {
 
       <div className="flex gap-10 flex-col xl:flex-row lg:pb-40 ">
         <TextBlock
-          src="/CWAWebsite/assets/one.png"
+          src={oneImg}
           width={500}
           height={500}
           title="Meet & Greet"
@@ -40,7 +43,7 @@ const WhatToExpect = () => {
         />
 
         <TextBlock
-          src="/CWAWebsite/assets/two.png"
+          src={twoImg}
           width={500}
           height={500}
           title="Project Updates"
@@ -51,7 +54,7 @@ const WhatToExpect = () => {
         />
 
         <TextBlock
-          src="/CWAWebsite/assets/three.png"
+          src={threeImg}
           width={500}
           height={500}
           title="Breakout Rooms"