Merge branch 'main' into prod

dvm-bitspilani · Oct 17, 2024 · 81cd15d · 81cd15d
2 parents 8ccdbe1 + 246d719
commit 81cd15d
Show file tree

Hide file tree

Showing 12 changed files with 443 additions and 164 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import React from "react";
+import React, {useEffect} from "react";
+import { useRouter } from "next/navigation";
 import styles from "./about.module.scss";
 
 import Grid from "@/components/Landing/Grid/Grid";
@@ -16,6 +17,31 @@ import MobileSlotMachine from "@/components/AboutUs/Machine/Machine";
 import CursorEffect from "@/components/CursorEffect/CursorEffect";
 
 export default function About() {
+
+  const router = useRouter();
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const isMobile =
+        /Mobi|Android/i.test(navigator.userAgent) || window.innerWidth <= 800;
+
+      if (isMobile) {
+        router.push("/");
+      }
+    }
+    document.body.style.overflow = "hidden";
+  }, []);
+
+  useEffect(() => {
+    if (!localStorage.getItem("hasAboutReloaded")) {
+      localStorage.setItem("hasAboutReloaded", "true");
+      window.location.reload();
+    }
+  });
+
+  const handleBackButtonClick = () => {
+    localStorage.removeItem("hasAboutReloaded");
+  };
+
   return (
     <>
       <PrePreloader />
@@ -27,7 +53,7 @@ export default function About() {
         <SuitBackground />
       </div>
       <div className={styles.ham}>
-        <Link href="/">
+        <Link href="/" onClick={handleBackButtonClick}>
           <BackButton />
         </Link>
       </div>

diff --git a/app/contact/contact.module.scss b/app/contact/contact.module.scss
@@ -11,7 +11,7 @@
   top: 30px;
   left: 20px;
   z-index: 15;
-  @media(width>1920px){
+  @media (width>1920px) {
     transform: scale(1.3);
     left: 40px;
     top: 50px;
@@ -25,7 +25,7 @@
   z-index: 10;
   height: 100px;
 
-  @media(width>1920px){
+  @media (width>1920px) {
     top: 20px;
   }
 }
@@ -104,18 +104,34 @@
 }
 
 .bottom {
-  opacity: 1;
-  position: fixed;
   bottom: 0%;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  // justify-content: space-between;
   width: 100%;
 
-  .bottomAnimation {
-    height: 200px;
-    width: 250px;
-    object-fit: contain;
+  .left {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+
+    .bottomAnimation {
+      height: 200px;
+      width: 250px;
+      object-fit: contain;
+    }
+  }
+
+  .right {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+
+    .bottomAnimation {
+      height: 200px;
+      width: 250px;
+      object-fit: contain;
+    }
   }
 }
 
@@ -139,7 +155,6 @@
   }
 }
 
-
 @media (max-width: 2100px) and (min-width: 1800px) {
   .contactPage {
     .heading {
@@ -160,10 +175,20 @@
   }
 
   .bottom {
-    .bottomAnimation {
-      width: 300px;
-      height: 280px;
-      object-fit: contain;
+    .left {
+      .bottomAnimation {
+        width: 300px;
+        height: 280px;
+        object-fit: contain;
+      }
+    }
+
+    .right {
+      .bottomAnimation {
+        width: 300px;
+        height: 280px;
+        object-fit: contain;
+      }
     }
   }
 }

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
 import styles from "./contact.module.scss";
 
 import Grid from "@/components/Landing/Grid/Grid";
@@ -196,6 +197,19 @@ export default function ContactUs() {
     localStorage.removeItem("hasReloaded");
   };
 
+  const router = useRouter();
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const isMobile =
+        /Mobi|Android/i.test(navigator.userAgent) || window.innerWidth <= 800;
+
+      if (isMobile) {
+        router.push("/");
+      }
+    }
+    document.body.style.overflow = "hidden";
+  }, []);
+
   return (
     <>
       <PrePreloader />
@@ -459,19 +473,23 @@ export default function ContactUs() {
           </div>
         </div>
       </div>
-      <div className={styles.bottom} id="contactBottom">
-        <Image
-          src={left}
-          alt="left"
-          className={styles.bottomAnimation}
-          draggable={false}
-        />
-        <Image
-          src={right}
-          alt="right"
-          className={styles.bottomAnimation}
-          draggable={false}
-        />
+      <div className={styles.bottom}>
+        <span className={styles.left}>
+          <Image
+            src={left}
+            alt="left"
+            className={styles.bottomAnimation}
+            draggable={false}
+          />
+        </span>
+        <span className={styles.right}>
+          <Image
+            src={right}
+            alt="right"
+            className={styles.bottomAnimation}
+            draggable={false}
+          />
+        </span>
       </div>
     </>
   );

diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss
@@ -213,8 +213,15 @@
             font-size: 16px;
           }
           svg {
+            aspect-ratio: 18/26;
             margin-right: 10px;
+            width: 18px;
             transform: translateY(5px);
+
+            @media (width <= 1148px) {
+              width: 12px;
+              margin-right: 6px;
+            }
           }
         }
       }
@@ -320,6 +327,28 @@
         height: 70%;
       }
 
+      .eventImageSkeleton {
+        padding: 0 5% 0 15%;
+        width: 80%;
+        height: 50%;
+        display: flex;
+        justify-content: center;
+        position: absolute;
+
+        .skeleton {
+          width: 100%;
+          height: 100%;
+          user-select: none;
+          box-shadow: 0px 0px 20px 4px #cbae5780;
+          background-color: #110e16;
+          border-radius: 24px;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+
       .eventImageContainer {
         padding: 0 5% 0 15%;
         width: 80%;
@@ -349,6 +378,7 @@
           background-color: #110e16;
         }
       }
+
       .eventDescription {
         padding-left: 5%;
         width: 95%;

diff --git a/app/events/[categoryname]/page.tsx b/app/events/[categoryname]/page.tsx
@@ -3,12 +3,11 @@
 import { useEffect, useState } from "react";
 import styles from "./categories.module.scss";
 import Image from "next/image";
-import Link from "next/link";
 import grunge from "@/assets/Landing/Grunge.png";
 import axios from "axios";
-import eventcard from "../../../assets/Events/Carousel/eventcard.png";
 import Preloader from "@/components/Preloader/Preloader";
 import { useRouter } from "next/navigation";
+import LoaderChip from "@/components/Events/Loader/LoaderChip";
 
 const categories = [
   "music",
@@ -24,6 +23,7 @@ export default function Page({ params }: { params: { categoryname: string } }) {
   const [eventsList, setEventsList] = useState<any>([]);
   const [eventID, setEventID] = useState(0);
   const [loading, setLoading] = useState(true);
+  const [imageLoaded, setImageLoaded] = useState(false);
 
   const handleBack = () => {
     document.body.style.overflow = "auto";
@@ -69,6 +69,7 @@ export default function Page({ params }: { params: { categoryname: string } }) {
           : (prevID + 1) % eventsList.length;
       return newID;
     });
+    setImageLoaded(false);
   };
   return (
     <>
@@ -132,8 +133,6 @@ export default function Page({ params }: { params: { categoryname: string } }) {
               </div> */}
                   <div className={styles.location}>
                     <svg
-                      width="18"
-                      height="26"
                       viewBox="0 0 18 26"
                       fill="none"
                       xmlns="http://www.w3.org/2000/svg"
@@ -200,20 +199,30 @@ export default function Page({ params }: { params: { categoryname: string } }) {
                 </div>
               </div>
               <div className={styles.rightContent}>
-                <div className={styles.eventImageContainer} style={{}}>
-                  <div
+                {!imageLoaded && (
+                  <div className={styles.eventImageSkeleton}>
+                    <div className={styles.skeleton}>
+                      <LoaderChip />
+                    </div>
+                  </div>
+                )}
+                <div className={styles.eventImageContainer}>
+                  <img
                     className={styles.eventImage}
+                    src={
+                      eventsList[eventID]?.img_url !== "Nill"
+                        ? eventsList[eventID]?.img_url
+                        : "https://bits-oasis.org/media/icons/default_98OZ5vb.png"
+                    }
                     style={{
-                      backgroundImage: `url(${
-                        eventsList[eventID]?.img_url !== "Nill"
-                          ? eventsList[eventID]?.img_url
-                          : "https://bits-oasis.org/media/icons/default_98OZ5vb.png"
-                      })`,
-                      backgroundSize: "cover",
-                      backgroundPosition: "center",
-                      backgroundRepeat: "no-repeat",
+                      display: imageLoaded ? "block" : "none",
+                      opacity: imageLoaded ? 1 : 0,
+                      objectFit: "cover",
+                      objectPosition: "center",
                     }}
-                  ></div>
+                    alt={eventsList[eventID]?.name || "event image"}
+                    onLoad={() => setImageLoaded(true)}
+                  />
                 </div>
                 <div
                   className={`${styles.eventDescription} ${

diff --git a/app/events/page.tsx b/app/events/page.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useRef, useEffect } from "react";
 import styles from "./events.module.scss";
+import { useRouter } from "next/navigation";
 import Folder from "@/components/Events/Folder/Folder";
 import Category from "@/components/Events/Category/Category";
 
@@ -114,6 +115,20 @@ export default function EventsPage() {
     { dependencies: [] }
   );
 
+  const router = useRouter();
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const isMobile =
+        /Mobi|Android/i.test(navigator.userAgent) || window.innerWidth <= 800;
+
+      if (isMobile) {
+        router.push("/");
+      }
+    }
+    document.body.style.overflow = "hidden";
+  }, []);
+
+
   return (
     <>
       <PrePreloader />