Merge branch 'main' into prod

dvm-bitspilani · Oct 16, 2024 · fd5934f · fd5934f
2 parents 078d0bb + 30cef9b
commit fd5934f
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 11 deletions.
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -34,11 +34,12 @@ export default function ContactUs() {
   const contactCard1Ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    
-    if (!localStorage.getItem("firstVisit")) {
-      localStorage.setItem("firstVisit", "true");
-      window.location.reload(); 
+
+    if (!localStorage.getItem('hasReloaded')) {
+      localStorage.setItem('hasReloaded', 'true');
+      window.location.reload();
     }
+
     const container = contactCardRef.current;
     const container1 = contactCard1Ref.current;
 
@@ -188,6 +189,10 @@ export default function ContactUs() {
       }
     }
   }, []);
+
+  const handleBackButtonClick = () => {
+    localStorage.removeItem('hasReloaded');
+  };
 
   return (
     <>
@@ -201,7 +206,7 @@ export default function ContactUs() {
       </div>
 
       <div className={styles.ham}>
-        <Link href="/">
+        <Link href="/" onClick={handleBackButtonClick}>
           <BackButton />
         </Link>
       </div>

diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss
@@ -100,8 +100,14 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    width: calc(100vw - 16rem);
-    height: calc(100vh - 16rem);
+    width: calc(100vw - 11.3rem);
+    height: calc(100vh - 11.3rem);
+
+    @media screen and (max-height: 900px) and (min-width: 1149px) {
+      padding: 5.625rem 5.625rem 2rem;
+      width: calc(100vw - 11.3rem);
+      height: calc(100vh - 7.625rem);
+    }
 
     @media screen and (max-width: 1148px) {
       flex-direction: column;
@@ -131,6 +137,10 @@
 
         margin-top: 9.625rem;
 
+        @media screen and (max-height: 900px) and (min-width: 1149px) {
+          margin-top: 5.625rem;
+        }
+
         @media screen and (max-width: 1400px) {
           font-size: 100px;
           line-height: 70px;
@@ -143,6 +153,12 @@
 
           text-align: center;
         }
+
+        @media screen and (max-width: 600px) {
+          font-size: 40px;
+          line-height: 50px;
+          margin-top: 50px;
+        }
       }
       .eventSubTitle {
         margin: 20px 0;
@@ -233,7 +249,7 @@
         @media screen and (max-width: 1148px) {
           position: fixed;
           left: 50%;
-          bottom: 5rem;
+          bottom: 1rem;
           transform: translateX(-50%);
         }
         .leftButton,
@@ -337,7 +353,12 @@
         line-height: 45px; /* 160.714% */
         letter-spacing: 0.56px;
 
-        @media screen and (max-width: 1400px) {
+        @media screen and (max-height: 900px) {
+          font-size: 14px;
+          line-height: 16px;
+        }
+
+        @media screen and (max-width: 1400px) and (min-height: 900px) {
           font-size: 20px;
           line-height: 30px;
         }

diff --git a/app/shows/page.tsx b/app/shows/page.tsx
@@ -54,7 +54,32 @@ const Shows = () => {
   const eventImageRef = useRef(null);
   const eventTitleRef = useRef(null);
 
-  const animate = () => {
+  const preloadImage = (src: string) => {
+    return fetch(src)
+      .then((res) => {
+        if (!res.ok) throw new Error(`Failed to load image: ${src}`);
+        return res.blob();
+      })
+      .then(() => {
+        // Image preloaded successfully
+        console.log(`Image preloaded: ${src}`);
+      })
+      .catch((error) => {
+        console.error(`Error preloading image: ${error}`);
+      });
+  };
+
+  const animate = async () => {
+    const nextID = (eventID + 1) % eventDetails.length;
+
+    try {
+      // Preload the next image before animation
+      await preloadImage(eventDetails[nextID].image.src);
+    } catch (error) {
+      console.error("Failed to preload image", error);
+    }
+
+    // After the image is preloaded, run the GSAP animation
     const tl = gsap.timeline();
     tl.to(
       [
@@ -67,8 +92,9 @@ const Shows = () => {
         opacity: 0,
         duration: 0.5,
         onComplete: () => {
-          setEventID((prevID) => (prevID + 1) % eventDetails.length);
+          setEventID(nextID);
           setProgressKey((prevKey) => prevKey + 1);
+
           gsap.to(
             [
               eventNameRef.current,