From a9f322b998c313c7d5a422625f44e8c541112bf9 Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Wed, 13 Aug 2025 19:18:51 +0530
Subject: [PATCH] Commiting changes

---
 src/components/Sponsor.jsx  |  24 ++++++--
 src/components/Team.jsx     |  12 ++--
 src/config/teammate.js      |   2 +-
 src/pages/team/TeamPage.jsx | 107 ++++++++++++++++++++++--------------
 4 files changed, 94 insertions(+), 51 deletions(-)

diff --git a/src/components/Sponsor.jsx b/src/components/Sponsor.jsx
index 158bc31..133b1e4 100644
--- a/src/components/Sponsor.jsx
+++ b/src/components/Sponsor.jsx
@@ -82,7 +82,8 @@ const SponsorsSection = () => {
   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>
@@ -114,14 +115,22 @@ const SponsorsSection = () => {
                 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>
@@ -136,6 +145,13 @@ const SponsorsSection = () => {
           </button>
         </div>
       </div>
+
+      <style jsx>{`
+        .sponsor-item:hover .sponsor-image {
+          transform: scale(1.05);
+          filter: brightness(1.1);
+        }
+      `}</style>
     </section>
   );
 };
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index f1e8652..4536ec2 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -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"
@@ -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={{
@@ -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>
@@ -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" />
diff --git a/src/config/teammate.js b/src/config/teammate.js
index ad393fa..e5c01db 100644
--- a/src/config/teammate.js
+++ b/src/config/teammate.js
@@ -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/",
diff --git a/src/pages/team/TeamPage.jsx b/src/pages/team/TeamPage.jsx
index 378ceaf..ad2f79a 100644
--- a/src/pages/team/TeamPage.jsx
+++ b/src/pages/team/TeamPage.jsx
@@ -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
@@ -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
@@ -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
@@ -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>
   );