Skip to content

Fix image styling #44

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

Merged
swaindhruti merged 2 commits into from
Aug 14, 2025
Merged

Fix image styling #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9f322b
Commiting changes
Krish-2118 Aug 13, 2025
60fb91c
Merge branch 'OpencodeNIT-R:main' into latest-branch
Krish-2118 Aug 13, 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
24 changes: 20 additions & 4 deletions src/components/Sponsor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
}, 5000);

return () => clearInterval(autoPlay);
}, [isPaused, itemsToShow]);

Check warning on line 65 in src/components/Sponsor.jsx

View workflow job for this annotation

GitHub Actions / ESLint Check 

React Hook useEffect has a missing dependency: 'goToNext'. Either include it or remove the dependency array

const handleMouseEnter = () => setIsPaused(true);
const handleMouseLeave = () => setIsPaused(false);
Expand All @@ -82,7 +82,8 @@
return (
<section className="bg-white py-10">
<div className="max-w-6xl mx-auto px-4 sm:px-6">
<div className="mb-8">
{/* CENTERED TITLE SECTION */}
<div className="mb-8" style={{ textAlign: "center" }}>
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-2">
Our Sponsors and Partners
</h2>
Expand Down Expand Up @@ -114,14 +115,22 @@
href={sponsor.link}
target="_blank"
rel="noopener noreferrer"
className="flex-shrink-0 px-2"
className="flex-shrink-0 px-2 sponsor-item"
style={{ width: `${100 / itemsToShow}%` }}
>
<div className="h-64 bg-white flex items-center justify-center rounded-xl hover:shadow-xl transition duration-300 border-2 cursor-pointer">
<div
className="h-64 bg-white flex items-center justify-center rounded-xl hover:shadow-xl transition duration-300 border-2 cursor-pointer"
style={{
transition: "all 0.3s ease",
}}
>
<img
src={sponsor.image}
alt={sponsor.name}
className="object-contain h-32"
className="object-contain h-32 sponsor-image"
style={{
transition: "transform 0.3s ease, filter 0.3s ease",
}}
/>
</div>
</a>
Expand All @@ -136,6 +145,13 @@
</button>
</div>
</div>

<style jsx>{`
.sponsor-item:hover .sponsor-image {
transform: scale(1.05);
filter: brightness(1.1);
}
`}</style>
</section>
);
};
Expand Down
12 changes: 7 additions & 5 deletions src/components/Team.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,9 @@ const TeamSlider = () => {
<div className="max-w-7xl mx-auto">
<div className="mb-10">
<h2 className="text-3xl font-bold mb-2 ml-12">Our team</h2>
<p className="text-xl text-gray-300 ml-12"></p>
<p className="text-xl text-gray-300 ml-12">
Meet Our Amazing Team Members
</p>
<button
onClick={viewFullTeam}
className="mt-4 border border-white text-white py-2 px-4 ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer"
Expand All @@ -81,13 +83,13 @@ const TeamSlider = () => {
<div className="relative">
<button
onClick={showPreviousMembers}
className="absolute -left-4 top-1/3 -translate-y-1/2 z-10 p-2 border-2 rounded-full bg-white border-gray-300 shadow-lg hover:bg-gray-100 cursor-pointer transition-all duration-200"
className="absolute left-0 top-1/3 -translate-y-1/2 z-10 bg-white rounded-full p-2 shadow hover:shadow-lg hover:scale-110 cursor-pointer transition-all duration-200"
aria-label="View previous team members"
>
<ArrowLeft className="w-6 h-6" color="#00163A" />
</button>

<div className="overflow-hidden px-12">
<div className="overflow-hidden mx-12">
<div
className="flex transition-transform duration-700 ease-in-out"
style={{
Expand All @@ -105,7 +107,7 @@ const TeamSlider = () => {
<img
src={teamMember.img}
alt={`${teamMember.name} - ${teamMember.title}`}
className="w-full aspect-[5/6] object-top object-cover rounded-lg hover:scale-105 transition-transform duration-300"
className="w-full h-72 object-cover rounded-lg hover:scale-105 transition-transform duration-300"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
</div>
Expand Down Expand Up @@ -157,7 +159,7 @@ const TeamSlider = () => {

<button
onClick={showNextMembers}
className="absolute -right-4 top-1/3 -translate-y-1/2 z-10 p-2 border-2 rounded-full bg-white border-gray-300 shadow-lg hover:bg-gray-100 cursor-pointer transition-all duration-200"
className="absolute right-0 top-1/3 -translate-y-1/2 z-10 bg-white rounded-full p-2 shadow hover:shadow-lg hover:scale-110 cursor-pointer transition-all duration-200"
aria-label="View next team members"
>
<ArrowRight className="w-6 h-6" color="#00163A" />
Expand Down
2 changes: 1 addition & 1 deletion src/config/teammate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const teamMembers = [
{
name: "Samidha Behera",
title: "Sponsorship Head",
img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119375/samidha_kxwkkb.jpg",
img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1755092071/samidha_kxwkkb_952928_da79e7.jpg",
description: "",
team: "Executive Body",
linkedin: "https://www.linkedin.com/in/samidha-behera-09297828a/",
Expand Down
107 changes: 66 additions & 41 deletions src/pages/team/TeamPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ const TeamPage = () => {
activeTeam === "All"
? Array.from(new Map(teamMembers.map((m) => [m.name, m])).values())
: teamMembers.filter((member) => member.team === activeTeam);

return (
<section className="bg-white text-black">
<section className="bg-white text-black min-h-screen">
<div className="text-center px-4 max-w-4xl mx-auto scroll-mt-24 pt-20 lg:pt-8">
<h2 className="text-3xl sm:text-4xl font-bold text-[#021640] mb-4">
Meet Our Team
Expand All @@ -41,9 +42,10 @@ const TeamPage = () => {
</button>
))}
</div>

<div className="max-w-4xl mx-auto text-lg font-bold mb-6">
{activeTeam === "Team Bluestreak" && (
<p className="text-center text-gray-600 ">
<p className="text-center text-gray-600">
Bluestreak, a team within ASME at NIT Rourkela, is a dedicated team
focused on research, analysis, and innovation. They specialize in
designing human-powered vehicles from scratch, incorporating
Expand All @@ -54,7 +56,7 @@ const TeamPage = () => {
</p>
)}
{activeTeam === "Team Bluebird" && (
<p className="text-center text-gray-600 ">
<p className="text-center text-gray-600">
Bluebird, a team from ASME NIT Rourkela, specializes in CAD modeling
and coding for virtual competitions. Their expertise extends to
designing vehicles for diverse challenges, including autonomous
Expand All @@ -66,56 +68,79 @@ const TeamPage = () => {
</p>
)}
{activeTeam === "Team Blueprint" && (
<p className="text-center text-gray-600 ">
<p className="text-center text-gray-600">
Team Blueprint, a team of ASME NIT Rourkela, engages in research,
innovation, and design. They utilize CAD software to create diverse
models, subsequently manufacturing them through 3D printing
technology . The team actively participates in the IAM3D competition
technology. The team actively participates in the IAM3D competition
as part of ASME Efest, showcasing their skills and expertise in
engineering and design within the ASME community
</p>
)}
</div>
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
{filteredMembers.map((member, index) => (
<div key={index} className="flex flex-col items-center text-center">
<div className="w-full max-w-xs border rounded-md overflow-hidden shadow">
<img
src={
member.img || "https://via.placeholder.com/300x250?text=Photo"
}
alt={member.name}
className="w-full h-60 object-cover"
/>
</div>

<div className="mt-4">
<h3 className="font-bold text-xl">
{member.name || "Full name"}
</h3>
<p className="text-lg text-gray-600">{member.title || ""}</p>
<p className="text-lg text-gray-600">{member.team || ""}</p>
<div className="flex justify-center space-x-3 mt-2">
<a
href={member.linkedin || "#"}
target="_blank"
rel="noopener noreferrer"
className="text-black hover:text-blue-700"
>
<FaLinkedin size={18} />
</a>
<a
href={member.twitter || "#"}
target="_blank"
rel="noopener noreferrer"
className="text-black hover:text-blue-500"
>
<FaXTwitter size={18} />
</a>
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
{filteredMembers.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
{filteredMembers.map((member, index) => (
<div
key={index}
className="flex flex-col items-center text-center"
>
<div className="w-full max-w-xs border rounded-md overflow-hidden shadow transition-shadow duration-300 hover:shadow-2xl ">
<img
src={
member.img ||
"https://via.placeholder.com/300x250?text=Photo"
}
alt={member.name}
className="w-full h-68 object-cover transition-transform duration-300 hover:scale-105"
/>
</div>

<div className="mt-4">
<h3 className="font-bold text-xl">
{member.name || "Full name"}
</h3>
<p className="text-lg text-gray-600">{member.title || ""}</p>
<p className="text-lg text-gray-600">{member.team || ""}</p>
<div className="flex justify-center space-x-3 mt-2">
<a
href={member.linkedin || "#"}
target="_blank"
rel="noopener noreferrer"
className="text-black hover:text-blue-700"
>
<FaLinkedin size={18} />
</a>
<a
href={member.twitter || "#"}
target="_blank"
rel="noopener noreferrer"
className="text-black hover:text-blue-500"
>
<FaXTwitter size={18} />
</a>
</div>
</div>
</div>
))}
</div>
) : (
<div className="text-center py-20">
<div className="max-w-md mx-auto">
<div className="text-6xl text-gray-300 mb-4">👥</div>
<h3 className="text-2xl font-semibold text-gray-700 mb-2">
No team members found
</h3>
<p className="text-gray-500">
There are currently no members in the {activeTeam} team.
{activeTeam !== "All" &&
" Try selecting a different team or check back later."}
</p>
</div>
</div>
))}
)}
</div>
</section>
);
Expand Down