From 8a58082aa9b17ea43c36a8a401c01fdb64d2978b Mon Sep 17 00:00:00 2001
From: iteerP <preetigobindpuri02@gmail.com>
Date: Sun, 13 Apr 2025 20:29:25 -0700
Subject: [PATCH 01/11] decreased duration for animations

---
 .../landing-page/(AboutSectionComponents)/FlyingHusky.tsx   | 6 +++---
 .../landing-page/(AboutSectionComponents)/Panel/Content.tsx | 5 +++--
 .../landing-page/(AboutSectionComponents)/Panel/Header.tsx  | 3 ++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx b/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx
index 990ba605..24a99ea7 100644
--- a/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx
@@ -15,8 +15,8 @@ export default function FlyingHusky() {
         });
 
         gsap.to(".flyingHusky", {
-            delay: 0.8,
-            duration: 1.5,
+            delay: 0.35,
+            duration: 1,
             x: 0,
             y: 0,
             rotation: 0,
@@ -40,7 +40,7 @@ export default function FlyingHusky() {
         });
 
         gsap.to(".flyingHusky", {
-            delay: 2,
+            delay: 1.35,
             repeat: -1,
             duration: 2.25,
             ease: "linear",
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
index cffdc22f..0d0c462a 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
@@ -24,14 +24,15 @@ export default function PanelContent({
         gsap.set(panelContent, { scale: 0.1, opacity: 0 });
 
         gsap.to(panelContent, {
-            delay: 0.4,
+            delay: 0.2,
             scale: 1,
             opacity: 1,
-            duration: 0.3,
+            duration: 0.15,
             ease: "power2.in",
             scrollTrigger: {
                 trigger: panelContent,
                 start: "70% 90%",
+                markers: true,
             },
         });
     }, []);
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
index 957fb2af..a0faedbb 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
@@ -28,12 +28,13 @@ export default function PanelHeader({
             gsap.set(header, { y: "-100%" });
 
             const animation = gsap.to(header, {
-                duration: 0.4,
+                duration: 0.2,
                 ease: "power2.out",
                 y: 0,
                 scrollTrigger: {
                     trigger: header,
                     start: "bottom 65%",
+                    markers: true,
                 },
             });
 

From 6eed3ee41a4cc064048170cd1490aeadbe196d09 Mon Sep 17 00:00:00 2001
From: pgobin <pgobin@uw.edu>
Date: Sun, 13 Apr 2025 21:46:32 -0700
Subject: [PATCH 02/11] added id to Panel container component to allow for more
 consistent Panel Header and Content animation triggers

---
 .../(AboutSectionComponents)/Panel/Content.tsx      | 13 +++++++------
 .../(AboutSectionComponents)/Panel/Header.tsx       |  9 +++++----
 .../(AboutSectionComponents)/Panel/Panel.tsx        |  3 +++
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
index 0d0c462a..49bfffd6 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
@@ -6,11 +6,13 @@ import ScrollTrigger from "gsap/ScrollTrigger";
 gsap.registerPlugin(ScrollTrigger);
 
 type PanelContentProps = {
+    id: string;
     children: React.ReactNode;
     className?: string;
 };
 
 export default function PanelContent({
+    id,
     children,
     className,
 }: PanelContentProps) {
@@ -24,15 +26,14 @@ export default function PanelContent({
         gsap.set(panelContent, { scale: 0.1, opacity: 0 });
 
         gsap.to(panelContent, {
-            delay: 0.2,
+            delay: 0.3,
             scale: 1,
             opacity: 1,
-            duration: 0.15,
-            ease: "power2.in",
+            duration: 0.2,
+            ease: "power1.in",
             scrollTrigger: {
-                trigger: panelContent,
-                start: "70% 90%",
-                markers: true,
+                trigger: `#${id}`,
+                start: "30% 80%",
             },
         });
     }, []);
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
index a0faedbb..38f9d80b 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
@@ -7,6 +7,7 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 gsap.registerPlugin(ScrollTrigger);
 
 type PanelHeaderProps = {
+    id: string;
     children: React.ReactNode;
     isSectionHeader?: boolean;
     className?: string;
@@ -14,6 +15,7 @@ type PanelHeaderProps = {
 };
 
 export default function PanelHeader({
+    id,
     children,
     isSectionHeader = false,
     className,
@@ -29,12 +31,11 @@ export default function PanelHeader({
 
             const animation = gsap.to(header, {
                 duration: 0.2,
-                ease: "power2.out",
+                ease: "power1.in",
                 y: 0,
                 scrollTrigger: {
-                    trigger: header,
-                    start: "bottom 65%",
-                    markers: true,
+                    trigger: `#${id}`,
+                    start: "30% 80%",
                 },
             });
 
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Panel.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Panel.tsx
index 8c2a7b21..46d20916 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Panel.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Panel.tsx
@@ -7,6 +7,7 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 gsap.registerPlugin(ScrollTrigger);
 
 type PanelProps = {
+    id: string;
     children: React.ReactNode;
     className?: string;
     panelBackground?: string;
@@ -15,6 +16,7 @@ type PanelProps = {
 
 export default function Panel({
     children,
+    id,
     className = "",
     panelBackground,
     panelColor,
@@ -33,6 +35,7 @@ export default function Panel({
 
     return (
         <div
+            id={id}
             className={twMerge(
                 clsx(
                     "relative w-full border-black border-[3px] bg-cover bg-center overflow-hidden",

From 617588e218d201d0ed192eb0ad940ed4d74866e8 Mon Sep 17 00:00:00 2001
From: pgobin <pgobin@uw.edu>
Date: Sun, 13 Apr 2025 21:47:57 -0700
Subject: [PATCH 03/11] passed id prop to Panel components, adjusted animation
 durations and triggers

---
 .../(AboutSectionComponents)/FlyingHusky.tsx  |  8 +--
 .../FunFacts/FunFact.tsx                      |  4 +-
 src/components/landing-page/AboutSection.tsx  | 71 ++++++++++++++-----
 .../landing-page/MeetTheTeamSection.tsx       |  5 +-
 .../landing-page/ScheduleSection.tsx          |  8 ++-
 .../landing-page/SponsorsSection.tsx          |  8 ++-
 src/components/landing-page/TrackSection.tsx  |  8 ++-
 7 files changed, 79 insertions(+), 33 deletions(-)

diff --git a/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx b/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx
index 24a99ea7..4df45ef9 100644
--- a/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx
@@ -27,15 +27,15 @@ export default function FlyingHusky() {
                     { x: "-80vw", y: "40vh", rotation: "-20deg", scale: 0.75 },
                     { x: "-40vw", y: "-30vh", rotation: "10deg", scale: 0.85 },
                     { x: "-20vw", y: "-20vh", rotation: "5deg", scale: 0.9 },
-                    { x: "-10vw", y: "-10vh", rotation: 0, scale: 0.95 },
-                    { x: 0, y: 0, rotation: 0, scale: 1 },
+                    { x: "-10vw", y: "-10vh", rotation: "0deg", scale: 0.95 },
+                    { x: 0, y: 0, rotation: "0deg", scale: 1 },
                 ],
                 curviness: 1.5,
                 autoRotate: true,
             },
             scrollTrigger: {
-                trigger: ".aboutSectionContainer",
-                start: "top 80%",
+                trigger: "#aboutPanel",
+                start: "30% 80%",
             },
         });
 
diff --git a/src/components/landing-page/(AboutSectionComponents)/FunFacts/FunFact.tsx b/src/components/landing-page/(AboutSectionComponents)/FunFacts/FunFact.tsx
index 79bd2773..0272e71b 100644
--- a/src/components/landing-page/(AboutSectionComponents)/FunFacts/FunFact.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/FunFacts/FunFact.tsx
@@ -15,14 +15,14 @@ export default function FunFact({ src, alt }: FunFactProps) {
         gsap.set(".funFact", { scale: 0, rotate: 0 });
 
         gsap.to(".funFact", {
-            delay: 0.7,
+            delay: 0.2,
             stagger: 0.2,
             duration: 0.35,
             ease: "bounce",
             scale: 1,
             scrollTrigger: {
                 trigger: "#funFactsContainer",
-                start: "65% 90%",
+                start: "30% 80%",
             },
         });
     }, []);
diff --git a/src/components/landing-page/AboutSection.tsx b/src/components/landing-page/AboutSection.tsx
index 2b9ac714..fcda8e08 100644
--- a/src/components/landing-page/AboutSection.tsx
+++ b/src/components/landing-page/AboutSection.tsx
@@ -20,9 +20,6 @@ import FunFact from "./(AboutSectionComponents)/FunFacts/FunFact";
 // For Hackeroons Panel
 import HackeroonCarousel from "./(AboutSectionComponents)/HackeroonCarousel/Carousel";
 
-// for Leaderboard panel
-// import LeaderboardRecord from "./(AboutSectionComponents)/LeaderboardRecord";
-
 // For Last Years Winners panel
 import LastYearsWinnersRecord from "./(AboutSectionComponents)/LastYearsWinnersRecord";
 import { Prize } from "@/src/util/dataTypes";
@@ -36,13 +33,15 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
         <section>
             {/* UWBHacks About Container */}
             <Panel
-                className={`${panelMargin} aboutSectionContainer`}
+                id="aboutPanel"
+                className={`${panelMargin}`}
                 panelBackground={
                     "/about/backgrounds/AboutSection_Background_1.jpg"
                 }
             >
                 {/* UWBHacks About Section Header */}
                 <PanelHeader
+                    id="aboutPanel"
                     as="h2"
                     isSectionHeader
                     className="z-[5] lg:absolute"
@@ -51,7 +50,10 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                 </PanelHeader>
 
                 {/* UWBHacks About Section Content */}
-                <PanelContent className="z-[5] flex flex-col md:flex-row justify-center items-center gap-x-8 gap-y-4 overflow-hidden">
+                <PanelContent
+                    id="aboutPanel"
+                    className="z-[5] flex flex-col md:flex-row justify-center items-center gap-x-8 gap-y-4 overflow-hidden"
+                >
                     <FlyingHusky />
 
                     {/* UWBHacks About Section Description */}
@@ -90,9 +92,13 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
             </Panel>
 
             {/* Previous UWBHacks Fun Statistics Container */}
-            <Panel className={`w-full border-none ${panelMargin}`}>
+            <Panel
+                id="funFactsPanel"
+                className={`w-full border-none ${panelMargin}`}
+            >
                 <div className="flex justify-center">
                     <PanelHeader
+                        id="funFactsPanel"
                         as="h2"
                         className="font-h1 text-white bg-transparent border-none p-0"
                     >
@@ -124,16 +130,20 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
 
             {/* UWB ACM Description Container */}
             <Panel
+                id="uwbacmDescriptionPanel"
                 className={`mt-12 md:mt-16 ${panelMargin}`}
                 panelBackground="/about/backgrounds/AboutSection_Background_2.jpg"
             >
                 {/* UWBHacks ACM Description Header */}
-                <PanelHeader as="h2">
+                <PanelHeader id="uwbacmDescriptionPanel" as="h2">
                     UWB Association for Computing Machinery
                 </PanelHeader>
 
                 {/* UWB ACM Description Content */}
-                <PanelContent className="flex justify-center items-center">
+                <PanelContent
+                    id="uwbacmDescriptionPanel"
+                    className="flex justify-center items-center"
+                >
                     <div className="z-[5] w-4/5 md:w-3/4 lg:w-3/5 flex flex-col xl:flex-row xl:gap-x-4 self-center p-6 bg-white border-2 border-black">
                         <p className="font-semibold text-center md:text-left">
                             UWB ACM is a chapter of the Association of Computing
@@ -169,13 +179,16 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
             <div className={`w-full grid md:grid-cols-2 gap-8 ${panelMargin}`}>
                 {/* Month of Hacking */}
                 <Panel
+                    id="monthOfHackingPanel"
                     panelBackground={
                         "/about/backgrounds/AboutSection_Background_3.jpg"
                     }
                     className="flex flex-col justify-between"
                 >
-                    <PanelHeader as="h2">Month of Hacking</PanelHeader>
-                    <PanelContent>
+                    <PanelHeader id="monthOfHackingPanel" as="h2">
+                        Month of Hacking
+                    </PanelHeader>
+                    <PanelContent id="monthOfHackingPanel">
                         <p className="text-center font-bold md:text-lg">
                             In{" "}
                             <span className="font-h1 text-blue-700 tracking-wider px-[2px] text-xl md:text-2xl">
@@ -197,13 +210,19 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                     </PanelContent>
                 </Panel>
 
-                {/* Last Year's Prizes */}
+                {/* Last Year's Winners */}
                 <Panel
+                    id="lastYearsWinnersPanel"
                     className="flex flex-col"
                     panelBackground="/about/backgrounds/AboutSection_Background_4.jpg"
                 >
-                    <PanelHeader as="h2">Last Year&apos;s Projects</PanelHeader>
-                    <PanelContent className="h-full flex flex-col justify-around gap-y-4">
+                    <PanelHeader id="lastYearsWinnersPanel" as="h2">
+                        Last Year&apos;s Projects
+                    </PanelHeader>
+                    <PanelContent
+                        id="lastYearsWinnersPanel"
+                        className="h-full flex flex-col justify-around gap-y-4"
+                    >
                         <LastYearsWinnersRecord
                             name={"LoveStorying"}
                             linkedInPost={
@@ -222,10 +241,15 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                 </Panel>
 
                 {/* Hackeroons */}
-                <Panel panelBackground="/about/backgrounds/AboutSection_Background_4.jpg">
-                    <PanelHeader as="h2">Hackeroons</PanelHeader>
+                <Panel
+                    id="hackeroonPrizesPanel"
+                    panelBackground="/about/backgrounds/AboutSection_Background_4.jpg"
+                >
+                    <PanelHeader id="hackeroonPrizesPanel" as="h2">
+                        Hackeroons
+                    </PanelHeader>
 
-                    <PanelContent>
+                    <PanelContent id="hackeroonPrizesPanel">
                         {/* Hackeroon Prizes Carousel */}
                         <Suspense>
                             <HackeroonCarousel
@@ -242,9 +266,18 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                 </Panel>
 
                 {/* Leaderboard */}
-                <Panel panelColor={"#f5be58"} className="flex flex-col">
-                    <PanelHeader as="h2">Leaderboard</PanelHeader>
-                    <PanelContent className="h-full flex justify-center items-center font-h1 text-3xl md:text-4xl text-blue-500 tracking-widest">
+                <Panel
+                    id="leaderboardPanel"
+                    panelColor={"#f5be58"}
+                    className="flex flex-col"
+                >
+                    <PanelHeader id="leaderboardPanel" as="h2">
+                        Leaderboard
+                    </PanelHeader>
+                    <PanelContent
+                        id="leaderboardPanel"
+                        className="h-full flex justify-center items-center font-h1 text-3xl md:text-4xl text-blue-500 tracking-widest"
+                    >
                         {/* TODO: get top 3 hackathon participants with highest hackeroon count and use LeaderboardRecord to display */}
                         <div className="bg-white p-5 rounded-md border-black border-2 shadow-[5px_5px_0_rgba(0,0,0,1)]">
                             Coming soon!
diff --git a/src/components/landing-page/MeetTheTeamSection.tsx b/src/components/landing-page/MeetTheTeamSection.tsx
index 79be62fc..f7f60ea8 100644
--- a/src/components/landing-page/MeetTheTeamSection.tsx
+++ b/src/components/landing-page/MeetTheTeamSection.tsx
@@ -20,16 +20,17 @@ const MeetTheTeamSection = () => {
     );
 
     return (
-        <Panel panelColor="white" className={panelMargin}>
+        <Panel id="meetTheTeamPanel" panelColor="white" className={panelMargin}>
             {/* Heading */}
             <PanelHeader
+                id="meetTheTeamPanel"
                 className="text-[#49B2F8] border-none lg:w-full pb-0 bg-transparent"
                 isSectionHeader
             >
                 Meet the League
             </PanelHeader>
 
-            <PanelContent className="space-y-8">
+            <PanelContent id="meetTheTeamPanel" className="space-y-8">
                 {/* Tabs */}
                 <CommitteeTabs
                     committees={committees}
diff --git a/src/components/landing-page/ScheduleSection.tsx b/src/components/landing-page/ScheduleSection.tsx
index 868ed846..0a280bf9 100755
--- a/src/components/landing-page/ScheduleSection.tsx
+++ b/src/components/landing-page/ScheduleSection.tsx
@@ -9,14 +9,18 @@ const ScheduleSection: React.FC = () => {
     const panelMargin = "mt-12 md:mt-16";
 
     return (
-        <Panel panelColor="white" className={panelMargin}>
+        <Panel id="schedulePanel" panelColor="white" className={panelMargin}>
             <PanelHeader
+                id="schedulePanel"
                 className="text-[#49B2F8] border-none lg:w-full pb-0 bg-transparent"
                 isSectionHeader
             >
                 Schedule
             </PanelHeader>
-            <PanelContent className="grid gap-y-6 gap-x-6 md:grid-cols-3">
+            <PanelContent
+                id="schedulePanel"
+                className="grid gap-y-6 gap-x-6 md:grid-cols-3"
+            >
                 <ScheduleCard
                     day="DAY 1"
                     date="4/25 FRI"
diff --git a/src/components/landing-page/SponsorsSection.tsx b/src/components/landing-page/SponsorsSection.tsx
index 7d7732af..3887c23f 100644
--- a/src/components/landing-page/SponsorsSection.tsx
+++ b/src/components/landing-page/SponsorsSection.tsx
@@ -12,15 +12,19 @@ const SponsorsSection = () => {
     const panelMargin = "mt-12 md:mt-16";
 
     return (
-        <Panel className={panelMargin} panelColor="white">
+        <Panel id="sponsorsPanel" className={panelMargin} panelColor="white">
             <PanelHeader
+                id="sponsorsPanel"
                 className="text-[#49B2F8] border-none lg:w-full pb-0 bg-transparent"
                 isSectionHeader
             >
                 UWB HACKS 2025 SPONSORS
             </PanelHeader>
 
-            <PanelContent className="w-full flex flex-col items-center">
+            <PanelContent
+                id="sponsorsPanel"
+                className="w-full flex flex-col items-center"
+            >
                 {/* Main sponsors row */}
                 <div className="w-full flex flex-wrap justify-center items-center gap-8 md:gap-16">
                     <div className="flex justify-center items-center">
diff --git a/src/components/landing-page/TrackSection.tsx b/src/components/landing-page/TrackSection.tsx
index 09ececcd..ae997df1 100644
--- a/src/components/landing-page/TrackSection.tsx
+++ b/src/components/landing-page/TrackSection.tsx
@@ -33,20 +33,24 @@ const TracksSection = () => {
     }, [showTracks]);
 
     return (
-        <Panel className="mt-12 md:mt-16" panelColor="white">
+        <Panel id="tracksPanel" className="mt-12 md:mt-16" panelColor="white">
             <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] top-[10%] left-[8%] rotate-[19deg]" />
             <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] top-[20%] right-[14%] -rotate-[15deg]" />
             <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] bottom-[10%] left-[16%] rotate-[28deg]" />
             <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] bottom-[3%] right-[20%] -rotate-[40deg]" />
 
             <PanelHeader
+                id="tracksPanel"
                 as="h2"
                 className="text-[#49B2F8] border-none lg:w-full pb-0 bg-transparent"
                 isSectionHeader
             >
                 Tracks
             </PanelHeader>
-            <PanelContent className="relative flex flex-col items-center">
+            <PanelContent
+                id="tracksPanel"
+                className="relative flex flex-col items-center"
+            >
                 <MysteryBox
                     contents={mysteryBoxContents}
                     setShowTracks={setShowTracks}

From e7c1c96a7b312bea552e022a8e4393ff91c8928c Mon Sep 17 00:00:00 2001
From: pgobin <pgobin@uw.edu>
Date: Sun, 13 Apr 2025 22:02:36 -0700
Subject: [PATCH 04/11] adjusted panel header and content components

---
 .../Panel/Content.tsx                         |  2 +-
 .../(AboutSectionComponents)/Panel/Header.tsx | 33 ++++++++-----------
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
index 49bfffd6..d50298bb 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
@@ -19,7 +19,7 @@ export default function PanelContent({
     const panelContentRef = useRef(null);
 
     useEffect(() => {
-        if (!panelContentRef) return;
+        if (!panelContentRef.current) return;
 
         const panelContent = panelContentRef.current;
 
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
index 38f9d80b..724bd1be 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import gsap from "gsap";
@@ -24,28 +24,21 @@ export default function PanelHeader({
     const headerRef = useRef(null);
 
     useEffect(() => {
-        const header = headerRef.current;
+        if (!headerRef.current) return;
 
-        if (header) {
-            gsap.set(header, { y: "-100%" });
+        const header = headerRef.current;
 
-            const animation = gsap.to(header, {
-                duration: 0.2,
-                ease: "power1.in",
-                y: 0,
-                scrollTrigger: {
-                    trigger: `#${id}`,
-                    start: "30% 80%",
-                },
-            });
+        gsap.set(header, { y: "-100%" });
 
-            return () => {
-                if (animation.scrollTrigger) {
-                    animation.scrollTrigger.kill();
-                }
-                animation.kill();
-            };
-        }
+        gsap.to(header, {
+            duration: 0.2,
+            ease: "power1.in",
+            y: 0,
+            scrollTrigger: {
+                trigger: `#${id}`,
+                start: "30% 80%",
+            },
+        });
     }, []);
 
     const props = {

From 079d492b7ac6f6dfb37b0f8c9752def426eb26b9 Mon Sep 17 00:00:00 2001
From: pgobin <pgobin@uw.edu>
Date: Sun, 13 Apr 2025 22:07:35 -0700
Subject: [PATCH 05/11] changed ease and duration of panel header and content
 components

---
 .../landing-page/(AboutSectionComponents)/Panel/Content.tsx   | 4 ++--
 .../landing-page/(AboutSectionComponents)/Panel/Header.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
index d50298bb..76157eb5 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
@@ -29,8 +29,8 @@ export default function PanelContent({
             delay: 0.3,
             scale: 1,
             opacity: 1,
-            duration: 0.2,
-            ease: "power1.in",
+            duration: 0.4,
+            ease: "expo.out",
             scrollTrigger: {
                 trigger: `#${id}`,
                 start: "30% 80%",
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
index 724bd1be..ef430d30 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
@@ -31,8 +31,8 @@ export default function PanelHeader({
         gsap.set(header, { y: "-100%" });
 
         gsap.to(header, {
-            duration: 0.2,
-            ease: "power1.in",
+            duration: 0.4,
+            ease: "expo.out",
             y: 0,
             scrollTrigger: {
                 trigger: `#${id}`,

From 65475afaf6798f8e120d0e79f93857ab9e01aff3 Mon Sep 17 00:00:00 2001
From: pgobin <pgobin@uw.edu>
Date: Sun, 13 Apr 2025 22:14:13 -0700
Subject: [PATCH 06/11] small adjustment to MysteryBox animation logic

---
 .../landing-page/(TracksSectionComponents)/MysteryBox.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing-page/(TracksSectionComponents)/MysteryBox.tsx b/src/components/landing-page/(TracksSectionComponents)/MysteryBox.tsx
index ab03b347..ddfec060 100644
--- a/src/components/landing-page/(TracksSectionComponents)/MysteryBox.tsx
+++ b/src/components/landing-page/(TracksSectionComponents)/MysteryBox.tsx
@@ -57,7 +57,7 @@ export default function MysteryBox({
 
         if (!tlRef.current || !mysteryBox || !mysteryBoxLid) return;
 
-        tlRef.current.kill();
+        tlRef.current.clear();
         tlRef.current = gsap.timeline();
         tlRef.current.to(mysteryBox, { x: 0, rotate: 0 });
         tlRef.current.to(mysteryBox, {

From 16987bff76567b75694f1821202a5d6c950eb801 Mon Sep 17 00:00:00 2001
From: pgobin <pgobin@uw.edu>
Date: Sun, 13 Apr 2025 22:16:42 -0700
Subject: [PATCH 07/11] pnpm run format

---
 .../landing-page/(AboutSectionComponents)/Panel/Content.tsx    | 3 ++-
 .../landing-page/(AboutSectionComponents)/Panel/Header.tsx     | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
index 76157eb5..26924297 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
@@ -36,7 +36,8 @@ export default function PanelContent({
                 start: "30% 80%",
             },
         });
-    }, []);
+        // id only passed into dependency array to satisfy ESLint. value of id will never be changed within this component
+    }, [id]);
 
     return (
         <div ref={panelContentRef} className={clsx("p-6 md:p-10", className)}>
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
index ef430d30..f8cc72c4 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
@@ -39,7 +39,8 @@ export default function PanelHeader({
                 start: "30% 80%",
             },
         });
-    }, []);
+        // id only passed into dependency array to satisfy ESLint. value of id will never be changed within this component
+    }, [id]);
 
     const props = {
         ref: headerRef,

From ef96964f3cccb7d5af5be316d83c25b94fb00665 Mon Sep 17 00:00:00 2001
From: pgobin <pgobin@uw.edu>
Date: Sun, 13 Apr 2025 22:21:05 -0700
Subject: [PATCH 08/11] decreased animation duration times

---
 .../landing-page/(AboutSectionComponents)/FlyingHusky.tsx     | 4 ++--
 .../landing-page/(AboutSectionComponents)/Panel/Content.tsx   | 2 +-
 .../landing-page/(AboutSectionComponents)/Panel/Header.tsx    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx b/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx
index 4df45ef9..5154a17f 100644
--- a/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx
@@ -15,8 +15,8 @@ export default function FlyingHusky() {
         });
 
         gsap.to(".flyingHusky", {
-            delay: 0.35,
-            duration: 1,
+            delay: 0.3,
+            duration: 1.2,
             x: 0,
             y: 0,
             rotation: 0,
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
index 26924297..7b5a36ce 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
@@ -29,7 +29,7 @@ export default function PanelContent({
             delay: 0.3,
             scale: 1,
             opacity: 1,
-            duration: 0.4,
+            duration: 0.2,
             ease: "expo.out",
             scrollTrigger: {
                 trigger: `#${id}`,
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
index f8cc72c4..363f0566 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
@@ -31,7 +31,7 @@ export default function PanelHeader({
         gsap.set(header, { y: "-100%" });
 
         gsap.to(header, {
-            duration: 0.4,
+            duration: 0.2,
             ease: "expo.out",
             y: 0,
             scrollTrigger: {

From d98a8b858ba46f65726148ee70b31ca92c50c25b Mon Sep 17 00:00:00 2001
From: iteerP <preetigobindpuri02@gmail.com>
Date: Fri, 18 Apr 2025 00:18:24 -0700
Subject: [PATCH 09/11] changed name of "id" prop to "parentPanelId"

---
 .../(AboutSectionComponents)/Panel/Content.tsx         | 10 +++++-----
 .../(AboutSectionComponents)/Panel/Header.tsx          | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
index 7b5a36ce..3536a195 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx
@@ -6,13 +6,13 @@ import ScrollTrigger from "gsap/ScrollTrigger";
 gsap.registerPlugin(ScrollTrigger);
 
 type PanelContentProps = {
-    id: string;
+    parentPanelId: string;
     children: React.ReactNode;
     className?: string;
 };
 
 export default function PanelContent({
-    id,
+    parentPanelId,
     children,
     className,
 }: PanelContentProps) {
@@ -32,12 +32,12 @@ export default function PanelContent({
             duration: 0.2,
             ease: "expo.out",
             scrollTrigger: {
-                trigger: `#${id}`,
+                trigger: `#${parentPanelId}`,
                 start: "30% 80%",
             },
         });
-        // id only passed into dependency array to satisfy ESLint. value of id will never be changed within this component
-    }, [id]);
+        // parentPanelId only passed into dependency array to satisfy ESLint. value of parentPanelId will never be changed within this component
+    }, [parentPanelId]);
 
     return (
         <div ref={panelContentRef} className={clsx("p-6 md:p-10", className)}>
diff --git a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
index 363f0566..e914402e 100644
--- a/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
+++ b/src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx
@@ -7,7 +7,7 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 gsap.registerPlugin(ScrollTrigger);
 
 type PanelHeaderProps = {
-    id: string;
+    parentPanelId: string;
     children: React.ReactNode;
     isSectionHeader?: boolean;
     className?: string;
@@ -15,7 +15,7 @@ type PanelHeaderProps = {
 };
 
 export default function PanelHeader({
-    id,
+    parentPanelId,
     children,
     isSectionHeader = false,
     className,
@@ -35,12 +35,12 @@ export default function PanelHeader({
             ease: "expo.out",
             y: 0,
             scrollTrigger: {
-                trigger: `#${id}`,
+                trigger: `#${parentPanelId}`,
                 start: "30% 80%",
             },
         });
-        // id only passed into dependency array to satisfy ESLint. value of id will never be changed within this component
-    }, [id]);
+        // parentPanelId only passed into dependency array to satisfy ESLint. value of parentPanelId will never be changed within this component
+    }, [parentPanelId]);
 
     const props = {
         ref: headerRef,

From 5be7c8d6680bca91d546bd995a3113837f232629 Mon Sep 17 00:00:00 2001
From: iteerP <preetigobindpuri02@gmail.com>
Date: Fri, 18 Apr 2025 00:18:47 -0700
Subject: [PATCH 10/11] changed all "id" props to Panel Header and Content
 Components to "parentPanelId"

---
 src/components/landing-page/AboutSection.tsx  | 26 +++++++++----------
 .../landing-page/MeetTheTeamSection.tsx       |  4 +--
 .../landing-page/ScheduleSection.tsx          |  4 +--
 .../landing-page/SponsorsSection.tsx          |  4 +--
 src/components/landing-page/TrackSection.tsx  |  4 +--
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/landing-page/AboutSection.tsx b/src/components/landing-page/AboutSection.tsx
index fcda8e08..e038a0f8 100644
--- a/src/components/landing-page/AboutSection.tsx
+++ b/src/components/landing-page/AboutSection.tsx
@@ -41,7 +41,7 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
             >
                 {/* UWBHacks About Section Header */}
                 <PanelHeader
-                    id="aboutPanel"
+                    parentPanelId="aboutPanel"
                     as="h2"
                     isSectionHeader
                     className="z-[5] lg:absolute"
@@ -51,7 +51,7 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
 
                 {/* UWBHacks About Section Content */}
                 <PanelContent
-                    id="aboutPanel"
+                    parentPanelId="aboutPanel"
                     className="z-[5] flex flex-col md:flex-row justify-center items-center gap-x-8 gap-y-4 overflow-hidden"
                 >
                     <FlyingHusky />
@@ -98,7 +98,7 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
             >
                 <div className="flex justify-center">
                     <PanelHeader
-                        id="funFactsPanel"
+                        parentPanelId="funFactsPanel"
                         as="h2"
                         className="font-h1 text-white bg-transparent border-none p-0"
                     >
@@ -135,13 +135,13 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                 panelBackground="/about/backgrounds/AboutSection_Background_2.jpg"
             >
                 {/* UWBHacks ACM Description Header */}
-                <PanelHeader id="uwbacmDescriptionPanel" as="h2">
+                <PanelHeader parentPanelId="uwbacmDescriptionPanel" as="h2">
                     UWB Association for Computing Machinery
                 </PanelHeader>
 
                 {/* UWB ACM Description Content */}
                 <PanelContent
-                    id="uwbacmDescriptionPanel"
+                    parentPanelId="uwbacmDescriptionPanel"
                     className="flex justify-center items-center"
                 >
                     <div className="z-[5] w-4/5 md:w-3/4 lg:w-3/5 flex flex-col xl:flex-row xl:gap-x-4 self-center p-6 bg-white border-2 border-black">
@@ -185,10 +185,10 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                     }
                     className="flex flex-col justify-between"
                 >
-                    <PanelHeader id="monthOfHackingPanel" as="h2">
+                    <PanelHeader parentPanelId="monthOfHackingPanel" as="h2">
                         Month of Hacking
                     </PanelHeader>
-                    <PanelContent id="monthOfHackingPanel">
+                    <PanelContent parentPanelId="monthOfHackingPanel">
                         <p className="text-center font-bold md:text-lg">
                             In{" "}
                             <span className="font-h1 text-blue-700 tracking-wider px-[2px] text-xl md:text-2xl">
@@ -216,11 +216,11 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                     className="flex flex-col"
                     panelBackground="/about/backgrounds/AboutSection_Background_4.jpg"
                 >
-                    <PanelHeader id="lastYearsWinnersPanel" as="h2">
+                    <PanelHeader parentPanelId="lastYearsWinnersPanel" as="h2">
                         Last Year&apos;s Projects
                     </PanelHeader>
                     <PanelContent
-                        id="lastYearsWinnersPanel"
+                        parentPanelId="lastYearsWinnersPanel"
                         className="h-full flex flex-col justify-around gap-y-4"
                     >
                         <LastYearsWinnersRecord
@@ -245,11 +245,11 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                     id="hackeroonPrizesPanel"
                     panelBackground="/about/backgrounds/AboutSection_Background_4.jpg"
                 >
-                    <PanelHeader id="hackeroonPrizesPanel" as="h2">
+                    <PanelHeader parentPanelId="hackeroonPrizesPanel" as="h2">
                         Hackeroons
                     </PanelHeader>
 
-                    <PanelContent id="hackeroonPrizesPanel">
+                    <PanelContent parentPanelId="hackeroonPrizesPanel">
                         {/* Hackeroon Prizes Carousel */}
                         <Suspense>
                             <HackeroonCarousel
@@ -271,11 +271,11 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                     panelColor={"#f5be58"}
                     className="flex flex-col"
                 >
-                    <PanelHeader id="leaderboardPanel" as="h2">
+                    <PanelHeader parentPanelId="leaderboardPanel" as="h2">
                         Leaderboard
                     </PanelHeader>
                     <PanelContent
-                        id="leaderboardPanel"
+                        parentPanelId="leaderboardPanel"
                         className="h-full flex justify-center items-center font-h1 text-3xl md:text-4xl text-blue-500 tracking-widest"
                     >
                         {/* TODO: get top 3 hackathon participants with highest hackeroon count and use LeaderboardRecord to display */}
diff --git a/src/components/landing-page/MeetTheTeamSection.tsx b/src/components/landing-page/MeetTheTeamSection.tsx
index f7f60ea8..fd182697 100644
--- a/src/components/landing-page/MeetTheTeamSection.tsx
+++ b/src/components/landing-page/MeetTheTeamSection.tsx
@@ -23,14 +23,14 @@ const MeetTheTeamSection = () => {
         <Panel id="meetTheTeamPanel" panelColor="white" className={panelMargin}>
             {/* Heading */}
             <PanelHeader
-                id="meetTheTeamPanel"
+                parentPanelId="meetTheTeamPanel"
                 className="text-[#49B2F8] border-none lg:w-full pb-0 bg-transparent"
                 isSectionHeader
             >
                 Meet the League
             </PanelHeader>
 
-            <PanelContent id="meetTheTeamPanel" className="space-y-8">
+            <PanelContent parentPanelId="meetTheTeamPanel" className="space-y-8">
                 {/* Tabs */}
                 <CommitteeTabs
                     committees={committees}
diff --git a/src/components/landing-page/ScheduleSection.tsx b/src/components/landing-page/ScheduleSection.tsx
index 0a280bf9..5253ec4f 100755
--- a/src/components/landing-page/ScheduleSection.tsx
+++ b/src/components/landing-page/ScheduleSection.tsx
@@ -11,14 +11,14 @@ const ScheduleSection: React.FC = () => {
     return (
         <Panel id="schedulePanel" panelColor="white" className={panelMargin}>
             <PanelHeader
-                id="schedulePanel"
+                parentPanelId="schedulePanel"
                 className="text-[#49B2F8] border-none lg:w-full pb-0 bg-transparent"
                 isSectionHeader
             >
                 Schedule
             </PanelHeader>
             <PanelContent
-                id="schedulePanel"
+                parentPanelId="schedulePanel"
                 className="grid gap-y-6 gap-x-6 md:grid-cols-3"
             >
                 <ScheduleCard
diff --git a/src/components/landing-page/SponsorsSection.tsx b/src/components/landing-page/SponsorsSection.tsx
index 3887c23f..daae0175 100644
--- a/src/components/landing-page/SponsorsSection.tsx
+++ b/src/components/landing-page/SponsorsSection.tsx
@@ -14,7 +14,7 @@ const SponsorsSection = () => {
     return (
         <Panel id="sponsorsPanel" className={panelMargin} panelColor="white">
             <PanelHeader
-                id="sponsorsPanel"
+                parentPanelId="sponsorsPanel"
                 className="text-[#49B2F8] border-none lg:w-full pb-0 bg-transparent"
                 isSectionHeader
             >
@@ -22,7 +22,7 @@ const SponsorsSection = () => {
             </PanelHeader>
 
             <PanelContent
-                id="sponsorsPanel"
+                parentPanelId="sponsorsPanel"
                 className="w-full flex flex-col items-center"
             >
                 {/* Main sponsors row */}
diff --git a/src/components/landing-page/TrackSection.tsx b/src/components/landing-page/TrackSection.tsx
index ae997df1..44cb85db 100644
--- a/src/components/landing-page/TrackSection.tsx
+++ b/src/components/landing-page/TrackSection.tsx
@@ -40,7 +40,7 @@ const TracksSection = () => {
             <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] bottom-[3%] right-[20%] -rotate-[40deg]" />
 
             <PanelHeader
-                id="tracksPanel"
+                parentPanelId="tracksPanel"
                 as="h2"
                 className="text-[#49B2F8] border-none lg:w-full pb-0 bg-transparent"
                 isSectionHeader
@@ -48,7 +48,7 @@ const TracksSection = () => {
                 Tracks
             </PanelHeader>
             <PanelContent
-                id="tracksPanel"
+                parentPanelId="tracksPanel"
                 className="relative flex flex-col items-center"
             >
                 <MysteryBox

From f5ddd05221227e262ec7b22aa596202f051c240e Mon Sep 17 00:00:00 2001
From: iteerP <preetigobindpuri02@gmail.com>
Date: Fri, 18 Apr 2025 00:19:57 -0700
Subject: [PATCH 11/11] "pnpm run format"

---
 src/components/landing-page/MeetTheTeamSection.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/landing-page/MeetTheTeamSection.tsx b/src/components/landing-page/MeetTheTeamSection.tsx
index fd182697..159ec9a6 100644
--- a/src/components/landing-page/MeetTheTeamSection.tsx
+++ b/src/components/landing-page/MeetTheTeamSection.tsx
@@ -30,7 +30,10 @@ const MeetTheTeamSection = () => {
                 Meet the League
             </PanelHeader>
 
-            <PanelContent parentPanelId="meetTheTeamPanel" className="space-y-8">
+            <PanelContent
+                parentPanelId="meetTheTeamPanel"
+                className="space-y-8"
+            >
                 {/* Tabs */}
                 <CommitteeTabs
                     committees={committees}