feat: Events Page (#2)

* Events Page

* feat : Improvised Events Page

* feat : Bug fixes in event page

* feat : Bug fix : Event Page

* feat : Bug fix in Event page

* feat : Event Page : Bug fix

src/app/events/carousel.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/events/page.tsx

@@ -1,5 +1,27 @@
+import { NavBar } from '@/components';
+import Back from '@/assets/images/Back.png';
+import BackEnlarge from '@/assets/images/BackEnlarge.png';
+import ImageChanger from '@/components/BackButton/back';
+import Carousel from '@/components/Carousel/carousel';
+import styles from './carousel.module.css';
+
 const events = () => {
-    return <div>events</div>;
+  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={`mt-12 w-full ${styles.slide}`}>
+        <Carousel />
+      </div>
+    </div>
+  );
 };
 
 export default events;

src/app/globals.css

@@ -12,6 +12,11 @@
     src: url('../assets/fonts/Orbitron-Regular.ttf');
 }
 
+@font-face {
+  font-family: 'Nunito';
+  src : url('../assets/fonts/Nunito-VariableFont_wght.ttf');
+}
+
 * {
     -moz-user-drag: none;
     -webkit-user-drag: none;

src/components/BackButton/back.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useState } from 'react';
+import Image, { StaticImageData } from 'next/image';
+import styles from '../../app/events/carousel.module.css';
+
+interface ImageChangerProps {
+  defaultImage: StaticImageData;
+  hoverImage: StaticImageData;
+}
+
+const ImageChanger = (props: ImageChangerProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <Image
+      src={isHovered ? props.hoverImage : props.defaultImage}
+      alt="Back to cluster"
+      className={`${styles.Back} xl:w-52 lg:w-44 md:w-32 sm:w-24 w-16 absolute left-28 top-32 max-md:hidden`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    />
+  );
+};
+
+export default ImageChanger;

src/components/Carousel/caro.module.css

@@ -0,0 +1,232 @@
+.rightArrow{
+    background: url(../../assets/images/rightArrow.png);
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 46.5%;
+    z-index: 10;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12%;
+    height: 12%;
+    left: auto;
+    right: 0%;
+    transition: 0.3s all;
+}
+
+.leftArrow{
+    background: url(../../assets/images/leftArrow.png);
+    background-size:contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 46.5%;
+    z-index: 10;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12%;
+    height: 12%;
+    left: 0%;
+    right: auto;
+    transition: 0.3s all;
+}
+
+.leftArrow:hover{
+    background: url(../../assets/images/leftArrowGlow.png);
+    background-size:contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 46.5%;
+    z-index: 10;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12%;
+    height: 12%;
+    left: 0%;
+    right: auto;
+}
+
+.rightArrow:hover{
+    background: url(../../assets/images/rightArrowGlow.png);
+    background-size:contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 46.5%;
+    z-index: 10;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12%;
+    height: 12%;
+    left: auto;
+    right: 0%;
+}
+
+.leftArrow:active , .rightArrow:active{
+    transform: scale(0.75);
+}
+
+.slideElem{
+    width: 70%;
+    height: 60vh;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mainSlide{
+    background: url(../../assets/images/Slide.png);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    opacity: 1;
+    height: 100%;
+    margin-top: 5%;
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+.eventSlide{
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+
+.leftSC{
+    background: url(../../assets/images/leftSandClock.png);
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 3%;
+    height: 108%;
+}
+
+.rightSC{
+    background: url(../../assets/images/rightSandClock.png);
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 3%;
+    height: 108%;
+}
+
+.registerBlock{
+    display: flex;
+    justify-content: center;
+    align-items: end;
+}
+
+.registerButton{
+    background: url(../../assets/images/RegisterButton.png);
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    position: sticky;
+    width: 50%;
+    height: 45%;
+    margin: 0px;
+    padding: 0px;
+    margin-top: auto;
+    margin-bottom: 0px;
+    transition: 0.2s;
+}
+
+.tabs{
+    height: 50%;
+    transition: color 0.3s ease-in-out;
+}
+
+.active{
+    border-bottom: 2px solid white;
+}
+
+@media screen and (min-width : 1024px) {
+    .slideIntro1{
+        display: none;
+    }   
+    .eventI{
+        display: none;
+    }
+}
+
+.content{
+    overflow-x:hidden;
+    overflow-y:scroll;
+    text-align: justify;
+    word-wrap: normal;
+}
+
+@media screen and (max-width : 1024px){
+    .slideInfo{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        overflow-y: hidden;
+        overflow-x: hidden;
+    }
+    .slideIntro1{
+        width: 100%;
+        padding:0%;
+        margin: 0%;
+    }
+    .slideEnd{
+        position: sticky;
+        margin-top: auto;
+        margin-bottom: 0px;
+    }
+    .eventImg{
+        width: 75%;
+        height: auto;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .slideElem{
+        width: 85%;
+        height: 100%;
+    }
+    .rightArrow{
+        top: 22.5%;
+    }
+    .leftArrow{
+        top:22.5%;
+    }
+    .rightArrow:hover{
+        top: 22.5%;
+    }
+    .leftArrow:hover{
+        top:22.5%;
+    }
+    .tabs{
+        height: 50%;
+        font-size: 60%;
+    }
+    .content{
+        font-size: 14px;
+    }
+    .eventDes{
+        padding: 8px;
+    }
+    .registerBlock{
+        width: 100%;
+    }
+    .registerButton{
+        width: 75%;
+    }
+    .mainSlide{
+        margin-top: 5%;
+    }
+    .eventI{
+        margin-top: 1%;
+    }
+}
+

src/components/Carousel/carousel.tsx

@@ -0,0 +1,41 @@
+'use client';
+import { Keyboard, Navigation } from 'swiper/modules';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore from 'swiper/core';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/keyboard';
+import styles from './caro.module.css';
+import SlideData from './slideData';
+
+SwiperCore.use([Navigation, Keyboard]);
+
+const Carousel = () => {
+    const slides = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+    return (
+        <Swiper
+            spaceBetween={50}
+            slidesPerView={1}
+            navigation={{
+                nextEl: `.${styles.rightArrow}`,
+                prevEl: `.${styles.leftArrow}`,
+            }}
+            keyboard={{ enabled: true }}
+            className="w-full h-full flex justify-center"
+        >
+            {slides.map(slide => (
+                <SwiperSlide key={slide} className="">
+                    <SlideData />
+                </SwiperSlide>
+            ))}
+
+            <div className={`${styles.rightArrow}`}></div>
+            <div className={`${styles.leftArrow}`}></div>
+        </Swiper>
+    );
+};
+
+export default Carousel;