Merge branch 'main' into prod

dvm-bitspilani · Oct 19, 2024 · b6ac204 · b6ac204
2 parents 81cd15d + 3630742
commit b6ac204
Show file tree

Hide file tree

Showing 60 changed files with 868 additions and 1,871 deletions.
diff --git a/app/brochure/loading.tsx b/app/brochure/loading.tsx
@@ -2,4 +2,4 @@ import Preloader from "@/components/Preloader/Preloader";
 
 export default function LoadingPage() {
   return <Preloader />;
-}
+}
diff --git a/app/contact/contact.module.scss b/app/contact/contact.module.scss
@@ -38,7 +38,7 @@
   //opacity: 1;
   //pointer-events: auto;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   .heading {
     margin-top: 3rem;
@@ -113,7 +113,7 @@
   .left {
     position: fixed;
     bottom: 0;
-    left: 0;
+    left: -15px;
 
     .bottomAnimation {
       height: 200px;
@@ -125,7 +125,7 @@
   .right {
     position: fixed;
     bottom: 0;
-    right: 0;
+    right: -15px;
 
     .bottomAnimation {
       height: 200px;

diff --git a/app/contact/loading.tsx b/app/contact/loading.tsx
@@ -2,4 +2,4 @@ import Preloader from "@/components/Preloader/Preloader";
 
 export default function LoadingPage() {
   return <Preloader />;
-}
+}
diff --git a/app/devs/dev.module.scss b/app/devs/dev.module.scss
diff --git a/app/devs/page.tsx b/app/devs/page.tsx
@@ -0,0 +1,3 @@
+export default function DevPage() {
+  return <h1>Hello</h1>;
+}
diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss
@@ -221,6 +221,7 @@
             @media (width <= 1148px) {
               width: 12px;
               margin-right: 6px;
+              transform: translateY(0px);
             }
           }
         }
@@ -283,6 +284,11 @@
             rgba(255, 232, 135, 0.02) 100%
           );
           z-index: 10;
+          transition: transform 0.3s ease-out;
+
+          &:hover{
+            transform: scale(1.15);
+          }
 
           @media screen and (max-width: 1400px) {
             height: 72px;
@@ -311,6 +317,17 @@
             }
           }
         }
+
+        .leftButton {
+          svg {
+            transform: translate(-57.5%, -50%);
+          }
+        }
+        .rightButton {
+          svg {
+            transform: translate(-42.5%, -50%);
+          }
+        }
       }
     }
     .rightContent {
@@ -335,13 +352,26 @@
         justify-content: center;
         position: absolute;
 
+        @media screen and (max-width: 1148px) {
+          padding: 0;
+          width: 100%;
+          aspect-ratio: 16/9;
+          max-height: 50%;
+          height: unset;
+          max-width: 75%;
+        }
+
+        @media screen and (max-width: 600px) {
+          max-width: unset;
+          height: unset;
+        }
+
         .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;
@@ -371,6 +401,7 @@
         }
 
         .eventImage {
+          aspect-ratio: 16/9;
           width: 100%;
           height: 100%;
           user-select: none;

diff --git a/app/events/[categoryname]/page.tsx b/app/events/[categoryname]/page.tsx
@@ -1,22 +1,14 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import styles from "./categories.module.scss";
 import Image from "next/image";
 import grunge from "@/assets/Landing/Grunge.png";
 import axios from "axios";
 import Preloader from "@/components/Preloader/Preloader";
 import { useRouter } from "next/navigation";
 import LoaderChip from "@/components/Events/Loader/LoaderChip";
-
-const categories = [
-  "music",
-  "quizzes",
-  "drama",
-  "dance",
-  "fashion",
-  "photography",
-];
+import gsap from "gsap";
 
 export default function Page({ params }: { params: { categoryname: string } }) {
   const router = useRouter();
@@ -25,6 +17,11 @@ export default function Page({ params }: { params: { categoryname: string } }) {
   const [loading, setLoading] = useState(true);
   const [imageLoaded, setImageLoaded] = useState(false);
 
+  const titleRef = useRef<HTMLDivElement>(null);
+  const subtitleRef = useRef<HTMLDivElement>(null);
+  const contactRef = useRef<HTMLDivElement>(null);
+  const descriptionRef = useRef<HTMLDivElement>(null);
+
   const handleBack = () => {
     document.body.style.overflow = "auto";
     if (window.history.length > 1) {
@@ -52,23 +49,60 @@ export default function Page({ params }: { params: { categoryname: string } }) {
         // console.log(filteredEvents);
         setEventsList(filteredEvents);
         setLoading(false);
+        if (filteredEvents.length === 0) {
+          router.push("/404");
+        }
       });
   }, []);
 
-  useEffect(() => {
-    if (!categories.includes(params.categoryname)) {
-      window.location.href = "/404";
-    }
-  }, []);
+  const animate = (direction: string) => {
+    const tl = gsap.timeline();
+    tl.to([titleRef.current, subtitleRef.current, contactRef.current], {
+      x: window.innerWidth > 1148 ? -100 : 0,
+      y: window.innerWidth < 1148 ? -100 : 0,
+      opacity: 0,
+      duration: 0.5,
+    })
+      .to(
+        descriptionRef.current,
+        {
+          x: window.innerWidth > 1148 ? 100 : 0,
+          y: window.innerWidth < 1148 ? 100 : 0,
+          opacity: 0,
+          duration: 0.5,
+          onComplete: () => {
+            setEventID((prevID) => {
+              const newID =
+                direction === "left"
+                  ? (prevID - 1 + eventsList.length) % eventsList.length
+                  : (prevID + 1) % eventsList.length;
+              return newID;
+            });
+          },
+        },
+        "<"
+      )
+      .to([titleRef.current, subtitleRef.current, contactRef.current], {
+        x: 0,
+        y: 0,
+        opacity: 1,
+        duration: 0.25,
+        delay: 0.2,
+      })
+      .to(
+        descriptionRef.current,
+        {
+          x: 0,
+          y: 0,
+          opacity: 1,
+          duration: 0.25,
+        },
+        "<"
+      );
+  };
 
   const handleCarousel = (direction: string) => {
-    setEventID((prevID) => {
-      const newID =
-        direction === "left"
-          ? (prevID - 1 + eventsList.length) % eventsList.length
-          : (prevID + 1) % eventsList.length;
-      return newID;
-    });
+    animate(direction);
     setImageLoaded(false);
   };
   return (
@@ -124,10 +158,10 @@ export default function Page({ params }: { params: { categoryname: string } }) {
 
             <div className={styles.eventDisplay}>
               <div className={styles.leftContent}>
-                <div className={styles.eventTitle}>
+                <div className={styles.eventTitle} ref={titleRef}>
                   {eventsList[eventID]?.name || "name"}
                 </div>
-                <div className={styles.eventSubTitle}>
+                <div className={styles.eventSubTitle} ref={subtitleRef}>
                   {/* <div className={styles.clubName}>
                 Organizer: {eventsList[eventID]?.organizer || ""}
               </div> */}
@@ -152,7 +186,7 @@ export default function Page({ params }: { params: { categoryname: string } }) {
                     {eventsList[eventID]?.venue_name || "TBA"}
                   </div>
                 </div>
-                <div className={styles.eventContact}>
+                <div className={styles.eventContact} ref={contactRef}>
                   Contact: {eventsList[eventID]?.contact || "N/A"}
                 </div>
                 <div className={styles.carouselControl}>
@@ -230,6 +264,7 @@ export default function Page({ params }: { params: { categoryname: string } }) {
                       ? `${styles.longDescription}`
                       : ""
                   }`}
+                  ref={descriptionRef}
                 >
                   {eventsList[eventID]?.about}
                 </div>

diff --git a/app/events/events.module.scss b/app/events/events.module.scss
@@ -100,8 +100,13 @@
     width: 90%;
     justify-content: center;
     align-items: center;
+    // overflow-y: scroll;
 
-    @media (width<550px) {
+    // @media (width<550px) {
+    //   width: auto;
+    // }
+
+    @media(width<1650px) {
       width: auto;
     }
 
@@ -111,13 +116,10 @@
       gap: 4rem;
       align-items: center;
       justify-content: center;
+      position: relative;
       @media(width<1760px){
         gap: 0;
       }
-      @media (width<550px) {
-        gap: 0rem;
-        // transform: scale(0.8) translateY(-10%);
-      }
 
       .box {
         display: flex;
@@ -138,8 +140,8 @@
             transform: scale(1);
           }
         }
-        @media (width<1610px) {
-          transform: scale(0.9);
+        @media (width<1650px) {
+          transform: scale(0.8);
           &:hover {
             transform: scale(1);
           }

diff --git a/app/events/page.tsx b/app/events/page.tsx
@@ -23,7 +23,7 @@ import musicbg from "../../assets/Events/Folders/musicbg.png";
 import quizbg from "../../assets/Events/Folders/quizbg.png";
 import dramabg from "../../assets/Events/Folders/dramabg.png";
 import dancebg from "../../assets/Events/Folders/dancebg.png";
-import fashionbg from "../../assets/Events/Folders/fashionbg.png";
+import miscbg from "../../assets/Events/Folders/miscbg.png";
 import camerabg from "../../assets/Events/Folders/camerabg.png";
 import PrePreloader from "@/components/PreloaderProMax/PreloaderProMax";
 import CursorEffect from "@/components/CursorEffect/CursorEffect";
@@ -125,9 +125,9 @@ export default function EventsPage() {
         router.push("/");
       }
     }
-    document.body.style.overflow = "hidden";
+    document.body.style.overflowY = "scroll";
+    document.body.style.overflowX = "hidden";
   }, []);
-
 
   return (
     <>
@@ -262,14 +262,14 @@ export default function EventsPage() {
                 <Image src={dancebg} alt="music" width={484} height={300} />
               </div>
             </Link>
-            <Link href="/events/fashion">
+            <Link href="/events/photography">
               <div className={styles.box}>
-                <Image src={fashionbg} alt="music" width={484} height={300} />
+                <Image src={camerabg} alt="music" width={484} height={300} />
               </div>
             </Link>
-            <Link href="/events/photography">
+            <Link href="/events/misc">
               <div className={styles.box}>
-                <Image src={camerabg} alt="music" width={484} height={300} />
+                <Image src={miscbg} alt="music" width={484} height={300} />
               </div>
             </Link>
           </div>
@@ -303,9 +303,9 @@ export default function EventsPage() {
               className={styles.mobileimg}
             />
           </Link>
-          <Link href="/events/fashion">
+          <Link href="/events/photography">
             <Image
-              src={fashionmobile}
+              src={cameramobile}
               alt="music"
               width={312}
               height={132}
@@ -321,9 +321,9 @@ export default function EventsPage() {
               className={styles.mobileimg}
             />
           </Link>
-          <Link href="/events/photography">
+          <Link href="/events/misc">
             <Image
-              src={cameramobile}
+              src={fashionmobile}
               alt="music"
               width={312}
               height={132}

diff --git a/app/globals.css b/app/globals.css
@@ -12,6 +12,7 @@
     margin: 0;
     padding: 0;
     -webkit-tap-highlight-color: transparent;
+    user-select: none;
 }
 
 body {

diff --git a/app/shows/loading.tsx b/app/shows/loading.tsx
@@ -2,4 +2,4 @@ import Preloader from "@/components/Preloader/Preloader";
 
 export default function LoadingPage() {
   return <Preloader />;
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,4 @@ import Preloader from "@/components/Preloader/Preloader"; @@
     export default function LoadingPage() {
       return <Preloader />;
-    }
+    }