Merge branch 'main' into homeanimations

delta · Dec 3, 2023 · 33830e2 · 33830e2
2 parents 6bc415a + 3594432
commit 33830e2
Show file tree

Hide file tree

Showing 24 changed files with 607 additions and 2 deletions.
diff --git a/src/app/events/carousel.module.css b/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;
+  }
+}    
diff --git a/src/app/events/page.tsx b/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;
diff --git a/src/app/globals.css b/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;
@@ -224,3 +229,10 @@ body {
     }
 }
 
+/* 
+@media screen and (max-height: 720px) {
+    .footer-bg{
+        position: relative;
+        bottom: 1.5rem;
+    }
+} */
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="en">
-            <body className={inter.className}>
+            <body className={inter.className + ' ' + 'bg-[#070B12]'}>
                 <div className="w-full min-h-screen bg-[#070B12]">{children}</div>
                 <Footer />
             </body>

diff --git a/src/assets/fonts/Nunito-VariableFont_wght.ttf b/src/assets/fonts/Nunito-VariableFont_wght.ttf
diff --git a/src/assets/images/Back.png b/src/assets/images/Back.png
diff --git a/src/assets/images/BackEnlarge.png b/src/assets/images/BackEnlarge.png
diff --git a/src/assets/images/EventBG.png b/src/assets/images/EventBG.png
diff --git a/src/assets/images/MapDrop.png b/src/assets/images/MapDrop.png
diff --git a/src/assets/images/RegisterButton.png b/src/assets/images/RegisterButton.png
diff --git a/src/assets/images/Slide.png b/src/assets/images/Slide.png
diff --git a/src/assets/images/leftArrow.png b/src/assets/images/leftArrow.png
diff --git a/src/assets/images/leftArrowGlow.png b/src/assets/images/leftArrowGlow.png
diff --git a/src/assets/images/leftSandClock.png b/src/assets/images/leftSandClock.png
diff --git a/src/assets/images/randomEventPic.jpg b/src/assets/images/randomEventPic.jpg
diff --git a/src/assets/images/rightArrow.png b/src/assets/images/rightArrow.png
diff --git a/src/assets/images/rightArrowGlow.png b/src/assets/images/rightArrowGlow.png
diff --git a/src/assets/images/rightSandClock.png b/src/assets/images/rightSandClock.png
diff --git a/src/components/BackButton/back.tsx b/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;
diff --git a/src/components/Carousel/caro.module.css b/src/components/Carousel/caro.module.css
@@ -0,0 +1,242 @@
+.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: 50%;
+        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%;
+    }
+}
+
+
+
+@media screen and (max-width : 600px){ 
+    .eventImg {
+        width: 75%;
+        height: auto;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}