fix: next/image instead of img tag

app/page.tsx

@@ -3,6 +3,7 @@ import { CardSpotlight } from "@/components/ui/card-spotlight";
 import { AnimatedTooltip } from "@/components/ui/animated-tooltip";
 import React, { useState, useEffect, useRef } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import {
   FaListUl,
   FaRegCalendarAlt,
@@ -477,11 +478,13 @@ export default function Home() {
             custom={2}
             className="flex justify-center"
           >
-            <img
-              src="dsa-hero.png"
+            <Image
+              src="/dsa-hero.png"
               alt="DSA Mate Hero"
-              className="w-[40vw]"
-              draggable="false"
+              width={1200}          // set actual image width
+              height={800}          // set actual image height
+              className="w-[40vw] h-auto"
+              draggable={false}
             />
 
             <div className="absolute inset-0 -z-10 bg-gradient-to-r from-blue-500/20 via-blue-500/20 to-blue-500/20 rounded-full blur-3xl scale-110"></div>

app/profile_pic/settings/avatar/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import Navbar from "../../../../components/Navbar";
 import { useState } from "react";
+import Image from "next/image";
 
 export default function AvatarSettings() {
   const [avatar, setAvatar] = useState<string | null>(null);
@@ -30,10 +31,12 @@ export default function AvatarSettings() {
       <Navbar />
       <div className="max-w-md mx-auto p-30">
         <h1 className="text-2xl font-semibold mb-4">Profile Picture</h1>
-        <img
+        <Image
           src={avatar || "/images/default-avatar.png"}
           alt="Avatar"
-          className="w-40 h-40 rounded-full object-cover"
+          width={160}              
+          height={160}            
+          className="rounded-full object-cover"
         />
         <form onSubmit={handleUpload} className="space-y-4 ">
           <input

app/timequiz/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import axios from "axios";
 import Navbar from "@/components/Navbar";
 import { motion } from "framer-motion";
+import Image from "next/image";
 
 const TIME_PER_QUES = 5;
 
@@ -274,7 +275,15 @@ const TimeQuiz = () => {
                 Test your knowledge with AI-generated questions.
               </motion.p>
               <motion.div variants={fadeInUp} custom={2} className="flex justify-center relative mb-8">
-                <img src="quiz.png" alt="Quiz Hero" className="w-[80vw] max-w-sm" draggable="false" />
+                 <Image
+                  src="/quiz.png"
+                  alt="Quiz Hero"
+                  width={384}              
+                  height={224}       
+                  className="w-[80vw] max-w-sm h-auto"
+                  draggable={false}
+                />
+
               </motion.div>
               <motion.button variants={fadeInUp} custom={3} className="bg-gradient-to-r from-green-500 via-blue-600 to-green-500 text-white font-semibold px-6 py-3 rounded-md shadow-lg w-full sm:w-auto" onClick={startQuiz}>
                 Start Quiz

components/AuthButtons.tsx

@@ -9,6 +9,7 @@ import { LogOut } from "lucide-react";
 import { toast } from "sonner";
 import { FiSearch, FiX } from "react-icons/fi";
 import { FaFire } from "react-icons/fa";
+import Image from "next/image";
 
 import { usePathname } from "next/navigation";
 interface User {
@@ -240,15 +241,15 @@ export default function AuthButtons() {
             {/* Avatar Circle */}
             <div className="relative w-7 h-7 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center overflow-hidden">
               {user?.avatar ? (
-                <img
+                <Image
                   src={user.avatar}
                   alt="U"
                   width={25}
                   height={25}
                   className="object-cover w-full h-full"
                 />
               ) : (
-                <img
+                <Image
                   src="/images/default-avatar.png"
                   alt="Default Avatar"
                   width={25}

components/MarqueeDemo.tsx

@@ -3,6 +3,8 @@ import { Marquee } from "@/components/magicui/marquee";
 import { CardSpotlight } from "./ui/card-spotlight";
 import { motion } from "framer-motion";
 import { FaStar, FaRegStar, FaUserCircle } from "react-icons/fa";
+import Image from "next/image";
+
 type Testimonial = {
   name: string;
   username: string;
@@ -117,7 +119,7 @@ const ReviewCard = ({
         )}
       >
         <div className="flex flex-row items-start gap-2">
-          <img className="rounded-full" width="32" height="32" alt="" src={img} />
+          <Image className="rounded-full" width={32} height={32} alt="" src={img} />
           <div className="flex flex-col ">
             <figcaption className="text-sm font-medium dark:text-white">
               {name}

components/ui/animated-tooltip.tsx

@@ -8,6 +8,7 @@ import {
   useMotionValue,
   useSpring,
 } from "motion/react";
+import Image from "next/image";
 
 export const AnimatedTooltip = ({
   items,
@@ -84,7 +85,7 @@ export const AnimatedTooltip = ({
               </motion.div>
             )}
           </AnimatePresence>
-          <img
+          <Image
             onMouseMove={handleMouseMove}
             height={100}
             width={100}

next.config.ts

@@ -16,6 +16,7 @@ const nextConfig: NextConfig = {
         pathname: '/**',
       },
     ],
+    domains: ["images.unsplash.com",   "avatar.vercel.sh" ],
   },
 };