fixed carousal layout

src/components/banner/Banner.css

@@ -6,126 +6,68 @@
 }
 
 .spotlight-overlay {
-  background: radial-gradient(
-      circle at 130% center,
-      rgba(10, 10, 10, 0) 50%,
-      rgba(10, 10, 10, 0.5) 60%,
-      rgba(10, 10, 10, 1) 80%,
-      rgba(10, 10, 10, 1) 100%
+  background: linear-gradient(
+    90deg,
+    #0a0a0a 0%,
+    rgba(10, 10, 10, 0.7) 35%,
+    rgba(10, 10, 10, 0) 65%
   ),
   linear-gradient(
     to top,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 20%,
-      rgba(10, 10, 10, 0) 100%
-    ),
-    linear-gradient(
-      to left,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 20%,
-      rgba(10, 10, 10, 0) 100%
-    ),
-    linear-gradient(
-      to bottom,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 20%,
-      rgba(10, 10, 10, 0) 100%
+    #0a0a0a 0%,
+    rgba(10, 10, 10, 0.7) 20%,
+    rgba(10, 10, 10, 0) 50%
   );
   pointer-events: none;
 }
 
 @media only screen and (max-width: 1300px) {
   .spotlight-overlay {
-    background: radial-gradient(
-      circle at 130% center,
-      rgba(10, 10, 10, 0) 50%,
-      rgba(10, 10, 10, 0.5) 60%,
-      rgba(10, 10, 10, 1) 80%,
-      rgba(10, 10, 10, 1) 100%
+    background: linear-gradient(
+      90deg,
+      #0a0a0a 0%,
+      rgba(10, 10, 10, 0.7) 35%,
+      rgba(10, 10, 10, 0) 65%
     ),
     linear-gradient(
       to top,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 20%,
-      rgba(10, 10, 10, 0) 100%
-    ),
-    linear-gradient(
-      to left,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 20%,
-      rgba(10, 10, 10, 0) 100%
-    ),
-    linear-gradient(
-      to bottom,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 50%,
-      rgba(10, 10, 10, 0) 100%
+      #0a0a0a 0%,
+      rgba(10, 10, 10, 0.7) 20%,
+      rgba(10, 10, 10, 0) 50%
     );
   }
 }
 
 @media only screen and (max-width: 1200px) {
   .spotlight-overlay {
-    background: radial-gradient(
-      circle at 100% center,
-      rgba(10, 10, 10, 0) 50%,
-      rgba(10, 10, 10, 0.5) 60%,
-      rgba(10, 10, 10, 1) 95%,
-      rgba(10, 10, 10, 1) 100%
+    background: linear-gradient(
+      90deg,
+      #0a0a0a 0%,
+      rgba(10, 10, 10, 0.7) 35%,
+      rgba(10, 10, 10, 0) 65%
     ),
     linear-gradient(
       to top,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 20%,
-      rgba(10, 10, 10, 0) 100%
-    ),
-    linear-gradient(
-      to left,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 20%,
-      rgba(10, 10, 10, 0) 100%
-    ),
-    linear-gradient(
-      to bottom,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 70%,
-      rgba(10, 10, 10, 0) 100%
+      #0a0a0a 0%,
+      rgba(10, 10, 10, 0.7) 20%,
+      rgba(10, 10, 10, 0) 50%
     );
   }
 }
 
 @media only screen and (max-width: 900px) {
   .spotlight-overlay {
-    background: radial-gradient(
-      circle at 60% center,
-      rgba(10, 10, 10, 0) 50%,
-      rgba(10, 10, 10, 0.5) 85%,
-      rgba(10, 10, 10, 1) 95%,
-      rgba(10, 10, 10, 1) 100%
+    background: linear-gradient(
+      90deg,
+      #0a0a0a 0%,
+      rgba(10, 10, 10, 0.7) 35%,
+      rgba(10, 10, 10, 0) 65%
     ),
     linear-gradient(
       to top,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 70%,
-      rgba(10, 10, 10, 0) 100%
-    ),
-    linear-gradient(
-      to left,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 20%,
-      rgba(10, 10, 10, 0) 100%
-    ),
-    linear-gradient(
-      to bottom,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 70%,
-      rgba(10, 10, 10, 0) 100%
-    ),
-    linear-gradient(
-      to right,
-      rgba(10, 10, 10, 1) 0%,
-      rgba(10, 10, 10, 0) 15%,
-      rgba(10, 10, 10, 0) 100%
+      #0a0a0a 0%,
+      rgba(10, 10, 10, 0.7) 20%,
+      rgba(10, 10, 10, 0) 50%
     );
   }
 }

src/components/banner/Banner.jsx

@@ -13,16 +13,16 @@ import "./Banner.css";
 function Banner({ item, index }) {
   const { language } = useLanguage();
   return (
-    <section className="spotlight w-full h-full relative">
+    <section className="spotlight w-full h-full relative rounded-2xl overflow-hidden">
       <img
         src={`${item.poster}`}
         alt={item.title}
-        className="absolute right-0 object-cover h-full w-[80%] bg-auto max-[1200px]:w-full max-[1200px]:bottom-0"
+        className="absolute inset-0 object-cover w-full h-full rounded-2xl"
       />
-      <div className="spotlight-overlay absolute inset-0 z-[1]"></div>
+      <div className="spotlight-overlay absolute inset-0 z-[1] rounded-2xl"></div>
       
-      <div className="absolute flex flex-col left-0 bottom-[50px] w-[55%] p-4 z-[2] max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[20px] max-[300px]:w-full">
-        <p className="text-transparent bg-clip-text bg-gradient-to-r from-[#ffbade] to-[#ff90c5] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">
+      <div className="absolute flex flex-col left-0 bottom-[40px] w-[55%] p-4 z-[2] max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[20px] max-[300px]:w-full">
+        <p className="text-[#ffbade] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">
           #{index + 1} Spotlight
         </p>
         <h3 className="text-white line-clamp-2 text-5xl font-bold mt-4 text-left max-[1390px]:text-[45px] max-[1300px]:text-3xl max-[1300px]:mt-3 max-md:text-2xl max-md:mt-1 max-[575px]:text-[22px] max-sm:leading-6 max-sm:w-[80%] max-[320px]:w-full">

src/components/spotlight/Spotlight.css

@@ -13,11 +13,9 @@
 }
 .button-prev,
 .button-next {
-  width: 32px;
-  height: 32px;
-  background-color: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
+  width: 36px;
+  height: 36px;
+  background-color: #1a1a1a;
   border-radius: 6px;
   cursor: pointer;
   display: flex;
@@ -28,17 +26,15 @@
 
 .button-prev:hover,
 .button-next:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.2);
-  transform: translateY(-1px);
+  background-color: #2a2a2a;
 }
 
 .button-prev::after,
 .button-next::after {
   content: '';
-  width: 7px;
-  height: 7px;
-  border: 1.5px solid rgba(255, 255, 255, 0.8);
+  width: 9px;
+  height: 9px;
+  border: 2px solid #ffffff;
   border-left: 0;
   border-bottom: 0;
 }
@@ -79,7 +75,7 @@
 }
 
 .swiper-pagination {
-  bottom: 15px !important;
+  bottom: 20px !important;
 }
 
 .swiper-pagination-bullet {
@@ -93,12 +89,12 @@
 
 @media only screen and (max-width: 575px) {
   .swiper-horizontal > .swiper-pagination-bullets {
-    bottom: 10px !important;
+    bottom: 20px !important;
     left: 50% !important;
     transform: translateX(-50%) !important;
     width: auto !important;
     display: flex !important;
-    gap: 6px;
+    gap: 4px;
     align-items: center;
     justify-content: center;
     flex-direction: row !important;
@@ -106,7 +102,15 @@
   }
   .button-prev,
   .button-next {
-    width: 28px;
-    height: 28px;
+    width: 32px;
+    height: 32px;
+  }
+  .swiper-pagination-bullet {
+    width: 6px !important;
+    height: 6px !important;
+  }
+  .swiper-pagination-bullet-active {
+    width: 16px !important;
+    border-radius: 8px !important;
   }
 }

src/components/spotlight/Spotlight.jsx

@@ -11,10 +11,6 @@ const Spotlight = ({ spotlights }) => {
   return (
     <>
       <div className="relative h-[450px] max-[1390px]:h-[400px] max-[1300px]:h-[350px] max-md:h-[300px] pt-[20px]">
-        <div className="absolute right-[10px] top-[30px] flex space-x-2 z-10 max-[575px]:top-[10px] max-[575px]:right-[10px]">
-          <div className="button-prev"></div>
-          <div className="button-next"></div>
-        </div>
         {spotlights && spotlights.length > 0 ? (
           <>
             <Swiper
@@ -35,12 +31,16 @@ const Spotlight = ({ spotlights }) => {
                 disableOnInteraction: false,
               }}
               modules={[Navigation, Autoplay, Pagination]}
-              className="h-[450px] max-[1390px]:h-full"
+              className="h-[450px] max-[1390px]:h-full rounded-2xl overflow-hidden relative"
               style={{
                 "--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)",
                 "--swiper-pagination-bullet-inactive-opacity": "1",
               }}
             >
+              <div className="absolute right-[20px] top-[20px] flex space-x-1.5 z-[5]">
+                <div className="button-prev"></div>
+                <div className="button-next"></div>
+              </div>
               {spotlights.map((item, index) => (
                 <SwiperSlide className="text-black relative" key={index}>
                   <Banner item={item} index={index} />