From d24c3bd2395590476221ff837ce1039f44b6a9df Mon Sep 17 00:00:00 2001
From: Vishwansh Kumar <kumarvishwansh@gmail.com>
Date: Sat, 8 Nov 2025 23:40:51 +0530
Subject: [PATCH] Consistent-use-of-Image-component

---
 components/AmbassadorsList.tsx         |  5 +++-
 pages/404.page.tsx                     |  6 +++-
 pages/index.page.tsx                   | 40 ++++++++++++++++++++------
 pages/overview/pro-help/index.page.tsx | 11 ++++---
 4 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/components/AmbassadorsList.tsx b/components/AmbassadorsList.tsx
index f27d78328..886f44388 100644
--- a/components/AmbassadorsList.tsx
+++ b/components/AmbassadorsList.tsx
@@ -6,6 +6,7 @@ import {
   CardTitle,
   CardDescription,
 } from '@/components/ui/card';
+import Image from 'next/image';
 
 interface AmbassadorsLink {
   title: string;
@@ -30,7 +31,9 @@ const AmbassadorList = ({ ambassadorList }: AmbassadorsListProps) => {
         >
           <Card className='dark:border-gray-700 w-full h-full p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition hover:scale-105'>
             <CardContent className='p-0'>
-              <img
+              <Image
+                width={120}
+                height={60}
                 src={link.icon}
                 alt={link.title}
                 className='w-[150px] h-auto object-contain mb-5 mx-auto'
diff --git a/pages/404.page.tsx b/pages/404.page.tsx
index ce3753c68..cf33deadc 100644
--- a/pages/404.page.tsx
+++ b/pages/404.page.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useTheme } from 'next-themes';
+import Image from 'next/image';
 
 const Logo = () => {
   const { resolvedTheme } = useTheme();
@@ -16,7 +17,10 @@ const Logo = () => {
 
   return (
     <Link href='/' className=''>
-      <img
+      <Image
+        width={240}
+        height={60}
+        alt='Logo'
         src={imageSrc}
         className='h-8 lg:h-12 top-12 absolute left-1/2 -translate-x-1/2'
       />
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index bd2479255..06f701a02 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -839,14 +839,22 @@ const Home = (props: any) => {
                 )}
               </a>
               <a href='https://www.octue.com/' target='_blank' rel='noreferrer'>
-                <img src={octue_logo} className=' w-44' />
+                <Image
+                  alt='octue'
+                  width={176}
+                  height={100}
+                  src={octue_logo}
+                  className=' w-44'
+                />
               </a>
               <a
                 href='https://www.apideck.com/'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={apideck_logo}
                   className=' w-44'
                   alt='The Realtime Unified API
@@ -858,7 +866,9 @@ for Accounting integrations'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={rxdb_logo}
                   className=' w-44'
                   alt='The local Database for JavaScript Applications'
@@ -869,7 +879,9 @@ for Accounting integrations'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={wda_logo}
                   className=' w-44'
                   alt='best website design agencies'
@@ -880,28 +892,40 @@ for Accounting integrations'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={anon_logo}
                   className=' w-44'
                   alt='Instagram Story Viewer'
                 />
               </a>
               <a href='https://supadata.ai/' target='_blank' rel='noreferrer'>
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={supadata_logo}
                   className=' w-44'
                   alt='supadata logo'
                 />
               </a>
               <a href='https://dottxt.ai/' target='_blank' rel='noreferrer'>
-                <img src={dottxt_logo} className=' w-44' alt='dottxt logo' />
+                <Image
+                  width={176}
+                  height={100}
+                  src={dottxt_logo}
+                  className=' w-44'
+                  alt='dottxt logo'
+                />
               </a>
               <a
                 href='https://www.sourcemeta.com/'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={sourcemeta_logo}
                   className=' w-44'
                   alt='dottxt logo'
diff --git a/pages/overview/pro-help/index.page.tsx b/pages/overview/pro-help/index.page.tsx
index 5978c6a56..1ab4afa7a 100644
--- a/pages/overview/pro-help/index.page.tsx
+++ b/pages/overview/pro-help/index.page.tsx
@@ -7,6 +7,7 @@ import { SectionContext } from '~/context';
 import { DocsHelp } from '~/components/DocsHelp';
 import NextPrevButton from '~/components/NavigationButtons';
 import StyledMarkdown from '~/components/StyledMarkdown';
+import Image from 'next/image';
 
 interface ContractorLink {
   title: string;
@@ -105,7 +106,9 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
                   <div className='flex flex-row items-center space-x-4'>
                     {/* Image */}
                     <div className='relative group flex-shrink-0'>
-                      <img
+                      <Image
+                        width={120}
+                        height={60}
                         src={`https://github.com/${contractor.github}.png`}
                         className='w-20 h-20 rounded-md border-4 border-blue-100 shadow-lg hover:border-blue-300 transition-all duration-300 dark:border-gray-600'
                         alt={`${contractor.name}'s avatar`}
@@ -186,7 +189,6 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
                       </div>
                     </div>
                   </div>
-
                   {/* Reach Out Button */}
                   <div className='mt-4 flex justify-center'>
                     {contractor.email && (
@@ -214,7 +216,9 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
                   {/* Image and Name */}
                   <div className='flex items-center space-x-8 pr-8'>
                     <div className='relative group'>
-                      <img
+                      <Image
+                        width={120}
+                        height={60}
                         src={`https://github.com/${contractor.github}.png`}
                         className='w-32 h-32 rounded-md border-4 border-blue-100 shadow-lg hover:border-blue-300 transition-all duration-300 dark:border-gray-600'
                         alt={`${contractor.name}'s avatar`}
@@ -326,7 +330,6 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
                     )}
                   </div>
                 </div>
-
                 {/* End of Header */}
                 <div className='mt-6 border-t pt-6 border-gray-300 dark:border-gray-700'>
                   <StyledMarkdown markdown={contractor.bio} />