carousal responsive

src/components/banner/Banner.jsx

@@ -20,13 +20,35 @@ function Banner({ item, index }) {
         className="absolute right-0 object-cover h-full w-[80%] bg-auto max-[1200px]:w-full max-[1200px]:bottom-0"
       />
       <div className="spotlight-overlay absolute inset-0 z-[1]"></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-[50px] max-[300px]:w-full">
+      
+      <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]">
           #{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">
           {language === "EN" ? item.title : item.japanese_title}
         </h3>
+        
+        {/* Mobile Buttons */}
+        <div className="hidden max-md:flex max-md:mt-3 max-md:gap-x-3 max-md:w-full">
+          <Link
+            to={`/watch/${item.id}`}
+            className="bg-white/90 hover:bg-white text-black font-medium px-5 py-1.5 rounded-lg transition-all duration-200 flex items-center gap-x-2 text-sm"
+          >
+            <FontAwesomeIcon
+              icon={faPlay}
+              className="text-[10px]"
+            />
+            <span>Watch Now</span>
+          </Link>
+          <Link
+            to={`/${item.id}`}
+            className="bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-white font-medium px-5 py-1.5 rounded-lg transition-all duration-200 flex items-center gap-x-2 text-sm"
+          >
+            <span>Details</span>
+          </Link>
+        </div>
+
         <div className="flex h-fit justify-start items-center w-fit space-x-5 mt-5 max-[1300px]:mt-4 max-md:hidden">
           {item.tvInfo && (
             <>
@@ -105,10 +127,11 @@ function Banner({ item, index }) {
           {item.description}
         </p>
       </div>
-      <div className="absolute bottom-[50px] right-[40px] flex gap-x-5 z-[2] max-md:mt-6 max-sm:w-fit max-[320px]:flex-col max-[320px]:space-y-3">
+      {/* Desktop Buttons */}
+      <div className="absolute bottom-[50px] right-[40px] flex gap-x-5 z-[2] max-md:hidden">
         <Link
           to={`/watch/${item.id}`}
-          className="bg-white/90 hover:bg-white text-black font-medium px-7 py-3 rounded-lg transition-all duration-200 flex items-center gap-x-2.5 shadow-lg shadow-black/10 backdrop-blur-sm hover:translate-y-[-1px]"
+          className="bg-white/90 hover:bg-white text-black font-medium px-7 py-2 rounded-lg transition-all duration-200 flex items-center gap-x-2.5 shadow-lg shadow-black/10 backdrop-blur-sm hover:translate-y-[-1px]"
         >
           <FontAwesomeIcon
             icon={faPlay}
@@ -118,7 +141,7 @@ function Banner({ item, index }) {
         </Link>
         <Link
           to={`/${item.id}`}
-          className="bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-white font-medium px-7 py-3 rounded-lg transition-all duration-200 flex items-center gap-x-2.5 backdrop-blur-sm hover:translate-y-[-1px]"
+          className="bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-white font-medium px-7 py-2 rounded-lg transition-all duration-200 flex items-center gap-x-2.5 backdrop-blur-sm hover:translate-y-[-1px]"
         >
           <span>Details</span>
         </Link>

src/components/spotlight/Spotlight.css

@@ -106,6 +106,7 @@
   }
   .button-prev,
   .button-next {
-    display: none;
+    width: 28px;
+    height: 28px;
   }
 }

src/components/spotlight/Spotlight.jsx

@@ -11,7 +11,7 @@ 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]:hidden">
+        <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>