Merge branch 'main' into prod

app/about/about.module.scss

@@ -1,4 +1,4 @@
-.brochureBack {
+.aboutBack {
   position: fixed;
   height: 100vh;
   width: 100%;
@@ -31,10 +31,12 @@
 .pageWrapper {
   position: absolute;
   top: -0rem;
+  height: 100vh;
+  overflow-y: hidden;
 }
 
 @media (max-width: 4000px) and (min-width: 2200px) {
-  .brochureBack {
+  .aboutBack {
     overflow-x: hidden;
   }
 

app/about/page.tsx

@@ -18,7 +18,7 @@ export default function About() {
   return (
     <>
       <PrePreloader />
-      <div className={styles.brochureBack}>
+      <div className={styles.aboutBack}>
         <Glow />
         <Grunge />
         <Grid />

app/archive/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Suspense } from "react";
 import styles from "./archive.module.scss";
 
 import Grid from "@/components/Landing/Grid/Grid";
@@ -10,7 +10,6 @@ import SuitBackground from "@/components/Landing/Backdrop/Backdrop";
 import BackButton from "@/components/Registration/BackButton/BackButton";
 import Image from "next/image";
 import Link from "next/link";
-import PrePreloader from "@/components/PreloaderProMax/PreloaderProMax";
 import Carousel from "@/components/Archive/Carousel";
 
 import one from "../../assets/Gallery/one.jpg";
@@ -148,7 +147,6 @@ export default function GalleryPage() {
 
   return (
     <>
-      <PrePreloader />
       <div className={styles.galleryBack}>
         <Glow />
         <Grunge />
@@ -186,7 +184,7 @@ export default function GalleryPage() {
             />
           </svg>
 
-          <h2>ARCHIVE</h2>
+          <h2>ARCHIVES</h2>
 
           <svg
             width="42"
@@ -331,6 +329,7 @@ export default function GalleryPage() {
             <Image
               key={index}
               src={img}
+              placeholder="blur"
               alt={`Image ${index + 1}`}
               className={imageClasses[index]}
               onClick={() => openCarousel(index)}

app/events/[categoryname]/page.tsx

@@ -11,7 +11,7 @@ import Preloader from "@/components/Preloader/Preloader";
 
 const categories = [
   "music",
-  "quiz",
+  "quizzes",
   "drama",
   "dance",
   "fashion",

app/events/events.module.scss

@@ -6,7 +6,8 @@
 }
 
 .ham {
-  position: fixed;
+  // position: fixed;
+  position: absolute;
   top: 30px;
   left: 20px;
   @media (width>1920px) {
@@ -78,7 +79,7 @@
     justify-content: center;
     align-items: center;
 
-    @media (width<500px) {
+    @media (width<550px) {
       width: auto;
     }
 
@@ -90,7 +91,7 @@
       justify-content: center;
       @media (width<550px) {
         gap: 0rem;
-        transform: scale(0.8) translateY(-10%);
+        // transform: scale(0.8) translateY(-10%);
       }
 
       .box {
@@ -108,7 +109,9 @@
           transform: scale(0.8);
         }
         @media (width<550px) {
-          transform: scale(0.65);
+          transform: scale(0.6);
+          display: none;
+          // height: 200px;
         }
         .dance {
           position: absolute;
@@ -234,6 +237,22 @@
       }
     }
   }
+  .mobilecontainer{
+    position: relative;
+    display: none;
+    @media(width<550px){
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+      margin-top: 20%;
+    }
+    @media(width<400px){
+      margin-top: 23%;
+    }
+    .mobileimg{
+      pointer-events: auto;
+    }
+  }
 }
 
 @media (max-width: 3100px) and (min-width: 2100px) {

app/gallery/gallery.module.scss

@@ -0,0 +1,211 @@
+.galleryBack {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.pageWrapper {
+  position: relative;
+  height: 100vh;
+  top: 0;
+  padding-top: 2rem;
+
+  .heading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1.2rem;
+
+    h2 {
+      font-family: "Rye", sans-serif;
+      font-size: 52px;
+      font-weight: 400;
+      line-height: 43px;
+      letter-spacing: 0.05em;
+      text-align: center;
+      color: #ccae57;
+      text-transform: uppercase;
+    }
+  }
+
+  .backBtn {
+    position: absolute;
+    top: 0rem;
+    left: 2rem;
+  }
+
+  .pdfContainer {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: center;
+    z-index: 1000;
+    height: 650px;
+    // overflow-y: scroll;
+  }
+
+  .carouselButtons {
+    .carouselLeft {
+      position: fixed;
+      top: 50%;
+      left: 0;
+      padding-left: 5rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      @media (max-width: 1000px) {
+        top: 87%;
+      }
+
+      &:hover {
+        @media (min-width: 1000px) {
+          transform: translateX(-0.5rem);
+        }
+      }
+    }
+    .carouselRight {
+      position: fixed;
+      top: 50%;
+      right: 0;
+      padding-right: 5rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      @media (max-width: 1000px) {
+        top: 87%;
+      }
+
+      &:hover {
+        @media (min-width: 1000px) {
+          transform: translateX(0.5rem);
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 4000px) and (min-width: 2200px) {
+  .galleryBack {
+    overflow-x: hidden;
+  }
+
+  .pageWrapper {
+    padding-top: 5rem;
+    overflow-x: hidden;
+
+    .heading {
+      gap: 1.8rem;
+      transform: scale(1.5);
+    }
+
+    .backBtn {
+      position: absolute;
+      top: 1rem;
+      left: 3rem;
+    }
+  }
+}
+
+@media (max-width: 3000px) and (min-width: 2200px) {
+  .pageWrapper {
+    .heading {
+      gap: 1.5rem;
+      transform: scale(1.3);
+    }
+  }
+}
+
+@media (max-width: 2200px) and (min-width: 1850px) {
+  .pageWrapper {
+    padding-top: 3rem;
+
+    .heading {
+      gap: 2rem;
+
+      h2 {
+        font-size: 72px;
+      }
+    }
+
+    .backBtn {
+      top: 1rem;
+    }
+  }
+}
+
+@media (max-width: 1850px) and (min-width: 1500px) {
+  .pageWrapper {
+    padding-top: 3rem;
+
+    .heading {
+      h2 {
+        font-size: 65px;
+      }
+    }
+
+    .backBtn {
+      top: 1rem;
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .pageWrapper {
+    .heading {
+      padding-top: 0rem;
+
+      h2 {
+        font-size: 40px;
+      }
+
+      svg {
+        display: none;
+      }
+    }
+
+    .backBtn {
+      top: 0;
+      left: 0;
+    }
+
+    .pdfContainer {
+      margin-top: 2rem;
+    }
+
+    .carouselButtons {
+      .carouselLeft {
+        top: 87%;
+        padding-left: 1rem;
+        transform: scale(0.8);
+      }
+      .carouselRight {
+        top: 87%;
+        padding-right: 1rem;
+        transform: scale(0.8);
+      }
+    }
+  }
+}
+
+@media (max-width: 400px) {
+  .pageWrapper {
+    .heading {
+      padding-top: 0rem;
+    }
+
+    .backBtn {
+      left: 0rem;
+      transform: translateX(-1rem);
+    }
+  }
+}
+
+@media (max-width: 350px) {
+  .pageWrapper {
+    .heading {
+      h2 {
+        font-size: 35px;
+      }
+    }
+  }
+}

app/gallery/loading.tsx

@@ -0,0 +1,5 @@
+import Preloader from "@/components/Preloader/Preloader";
+
+export default function LoadingPage() {
+  return <Preloader />;
+}