fix: existing lint issues

components/Agenda/agenda.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Heading from '../Typography/heading'
 import Paragraph from '../Typography/paragraph'
+import Image from 'next/image'
 
 function Agenda({ city }) {
   return (
@@ -39,7 +40,7 @@ function Agenda({ city }) {
 						  </div>
 						  {talk.speaker && typeof talk.speaker === 'number' ? <div className='flex items-center lg:mt-4'>
 							  <div className='w-[94px] h-[94px]'>
-								  <img src={city.speakers[talk.speaker - 1].img} alt={city.speakers[talk.speaker -1].name} className='object-cover rounded-full  w-full h-full'/>
+								  <Image src={city.speakers[talk.speaker - 1].img} alt={city.speakers[talk.speaker -1].name} className='object-cover rounded-full' height={'100%'} width={'100%'} />
 							  </div>
 							  <div className='ml-4 w-[300px] sm:w-[250px]'>
 								  <Heading typeStyle='heading-sm-semibold' className='text-white'>
@@ -54,7 +55,7 @@ function Agenda({ city }) {
 								  {talk.speaker.map((speak, i) => <div key={i} className='mt-6'>
 										  <div className='flex items-center lg:mt-4'>
 										  <div className='w-[94px] h-[94px]'>
-											  <img src={city.speakers[speak - 1].img} alt={city.speakers[speak - 1].name} className='object-cover rounded-full  w-full h-full' />
+											  <Image src={city.speakers[speak - 1].img} alt={city.speakers[speak - 1].name} className='object-cover rounded-full' height={'100%'} width={'100%'} />
 										  </div>
 										  <div className='ml-4 w-[300px] sm:w-[250px]'>
 								  <Heading typeStyle='heading-sm-semibold' className='text-white'>

components/Footer/footer.js

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from 'next/image';
 
 function Footer() {
   const socials = [
@@ -21,7 +22,7 @@ function Footer() {
   return (
     <div className="container">
       <div className="w-full flex justify-between items-center p-4 sm:flex-col sm:gap-3">
-            <img src="/img/logo.png" alt="company logo" className="w-[150px]" />
+            <Image src="/img/logo.png" alt="company logo" width={150} height={42} />
             <div className="sm:hidden"> 
               {/* This div helps keep the text centered */}
             </div>
@@ -49,11 +50,7 @@ function Footer() {
                     rel="noreferrer"
                     className="w-12 h-12 rounded-lg border-[1.5px] border-[#556061] flex items-center justify-center hover:border-[#AD20E2] duration-150 ease-in-out"
                   >
-                    <img
-                      src={social.imgUrl}
-                      alt={social.name}
-                      className="w-8 h-8"
-                    />
+                    <Image src={social.imgUrl} alt={social.name} height={32} width={32} />
                   </a>
                 );
               })}

components/Form/Cfp/stepThree.js

@@ -37,7 +37,7 @@ function StepThree({ setStep, setForm, data }) {
   const [value, setValue] = useState({});
   useEffect(() => {
     setForm({ ...data, ...value});
-  }, [value]); 
+  }, [data, setForm, value]); 
   return (
     <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 4)}>
       <h1 className="text-white font-bold text-4xl lg:text-3xl">

components/Form/select.js

@@ -45,7 +45,7 @@ function Dropdown({ options, title, setValue, multi }) {
     } else {
       setValue(selectedOption.value);
     }
-  }, [selectedOption]);
+  }, [multi, selectedOption, setValue]);
   return (
     <div className="relative inline-block w-full">
       <Select

components/Navbar/navbar.js

@@ -1,11 +1,12 @@
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
-import { useState,useEffect,useRef} from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import links from '../../config/links.json';
 import NavDrop from './navDrop';
 import Hamburger from '../illustration/hamburger';
 import { useMediaQuery } from 'react-responsive';
 import Cancel from '../illustration/cancel';
+import Image from 'next/image';
 
 
 
@@ -15,47 +16,47 @@ function Navbar() {
 	const [show, setShow] = useState(null);
 	const menuRef = useRef(null);
 	const svg = useRef(null);
-	function handleClosing(event) {
+	const handleClosing = useCallback((event) => {
 		if (show && !event.target.closest('.subMenu')) {
 			setShow(false);
 		}
-	}
+	}, [show]);
 	useEffect(() => {
 		document.addEventListener('mousedown', handleClosing);
 		return () => {
-            document.removeEventListener('mousedown', handleClosing);
-        };
-	}, [show]);
+			document.removeEventListener('mousedown', handleClosing);
+		};
+	}, [handleClosing, show]);
 
 	const handleCloseMenu = (event) => {
-		if (menuRef .current && !menuRef .current.contains(event.target)) {
+		if (menuRef.current && !menuRef.current.contains(event.target)) {
 			setDrop(false);
-		  }if(svg.current&&event.target==svg.current){
+		} if (svg.current && event.target == svg.current) {
 			setDrop(true);
-		  }
+		}
 	};
-  
+
 	useEffect(() => {
-	  document.addEventListener('click', handleCloseMenu);
-	  return () => {
-		document.removeEventListener('click', handleCloseMenu);
-	  };
+		document.addEventListener('click', handleCloseMenu);
+		return () => {
+			document.removeEventListener('click', handleCloseMenu);
+		};
 	}, [menuRef]);
 
 	const handleVenueHover = () => {
-        setShow('Venue');
-    };
-    const handleSubMenuLeave = () => {
-        setShow(null);
-    };
+		setShow('Venue');
+	};
+	const handleSubMenuLeave = () => {
+		setShow(null);
+	};
 	return (
 		<div className='flex justify-center items-center sticky top-0 z-[99] text-white'>
 			<div className='w-[1131px]'>
 				<div className='p-5 flex justify-between h-[75px] w-full items-center'>
 					<div className='flex items-center sm:justify-between sm:w-full'>
 						<Link href='/'>
-							<div className='flex items-center cursor-pointer w-[120px]'>
-								<img src='/img/logo.png' alt='conference logo' />
+							<div className='flex items-center cursor-pointer'>
+								<Image src='/img/logo.png' alt='conference logo' width={120} height={33} />
 							</div>
 						</Link>
 					</div>
@@ -67,7 +68,7 @@ function Navbar() {
 								</button>
 							) : (
 								<button>
-									<Hamburger  ref={svg}/>
+									<Hamburger ref={svg} />
 								</button>
 							)}
 						</div>
@@ -76,21 +77,21 @@ function Navbar() {
 							{links.map((link) => (
 								<div href={link.ref} key={link.title}>
 									<div
-									onMouseEnter={() => setShow(link.title === 'Venue' ? 'Venue' : null)}
-									onClick={() => setShow(link.title === 'Venue' ? null : link.title)}
+										onMouseEnter={() => setShow(link.title === 'Venue' ? 'Venue' : null)}
+										onClick={() => setShow(link.title === 'Venue' ? null : link.title)}
 										className='ml-16 text-[14px] group cursor-pointer relative flex flex-col'
 									>
 										<div>
 											{link.subMenu ? (
-												<div 
-												onMouseEnter={handleVenueHover}
-												className='flex items-center '>
+												<div
+													onMouseEnter={handleVenueHover}
+													className='flex items-center '>
 													{link.title}{' '}
 													{link.subMenu && (
 														<Dropdown
-														color="white"
-														className={`ml-2 transition-transform duration-700 ${show === link.title ? 'rotate-180' : 'rotate-0'
-													}`}
+															color="white"
+															className={`ml-2 transition-transform duration-700 ${show === link.title ? 'rotate-180' : 'rotate-0'
+																}`}
 														/>
 													)}
 												</div>
@@ -100,8 +101,8 @@ function Navbar() {
 										</div>
 										{show && show === link.title && link.subMenu && (
 											<div
-											onMouseLeave={handleSubMenuLeave}
-											className='subMenu absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg pl-2 pt-1 flex flex-col justify-center space-y-0'>
+												onMouseLeave={handleSubMenuLeave}
+												className='subMenu absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg pl-2 pt-1 flex flex-col justify-center space-y-0'>
 												{link.subMenu.map((subL) => (
 													<Link href={subL.ref} key={subL.title}>
 														<div className='h-[32px] text-[16px] hover:scale-95 hover:translate-x-1 transition-all'>
@@ -116,7 +117,7 @@ function Navbar() {
 							))}
 						</div>
 					)}
-					{isTablet && drop && <NavDrop setDrop={setDrop}  ref={menuRef} />}
+					{isTablet && drop && <NavDrop setDrop={setDrop} ref={menuRef} />}
 				</div>
 			</div>
 		</div>

components/Select/select.js

@@ -45,7 +45,7 @@ function Dropdown({ options, title, setValue, multi }) {
     } else {
       setValue(selectedOption.value);
     }
-  }, [selectedOption]);
+  }, [multi, selectedOption, setValue]);
   return (
     <div className="relative inline-block w-full">
       <Select

components/Speaker/speaker.js

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import React from 'react'
 
 function Speaker({details, location, className}) {
@@ -6,11 +7,7 @@ function Speaker({details, location, className}) {
 			className={`w-auto text-center flex flex-col items-center card h-auto rounded-md p-[27px] ${className}`}
 		>
 			<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px]'>
-				<img
-					src={details.img}
-					alt={details.name}
-					className='rounded-full w-full h-full object-cover'
-				/>
+				<Image src={details.img} alt={details.name} width={0} height={0} sizes='100vw' className='rounded-full object-cover' />
 			</div>
 			<div className='mt-[19px]'>
 				<h3 className='text-[23px] text-white'>{details.name}</h3>

components/Venue/venue.js

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unescaped-entities */
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 function Venue({ className, city }) {
 	return (
@@ -14,7 +15,7 @@ function Venue({ className, city }) {
 							e.preventDefault()
 							window.open(city.map, '_blank', 'noopener')
 						}} className='w-8 h-8 bg-white rounded-xl flex items-center justify-center ml-auto'>
-							<img src='/img/mapIcon.svg' className='w-6' />
+							<Image src='/img/mapIcon.svg' alt='Map Icon' width={24} height={24} />
 						</button>
 					</div>
 					<div></div>