Merge branch 'main' into prod

app/about/about.module.scss

@@ -0,0 +1,147 @@
+.brochureBack {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ham {
+  position: fixed;
+  top: 30px;
+  left: 20px;
+  z-index: 1000;
+  @media (width>1920px) {
+    transform: scale(1.3);
+    left: 40px;
+    top: 50px;
+  }
+}
+
+.reg {
+  position: relative;
+  top: 80px;
+  padding: 0 20px;
+  z-index: 10;
+  height: 100px;
+  @media (width>1920px) {
+    top: 10px;
+  }
+}
+
+.pageWrapper {
+  position: relative;
+  top: -4rem;
+}
+
+@media (max-width: 4000px) and (min-width: 2200px) {
+  .brochureBack {
+    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;
+    }
+  }
+}
+
+@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/about/loading.tsx

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

app/about/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import styles from "./about.module.scss";
+
+import Grid from "@/components/Landing/Grid/Grid";
+import Grunge from "@/components/Landing/Backdrop/Grunge";
+import Glow from "@/components/Landing/Glow/Glow";
+import SuitBackground from "@/components/Landing/Backdrop/Backdrop";
+import BackButton from "@/components/Registration/BackButton/BackButton";
+import Link from "next/link";
+import PrePreloader from "@/components/PreloaderProMax/PreloaderProMax";
+import AboutUsPage from "@/components/AboutUs/AboutUsPage";
+import RegBtn from "@/components/Landing/Navbar/RegBtn/RegBtn";
+import MobileSlotMachine from "@/components/AboutUs/Machine/Machine";
+
+export default function About() {
+  return (
+    <>
+      <PrePreloader />
+      <div className={styles.brochureBack}>
+        <Glow />
+        <Grunge />
+        <Grid />
+        <SuitBackground />
+      </div>
+      <div className={styles.ham}>
+        <Link href="/">
+          <BackButton />
+        </Link>
+      </div>
+
+      <div className={styles.reg}>
+        <RegBtn />
+      </div>
+      <div className={styles.pageWrapper}>
+        {/* <div className={styles.header}>
+          <div className={styles.backBtn}>
+            <Link href="/">
+              <BackButton />
+            </Link>
+          </div>
+          <div className={styles.reg}>
+            <RegBtn />
+          </div>
+        </div> */}
+
+        <AboutUsPage />
+        <MobileSlotMachine />
+      </div>
+    </>
+  );
+}

app/gallery/gallery.module.scss → app/archive/archive.module.scss

@@ -55,45 +55,54 @@
       object-fit: cover;
       transition: transform 0.3s ease-in-out;
 
+
       &:hover {
-        border: 2px solid #e3c041;
+        // border: 2px solid #e3c041;
+        transform: translate(-2px, 2px);
+        box-shadow: 0px 4px 4px 0px rgba(227, 192, 65, 0.20);
       }
     }
 
     .vStrech {
-      grid-row: span 2;
+      // grid-row: span 2;
       height: 100%;
       width: 100%;
       object-fit: cover;
       transition: transform 0.3s ease-in-out;
 
       &:hover {
-        border: 2px solid #e3c041;
+        // border: 2px solid #e3c041;
+        transform: translate(-2px, 2px);
+        box-shadow: 0px 4px 4px 0px rgba(227, 192, 65, 0.20);
       }
     }
 
     .hStrech {
-      grid-column: span 2;
+      // grid-column: span 2;
       height: 100%;
       width: 100%;
       object-fit: cover;
       transition: transform 0.3s ease-in-out;
 
       &:hover {
-        border: 2px solid #e3c041;
+        // border: 2px solid #e3c041;
+        transform: translate(-2px, 2px);
+        box-shadow: 0px 4px 4px 0px rgba(227, 192, 65, 0.20);
       }
     }
 
     .vhStrech {
-      grid-row: span 2;
-      grid-column: span 2;
+      // grid-row: span 2;
+      // grid-column: span 2;
       height: 100%;
       width: 100%;
       object-fit: cover;
       transition: all 0.3s ease-in-out;
 
       &:hover {
-        border: 2px solid #e3c041;
+        // border: 2px solid #e3c041;
+        transform: translate(-2px, 2px);
+        box-shadow: 0px 4px 4px 0px rgba(227, 192, 65, 0.20);
       }
     }
   }

app/gallery/page.tsx → app/archive/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import styles from "./gallery.module.scss";
+import styles from "./archive.module.scss";
 
 import Grid from "@/components/Landing/Grid/Grid";
 import Grunge from "@/components/Landing/Backdrop/Grunge";
@@ -11,7 +11,7 @@ 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/Gallery/Carousel";
+import Carousel from "@/components/Archive/Carousel";
 
 import one from "../../assets/Gallery/one.jpg";
 import two from "../../assets/Gallery/two.jpg";
@@ -32,6 +32,7 @@ import seventeen from "../../assets/Gallery/seventeen.jpg";
 import eightteen from "../../assets/Gallery/eightteen.jpg";
 import nineteen from "../../assets/Gallery/nineteen.jpg";
 import twenty from "../../assets/Gallery/twenty.jpg";
+import twentyone from "../../assets/Gallery/twentyone.jpg";
 
 // const images = [
 //     one,
@@ -83,6 +84,7 @@ const images = [
   twenty,
   nineteen,
   eightteen,
+  twentyone,
 ];
 
 const imageClasses = [
@@ -106,6 +108,7 @@ const imageClasses = [
   styles.hStrech,
   styles.hStrech,
   styles.pic,
+  styles.pic,
 ];
 
 export default function GalleryPage() {
@@ -183,7 +186,7 @@ export default function GalleryPage() {
             />
           </svg>
 
-          <h2>Gallery</h2>
+          <h2>ARCHIVE</h2>
 
           <svg
             width="42"