Merge branch 'main' into prod

app/shows/page.tsx

@@ -8,6 +8,7 @@ import grunge from "@/assets/Landing/Grunge.png";
 import sm from "@/public/ProfShow/goat.png";
 import vm from "@/public/ProfShow/vishalmishra.png";
 import tyd from "@/public/ProfShow/theyellowdiaries.png";
+import n2o from "@/public/ProfShow/n2o.png";
 import gif1 from "@/public/ProfShow/gif1.gif";
 import { useRouter } from "next/navigation";
 import CursorEffect from "@/components/CursorEffect/CursorEffect";
@@ -32,6 +33,12 @@ const eventDetails = [
     date: "October 26",
     image: vm,
   },
+  {
+    title: "N2O",
+    name: "N2O",
+    date: "October 27",
+    image: n2o,
+  },
 ];
 
 const Shows = () => {
@@ -48,7 +55,7 @@ const Shows = () => {
     document.body.style.overflow = "hidden";
   }, []);
 
-  const [eventID, setEventID] = useState(0);
+  const [eventID, setEventID] = useState(3);
   const [progressKey, setProgressKey] = useState(0);
   const [loading, setLoading] = useState(true);
 
@@ -114,13 +121,13 @@ const Shows = () => {
     return () => clearTimeout(timer);
   }, []);
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      animate();
-    }, 10000);
+  // useEffect(() => {
+  //   const timer = setTimeout(() => {
+  //     animate();
+  //   }, 10000);
 
-    return () => clearTimeout(timer);
-  }, [eventID, progressKey]);
+  //   return () => clearTimeout(timer);
+  // }, [eventID, progressKey]);
 
   const handleArrowClick = (direction: string) => {
     gsap.to(
@@ -200,9 +207,19 @@ const Shows = () => {
             <div className={styles.darkScreen} />
             <div className={styles.pageContent}>
               <div className={styles.eventName} ref={eventNameRef}>
-                {eventDetails[eventID].name.split(" ").slice(0, -1).join(" ")}
-                <br />
-                {eventDetails[eventID].name.split(" ").slice(-1)}
+                {eventDetails[eventID].name.split(" ").length > 1 ? (
+                  <>
+                    {eventDetails[eventID].name
+                      .split(" ")
+                      .slice(0, -1)
+                      .join(" ")}
+                    <br />
+                    {eventDetails[eventID].name.split(" ").slice(-1)}
+                  </>
+                ) : (
+                  eventDetails[eventID].name
+                )}
+
                 <div
                   className={`${styles.eventDate} ${
                     styles[`eventDate${eventID}`]

app/shows/profshow.module.scss

@@ -365,6 +365,86 @@
     }
   }
 
+  .eventImage3 {
+    left: -50%;
+    top: -40%;
+    scale: 0.7;
+
+    @media screen and (max-width: 4000px) {
+      aspect-ratio: 943;
+      width: 4097px;
+      height: 2700px;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 12.5%;
+    }
+
+    @media screen and (max-width: 3000px) {
+      aspect-ratio: 943;
+      width: 2784px;
+      height: 2199.6px;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 12.5%;
+    }
+
+    @media screen and (max-width: 2200px) {
+      aspect-ratio: 943;
+      width: 2320.8px;
+      height: 1833.6px;
+      transform: translate(-50%, -62.5%);
+      top: 50%;
+      left: 12.5%;
+    }
+
+    @media screen and (max-width: 1940px) {
+      aspect-ratio: 943;
+      width: 1934.4px;
+      height: 1528px;
+      transform: translate(-50%, -62.5%);
+      top: 50%;
+      left: 12.5%;
+    }
+
+    @media screen and (max-width: 1600px) {
+      scale: 0.6;
+      left: 0;
+    }
+
+    @media screen and (max-width: 1460px) {
+      scale: 0.5;
+      aspect-ratio: 943;
+      width: 1597.8px;
+      height: 1260px;
+      transform: translate(-50%, -75.5%);
+      top: 50%;
+      left: -5%;
+    }
+
+    @media screen and (max-width: 1200px) {
+      scale: 0.4;
+      transform: translate(-50%, -75%);
+      left: -25%;
+    }
+
+    @media screen and (max-width: 960px) {
+      display: none;
+      aspect-ratio: 799/527;
+      width: 1198px;
+      height: 791px;
+      scale: unset;
+      transform: translate(-50%, -25%);
+      top: 50%;
+      left: 50%;
+    }
+
+    @media screen and (max-width: 600px) {
+      width: 799px;
+      height: 527px;
+      transform: translate(-50%, 0%);
+    }
+  }
+
   .eventSelector {
     position: absolute;
     right: 10.6875rem;