feat: clusters carousel page

src/app/eventcluster/eventcluster.module.css

@@ -0,0 +1,31 @@
+.event {
+    background: url('../../assets/images/EventBG.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: #070b12;
+  }
+
+.Back{
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.Back:active{
+  transform: scale(0.9); 
+}
+
+.slide{
+  height: 60vh;
+  margin-top: -1%;
+}
+
+@media screen and (max-width : 1024px){
+  .eventClusterName{
+    margin-top: 2%;
+  }
+  .slide{
+    margin-top: -2%;
+    height: 75vh;
+  }
+}    

src/app/eventcluster/page.tsx

@@ -0,0 +1,24 @@
+import { ClusterCarousel, NavBar } from '@/components';
+import Back from '@/assets/images/Back.png';
+import BackEnlarge from '@/assets/images/BackEnlarge.png';
+import ImageChanger from '@/components/BackButton/back';
+import styles from './eventcluster.module.css';
+
+const events = () => {
+    return (
+        <div className={`min-h-screen w-full text-center lg:p-7 p-5 event + ${styles.event}`}>
+            <NavBar />
+            <ImageChanger defaultImage={Back} hoverImage={BackEnlarge} />
+            <p
+                className={`${styles.eventClusterName} font-ROG 2xl:text-6xl xl:text-5xl lg:text-4xl sm:text-3xl text-2xl mt-12 transition-all`}
+            >
+                CLUSTER NAME
+            </p>
+            <div className="flex w-full h-[60vh] justify-center items-center">
+                <ClusterCarousel />
+            </div>
+        </div>
+    );
+};
+
+export default events;

src/app/globals.css

@@ -257,4 +257,4 @@ body {
 
 .greenbutton{
     filter: hue-rotate(137deg) drop-shadow(0 0 20px #23A347) brightness(120%);
-}
+}

src/components/ClusterCarousel/ClusterCarousel.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination, Navigation } from 'swiper/modules';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/keyboard';
+
+import Image from 'next/image';
+import leftPortal from '../../assets/images/leftPortal.png';
+import rightPortal from '../../assets/images/rightPortal.png';
+import temp from '../../assets/images/temp.png';
+
+import leftArrow from '../../assets/images/leftArrow.png';
+import rightArrow from '../../assets/images/rightArrow.png';
+
+const ClusterCarousel = () => {
+    const slides = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+    const breakpoints = {
+        100: {
+            slidesPerView: 1,
+            spaceBetween: 15,
+        },
+        768: {
+            slidesPerView: 1,
+            spaceBetween: 20,
+        },
+        1024: {
+            slidesPerView: 1,
+            spaceBetween: 30,
+        },
+        1440: {
+            slidesPerView: 1,
+            spaceBetween: 10,
+        },
+    };
+
+    return (
+        <div className="relative w-full md:w-3/4 h-full flex items-center justify-center max-2xl:px-10">
+            <Image src={leftPortal} className="absolute max-lg:hidden left-0 w-80" alt="<" />
+            <Swiper
+                modules={[Autoplay, Pagination, Navigation]}
+                spaceBetween={0}
+                slidesPerView={1}
+                autoplay={{
+                    delay: 500,
+                    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"
+            >
+                {slides.map(slide => (
+                    <SwiperSlide
+                        key={slide}
+                        className={`flex justify-center items-center bg-transparent max-sm:rounded-xl`}
+                    >
+                        <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}
+                                objectPosition="center"
+                                objectFit="contain"
+                                className={'max-sm:rounded-xl'}
+                                alt="cluster"
+                            />
+                        </div>
+                    </SwiperSlide>
+                ))}
+            </Swiper>
+            <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">
+                    <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">
+                    BATMAN
+                </div>
+                <div className="absolute -right-10 w-10">
+                    <Image src={rightArrow} alt=">" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ClusterCarousel;

src/components/ClusterCarousel/type.d.ts

@@ -0,0 +1,3 @@
+type ClusterType = {
+    image: string;
+};

src/components/index.ts

@@ -10,3 +10,4 @@ export { default as ImageChanger } from './BackButton/back';
 export { default as Carousel } from './Carousel/carousel';
 export { default as LoadingWebView } from './Landing/LoadingWebView';
 export { default as LoadingMobileView } from './Landing/LoadingMobileView';
+export { default as ClusterCarousel } from './ClusterCarousel/ClusterCarousel';