From a95a21c835f67bc90a83be193fa7eb49d9889c68 Mon Sep 17 00:00:00 2001
From: Bhoopesh <bhoopesh459@gmail.com>
Date: Fri, 8 Dec 2023 16:31:28 +0530
Subject: [PATCH] fix: clunster carousel bottom bar

---
 src/app/globals.css                              |  6 ++++++
 .../ClusterCarousel/ClusterCarousel.tsx          | 16 ++++++++--------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index a1c75e1..dae322e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -268,4 +268,10 @@ body {
     .about {
         min-height: max(100vh, 742px);
     }
+}
+
+@media screen and (min-width: 1540px) {
+    .about {
+        min-height: max(100vh, 860px);
+    }
 }
\ No newline at end of file
diff --git a/src/components/ClusterCarousel/ClusterCarousel.tsx b/src/components/ClusterCarousel/ClusterCarousel.tsx
index 6b1fa92..086db4e 100644
--- a/src/components/ClusterCarousel/ClusterCarousel.tsx
+++ b/src/components/ClusterCarousel/ClusterCarousel.tsx
@@ -43,7 +43,7 @@ const ClusterCarousel = () => {
     const handleSlideChange = (index: number) => {
         const currentSlide = swiper?.slides[index];
         if (currentSlide) {
-            currentSlide.style.transform = 'scale(1.1)';
+            currentSlide.style.transform = 'scale(1.0)';
             currentSlide.style.opacity = '1';
             currentSlide.style.transition = 'transform 0.5s ease-in-out';
         }
@@ -72,7 +72,7 @@ const ClusterCarousel = () => {
     };
 
     return (
-        <div className="relative w-full md:w-3/4 h-full flex items-center justify-center max-2xl:px-10">
+        <div className="relative w-full md:w-3/4 h-full flex items-center justify-center max-2xl:px-10 max-md:p-2">
             <Image src={leftPortal} className="absolute max-lg:hidden left-0 w-80" alt="<" />
             <Swiper
                 onSwiper={setSwiper}
@@ -80,13 +80,13 @@ const ClusterCarousel = () => {
                 spaceBetween={0}
                 slidesPerView={1}
                 autoplay={{
-                    delay: 500,
+                    delay: 1500,
                     disableOnInteraction: true,
                 }}
                 loop={true}
                 pagination={{ enabled: false }}
                 breakpoints={breakpoints}
-                className="w-full lg:w-[66%] xl:w-3/4 h-full flex items-center justify-center z-10"
+                className="w-full lg:w-2/3 xl:w-3/4 h-full flex items-center justify-center z-10"
                 onSlideChange={swiper => handleSlideChange(swiper?.activeIndex)}
             >
                 {slides.map(slide => (
@@ -97,7 +97,7 @@ const ClusterCarousel = () => {
                         <div className="w-full h-full lg:w-3/4 2xl:w-4/5 m-auto flex justify-center items-center">
                             <Image
                                 src={temp}
-                                width={450}
+                                width={400}
                                 objectPosition="center"
                                 objectFit="contain"
                                 className={'rounded-lg'}
@@ -110,16 +110,16 @@ const ClusterCarousel = () => {
             <Image src={rightPortal} className="absolute w-80 max-lg:hidden right-0" alt="<" />
             <div className="fixed bottom-[12vh] left-1/2 -translate-x-1/2 flex justify-center lg:justify-between items-center md:px-10 px-5">
                 <div
-                    className="absolute -left-10 w-10 hover:scale-110 animate-pulse"
+                    className="absolute -left-10 w-10 hover:scale-110 animate-pulse hover:cursor-pointer"
                     onClick={goToPreviousSlide}
                 >
                     <Image src={leftArrow} alt="<" />
                 </div>
-                <div className="font-Orbitron text-sm md:text-2xl border-white border px-10 md:px-16 py-2 rounded-full">
+                <div className="font-Orbitron text-sm md:text-xl border-white border py-2 rounded-full w-[40vw] md:w-52 text-center overflow-hidden">
                     BATMAN
                 </div>
                 <div
-                    className="absolute -right-10 w-10 hover:scale-110 animate-pulse"
+                    className="absolute -right-10 w-10 hover:scale-110 animate-pulse hover:cursor-pointer"
                     onClick={goToNextSlide}
                 >
                     <Image src={rightArrow} alt=">" />