feat: adjust carousel button size

Author: Krish-2118

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>

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>

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);
-}