Update : img to Next.js Image component and fix one Tailwind syntax e… #19

MaelBallereau · 2025-10-06T13:57:09Z

Fix Tailwind syntax and replace <img /> with Next.js Image component

Corrected a Tailwind typo: changed llg:w-8 to lg:w-8.
Replaced all tags with Next.js components for better performance and optimization.

…rror

vercel · 2025-10-06T13:57:15Z

Someone is attempting to deploy a commit to the amFOSS Dev Team on Vercel.

A member of the Team first needs to authorize it.

Copilot

Pull Request Overview

This PR updates the codebase to use Next.js Image components for better performance optimization and fixes a Tailwind CSS syntax error.

Replaces all <img> tags with Next.js <Image> components across multiple files
Fixes Tailwind CSS typo from llg:w-8 to lg:w-8
Adds necessary Image imports to components that didn't have them

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
components/team/teamHero.jsx	Added Image import and replaced img tag with Image component
components/team/membersAndAlumni.jsx	Replaced img tag with Image component for "See more" toggle
components/team/memberCard.jsx	Replaced social media icon img tags with Image components and fixed Tailwind typo
components/gallery/slider.jsx	Added Image import and replaced img tag in slider component
components/contact/ContactDetails.jsx	Replaced img tag with Image component for contact illustration
components/achievements/infiniteSlider.jsx	Added Image import and replaced img tag in infinite slider

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-06T13:58:20Z

components/team/membersAndAlumni.jsx

        <div className="flex justify-center flex-col items-center">
          {showAllMembers ? "See less" : "See more"}
-          <img
+          <Image


Missing required 'width' and 'height' props for Next.js Image component. These are required for proper optimization unless using 'fill' prop.

Copilot · 2025-10-06T13:58:21Z

components/team/memberCard.jsx

+              <Image
                src="assets/icons/socials/Vector-3.svg"
                alt="github"
                className="lg:w-8 md:w-6 w-3 lg:h-8 md:h-6 h-3 mx-2"


Missing required 'width' and 'height' props for Next.js Image component. These are required for proper optimization unless using 'fill' prop.

Copilot · 2025-10-06T13:58:21Z

components/team/memberCard.jsx

+              <Image
                src="assets/icons/socials/Vector-2.svg"
                alt="twitter"
                className="lg:w-8 md:w-6 w-3 lg:h-8 md:h-6 h-3 mx-2"


Missing required 'width' and 'height' props for Next.js Image component. These are required for proper optimization unless using 'fill' prop.

Copilot · 2025-10-06T13:58:21Z

components/team/memberCard.jsx

+              <Image
                src="assets/icons/socials/Vector-4.svg"
                alt="linkedin"
-                className="llg:w-8 md:w-6 w-3 lg:h-8 md:h-6 h-3 mx-2"
+                className="lg:w-8 md:w-6 w-3 lg:h-8 md:h-6 h-3 mx-2"


Missing required 'width' and 'height' props for Next.js Image component. These are required for proper optimization unless using 'fill' prop.

Copilot · 2025-10-06T13:58:21Z

components/gallery/slider.jsx

                    return (
                        <div className="slider group" key={index}>
-                            <img src={imageUrl.url} Transition={Blur} loading="lazy"/>
+                            <Image src={imageUrl.url} Transition={Blur} loading="lazy"/>


Missing required 'width' and 'height' props for Next.js Image component. These are required for proper optimization unless using 'fill' prop.

Suggested change

<Image src={imageUrl.url} Transition={Blur} loading="lazy"/>

<Image src={imageUrl.url} width={imageUrl.width} height={imageUrl.height} Transition={Blur} loading="lazy"/>

Copilot · 2025-10-06T13:58:22Z

components/achievements/infiniteSlider.jsx

-                <img
+                <Image
                  src={company.img_path}
                  alt={company.alt}


Missing required 'width' and 'height' props for Next.js Image component. These are required for proper optimization unless using 'fill' prop.

Suggested change

alt={company.alt}

alt={company.alt}

width={176}

height={176}

KKSurendran06 · 2025-10-06T17:10:24Z

@MaelBallereau I noticed that some <Image> components are missing width and height props. These are required to avoid layout shifts and build errors in Next.js.

Please update your PR accordingly.

Copilot

Pull Request Overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-06T17:11:36Z

components/team/teamHero.jsx

-          <img src={data.hero.img}
+          <Image src={data.hero.img}
          className="sm:w-[35rem] max-sm:w-[23rem] max-md:mx-5 sm:h-95"
            alt="team" />


Next.js Image component requires width and height props for proper optimization. Add explicit width and height attributes or use the fill prop with a positioned parent container.

Suggested change

alt="team" />

alt="team" width={560} height={380} />

Copilot · 2025-10-06T17:11:36Z

components/team/membersAndAlumni.jsx

          {showAllMembers ? "See less" : "See more"}
-          <img
+          <Image
            src="/assets/icons/seeMore2.png"


Next.js Image component requires width and height props for proper optimization. Add explicit width and height attributes based on the w-10 h-10 classes (40px each).

Suggested change

src="/assets/icons/seeMore2.png"

src="/assets/icons/seeMore2.png"

width={40}

height={40}

Copilot · 2025-10-06T17:11:36Z

components/contact/ContactDetails.jsx

+                    <Image src={data.contact.img} width={155}
                        height={155}
                        alt="white bulb" />


Missing import statement for the Image component. Add 'import Image from "next/image";' at the top of the file.

MaelBallereau · 2025-10-09T22:30:54Z

I think its ok now
Thanks you

KKSurendran06 · 2025-10-10T11:57:52Z

@MaelBallereau Seems like the responsiveness got broken

The first image is from your PR branch and the second one is from amfoss.in for reference. Please ensure all the updated components are responsive.

Update : img to Next.js Image component and fix one Tailwind syntax e…

d7764d7

…rror

Copilot AI review requested due to automatic review settings October 6, 2025 13:57

Copilot AI reviewed Oct 6, 2025

View reviewed changes

Fix : I adapt the width for all Image components

f2ddae2

KKSurendran06 requested a review from Copilot October 6, 2025 17:10

Copilot AI reviewed Oct 6, 2025

View reviewed changes

fix : width and height props

0f5acd8

	<Image src={imageUrl.url} Transition={Blur} loading="lazy"/>
	<Image src={imageUrl.url} width={imageUrl.width} height={imageUrl.height} Transition={Blur} loading="lazy"/>

Update : img to Next.js Image component and fix one Tailwind syntax e… #19

Are you sure you want to change the base?

Update : img to Next.js Image component and fix one Tailwind syntax e… #19

Uh oh!

Conversation

MaelBallereau commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Oct 6, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

KKSurendran06 commented Oct 6, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

MaelBallereau commented Oct 9, 2025

Uh oh!

KKSurendran06 commented Oct 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MaelBallereau commented Oct 6, 2025 •

edited

Loading