Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7764d7
Update : img to Next.js Image component and fix one Tailwind syntax e…
Oct 6, 2025
f2ddae2
Fix : I adapt the width for all Image components
Oct 6, 2025
0f5acd8
fix : width and height props
Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion components/achievements/infiniteSlider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import Image from "next/image";
import { useState, useEffect } from "react";
import Slider from 'react-infinite-logo-slider'

Expand All @@ -18,10 +19,12 @@ const InfiniteSlider = ({ data, direction }) => {
{data.map((company, index) => (
<div className="flex justify-center items-center" key={index}>
<Slider.Slide className="">
<img
<Image
src={company.img_path}
alt={company.alt}
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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}

Copilot uses AI. Check for mistakes.

className="md:w-44 md:h-44"
width={44}
height={44}
/>
</Slider.Slide>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/contact/ContactDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const ContactDetails = () => {
initial="initial"
whileInView="animate"
viewport={{ once: true }}>
<img src={data.contact.img} width={155}
<Image src={data.contact.img} width={155}
height={155}
alt="white bulb" />
Comment on lines +47 to 49
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copilot uses AI. Check for mistakes.

</motion.div>
Expand Down
3 changes: 2 additions & 1 deletion components/gallery/slider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import Image from "next/image";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import "./styles.css";
Expand Down Expand Up @@ -38,7 +39,7 @@ const Slider = ({ sliderImageUrl, showDescription }) => {
{sliderImageUrl.map((imageUrl, index) => {
return (
<div className="slider group" key={index}>
<img src={imageUrl.url} Transition={Blur} loading="lazy"/>
<Image src={imageUrl.url} Transition={Blur} loading="lazy" width={64} height={64}/>
{showDescription && (
<div className="absolute rounded-b-[0.6rem] inset-x-0 bottom-8 bg-black bg-opacity-80 py-2 px-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<p className="text-center">{imageUrl.description}</p>
Expand Down
56 changes: 34 additions & 22 deletions components/team/memberCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,35 +16,47 @@ const memberCard = ({
<Image
src={imgPath}
width={250}
height ={250}
height={250}
className="h-full w-full md:rounded-3xl rounded-[2rem]"
/>
</div>
<div className="text-white lg:mt-40 md:mt-28 mt-10 text-center px-1">
<h1 className="md:text-2xl text-xs font-bold">{name}</h1>
<p className="md:text-lg text-xs">{title}</p>
<div className="flex justify-center lg:mt-10 md:mt-5 mt-1">
{githubLink ? <a href={githubLink} target="_blank" rel="noreferrer">
<img
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"
/>
</a> :null}
{twitterLink ? <a href={twitterLink} target="_blank" rel="noreferrer">
<img
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"
/>
</a> :null}
{linkedinLink ? <a href={linkedinLink} target="_blank" rel="noreferrer">
<img
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"
/>
</a> :null}
{githubLink ? (
<a href={githubLink} target="_blank" rel="noreferrer">
<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"
width={250}
height={250}
/>
</a>
) : null}
{twitterLink ? (
<a href={twitterLink} target="_blank" rel="noreferrer">
<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"
width={250}
height={250}
/>
</a>
) : null}
{linkedinLink ? (
<a href={linkedinLink} target="_blank" rel="noreferrer">
<Image
src="assets/icons/socials/Vector-4.svg"
alt="linkedin"
className="lg:w-8 md:w-6 w-3 lg:h-8 md:h-6 h-3 mx-2"
width={250}
height={250}
/>
</a>
) : null}
</div>
</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion components/team/membersAndAlumni.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import Title from "@/components/ui/title";
import MemberCard from "@/components/team/memberCard";
import data from "@/content/team.json";
import Image from "next/image";
import members from "@/content/members.json";
import alumni from "@/content/alumni.json";
import { motion } from "framer-motion";
Expand Down Expand Up @@ -76,8 +77,11 @@ const MembersAndAlumni = ({ contentFor }) => {
>
<div className="flex justify-center flex-col items-center">
{showAllMembers ? "See less" : "See more"}
<img
<Image
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copilot uses AI. Check for mistakes.

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

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.

alt="see more"
width={40}
height={40}
className={`w-10 h-10 my-5 ${
showAllMembers ? "transform rotate-180" : ""
}`}
Expand Down
4 changes: 3 additions & 1 deletion components/team/teamHero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import data from "@/content/team.json";
import Image from "next/image";
import {motion} from 'framer-motion'
const teamHero = () => {
const team1Varients={
Expand All @@ -20,8 +21,9 @@ const teamHero = () => {
initial="initial"
whileInView="animate"
viewport={{once:true}}>
<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"
width={640} height={400}
alt="team" />
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.

<h1 className="md:text-[31px] text-center text-3xl mt-5">{data.hero.title}</h1>
<p className="mt-3 text-[1.1rem] text-center">
Expand Down