From d933855ef5af646a16531fccd53d5697908494a0 Mon Sep 17 00:00:00 2001
From: Krish-2118 <agarwalkrish526@gmail.com>
Date: Sun, 3 Aug 2025 15:21:58 +0530
Subject: [PATCH 1/7] <add> : data TeamPage.jsx

---
 src/pages/team/TeamPage.jsx | 58 +++++++++++++++++++++++++++++--------
 1 file changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/pages/team/TeamPage.jsx b/src/pages/team/TeamPage.jsx
index 83d9795..54b5793 100644
--- a/src/pages/team/TeamPage.jsx
+++ b/src/pages/team/TeamPage.jsx
@@ -4,14 +4,17 @@ import teamMembers from "../../config/teammate";
 
 const TeamPage = () => {
   const [activeTeam, setActiveTeam] = useState("All");
-
-  const teams = ["All", "Team 1", "Team 2", "Team 3", "Team 4"];
+ 
+  const teams = ["All", "Executive Body","Team Bluebird", "Team Bluestreak", "Team Blueprint"];
 
   const filteredMembers =
-    activeTeam === "All"
-      ? teamMembers
-      : teamMembers.filter((member) => member.team === activeTeam);
-
+  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">
       <div className="text-center px-4 max-w-4xl mx-auto scroll-mt-24 pt-20 lg:pt-8">
@@ -19,7 +22,7 @@ const TeamPage = () => {
           Meet Our Team
         </h2>
         <p className="text-gray-700 pb-6 text-lg">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit...
+          
         </p>
       </div>
 
@@ -28,7 +31,7 @@ const TeamPage = () => {
           <button
             key={team}
             onClick={() => setActiveTeam(team)}
-            className={`px-4 py-2 rounded-full border text-lg font-medium transition ${
+            className={`px-4 py-2 rounded-full border text-lg font-medium transition cursor-pointer hover:bg-blue-400 ${
               activeTeam === team
                 ? "bg-[#021640] text-white"
                 : "bg-white text-[#021640] border-gray-300"
@@ -38,8 +41,36 @@ 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 ">
+         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 indigenous elements. Bluestreak actively participates in the eHPV competition at ASME Efest,
+            showcasing their commitment to pushing the boundaries of human-powered vehicle design and contributing to the advancement
+             of sustainable transportation solutions.
+        </p>
+         )}
+         {activeTeam === "Team Bluebird" && (
+        <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 vehicle competitions,
+          lunar lander simulations, and ocean cleanup missions. Through innovation and technical prowess, Team 
+          Bluebird consistently participates in and excels at a variety of virtual events, showcasing their commitment
+           to engineering excellence and problem-solving in the digital realm.
+        </p>
+         )}
+         {activeTeam === "Team Blueprint" && (
+        <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 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">
@@ -53,9 +84,12 @@ const TeamPage = () => {
             </div>
 
             <div className="mt-4">
-              <h3 className="font-bold">{member.name || "Full name"}</h3>
-              <p className="text-sm text-gray-600">
-                {member.title || "Job title"}
+              <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

From caa5482ba381616ab5e5567d29b495d03d40f7b9 Mon Sep 17 00:00:00 2001
From: Krish-2118 <agarwalkrish526@gmail.com>
Date: Sun, 3 Aug 2025 15:23:24 +0530
Subject: [PATCH 2/7] <refactor> responsiveness of Team.jsx

---
 src/components/Team.jsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 234b345..3b72c09 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -8,7 +8,6 @@ const TeamSlider = () => {
   const [visibleCount, setVisibleCount] = useState(1);
 
   const getVisibleCount = () => {
-    if (window.innerWidth < 640) return 1;
     if (window.innerWidth < 768) return 1;
     if (window.innerWidth < 1024) return 2;
     if (window.innerWidth < 1280) return 3;
@@ -45,7 +44,7 @@ const TeamSlider = () => {
         <div className="mb-10">
           <h2 className="text-3xl font-bold mb-2 ml-3">Our team</h2>
           <p className="text-xl text-gray-300 ml-3">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            
           </p>
           <button className="mt-4 border border-white text-white py-2 px-4 ml-3 rounded hover:bg-white hover:text-[#00163A] transition cursor-pointer">
             View all team members
@@ -76,20 +75,22 @@ const TeamSlider = () => {
                 transform: `translateX(-${currentIndex * (100 / visibleCount)}%)`,
               }}
             >
-              {teamMembers.map((member, index) => (
-                <div
-                  key={index}
-                  className="flex-shrink-0 px-2 box-border w-full sm:w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4"
-                >
+              {Array.from(new Map(teamMembers.map((m) => [m.name, m])).values()).map((member, index) => (
+             <div
+                key={index}
+                className="flex-shrink-0 px-2 box-border"
+                style={{ width: `${100 / visibleCount}%` }}>
+
                   <div className="bg-[#00163A] rounded-lg">
                     <img
                       src={member.img}
                       alt={member.name}
-                      className="w-full h-68 object-cover rounded-lg"
+                       className="w-full aspect-[5/6] object-top object-cover rounded-lg"
                     />
                     <div className="mt-3 px-2">
-                      <p className="font-semibold text-white">{member.name}</p>
-                      <p className="text-sm text-gray-300">{member.title}</p>
+                      <p className="font-semibold text-white mb-1 text-lg">{member.name}</p>
+                      <p className="text-base text-gray-300 mb-1">{member.title}</p>
+                       <p className="text-base text-gray-300">{member.team}</p>
                       <p className="text-sm text-gray-400 mt-2">
                         {member.description}
                       </p>

From b3f189b1f73bf83404c53cce8e2926a51af49b02 Mon Sep 17 00:00:00 2001
From: Krish-2118 <agarwalkrish526@gmail.com>
Date: Sun, 3 Aug 2025 15:26:39 +0530
Subject: [PATCH 3/7] Add: data to teammate.js

---
 src/config/teammate.js | 208 +++++++++++++++++++++++++++--------------
 1 file changed, 140 insertions(+), 68 deletions(-)

diff --git a/src/config/teammate.js b/src/config/teammate.js
index 372db12..adbcf60 100644
--- a/src/config/teammate.js
+++ b/src/config/teammate.js
@@ -1,95 +1,167 @@
-// config/team.js
-import Frame from "../assets/Frame 136.png";
-
 const teamMembers = [
   {
-    name: "Krish Agarwal1",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Soumya Mohanty",
+    title: "President",
+    team: "Executive Body",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119368/Photo_from_Soumya_Mohanty_yv6fsd.jpg",
+    description: "",
+    linkedin: "https://www.linkedin.com/in/soumya-mohanty-me0409",
+    twitter: "https://x.com/home"
   },
   {
-    name: "Krish Agarwal2",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Pratyush Prateek Dash",
+    title: "Vice President",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754122254/pratyush__d0cpcx.jpg",
+    description: "",
+    team: "Executive Body",
+    linkedin: "https://www.linkedin.com/in/pratyush-prateek-dash-b8298128a/",
+    twitter: "https://x.com/home"
   },
   {
-    name: "Krish Agarwal3",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Sahil Singh",
+    title: "General Secretary",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119373/sahil_ixmnve.jpg",
+    description: "",
+    team: "Executive Body",
+    linkedin: "https://linkedin.com/in/",
+    twitter: "https://x.com/home"
+  },
+    {
+    name: "Gurudutta Sutar",
+    title: "Treasurer",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119361/Gurudutta_taaaxv.jpg",
+    description: "",
+    team: "Executive Body",
+    linkedin: "https://linkedin.com/in/",
+    twitter: "https://x.com/home"
+  },
+   {
+    name: "Samidha Behera",
+    title: "Sponsorship Head",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119375/samidha_kxwkkb.jpg",
+    description: "",
+    team: "Executive Body",
+    linkedin: "https://www.linkedin.com/in/samidha-behera-09297828a/",
+    twitter: "https://x.com/home"
+  },
+   {
+    name: "Nikhil Kumar Dalai",
+    title: "PR Head",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754122159/nikhil_co92yf.jpg",
+    description: "",
+    team: "Executive Body",
+    linkedin: "https://www.linkedin.com/in/nikhil-dalai/",
+    twitter: "https://x.com/home"
   },
   {
-    name: "Krish Agarwal4",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Aaditya Sahu",
+    title: "Captain",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754117969/aaditya_kwvlki.jpg",
+    team: "Team Bluestreak",
+    description: "",
+    linkedin: "https://www.linkedin.com/in/aaditya-sahoo-9605a4279/",
+    twitter: "https://x.com/home"
   },
   {
-    name: "Krish Agarwal5",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long6",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Komal Hitesh",
+    title: "Vice Captain",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754122332/komal_aucker.jpg",
+    description: "",
+    team: "Team Bluestreak",
+    linkedin: "https://www.linkedin.com/in/komal-hitesh-gude-a1402830a/",
+    twitter: "https://x.com/home"
   },
   {
-    name: "Krish Agarwal7",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
+    name: "Somanchi Shanmukh",
+    title: "Chassis Lead",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119380/shanmukh_abvqy1.jpg",
+    description: "",
+    team: "Team Bluestreak",
+    linkedin: "https://www.linkedin.com/in/shanmukhsomanchi/",
 
-    linkedin: "https://linkedin.com/in/krishagarwal",
   },
   {
-    name: "Krish Agarwal8",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Aryan Dongare",
+    title: "Drivetrain Lead",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119212/aryan_exaoug.jpg",
+    description: "",
+    team: "Team Bluestreak",
+    linkedin: "https://www.linkedin.com/in/aryan-dongare-82aa40325/",
+    twitter: "https://x.com/home"
   },
   {
-    name: "Krish Agarwal8",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Mayukh Thakuria",
+    title: "Aero Lead",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119366/mayukh_m0mqw1.jpg",
+    description: "",
+    team: "Team Bluestreak",
+    linkedin: "https://www.linkedin.com/in/mayukh-thakuria-509ab8306/",
+    twitter: "https://x.com/home"
   },
   {
-    name: "Krish Agarwal8",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Smruti Satabdi Prusty",
+    title: "Vehicle Dynamics Lead",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119380/smruti_xxnpss.jpg",
+    description: "",
+    team: "Team Bluestreak",
+    linkedin: "https://www.linkedin.com/in/smruti-satabdi-prusty-a35a3a2a2/",
+    twitter: "https://x.com/home"
   },
   {
-    name: "Krish Agarwal8",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Chittaranjan Behera",
+    title: "Captain",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119322/Chittaranjan_pccfs6.jpg",
+    description: "",
+    team: "Team Blueprint",
+    linkedin: "https://www.linkedin.com/in/chittaranjan-behera-012b64292/",
+    twitter: "https://x.com/home"
   },
   {
-    name: "Krish Agarwal8",
-    title: "Frontend Developer",
-    img: Frame,
-    description: "Eat good live long",
-
-    linkedin: "https://linkedin.com/in/krishagarwal",
+    name: "Dharitri",
+    title: "Aero Lead",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119358/dharitri__sf7nbd.jpg",
+    description: "",
+    team: "Team Blueprint",
+    linkedin: "https://www.linkedin.com/in/dharitri-pradhan-a92b98269/",
+    twitter: "https://x.com/home"
+  },
+  {
+    name: "Nikhil Raj Kiran Sahoo",
+    title: "Vice Captain & Electonics Lead",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754122413/raju_lp7qbe.jpg",
+    description: "",
+    team: "Team Blueprint",
+    linkedin: "https://www.linkedin.com/in/nikhil-rajkiran-sahoo-515397277/",
+    twitter: "https://x.com/home"
+  },
+  {
+    name: "Soaham Tripathy",
+    title: "CAD Lead",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119383/soaham__g318im.jpg",
+    description: "",
+    team: "Team Blueprint",
+    linkedin: "https://www.linkedin.com/in/soaham-tripathy-223582336/",
+    twitter: "https://x.com/home"
+  },
+  {
+    name: "Soaham Tripathy",
+    title: "Captain",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119383/soaham__g318im.jpg",
+    description: "",
+    team: "Team Bluebird",
+    linkedin: "https://www.linkedin.com/in/soaham-tripathy-223582336/",
+    twitter: "https://x.com/home"
+  },
+  {
+    name: "Dev Soni",
+    title: "Code Lead",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119356/dev_soni_zsexxk.jpg",
+    description: "",
+    team: "Team Bluebird",
+    linkedin: "https://www.linkedin.com/in/dev-soni-80020228a/",
+    twitter: "https://x.com/home"    
   },
+  
 ];
 
 export default teamMembers;

From 974729b2211cee5a5658c092019aa7902981adf4 Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Sun, 3 Aug 2025 15:58:50 +0530
Subject: [PATCH 4/7] style: format code using Prettier

---
 src/components/Team.jsx     | 30 +++++++-----
 src/config/teammate.js      | 42 ++++++++---------
 src/pages/team/TeamPage.jsx | 94 +++++++++++++++++++------------------
 3 files changed, 86 insertions(+), 80 deletions(-)

diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 3b72c09..f6a3349 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -43,9 +43,7 @@ const TeamSlider = () => {
       <div className="max-w-7xl mx-auto">
         <div className="mb-10">
           <h2 className="text-3xl font-bold mb-2 ml-3">Our team</h2>
-          <p className="text-xl text-gray-300 ml-3">
-            
-          </p>
+          <p className="text-xl text-gray-300 ml-3"></p>
           <button className="mt-4 border border-white text-white py-2 px-4 ml-3 rounded hover:bg-white hover:text-[#00163A] transition cursor-pointer">
             View all team members
           </button>
@@ -75,22 +73,28 @@ const TeamSlider = () => {
                 transform: `translateX(-${currentIndex * (100 / visibleCount)}%)`,
               }}
             >
-              {Array.from(new Map(teamMembers.map((m) => [m.name, m])).values()).map((member, index) => (
-             <div
-                key={index}
-                className="flex-shrink-0 px-2 box-border"
-                style={{ width: `${100 / visibleCount}%` }}>
-
+              {Array.from(
+                new Map(teamMembers.map((m) => [m.name, m])).values(),
+              ).map((member, index) => (
+                <div
+                  key={index}
+                  className="flex-shrink-0 px-2 box-border"
+                  style={{ width: `${100 / visibleCount}%` }}
+                >
                   <div className="bg-[#00163A] rounded-lg">
                     <img
                       src={member.img}
                       alt={member.name}
-                       className="w-full aspect-[5/6] object-top object-cover rounded-lg"
+                      className="w-full aspect-[5/6] object-top object-cover rounded-lg"
                     />
                     <div className="mt-3 px-2">
-                      <p className="font-semibold text-white mb-1 text-lg">{member.name}</p>
-                      <p className="text-base text-gray-300 mb-1">{member.title}</p>
-                       <p className="text-base text-gray-300">{member.team}</p>
+                      <p className="font-semibold text-white mb-1 text-lg">
+                        {member.name}
+                      </p>
+                      <p className="text-base text-gray-300 mb-1">
+                        {member.title}
+                      </p>
+                      <p className="text-base text-gray-300">{member.team}</p>
                       <p className="text-sm text-gray-400 mt-2">
                         {member.description}
                       </p>
diff --git a/src/config/teammate.js b/src/config/teammate.js
index adbcf60..ad393fa 100644
--- a/src/config/teammate.js
+++ b/src/config/teammate.js
@@ -6,7 +6,7 @@ const teamMembers = [
     img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119368/Photo_from_Soumya_Mohanty_yv6fsd.jpg",
     description: "",
     linkedin: "https://www.linkedin.com/in/soumya-mohanty-me0409",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Pratyush Prateek Dash",
@@ -15,7 +15,7 @@ const teamMembers = [
     description: "",
     team: "Executive Body",
     linkedin: "https://www.linkedin.com/in/pratyush-prateek-dash-b8298128a/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Sahil Singh",
@@ -24,34 +24,34 @@ const teamMembers = [
     description: "",
     team: "Executive Body",
     linkedin: "https://linkedin.com/in/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
-    {
+  {
     name: "Gurudutta Sutar",
     title: "Treasurer",
     img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119361/Gurudutta_taaaxv.jpg",
     description: "",
     team: "Executive Body",
     linkedin: "https://linkedin.com/in/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
-   {
+  {
     name: "Samidha Behera",
     title: "Sponsorship Head",
     img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119375/samidha_kxwkkb.jpg",
     description: "",
     team: "Executive Body",
     linkedin: "https://www.linkedin.com/in/samidha-behera-09297828a/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
-   {
+  {
     name: "Nikhil Kumar Dalai",
     title: "PR Head",
     img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754122159/nikhil_co92yf.jpg",
     description: "",
     team: "Executive Body",
     linkedin: "https://www.linkedin.com/in/nikhil-dalai/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Aaditya Sahu",
@@ -60,7 +60,7 @@ const teamMembers = [
     team: "Team Bluestreak",
     description: "",
     linkedin: "https://www.linkedin.com/in/aaditya-sahoo-9605a4279/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Komal Hitesh",
@@ -69,7 +69,7 @@ const teamMembers = [
     description: "",
     team: "Team Bluestreak",
     linkedin: "https://www.linkedin.com/in/komal-hitesh-gude-a1402830a/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Somanchi Shanmukh",
@@ -78,7 +78,6 @@ const teamMembers = [
     description: "",
     team: "Team Bluestreak",
     linkedin: "https://www.linkedin.com/in/shanmukhsomanchi/",
-
   },
   {
     name: "Aryan Dongare",
@@ -87,7 +86,7 @@ const teamMembers = [
     description: "",
     team: "Team Bluestreak",
     linkedin: "https://www.linkedin.com/in/aryan-dongare-82aa40325/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Mayukh Thakuria",
@@ -96,7 +95,7 @@ const teamMembers = [
     description: "",
     team: "Team Bluestreak",
     linkedin: "https://www.linkedin.com/in/mayukh-thakuria-509ab8306/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Smruti Satabdi Prusty",
@@ -105,7 +104,7 @@ const teamMembers = [
     description: "",
     team: "Team Bluestreak",
     linkedin: "https://www.linkedin.com/in/smruti-satabdi-prusty-a35a3a2a2/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Chittaranjan Behera",
@@ -114,7 +113,7 @@ const teamMembers = [
     description: "",
     team: "Team Blueprint",
     linkedin: "https://www.linkedin.com/in/chittaranjan-behera-012b64292/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Dharitri",
@@ -123,7 +122,7 @@ const teamMembers = [
     description: "",
     team: "Team Blueprint",
     linkedin: "https://www.linkedin.com/in/dharitri-pradhan-a92b98269/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Nikhil Raj Kiran Sahoo",
@@ -132,7 +131,7 @@ const teamMembers = [
     description: "",
     team: "Team Blueprint",
     linkedin: "https://www.linkedin.com/in/nikhil-rajkiran-sahoo-515397277/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Soaham Tripathy",
@@ -141,7 +140,7 @@ const teamMembers = [
     description: "",
     team: "Team Blueprint",
     linkedin: "https://www.linkedin.com/in/soaham-tripathy-223582336/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Soaham Tripathy",
@@ -150,7 +149,7 @@ const teamMembers = [
     description: "",
     team: "Team Bluebird",
     linkedin: "https://www.linkedin.com/in/soaham-tripathy-223582336/",
-    twitter: "https://x.com/home"
+    twitter: "https://x.com/home",
   },
   {
     name: "Dev Soni",
@@ -159,9 +158,8 @@ const teamMembers = [
     description: "",
     team: "Team Bluebird",
     linkedin: "https://www.linkedin.com/in/dev-soni-80020228a/",
-    twitter: "https://x.com/home"    
+    twitter: "https://x.com/home",
   },
-  
 ];
 
 export default teamMembers;
diff --git a/src/pages/team/TeamPage.jsx b/src/pages/team/TeamPage.jsx
index 54b5793..378ceaf 100644
--- a/src/pages/team/TeamPage.jsx
+++ b/src/pages/team/TeamPage.jsx
@@ -4,26 +4,26 @@ import teamMembers from "../../config/teammate";
 
 const TeamPage = () => {
   const [activeTeam, setActiveTeam] = useState("All");
- 
-  const teams = ["All", "Executive Body","Team Bluebird", "Team Bluestreak", "Team Blueprint"];
+
+  const teams = [
+    "All",
+    "Executive Body",
+    "Team Bluebird",
+    "Team Bluestreak",
+    "Team Blueprint",
+  ];
 
   const filteredMembers =
-  activeTeam === "All"
-    ? Array.from(
-        new Map(
-          teamMembers.map((m) => [m.name, m])
-        ).values()
-      )
-    : teamMembers.filter((member) => member.team === activeTeam);
+    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">
       <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
         </h2>
-        <p className="text-gray-700 pb-6 text-lg">
-          
-        </p>
+        <p className="text-gray-700 pb-6 text-lg"></p>
       </div>
 
       <div className="flex justify-center flex-wrap gap-4 mb-10">
@@ -43,34 +43,40 @@ const TeamPage = () => {
       </div>
       <div className="max-w-4xl mx-auto text-lg font-bold mb-6">
         {activeTeam === "Team Bluestreak" && (
-        <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 indigenous elements. Bluestreak actively participates in the eHPV competition at ASME Efest,
-            showcasing their commitment to pushing the boundaries of human-powered vehicle design and contributing to the advancement
-             of sustainable transportation solutions.
-        </p>
-         )}
-         {activeTeam === "Team Bluebird" && (
-        <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 vehicle competitions,
-          lunar lander simulations, and ocean cleanup missions. Through innovation and technical prowess, Team 
-          Bluebird consistently participates in and excels at a variety of virtual events, showcasing their commitment
-           to engineering excellence and problem-solving in the digital realm.
-        </p>
-         )}
-         {activeTeam === "Team Blueprint" && (
-        <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 as part of ASME Efest, showcasing their skills
-          and expertise in engineering and design within the ASME community
-        </p>
-         )}
+          <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
+            indigenous elements. Bluestreak actively participates in the eHPV
+            competition at ASME Efest, showcasing their commitment to pushing
+            the boundaries of human-powered vehicle design and contributing to
+            the advancement of sustainable transportation solutions.
+          </p>
+        )}
+        {activeTeam === "Team Bluebird" && (
+          <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
+            vehicle competitions, lunar lander simulations, and ocean cleanup
+            missions. Through innovation and technical prowess, Team Bluebird
+            consistently participates in and excels at a variety of virtual
+            events, showcasing their commitment to engineering excellence and
+            problem-solving in the digital realm.
+          </p>
+        )}
+        {activeTeam === "Team Blueprint" && (
+          <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
+            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">
@@ -84,13 +90,11 @@ const TeamPage = () => {
             </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>
+              <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 || "#"}

From a69ac193a526b3529be3678844741dd32a04aa9e Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Fri, 8 Aug 2025 00:11:12 +0530
Subject: [PATCH 5/7] Add Sponsors data

---
 src/config/sponsors.js | 53 +++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/config/sponsors.js b/src/config/sponsors.js
index 2f95aee..4d555e2 100644
--- a/src/config/sponsors.js
+++ b/src/config/sponsors.js
@@ -1,46 +1,41 @@
 // sponsors.js
 const sponsors = [
   {
-    name: "Sponsor One",
-    image: "https://via.placeholder.com/200x100?text=Sponsor+1",
-    link: "https://sponsor1.com",
+    name: "NIT Rourkela Alumini ",
+    image:
+      "https://res.cloudinary.com/dm406z4pf/image/upload/v1754590523/Sponsor_5_jkviya.jpg",
+    link: "https://www.nitraa.org/",
   },
   {
-    name: "Sponsor Two",
-    image: "https://via.placeholder.com/200x100?text=Sponsor+2",
-    link: "https://sponsor2.com",
+    name: "NALCO",
+    image:
+      "https://res.cloudinary.com/dm406z4pf/image/upload/v1754590523/Sponsor_4_c44gxu.jpg",
+    link: "https://nalcoindia.com/",
   },
   {
-    name: "Sponsor Three",
-    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
-    link: "https://sponsor3.com",
+    name: "SOLID WORKS",
+    image:
+      "https://res.cloudinary.com/dm406z4pf/image/upload/v1754590497/Sponsors_2_p8nglm.jpg",
+    link: "https://www.solidworks.com/",
   },
   {
-    name: "Sponsor Three",
-    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
-    link: "https://sponsor3.com",
+    name: "PHOENIX ROBOTIC",
+    image:
+      "https://res.cloudinary.com/dm406z4pf/image/upload/v1754590497/Sponsors_n6wktj.jpg",
+    link: "https://www.phoenixrobotic.com/",
   },
   {
-    name: "Sponsor Three",
-    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
-    link: "https://sponsor3.com",
+    name: "ANSYS",
+    image:
+      "https://res.cloudinary.com/dm406z4pf/image/upload/v1754590497/Sponsors_3_a2nmqj.jpg",
+    link: "https://www.ansys.com/",
   },
   {
-    name: "Sponsor Three",
-    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
-    link: "https://sponsor3.com",
+    name: "SAIL",
+    image:
+      "https://res.cloudinary.com/dm406z4pf/image/upload/v1754590497/Sponsor_6_bqcx5l.jpg",
+    link: "https://www.sail.co.in/",
   },
-  {
-    name: "Sponsor Three",
-    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
-    link: "https://sponsor3.com",
-  },
-  {
-    name: "Sponsor Three",
-    image: "https://via.placeholder.com/200x100?text=Sponsor+3",
-    link: "https://sponsor3.com",
-  },
-  // Add more sponsors freely
 ];
 
 export default sponsors;

From fc44aaeba06becbe41f97cf39620537cc8f14507 Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Sun, 10 Aug 2025 14:43:48 +0530
Subject: [PATCH 6/7] <Add> Routing to team button

---
 src/components/Team.jsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index f6a3349..738ac87 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -2,11 +2,13 @@ import { useState, useEffect } from "react";
 import teamMembers from "../config/teammate";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import { FaLinkedin, FaXTwitter } from "react-icons/fa6";
+import { useNavigate } from "react-router";
 
 const TeamSlider = () => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [visibleCount, setVisibleCount] = useState(1);
 
+  const navigate = useNavigate();
   const getVisibleCount = () => {
     if (window.innerWidth < 768) return 1;
     if (window.innerWidth < 1024) return 2;
@@ -31,11 +33,12 @@ const TeamSlider = () => {
 
   const nextSlide = () => {
     const maxIndex = Math.max(0, teamMembers.length - visibleCount);
-    setCurrentIndex((prev) => Math.min(prev + visibleCount, maxIndex));
+    setCurrentIndex((prev) => (prev >= maxIndex ? 0 : prev + visibleCount));
   };
 
   const prevSlide = () => {
-    setCurrentIndex((prev) => Math.max(prev - visibleCount, 0));
+    const maxIndex = Math.max(0, teamMembers.length - visibleCount);
+    setCurrentIndex((prev) => (prev <= 0 ? maxIndex : prev - visibleCount));
   };
 
   return (
@@ -44,7 +47,13 @@ const TeamSlider = () => {
         <div className="mb-10">
           <h2 className="text-3xl font-bold mb-2 ml-3">Our team</h2>
           <p className="text-xl text-gray-300 ml-3"></p>
-          <button className="mt-4 border border-white text-white py-2 px-4 ml-3 rounded hover:bg-white hover:text-[#00163A] transition cursor-pointer">
+          <button
+            onClick={() => {
+              navigate("/Team");
+              window.scrollTo(0, 0);
+            }}
+            className="mt-4 border border-white text-white py-2 px-4 ml-3 rounded hover:bg-white hover:text-[#00163A] transition cursor-pointer"
+          >
             View all team members
           </button>
         </div>

From 51863e4d0b2dd2b4444d8b09bec2c2d6bfff9503 Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Sun, 10 Aug 2025 16:56:20 +0530
Subject: [PATCH 7/7] <refactor> fix caraousel buttons

---
 src/components/Sponsor.jsx | 137 +++++++++++++------------
 src/components/Team.jsx    | 198 +++++++++++++++++++++----------------
 2 files changed, 191 insertions(+), 144 deletions(-)

diff --git a/src/components/Sponsor.jsx b/src/components/Sponsor.jsx
index fb986ad..158bc31 100644
--- a/src/components/Sponsor.jsx
+++ b/src/components/Sponsor.jsx
@@ -4,68 +4,84 @@ import sponsors from "../config/sponsors";
 import "./sponsor.css";
 
 const SponsorsSection = () => {
-  const scrollRef = useRef(null);
-  const [isHovered, setIsHovered] = useState(false);
-  const pageIndex = useRef(0);
-  const [visibleCount, setVisibleCount] = useState(1);
+  const containerRef = useRef(null);
+  const [isPaused, setIsPaused] = useState(false);
+  const currentIndex = useRef(0);
+  const [itemsToShow, setItemsToShow] = useState(1);
 
   useEffect(() => {
-    const handleResize = () => {
-      const width = window.innerWidth;
-      if (width < 640) setVisibleCount(1);
-      else if (width < 1024) setVisibleCount(2);
-      else setVisibleCount(3);
+    const updateItemsToShow = () => {
+      if (window.innerWidth >= 1024) {
+        setItemsToShow(3);
+      } else if (window.innerWidth >= 640) {
+        setItemsToShow(2);
+      } else {
+        setItemsToShow(1);
+      }
     };
 
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+    updateItemsToShow();
+    window.addEventListener("resize", updateItemsToShow);
+    return () => window.removeEventListener("resize", updateItemsToShow);
   }, []);
 
-  const scrollToPage = (index) => {
-    const container = scrollRef.current;
-    if (!container) return;
+  const scrollToIndex = (index) => {
+    if (!containerRef.current) return;
 
-    const cardWidth = container.scrollWidth / sponsors.length;
-    const scrollX = cardWidth * visibleCount * index;
-    container.scrollTo({ left: scrollX, behavior: "smooth" });
+    const itemWidth = containerRef.current.scrollWidth / sponsors.length;
+    const scrollPosition = itemWidth * itemsToShow * index;
+
+    containerRef.current.scrollTo({
+      left: scrollPosition,
+      behavior: "smooth",
+    });
+  };
+
+  const getTotalPages = () => {
+    return Math.ceil(sponsors.length / itemsToShow);
   };
 
-  const totalPages = () => {
-    return Math.ceil(sponsors.length / visibleCount);
+  const goToNext = () => {
+    const totalPages = getTotalPages();
+    currentIndex.current = (currentIndex.current + 1) % totalPages;
+    scrollToIndex(currentIndex.current);
   };
 
-  const handleManualScroll = (direction) => {
-    const pages = totalPages();
-    if (direction === "left") {
-      pageIndex.current =
-        pageIndex.current === 0 ? pages - 1 : pageIndex.current - 1;
-    } else {
-      pageIndex.current = (pageIndex.current + 1) % pages;
-    }
-    scrollToPage(pageIndex.current);
+  const goToPrevious = () => {
+    const totalPages = getTotalPages();
+    currentIndex.current =
+      currentIndex.current === 0 ? totalPages - 1 : currentIndex.current - 1;
+    scrollToIndex(currentIndex.current);
   };
 
   useEffect(() => {
-    const autoScroll = () => {
-      const container = scrollRef.current;
-      if (!container) return;
+    if (isPaused) return;
 
-      const pages = totalPages();
-      pageIndex.current = (pageIndex.current + 1) % pages;
-      scrollToPage(pageIndex.current);
-    };
+    const autoPlay = setInterval(() => {
+      goToNext();
+    }, 5000);
+
+    return () => clearInterval(autoPlay);
+  }, [isPaused, itemsToShow]);
 
-    let interval;
-    if (!isHovered) {
-      interval = setInterval(autoScroll, 5000);
-    }
-    return () => clearInterval(interval);
-  }, [isHovered, visibleCount]);
+  const handleMouseEnter = () => setIsPaused(true);
+  const handleMouseLeave = () => setIsPaused(false);
+
+  const handlePrevClick = () => {
+    goToPrevious();
+    setIsPaused(true);
+    setTimeout(() => setIsPaused(false), 200);
+  };
+
+  const handleNextClick = () => {
+    goToNext();
+    setIsPaused(true);
+    setTimeout(() => setIsPaused(false), 200);
+  };
 
   return (
-    <section className="bg-white py-10 relative overflow-hidden">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:pl-0">
+    <section className="bg-white py-10">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
         <div className="mb-8">
           <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-2">
             Our Sponsors and Partners
@@ -76,22 +92,21 @@ const SponsorsSection = () => {
         </div>
 
         <div
-          className="relative"
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
+          className="relative px-12"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
         >
-          {/* Left Arrow */}
           <button
-            onClick={() => handleManualScroll("left")}
-            className="absolute left-0 sm:left-0 top-1/2 -translate-y-1/2 sm:-translate-x-3 bg-[#00163A] rounded-full p-2 sm:p-2.5 shadow z-10 cursor-pointer hover:bg-[#2563eb]"
+            onClick={handlePrevClick}
+            className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-[#00163A] hover:bg-[#2563eb] rounded-full p-2 shadow cursor-pointer"
           >
-            <ArrowLeft className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+            <ArrowLeft className="w-6 h-6 text-white" />
           </button>
 
-          {/* Sponsor Scroll Area */}
           <div
-            ref={scrollRef}
-            className="flex overflow-x-auto scroll-smooth hide-scrollbar"
+            ref={containerRef}
+            className="flex overflow-x-auto scroll-smooth"
+            style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
           >
             {sponsors.map((sponsor, index) => (
               <a
@@ -99,14 +114,14 @@ const SponsorsSection = () => {
                 href={sponsor.link}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex-shrink-0 px-2 box-border"
-                style={{ width: `${100 / visibleCount}%` }}
+                className="flex-shrink-0 px-2"
+                style={{ width: `${100 / itemsToShow}%` }}
               >
-                <div className="h-64 bg-white flex items-center justify-center rounded-xl transition duration-300 transform hover:shadow-xl cursor-pointer border-2">
+                <div className="h-64 bg-white flex items-center justify-center rounded-xl hover:shadow-xl transition duration-300 border-2 cursor-pointer">
                   <img
                     src={sponsor.image}
                     alt={sponsor.name}
-                    className="object-contain h-32 "
+                    className="object-contain h-32"
                   />
                 </div>
               </a>
@@ -114,10 +129,10 @@ const SponsorsSection = () => {
           </div>
 
           <button
-            onClick={() => handleManualScroll("right")}
-            className="absolute right-0 sm:right-0 top-1/2 -translate-y-1/2 sm:translate-x-3 bg-[#00163A] cursor-pointer rounded-full p-2 sm:p-2.5 shadow z-10 hover:bg-[#2563eb]"
+            onClick={handleNextClick}
+            className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-[#00163A] hover:bg-[#2563eb] rounded-full p-2 shadow cursor-pointer"
           >
-            <ArrowRight className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+            <ArrowRight className="w-6 h-6 text-white" />
           </button>
         </div>
       </div>
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 738ac87..f1e8652 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -5,54 +5,74 @@ import { FaLinkedin, FaXTwitter } from "react-icons/fa6";
 import { useNavigate } from "react-router";
 
 const TeamSlider = () => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [visibleCount, setVisibleCount] = useState(1);
-
+  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
+  const [cardsPerView, setCardsPerView] = useState(1);
   const navigate = useNavigate();
-  const getVisibleCount = () => {
-    if (window.innerWidth < 768) return 1;
-    if (window.innerWidth < 1024) return 2;
-    if (window.innerWidth < 1280) return 3;
-    return 4;
-  };
 
   useEffect(() => {
-    const handleResize = () => {
-      const count = getVisibleCount();
-      setVisibleCount(count);
-      const maxIndex = Math.max(0, teamMembers.length - count);
-      if (currentIndex > maxIndex) {
-        setCurrentIndex(maxIndex);
+    const handleScreenResize = () => {
+      const screenWidth = window.innerWidth;
+
+      if (screenWidth >= 1200) {
+        setCardsPerView(4);
+      } else if (screenWidth >= 850) {
+        setCardsPerView(3);
+      } else if (screenWidth >= 500) {
+        setCardsPerView(2);
+      } else {
+        setCardsPerView(1);
       }
     };
 
-    setVisibleCount(getVisibleCount());
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [currentIndex]);
+    handleScreenResize();
+    window.addEventListener("resize", handleScreenResize);
+
+    return () => window.removeEventListener("resize", handleScreenResize);
+  }, []);
+
+  const uniqueTeamMembers = Array.from(
+    new Map(teamMembers.map((member) => [member.name, member])).values(),
+  );
+
+  const maxSlideIndex = Math.max(0, uniqueTeamMembers.length - cardsPerView);
+
+  const showNextMembers = () => {
+    setCurrentSlideIndex((currentIndex) => {
+      if (currentIndex >= maxSlideIndex) {
+        return 0;
+      }
+
+      const remainingCards = maxSlideIndex - currentIndex;
+      const cardsToMove = Math.min(cardsPerView, remainingCards);
+
+      return currentIndex + cardsToMove;
+    });
+  };
+
+  const showPreviousMembers = () => {
+    setCurrentSlideIndex((currentIndex) => {
+      if (currentIndex <= 0) {
+        return maxSlideIndex;
+      }
 
-  const nextSlide = () => {
-    const maxIndex = Math.max(0, teamMembers.length - visibleCount);
-    setCurrentIndex((prev) => (prev >= maxIndex ? 0 : prev + visibleCount));
+      return Math.max(0, currentIndex - cardsPerView);
+    });
   };
 
-  const prevSlide = () => {
-    const maxIndex = Math.max(0, teamMembers.length - visibleCount);
-    setCurrentIndex((prev) => (prev <= 0 ? maxIndex : prev - visibleCount));
+  const viewFullTeam = () => {
+    navigate("/Team");
+    window.scrollTo(0, 0);
   };
 
   return (
-    <section className="bg-[#00163A] text-white px-4 sm:px-6 py-16 relative overflow-hidden">
+    <section className="bg-[#00163A] text-white px-4 sm:px-6 py-16">
       <div className="max-w-7xl mx-auto">
         <div className="mb-10">
-          <h2 className="text-3xl font-bold mb-2 ml-3">Our team</h2>
-          <p className="text-xl text-gray-300 ml-3"></p>
+          <h2 className="text-3xl font-bold mb-2 ml-12">Our team</h2>
+          <p className="text-xl text-gray-300 ml-12"></p>
           <button
-            onClick={() => {
-              navigate("/Team");
-              window.scrollTo(0, 0);
-            }}
-            className="mt-4 border border-white text-white py-2 px-4 ml-3 rounded hover:bg-white hover:text-[#00163A] transition cursor-pointer"
+            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"
           >
             View all team members
           </button>
@@ -60,70 +80,73 @@ const TeamSlider = () => {
 
         <div className="relative">
           <button
-            onClick={prevSlide}
-            className="absolute left-0 top-1/3 -translate-y-1/2 -translate-x-3 z-10 p-1.5 sm:p-2 border-2 rounded-full bg-white border-gray-300 shadow-lg hover:bg-gray-100 flex items-center justify-center cursor-pointer"
-            aria-label="Previous"
+            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"
+            aria-label="View previous team members"
           >
             <ArrowLeft className="w-6 h-6" color="#00163A" />
           </button>
 
-          <button
-            onClick={nextSlide}
-            className="absolute right-0 top-1/3 -translate-y-1/2 translate-x-3 z-10 p-1.5 sm:p-2 border-2 rounded-full bg-white border-gray-300 shadow-lg hover:bg-gray-100 flex items-center justify-center cursor-pointer"
-            aria-label="Next"
-          >
-            <ArrowRight className=" w-5 h-5 sm:w-6 sm:h-6" color="#00163A" />
-          </button>
-
-          <div className="overflow-hidden">
+          <div className="overflow-hidden px-12">
             <div
               className="flex transition-transform duration-700 ease-in-out"
               style={{
-                transform: `translateX(-${currentIndex * (100 / visibleCount)}%)`,
+                transform: `translateX(-${currentSlideIndex * (100 / cardsPerView)}%)`,
               }}
             >
-              {Array.from(
-                new Map(teamMembers.map((m) => [m.name, m])).values(),
-              ).map((member, index) => (
+              {uniqueTeamMembers.map((teamMember, memberIndex) => (
                 <div
-                  key={index}
-                  className="flex-shrink-0 px-2 box-border"
-                  style={{ width: `${100 / visibleCount}%` }}
+                  key={`team-member-${memberIndex}`}
+                  className="flex-shrink-0 px-2"
+                  style={{ width: `${100 / cardsPerView}%` }}
                 >
-                  <div className="bg-[#00163A] rounded-lg">
-                    <img
-                      src={member.img}
-                      alt={member.name}
-                      className="w-full aspect-[5/6] object-top object-cover rounded-lg"
-                    />
+                  <div className="bg-[#00163A] rounded-lg hover:-translate-y-2 hover:shadow-2xl transition-transform duration-300">
+                    <div className="relative overflow-hidden rounded-lg">
+                      <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"
+                      />
+                      <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>
+
                     <div className="mt-3 px-2">
                       <p className="font-semibold text-white mb-1 text-lg">
-                        {member.name}
+                        {teamMember.name}
                       </p>
                       <p className="text-base text-gray-300 mb-1">
-                        {member.title}
+                        {teamMember.title}
                       </p>
-                      <p className="text-base text-gray-300">{member.team}</p>
-                      <p className="text-sm text-gray-400 mt-2">
-                        {member.description}
+                      <p className="text-base text-gray-300">
+                        {teamMember.team}
                       </p>
+                      <p className="text-sm text-gray-400 mt-2 line-clamp-3">
+                        {teamMember.description}
+                      </p>
+
                       <div className="flex gap-3 mt-3 text-white text-lg">
-                        <a
-                          href={member.linkedin}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="hover:text-blue-400 cursor-pointer"
-                        >
-                          <FaLinkedin />
-                        </a>
-                        <a
-                          href={member.twitter}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="hover:text-blue-400 cursor-pointer"
-                        >
-                          <FaXTwitter />
-                        </a>
+                        {teamMember.linkedin && (
+                          <a
+                            href={teamMember.linkedin}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="hover:text-blue-400 hover:scale-110 cursor-pointer transition-all duration-200"
+                            aria-label={`Visit ${teamMember.name}'s LinkedIn profile`}
+                          >
+                            <FaLinkedin />
+                          </a>
+                        )}
+                        {teamMember.twitter && (
+                          <a
+                            href={teamMember.twitter}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="hover:text-blue-400 hover:scale-110 cursor-pointer transition-all duration-200"
+                            aria-label={`Visit ${teamMember.name}'s Twitter profile`}
+                          >
+                            <FaXTwitter />
+                          </a>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -131,14 +154,23 @@ const TeamSlider = () => {
               ))}
             </div>
           </div>
+
+          <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"
+            aria-label="View next team members"
+          >
+            <ArrowRight className="w-6 h-6" color="#00163A" />
+          </button>
         </div>
 
         <div className="mt-16">
-          <h3 className="text-xl font-bold mb-1 ml-3">Join Us Today!</h3>
-          <p className="text-base text-gray-300 mb-3 ml-3">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          <h3 className="text-xl font-bold mb-1 ml-12">Join Us Today!</h3>
+          <p className="text-base text-gray-300 mb-3 ml-12">
+            Ready to be part of our amazing team? We're always looking for
+            talented individuals who share our passion.
           </p>
-          <button className="border border-white text-white py-2 px-4 ml-3 rounded hover:bg-white hover:text-[#00163A] transition cursor-pointer">
+          <button className="border border-white text-white py-2 px-4 ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer">
             Apply here
           </button>
         </div>