diff --git a/app/about/page.tsx b/app/about/page.tsx index c6531496..d62a7474 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -21,7 +21,7 @@ export default function About() {
- + {/* */} diff --git a/app/archive/page.tsx b/app/archive/page.tsx index 8f743e64..cac73474 100644 --- a/app/archive/page.tsx +++ b/app/archive/page.tsx @@ -152,7 +152,7 @@ export default function GalleryPage() {
- + {/* */} diff --git a/app/articles/page.tsx b/app/articles/page.tsx index 4b0aed4a..fbbe9f70 100644 --- a/app/articles/page.tsx +++ b/app/articles/page.tsx @@ -53,7 +53,7 @@ const Articles: React.FC = () => {
- + {/* */} diff --git a/app/brochure/page.tsx b/app/brochure/page.tsx index f21a5344..7789ae4f 100644 --- a/app/brochure/page.tsx +++ b/app/brochure/page.tsx @@ -19,7 +19,7 @@ export default function Brochure() {
- + {/* */} diff --git a/app/contact/contact.module.scss b/app/contact/contact.module.scss index 4bdc2b46..23e3a07c 100644 --- a/app/contact/contact.module.scss +++ b/app/contact/contact.module.scss @@ -10,6 +10,7 @@ z-index: 100; top: 30px; left: 20px; + z-index: 15; @media(width>1920px){ transform: scale(1.3); left: 40px; diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 51108011..6bee6349 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -201,7 +201,7 @@ export default function ContactUs() {
- + {/* */} diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss index 3c173560..945241aa 100644 --- a/app/events/[categoryname]/categories.module.scss +++ b/app/events/[categoryname]/categories.module.scss @@ -335,7 +335,6 @@ .eventImage { width: 100%; height: 100%; - filter: brightness(200%); user-select: none; box-shadow: 0px 0px 20px 4px #cbae5780; background-color: #110e16; diff --git a/app/events/[categoryname]/page.tsx b/app/events/[categoryname]/page.tsx index 89142411..d817973b 100644 --- a/app/events/[categoryname]/page.tsx +++ b/app/events/[categoryname]/page.tsx @@ -204,7 +204,11 @@ export default function Page({ params }: { params: { categoryname: string } }) {
1920px) { transform: scale(1.3); left: 40px; diff --git a/app/events/page.tsx b/app/events/page.tsx index 8270e119..64b83a19 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useState, useRef } from "react"; +import React, { useState, useRef, useEffect } from "react"; import styles from "./events.module.scss"; import Folder from "@/components/Events/Folder/Folder"; import Category from "@/components/Events/Category/Category"; @@ -34,6 +34,8 @@ import BackButton from "@/components/Registration/BackButton/BackButton"; import Link from "next/link"; import RegBtn from "@/components/Landing/Navbar/RegBtn/RegBtn"; import Image from "next/image"; +import gsap from "gsap"; +import { useGSAP } from "@gsap/react"; export default function EventsPage() { const [category, setCategory] = useState(""); @@ -49,78 +51,75 @@ export default function EventsPage() { setCategory(""); } - return ( - //
- //
- //

EVENTS

- //
+ const eventrowRef: any = useRef(null); + + useGSAP( + () => { + const tl = gsap.timeline(); - //
- // handleSelect("dance")} - // > - // Dance - // - // handleSelect("music")} - // > - // Music - // - // handleSelect("quizzes")} - // > - // Quizzes - // - // handleSelect("photography")} - // > - // Photography - // - // handleSelect("drama")} - // > - // Drama - // - // handleSelect("fashion")} - // > - // Fashion - // + // if(eventrowRef) - //
- //
- //

Please select a category

- //
+ tl.from(eventrowRef.current.children[0], { + scale: 0, + duration: 0.5, + ease: "power2.out", + delay: 0.5, + }) + .from( + eventrowRef.current.children[1], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ) + .from( + eventrowRef.current.children[2], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ) + .from( + eventrowRef.current.children[3], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ) + .from( + eventrowRef.current.children[4], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ) + .from( + eventrowRef.current.children[5], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ); + }, + { dependencies: [] } + ); - // {isModalOpen && ( - //
- // - //
- // )} - //
+ return ( <>
- + {/* */} @@ -164,36 +163,6 @@ export default function EventsPage() {
- {/*
- - - - - - -
*/}
@@ -257,310 +226,38 @@ export default function EventsPage() {
-
+
music - - {/* - - - - - - - -
- music -

MUSIC

*/}
music - {/* - - - - - - - -
- music -

QUIZ

*/}
music - {/* - - - - - - - -
- music -

DRAMA

*/}
music - {/* - - - - - - - -
- music -

DANCE

*/}
music - {/* - - - - - - - -
- music -

FASHION

*/}
music - {/* - - - - - - - -
- music -

PHOTO

-

GRAPHY

*/}
- {/*
-
- - - - - - - - -
- music -

DANCE

-
-
- - - - - - - - -
- music -

FASHION

-
-
- - - - - - - - -
- music -

PHOTO

-

GRAPHY

-
-
*/}
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx index 7350353e..9a183937 100644 --- a/app/gallery/page.tsx +++ b/app/gallery/page.tsx @@ -75,7 +75,7 @@ const Gallery: React.FC = () => { <>
- + {/* */} diff --git a/app/landing.module.scss b/app/landing.module.scss index c5feb56f..92cd6e36 100644 --- a/app/landing.module.scss +++ b/app/landing.module.scss @@ -61,7 +61,7 @@ width: 100vw; height: 100lvh; top: 0; - z-index: 0; + z-index: -100000; } } diff --git a/app/page.tsx b/app/page.tsx index f8069c85..4c265cac 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -15,51 +15,48 @@ import MobileLanding from "@/components/MobileLanding/MobileLanding/MobileLandin import Sidenav from "@/components/Sidenav/Sidenav"; import Image from "next/image"; -import locationIcon from '@/assets/MobileLanding/locationIcon.svg' +import locationIcon from "@/assets/MobileLanding/locationIcon.svg"; export default function Home() { - return ( - <> - - -
- -
-
- {/*
-
-
- - - - - - -
-
- - - location icon - - - -
- - - -
-
-
- {/**/} - - ); + return ( + <> + + +
+ +
+
+ {/*
+
+
+ + + + {/* */} + + +
+
+ + + location icon + + + +
+ + {/* */} + +
+
+
+ {/**/} + + ); } diff --git a/app/shows/page.tsx b/app/shows/page.tsx index ced54acf..c9745f4f 100644 --- a/app/shows/page.tsx +++ b/app/shows/page.tsx @@ -11,6 +11,7 @@ import tyd from "@/public/ProfShow/theyellowdiaries.png"; import gif1 from "@/public/ProfShow/gif1.gif"; import { useRouter } from "next/navigation"; import CursorEffect from "@/components/CursorEffect/CursorEffect"; +import Preloader from "@/components/Preloader/Preloader"; const eventDetails = [ { @@ -49,6 +50,7 @@ const Shows = () => { const [eventID, setEventID] = useState(0); const [progressKey, setProgressKey] = useState(0); + const [loading, setLoading] = useState(true); const eventNameRef = useRef(null); const eventDateRef = useRef(null); @@ -89,6 +91,29 @@ const Shows = () => { ); }; + const eventImages = eventDetails.map((event, index) => ( +
+ {event.name} +
+ )); + + useEffect(() => { + const timer = setTimeout(() => { + setLoading(false); + }, 2000); + + return () => clearTimeout(timer); + }, []); + useEffect(() => { const timer = setTimeout(() => { animate(); @@ -136,122 +161,114 @@ const Shows = () => { return ( <> - {/* */} - -
- grunge effect -
- - - - - -
- gif -
-
-
- {eventDetails[eventID].name.split(" ").slice(0, -1).join(" ")} -
- {eventDetails[eventID].name.split(" ").slice(-1)} -
- {eventDetails[eventID].date} -
-
- {eventDetails.map((event, index) => ( -
- {event.name} -
- ))} -
- handleArrowClick("left")} - > - - - - - -
- {eventDetails[eventID].title} + {loading ? ( + + ) : ( + <> + +
+ grunge effect +
+ + + + +
- handleArrowClick("right")} - > - - - - - -
-
+ gif +
+
+
+ {eventDetails[eventID].name.split(" ").slice(0, -1).join(" ")} +
+ {eventDetails[eventID].name.split(" ").slice(-1)} +
+ {eventDetails[eventID].date} +
+
+ {eventImages} +
+ handleArrowClick("left")} + > + + + + + +
+ {eventDetails[eventID].title} +
+ handleArrowClick("right")} + > + + + + + +
+
+
+
-
-
+ + )} ); }; diff --git a/components/Landing/Grid/Grid.tsx b/components/Landing/Grid/Grid.tsx index 190e8326..8a482ac8 100644 --- a/components/Landing/Grid/Grid.tsx +++ b/components/Landing/Grid/Grid.tsx @@ -4,178 +4,170 @@ export default function Grid() { return (
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
); diff --git a/components/Landing/Navbar/HamBtn/Btn.tsx b/components/Landing/Navbar/HamBtn/Btn.tsx index 0289872c..844548f0 100644 --- a/components/Landing/Navbar/HamBtn/Btn.tsx +++ b/components/Landing/Navbar/HamBtn/Btn.tsx @@ -46,7 +46,7 @@ export default function HamBtn() { ? 1 : window.innerWidth > 900 ? 0.8 - : 0.65, + : 0.7, }) .to( pokerChipRef.current, @@ -102,7 +102,7 @@ export default function HamBtn() { y: "0", x: "0", duration: 0.5, - scale: 1, + scale: 0.7, }) .to( pokerChipRef.current, diff --git a/components/Landing/Navbar/HamBtn/btn.module.scss b/components/Landing/Navbar/HamBtn/btn.module.scss index c7ac9eae..4368d114 100644 --- a/components/Landing/Navbar/HamBtn/btn.module.scss +++ b/components/Landing/Navbar/HamBtn/btn.module.scss @@ -86,7 +86,7 @@ } @media (width <= 900px) { - transform: scale(0.55); + transform: scale(0.7); } // @media (width <= 585px) { diff --git a/components/MobileLanding/Artist/Artist.tsx b/components/MobileLanding/Artist/Artist.tsx index 4a6da926..3d9467a3 100644 --- a/components/MobileLanding/Artist/Artist.tsx +++ b/components/MobileLanding/Artist/Artist.tsx @@ -2,6 +2,10 @@ import styles from "./artist.module.scss"; import { StaticImport } from "next/dist/shared/lib/get-img-props"; import Image from "next/image"; import MusicSection from "./MusicButtons/MusicButton"; +import { useGSAP } from "@gsap/react"; +import { useRef } from "react"; +import gsap from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; interface Props { reverse: boolean; @@ -13,6 +17,8 @@ interface Props { spotifyUrl: string; } +gsap.registerPlugin(ScrollTrigger); + export default function Artist({ reverse, image, @@ -22,9 +28,41 @@ export default function Artist({ artist, spotifyUrl, }: Props) { + const artistRef: any = useRef(null); + useGSAP( + () => { + const tl = gsap.timeline({ + scrollTrigger: { + trigger: artistRef.current, + markers: false, + toggleActions: "play none none none", + start: "top 70%", + }, + }); + + console.log(artistRef.current); + console.dir(artistRef.current); + + tl.from(artistRef.current.children[0], { + xPercent: reverse ? 250 : -250, + duration: 0.5, + }).from( + // artistRef.current.children[1].children, + artistRef.current.children[1], + { + xPercent: reverse ? -250 : 250, + duration: 0.5, + // stagger: 0.2, + }, + "-=0.25" + ); + }, + { dependencies: [] } + ); return (