diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 42da9c85..af0cba5e 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -34,11 +34,12 @@ export default function ContactUs() { const contactCard1Ref = useRef(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() {
- +
diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss index 4c742206..e38dac31 100644 --- 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 index 74455993..12a2a584 100644 --- 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,