fix: clunster carousel bottom bar

delta · Dec 8, 2023 · a95a21c · a95a21c
1 parent 8622366
commit a95a21c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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);
+    }
 }
diff --git 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,21 +72,21 @@ 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}
                 modules={[Autoplay, Pagination, Navigation]}
                 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=">" />