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] 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">