From 61bac5d88af6ad63d1e362264ff2e57ef84d2817 Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Fri, 18 Jul 2025 17:01:52 +0530
Subject: [PATCH 1/3] style: change carousel positioning

---
 src/components/Sponsor.jsx  | 20 +++++++------
 src/components/Team.jsx     | 57 ++++++++++++++++---------------------
 src/components/sponsor.css  | 25 ++++++++++++++++
 src/pages/team/TeamPage.jsx | 17 +++--------
 4 files changed, 64 insertions(+), 55 deletions(-)

diff --git a/src/components/Sponsor.jsx b/src/components/Sponsor.jsx
index d48b46c..beed0ae 100644
--- a/src/components/Sponsor.jsx
+++ b/src/components/Sponsor.jsx
@@ -65,13 +65,15 @@ const SponsorsSection = () => {
 
   return (
     <section className="bg-white py-10 relative overflow-hidden">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
-          Our Sponsors and Partners
-        </h2>
-        <p className="text-gray-700 text-lg mb-8">
-          We are proudly supported by our amazing sponsors and partners.
-        </p>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:pl-0">
+        <div>
+          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
+            Our Sponsors and Partners
+          </h2>
+          <p className="text-gray-700 text-lg mb-8">
+            We are proudly supported by our amazing sponsors and partners.
+          </p>
+        </div>
 
         <div
           className="relative overflow-hidden"
@@ -105,13 +107,13 @@ const SponsorsSection = () => {
           <div className="flex justify-center space-x-4 mt-6">
             <button
               onClick={() => handleManualScroll("left")}
-              className="p-2 border-2 rounded-full bg-white shadow hover:bg-black-100"
+              className="carousel-arrow-btn absolute left-2 top-1/2 -translate-y-1/2 z-10"
             >
               <ArrowLeft />
             </button>
             <button
               onClick={() => handleManualScroll("right")}
-              className="p-2 border-2 rounded-full bg-white shadow hover:bg-black-100"
+              className="carousel-arrow-btn absolute right-2 top-1/2 -translate-y-1/2 z-10"
             >
               <ArrowRight />
             </button>
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 144b337..23ee83a 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import teamMembers from "../config/teammate";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 import { FaLinkedin, FaXTwitter } from "react-icons/fa6";
 
 const TeamSlider = () => {
@@ -45,16 +46,32 @@ const TeamSlider = () => {
     <section className="bg-[#00163A] text-white px-4 sm:px-6 py-16 relative overflow-hidden">
       <div className="max-w-7xl mx-auto">
         <div className="mb-10">
-          <h2 className="text-3xl font-bold mb-2">Our team</h2>
-          <p className="text-lg text-gray-300">
+          <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 rounded hover:bg-white hover:text-[#00163A] transition">
+          <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>
         </div>
 
         <div className="relative">
+          <button
+            onClick={prevSlide}
+            className="absolute left-2 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 flex items-center justify-center cursor-pointer"
+            aria-label="Previous"
+          >
+            <ArrowLeft size={24} color="#00163A" />
+          </button>
+
+          <button
+            onClick={nextSlide}
+            className="absolute right-2 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 flex items-center justify-center cursor-pointer"
+            aria-label="Next"
+          >
+            <ArrowRight size={24} color="#00163A" />
+          </button>
+
           <div className="overflow-hidden">
             <div
               className="flex transition-transform duration-700 ease-in-out"
@@ -103,40 +120,14 @@ const TeamSlider = () => {
               ))}
             </div>
           </div>
-
-          <div className="absolute -bottom-12 right-4 flex items-center gap-3 z-10">
-            <button
-              onClick={prevSlide}
-              className="bg-white text-[#00163A] w-10 h-10 rounded-full flex items-center justify-center text-xl font-bold"
-            >
-              {"<"}
-            </button>
-            <button
-              onClick={nextSlide}
-              className="bg-white text-[#00163A] w-10 h-10 rounded-full flex items-center justify-center text-xl font-bold"
-            >
-              {">"}
-            </button>
-          </div>
-
-          <div className="absolute -bottom-6 left-2 gap-2 hidden sm:flex">
-            {Array.from({ length: pageCount }).map((_, idx) => (
-              <span
-                key={idx}
-                className={`w-2 h-2 rounded-full ${
-                  idx === activeDot ? "bg-white" : "bg-gray-500"
-                }`}
-              ></span>
-            ))}
-          </div>
         </div>
 
-        <div className="mt-24">
-          <h3 className="text-xl font-bold mb-1">Join Us Today!</h3>
-          <p className="text-base text-gray-300 mb-3">
+        <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.
           </p>
-          <button className="border border-white text-white py-2 px-4 rounded hover:bg-white hover:text-[#00163A] transition">
+          <button className="border border-white text-white py-2 px-4 ml-3 rounded hover:bg-white hover:text-[#00163A] transition cursor-pointer">
             Apply here
           </button>
         </div>
diff --git a/src/components/sponsor.css b/src/components/sponsor.css
index 7613c95..a2b22d9 100644
--- a/src/components/sponsor.css
+++ b/src/components/sponsor.css
@@ -5,3 +5,28 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+.carousel-arrow-btn {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #112051 60%, #c7d2fe 100%);
+  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.15);
+  color: #fff;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
+  font-size: 1.5rem;
+  margin-right: -5px;
+}
+
+.carousel-arrow-btn:hover {
+  transform: scale(1.1);
+  background: linear-gradient(135deg, #2563eb 80%, #a5b4fc 100%);
+  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.25);
+}
diff --git a/src/pages/team/TeamPage.jsx b/src/pages/team/TeamPage.jsx
index 09270a7..25b1ea1 100644
--- a/src/pages/team/TeamPage.jsx
+++ b/src/pages/team/TeamPage.jsx
@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { FaLinkedin, FaXTwitter } from "react-icons/fa6";
+import teamMembers from "../../config/teammate";
 import container from "../../assets/Frame 142.png";
 
-const TeamPage = ({ teamMembers = [] }) => {
+const TeamPage = () => {
   const [activeTeam, setActiveTeam] = useState("All");
 
   const teams = ["All", "Team 1", "Team 2", "Team 3", "Team 4"];
@@ -14,24 +15,15 @@ const TeamPage = ({ teamMembers = [] }) => {
 
   return (
     <section className="bg-white text-black">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28">
-        <img
-          src={container}
-          alt="Team Cover"
-          className="w-full h-auto object-contain rounded-lg"
-        />
-      </div>
-
-      <div className="text-center py-10 px-4 max-w-4xl mx-auto">
+      <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 text-lg">
+        <p className="text-gray-700 pb-6 text-lg">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit...
         </p>
       </div>
 
-      {/* Tabs */}
       <div className="flex justify-center flex-wrap gap-4 mb-10">
         {teams.map((team) => (
           <button
@@ -48,7 +40,6 @@ const TeamPage = ({ teamMembers = [] }) => {
         ))}
       </div>
 
-      {/* Team Cards */}
       <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">

From e55ce306e382a92cdaab37e17f540d36501d6eff Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Fri, 18 Jul 2025 19:32:04 +0530
Subject: [PATCH 2/3] feat: adjust carousel button size

---
 src/components/Sponsor.jsx | 41 +++++++++++++++++++-------------------
 src/components/Team.jsx    | 10 +++++-----
 src/components/sponsor.css | 25 -----------------------
 3 files changed, 26 insertions(+), 50 deletions(-)

diff --git a/src/components/Sponsor.jsx b/src/components/Sponsor.jsx
index beed0ae..32ef68c 100644
--- a/src/components/Sponsor.jsx
+++ b/src/components/Sponsor.jsx
@@ -66,20 +66,29 @@ const SponsorsSection = () => {
   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">
-        <div>
-          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
+        <div className="mb-8">
+          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-2">
             Our Sponsors and Partners
           </h2>
-          <p className="text-gray-700 text-lg mb-8">
+          <p className="text-gray-700 text-lg">
             We are proudly supported by our amazing sponsors and partners.
           </p>
         </div>
 
         <div
-          className="relative overflow-hidden"
+          className="relative"
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
         >
+          {/* 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]"
+          >
+            <ArrowLeft className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+          </button>
+
+          {/* Sponsor Scroll Area */}
           <div
             ref={scrollRef}
             className="flex overflow-x-auto scroll-smooth hide-scrollbar"
@@ -93,31 +102,23 @@ const SponsorsSection = () => {
                 className="flex-shrink-0 px-2 box-border"
                 style={{ width: `${100 / visibleCount}%` }}
               >
-                <div className="h-64 bg-white flex items-center justify-center rounded transition duration-300 transform hover:shadow-xl cursor-pointer border-2">
+                <div className="h-64 bg-white flex items-center justify-center rounded-xl transition duration-300 transform hover:shadow-xl cursor-pointer border-2">
                   <img
                     src={sponsor.image}
                     alt={sponsor.name}
-                    className="object-contain h-32"
+                    className="object-contain h-32 "
                   />
                 </div>
               </a>
             ))}
           </div>
 
-          <div className="flex justify-center space-x-4 mt-6">
-            <button
-              onClick={() => handleManualScroll("left")}
-              className="carousel-arrow-btn absolute left-2 top-1/2 -translate-y-1/2 z-10"
-            >
-              <ArrowLeft />
-            </button>
-            <button
-              onClick={() => handleManualScroll("right")}
-              className="carousel-arrow-btn absolute right-2 top-1/2 -translate-y-1/2 z-10"
-            >
-              <ArrowRight />
-            </button>
-          </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]"
+          >
+            <ArrowRight className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+          </button>
         </div>
       </div>
     </section>
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 23ee83a..a38efd0 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -58,18 +58,18 @@ const TeamSlider = () => {
         <div className="relative">
           <button
             onClick={prevSlide}
-            className="absolute left-2 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 flex items-center justify-center cursor-pointer"
+            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"
           >
-            <ArrowLeft size={24} color="#00163A" />
+            <ArrowLeft className="w-6 h-6" color="#00163A" />
           </button>
 
           <button
             onClick={nextSlide}
-            className="absolute right-2 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 flex items-center justify-center cursor-pointer"
+            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 size={24} color="#00163A" />
+            <ArrowRight className=" w-5 h-5 sm:w-6 sm:h-6" color="#00163A" />
           </button>
 
           <div className="overflow-hidden">
@@ -88,7 +88,7 @@ const TeamSlider = () => {
                     <img
                       src={member.img}
                       alt={member.name}
-                      className="w-full h-68 object-cover rounded-md"
+                      className="w-full h-68 object-cover rounded-lg"
                     />
                     <div className="mt-3 px-2">
                       <p className="font-semibold text-white">{member.name}</p>
diff --git a/src/components/sponsor.css b/src/components/sponsor.css
index a2b22d9..7613c95 100644
--- a/src/components/sponsor.css
+++ b/src/components/sponsor.css
@@ -5,28 +5,3 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.carousel-arrow-btn {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #112051 60%, #c7d2fe 100%);
-  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.15);
-  color: #fff;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s,
-    background 0.2s;
-  font-size: 1.5rem;
-  margin-right: -5px;
-}
-
-.carousel-arrow-btn:hover {
-  transform: scale(1.1);
-  background: linear-gradient(135deg, #2563eb 80%, #a5b4fc 100%);
-  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.25);
-}

From d1de1607bcac75c1f1f7a306606430db1f0e7d4c Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Fri, 18 Jul 2025 22:11:17 +0530
Subject: [PATCH 3/3] <resolve> eslint error

---
 src/components/Sponsor.jsx  | 20 ++++++++++----------
 src/components/Team.jsx     |  3 ---
 src/pages/team/TeamPage.jsx |  1 -
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/Sponsor.jsx b/src/components/Sponsor.jsx
index 32ef68c..fb986ad 100644
--- a/src/components/Sponsor.jsx
+++ b/src/components/Sponsor.jsx
@@ -35,15 +35,6 @@ const SponsorsSection = () => {
     return Math.ceil(sponsors.length / visibleCount);
   };
 
-  const autoScroll = () => {
-    const container = scrollRef.current;
-    if (!container) return;
-
-    const pages = totalPages();
-    pageIndex.current = (pageIndex.current + 1) % pages;
-    scrollToPage(pageIndex.current);
-  };
-
   const handleManualScroll = (direction) => {
     const pages = totalPages();
     if (direction === "left") {
@@ -56,9 +47,18 @@ const SponsorsSection = () => {
   };
 
   useEffect(() => {
+    const autoScroll = () => {
+      const container = scrollRef.current;
+      if (!container) return;
+
+      const pages = totalPages();
+      pageIndex.current = (pageIndex.current + 1) % pages;
+      scrollToPage(pageIndex.current);
+    };
+
     let interval;
     if (!isHovered) {
-      interval = setInterval(autoScroll, 3000);
+      interval = setInterval(autoScroll, 5000);
     }
     return () => clearInterval(interval);
   }, [isHovered, visibleCount]);
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index a38efd0..234b345 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -39,9 +39,6 @@ const TeamSlider = () => {
     setCurrentIndex((prev) => Math.max(prev - visibleCount, 0));
   };
 
-  const pageCount = Math.ceil(teamMembers.length / visibleCount);
-  const activeDot = Math.round(currentIndex / visibleCount);
-
   return (
     <section className="bg-[#00163A] text-white px-4 sm:px-6 py-16 relative overflow-hidden">
       <div className="max-w-7xl mx-auto">
diff --git a/src/pages/team/TeamPage.jsx b/src/pages/team/TeamPage.jsx
index 25b1ea1..83d9795 100644
--- a/src/pages/team/TeamPage.jsx
+++ b/src/pages/team/TeamPage.jsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
 import { FaLinkedin, FaXTwitter } from "react-icons/fa6";
 import teamMembers from "../../config/teammate";
-import container from "../../assets/Frame 142.png";
 
 const TeamPage = () => {
   const [activeTeam, setActiveTeam] = useState("All");