Merge branch 'main' into prod

dvm-bitspilani · Oct 17, 2024 · ddce9a2 · ddce9a2
2 parents 81cd15d + 7a30650
commit ddce9a2
Show file tree

Hide file tree

Showing 22 changed files with 331 additions and 76 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/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/dev/DevPage.tsx b/app/dev/DevPage.tsx
@@ -0,0 +1,3 @@
+export default function DevPage() {
+  return <h1>Hello</h1>;
+}
diff --git a/app/dev/dev.module.scss b/app/dev/dev.module.scss
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);
             }
           }
         }
@@ -311,6 +312,17 @@
             }
           }
         }
+
+        .leftButton {
+          svg {
+            transform: translate(-57.5%, -50%);
+          }
+        }
+        .rightButton {
+          svg {
+            transform: translate(-42.5%, -50%);
+          }
+        }
       }
     }
     .rightContent {
@@ -335,13 +347,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 +396,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,13 +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";
+import gsap from "gsap";
 
 const categories = [
   "music",
@@ -25,6 +26,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) {
@@ -61,14 +67,54 @@ export default function Page({ params }: { params: { categoryname: string } }) {
     }
   }, []);
 
+  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 +170,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 +198,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 +276,7 @@ export default function Page({ params }: { params: { categoryname: string } }) {
                       ? `${styles.longDescription}`
                       : ""
                   }`}
+                  ref={descriptionRef}
                 >
                   {eventsList[eventID]?.about}
                 </div>

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 />;
-}
+}
diff --git a/components/Events/Loader/Loader.module.scss b/components/Events/Loader/Loader.module.scss
@@ -1,6 +1,10 @@
 .loaderContainer {
   position: relative;
 
+  @media screen and (max-width: 600px) {
+    scale: 0.5;
+  }
+
   .pokerchip {
     position: absolute;
     top: 50%;

diff --git a/components/Landing/Navbar/HamBtn/Btn.tsx b/components/Landing/Navbar/HamBtn/Btn.tsx
@@ -150,10 +150,10 @@ export default function HamBtn() {
     } else {
       if (window.innerWidth > 585) {
         tl.to(BtnRef.current, {
-          y: `${window.innerHeight / 2 - 50}`,
+          y: `${window.innerHeight / 2 - 100}`, // earlier it was -50
           x: "-50%",
           duration: 0.5,
-          scale: window.innerWidth > 1200 ? 8.9 : 6,
+          scale: window.innerWidth > 1200 ? 8 : 6, // earlier it was 8.9
         })
           .to(
             pokerChipRef.current,
@@ -301,6 +301,14 @@ export default function HamBtn() {
 
   return (
     <>
+      {isHamOpen && (
+        <div className={styles.madeWith} >
+          <a href="https://bits-dvm.org" target="_main">
+            Made with <span> ❤️ </span>by DVM
+          </a>
+        </div>
+      )}
+
       <div className={styles.hamOverlay} ref={overlayRef} />
       <div
         className={styles.btn}

diff --git a/components/Landing/Navbar/HamBtn/btn.module.scss b/components/Landing/Navbar/HamBtn/btn.module.scss
@@ -1,3 +1,46 @@
+.madeWith {
+  position: fixed;
+  z-index: 500000;
+  bottom: 10px;
+  display: flex;
+  justify-content: center;
+  left: 50%;
+
+  a {
+    text-align: center;
+    transform: translate( -50%, 0%);
+    pointer-events: all;
+    cursor: pointer;
+    text-decoration: none;
+    font-family: "Source Serif 4", sans-serif;
+    font-size: 25px;
+    font-style: normal;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 0.04em;
+    line-height: normal;
+
+    span {
+      padding: 0 7px;
+      height: 25px;
+      background: linear-gradient(
+        112.17deg,
+        #EDCF89 25.95%,
+        #EDCF89 44.71%,
+        #EDCF89 72.61%
+      );
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
+
+@media(max-width: 800px) {
+  .madeWith {
+    display: none;
+  }
+}
+
 .hamOverlay {
   opacity: 0;
   position: fixed;

diff --git a/components/Landing/Scene/Scene.tsx b/components/Landing/Scene/Scene.tsx
@@ -5,15 +5,7 @@ import { Canvas } from "@react-three/fiber";
 import { SlotMachine2 } from "./SlotMachine2";
 import { forwardRef, useEffect, useState } from "react";
 
-function detectAppleDevice() {
-  const userAgent = navigator.userAgent.toLowerCase();
-
-  return (
-    userAgent.includes("iphone") ||
-    userAgent.includes("ipad") ||
-    userAgent.includes("ipod")
-  );
-}
+import { detectAppleDevice } from "@/helper/detectAppleDevice";
 
 interface Props {
   setIs3dLoaded: (value: boolean) => void;
@@ -41,11 +33,6 @@ const LandingScene = forwardRef(function LandingScene(
   }: Props,
   ref
 ) {
-  const [isAppleDevice, setIsAppleDevice] = useState<any>(false);
-
-  useEffect(() => {
-    setIsAppleDevice(detectAppleDevice());
-  }, []);
   return (
     <>
       <Canvas
@@ -72,7 +59,6 @@ const LandingScene = forwardRef(function LandingScene(
             isVideoFocused={isVideoFocused}
             isEvents={isEvents}
             isAboutUs={isAboutUs}
-            isIos={isAppleDevice}
           />
         </group>
       </Canvas>

diff --git a/components/Landing/Scene/SlotMachine2.tsx b/components/Landing/Scene/SlotMachine2.tsx
@@ -40,7 +40,6 @@ interface Props {
   isVideoFocused: boolean;
   isEvents: boolean;
   isAboutUs: boolean;
-  isIos: boolean;
 }
 
 const rotationPropArray: Euler | undefined = [0.4510000000000003, 0, 0];
@@ -53,7 +52,6 @@ export const SlotMachine2 = forwardRef(function SlotMachine2(
     isVideoFocused,
     isEvents,
     isAboutUs,
-    isIos,
     ...props
   }: Props,
   ref: any
@@ -247,7 +245,7 @@ export const SlotMachine2 = forwardRef(function SlotMachine2(
           >
             <Html
               transform
-              wrapperClass={isIos ? "htmlScreenIos" : "htmlScreen"}
+              wrapperClass="htmlScreen"
               distanceFactor={0.31000000000000005}
               rotation={rotationPropArray}
             >
-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 />;
-    }
+    }