Consistent-use-of-Image-component

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'

components/Layout.tsx

@@ -256,12 +256,21 @@ const MainNavigation = () => {
           </div>
         ) : (
           <div
-            style={{
-              backgroundImage: closeMenu,
-            }}
-            className='h-6 w-6 lg:hidden bg-center bg-[length:22px_22px] bg-no-repeat  transition-all cursor-pointer dark:text-slate-300'
+            className='relative h-8 w-8 lg:hidden cursor-pointer transition-all'
             onClick={() => useStore.setState({ overlayNavigation: null })}
-          />
+          >
+            <Image
+              src={
+                resolvedTheme === 'dark'
+                  ? '/icons/cancel-dark.svg'
+                  : '/icons/cancel.svg'
+              }
+              alt='Close menu'
+              fill
+              className='object-contain p-1'
+              sizes='24px'
+            />
+          </div>
         )}
       </div>
       <div className='flex items-center justify-end mr-8'>

cypress/components/Layout.cy.tsx

@@ -255,7 +255,7 @@ describe('Layout Component', () => {
       cy.get('header').find('.block.lg\\:hidden').click();
 
       // Click close button
-      cy.get('header').find('.h-6.w-6.lg\\:hidden').click();
+      cy.get('header').find('.relative.h-8.w-8.lg\\:hidden').click();
 
       // Check if mobile nav is hidden - it should not exist in DOM when hidden
       cy.get('.flex.flex-col.lg\\:hidden').should('not.exist');

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'
       />

pages/blog/index.page.tsx

@@ -236,12 +236,16 @@ export default function StaticMarkdownPage({
                   {recentBlog[0].frontmatter.title}
                 </h1>
                 <div className='flex ml-2 mb-2 gap-2'>
-                  <div
-                    className='bg-slate-50 h-10 w-10 lg:h-[44px] lg:w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
-                    style={{
-                      backgroundImage: `url(${recentBlog[0].frontmatter.authors[0].photo})`,
-                    }}
-                  />
+                  <div className='relative h-10 w-10 lg:h-[44px] lg:w-[44px] rounded-full -ml-3 overflow-hidden border-2 border-white bg-slate-200'>
+                    <Image
+                      src={recentBlog[0].frontmatter.authors[0].photo}
+                      alt={recentBlog[0].frontmatter.authors[0].name}
+                      fill
+                      className='object-cover'
+                      sizes='44px'
+                    />
+                  </div>
+
                   <div className='max-w-full lg:max-w-[calc(100% - 64px)] mx-auto lg:mx-0 flex-col ml-2'>
                     <p className='text-sm font-semibold text-stroke-1'>
                       {recentBlog[0].frontmatter.authors[0].name}
@@ -375,17 +379,22 @@ export default function StaticMarkdownPage({
                         {(frontmatter.authors || []).map(
                           (author: Author, index: number) => (
                             <div
-                              key={index}
-                              className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
+                              className={`relative rounded-full overflow-hidden -ml-3 border-2 border-white ${
                                 frontmatter.authors.length > 2
                                   ? 'h-8 w-8'
                                   : 'h-11 w-11'
                               }`}
-                              style={{
-                                backgroundImage: `url(${author.photo})`,
-                                zIndex: 10 - index,
-                              }}
-                            />
+                              key={index}
+                              style={{ zIndex: 10 - index }}
+                            >
+                              <Image
+                                src={author.photo!}
+                                alt={author.name}
+                                fill
+                                className='object-cover'
+                                sizes='44px'
+                              />
+                            </div>
                           ),
                         )}
                       </div>

pages/blog/posts/[slug].page.tsx

@@ -78,10 +78,15 @@ export default function StaticMarkdownPage({
                           key={index}
                           className='flex flex-row items-center mb-3 w-full'
                         >
-                          <div
-                            className='bg-slate-50 h-[44px] w-[44px] rounded-full bg-cover bg-center'
-                            style={{ backgroundImage: `url(${author.photo})` }}
-                          />
+                          <div className='relative h-[44px] w-[44px] rounded-full overflow-hidden bg-[#1e293b]'>
+                            <Image
+                              src={author.photo}
+                              alt={author.name}
+                              fill
+                              className='object-cover'
+                              sizes='44px'
+                            />
+                          </div>
                           <div>
                             <div className='text-sm font-semibold pl-2'>
                               {author.name}
@@ -111,10 +116,17 @@ export default function StaticMarkdownPage({
             </div>
           </div>
           <div className='flex-1 lg:w-3/4 w-full'>
-            <div
-              className='bg-slate-50  w-full rounded-lg bg-cover mb-10 bg-center min-h-[200px] sm:min-h-[300px] md:min-h-[400px] lg:min-h-[500px]'
-              style={{ backgroundImage: `url(${frontmatter.cover})` }}
-            />
+            <div className='relative w-full rounded-lg overflow-hidden mb-10 min-h-[200px] sm:min-h-[300px] md:min-h-[400px] lg:min-h-[500px]'>
+              <Image
+                src={frontmatter.cover}
+                alt={frontmatter.title}
+                fill
+                className='object-cover bg-white'
+                sizes='100vw'
+                priority
+              />
+            </div>
+
             <StyledMarkdown markdown={content} />
           </div>
         </div>

pages/community/index.page.tsx

@@ -335,12 +335,17 @@ export default function communityPages(props: any) {
                         return (
                           <div
                             key={index}
-                            className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
-                            style={{
-                              backgroundImage: `url(${author.photo})`,
-                              zIndex: 10 - index,
-                            }}
-                          />
+                            className='relative h-[44px] w-[44px] rounded-full overflow-hidden -ml-3 border-2 border-white bg-slate-200'
+                            style={{ zIndex: 10 - index }}
+                          >
+                            <Image
+                              src={author.photo}
+                              alt={author.name}
+                              fill
+                              className='object-cover'
+                              sizes='44px'
+                            />
+                          </div>
                         );
                       },
                     )}

pages/index.page.tsx

@@ -455,12 +455,17 @@ const Home = (props: any) => {
                       return (
                         <div
                           key={index}
-                          className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
-                          style={{
-                            backgroundImage: `url(${author.photo})`,
-                            zIndex: 10 - index,
-                          }}
-                        />
+                          className='relative h-[44px] w-[44px] rounded-full -ml-3 overflow-hidden border-2 border-white bg-slate-200'
+                          style={{ zIndex: 10 - index }}
+                        >
+                          <Image
+                            src={author.photo}
+                            alt={author.name}
+                            fill
+                            className='object-cover'
+                            sizes='44px'
+                          />
+                        </div>
                       );
                     },
                   )}
@@ -831,7 +836,10 @@ const Home = (props: any) => {
                 )}
               </a>
               <a href='https://www.octue.com/' target='_blank' rel='noreferrer'>
-                <img
+                <Image
+                  alt='octue'
+                  width={176}
+                  height={100}
                   src={logos.octue}
                   className='w-44 transition-transform duration-300 hover:scale-105'
                 />
@@ -841,19 +849,22 @@ const Home = (props: any) => {
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={logos.apideck}
                   className='w-44 transition-transform duration-300 hover:scale-105'
-                  alt='The Realtime Unified API
-for Accounting integrations'
+                  alt='The Realtime Unified API for Accounting integrations'
                 />
               </a>
               <a
                 href='https://rxdb.info/?utm_source=sponsor&utm_medium=json-schema&utm_campaign=json-schema'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={logos.rxdb}
                   className='w-44 transition-transform duration-300 hover:scale-105'
                   alt='The local Database for JavaScript Applications'
@@ -864,7 +875,9 @@ for Accounting integrations'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={logos.wda}
                   className='w-44 transition-transform duration-300 hover:scale-105'
                   alt='best website design agencies'
@@ -875,21 +888,27 @@ for Accounting integrations'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={logos.anon}
                   className='w-44 transition-transform duration-300 hover:scale-105'
                   alt='Instagram Story Viewer'
                 />
               </a>
               <a href='https://supadata.ai/' target='_blank' rel='noreferrer'>
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={logos.supadata}
                   className='w-44 transition-transform duration-300 hover:scale-105'
                   alt='supadata logo'
                 />
               </a>
               <a href='https://dottxt.ai/' target='_blank' rel='noreferrer'>
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={logos.dottxt}
                   className='w-44 transition-transform duration-300 hover:scale-105'
                   alt='dottxt logo'
@@ -900,15 +919,19 @@ for Accounting integrations'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
+                  width={176}
+                  height={100}
                   src={logos.sourcemeta}
                   className='w-44 transition-transform duration-300 hover:scale-105'
                   alt='dottxt logo'
                 />
               </a>
               <a href='https://www.n-ix.com/' target='_blank' rel='noreferrer'>
-                <img
+                <Image
                   src={logos.nix}
+                  width={176}
+                  height={100}
                   className='w-44 transition-transform duration-300 hover:scale-105'
                   alt='n-iX logo'
                 />
@@ -918,8 +941,10 @@ for Accounting integrations'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
                   src={logos.oracle}
+                  width={176}
+                  height={100}
                   className='w-44 transition-transform duration-300 hover:scale-105'
                   alt='Oracle logo'
                 />

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} />