From b2c815d07fcb44129c9fe90c47ecb4ae48a30511 Mon Sep 17 00:00:00 2001
From: Aaron Chan <42254254+aaronchan32@users.noreply.github.com>
Date: Thu, 4 Apr 2024 15:02:45 -0700
Subject: [PATCH] feat: add 2 new sections

---
 src/App.tsx                         | 24 ++------
 src/components/Navbar/Navbar.scss   |  1 +
 src/pages/FAQ/FAQ.tsx               | 60 +++++++++++---------
 src/pages/Home/Home.tsx             | 78 +++++++++++++------------
 src/pages/Judges/Judges.tsx         | 74 ++++++++++++------------
 src/pages/Timeline/Timeline.tsx     | 42 ++++++++------
 src/pages/Timeline/TimelineInfo.tsx |  0
 src/styles/App.scss                 |  8 ++-
 src/util/handleRotate.ts            | 88 ++++++++++++++++++++++++++++-
 9 files changed, 236 insertions(+), 139 deletions(-)
 create mode 100644 src/pages/Timeline/TimelineInfo.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 638e693..a9b9c2f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,26 +31,10 @@ function Rotate() {
         scrollRefList={scrollRefList}
         scrollContainerRef={scrollContainerRef}
       />
-      <section ref={scroll1Ref} className="scroll-section-one">
-        <div className="one">
-          <Home />
-        </div>
-      </section>
-      <section ref={scroll2Ref} className="scroll-section-two">
-        <div className="two">
-          <FAQ />
-        </div>
-      </section>
-      <section ref={scroll3Ref} className="scroll-section-three">
-        <div className="three">
-          <Timeline />
-        </div>
-      </section>
-      <section ref={scroll4Ref} className="scroll-section-four">
-        <div className="four">
-          <Judges />
-        </div>
-      </section>
+      <Home scroll1Ref={scroll1Ref} />
+      <FAQ scroll2Ref={scroll2Ref} />
+      <Timeline scroll3Ref={scroll3Ref} />
+      <Judges scroll4Ref={scroll4Ref} />
     </main>
   );
 }
diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
index 5ab8a6a..2b0b668 100644
--- a/src/components/Navbar/Navbar.scss
+++ b/src/components/Navbar/Navbar.scss
@@ -6,6 +6,7 @@ nav {
   width: 100%;
   right: $navbar-margin;
   pointer-events: none;
+  z-index: 1;
 
   .desktop-nav {
     list-style-type: none;
diff --git a/src/pages/FAQ/FAQ.tsx b/src/pages/FAQ/FAQ.tsx
index ed2bb6f..7622fc7 100644
--- a/src/pages/FAQ/FAQ.tsx
+++ b/src/pages/FAQ/FAQ.tsx
@@ -1,44 +1,48 @@
 import './FAQ.scss';
 import { FAQInfo } from './FAQInfo';
-import { useRef } from 'react';
 import useIsDesktop from '../../util/useIsDesktop';
 
-export default function FAQ() {
-  const faq1Ref = useRef(null);
-  const faq2Ref = useRef(null);
-  const faq1ContainerRef = useRef(null);
+type FAQProps = {
+  scroll2Ref: React.RefObject<HTMLElement>;
+};
+
+export default function FAQ({ scroll2Ref }: FAQProps) {
   const isDesktop = useIsDesktop();
 
   return (
     <div className="faq-stuff">
       {isDesktop ? (
         <>
-          <section className="desktop faq" ref={faq1ContainerRef}>
-            <div ref={faq1Ref} className="faq-container">
-              <h2>FAQ</h2>
-              {FAQInfo.slice(0, 3).map(item => (
-                <div className="block" key={item.question}>
-                  <h4>{item.question}</h4>
-                  <p>{item.answer}</p>
-                </div>
-              ))}
-            </div>
-          </section>
-          <section className="desktop faq">
-            <div ref={faq2Ref} className="faq-container">
-              <h2>FAQ</h2>
-              {FAQInfo.slice(3, 6).map(item => (
-                <div className="block" key={item.question}>
-                  <h4>{item.question}</h4>
-                  <p>{item.answer}</p>
-                </div>
-              ))}
-            </div>
-          </section>
+          <div className="scroll-section-two">
+            <section className="two desktop faq" ref={scroll2Ref}>
+              <div className="faq-container">
+                <h2>FAQ</h2>
+                {FAQInfo.slice(0, 3).map(item => (
+                  <div className="block" key={item.question}>
+                    <h4>{item.question}</h4>
+                    <p>{item.answer}</p>
+                  </div>
+                ))}
+              </div>
+            </section>
+          </div>
+          <div className="scroll-section-three ">
+            <section className="three desktop faq">
+              <div className="faq-container">
+                <h2>FAQ</h2>
+                {FAQInfo.slice(3, 6).map(item => (
+                  <div className="block" key={item.question}>
+                    <h4>{item.question}</h4>
+                    <p>{item.answer}</p>
+                  </div>
+                ))}
+              </div>
+            </section>
+          </div>
         </>
       ) : (
         <section className="mobile faq">
-          <div ref={faq2Ref} className="faq-container">
+          <div className="faq-container">
             <h2>FAQ</h2>
             {FAQInfo.map(item => (
               <div className="block" key={item.question}>
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 9f21ff4..0c21ffc 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -2,49 +2,57 @@ import './Home.scss';
 import Logo from '../../../public/Logo.svg';
 import { useRef } from 'react';
 
-export default function Home() {
+//write the typescript type for this prop
+
+type HomeProps = {
+  scroll1Ref: React.RefObject<HTMLElement>;
+};
+
+export default function Home({ scroll1Ref }: HomeProps) {
   const registerRef = useRef(null);
   const logoRef = useRef(null);
   const mobileDateRef = useRef(null);
 
   return (
-    <section className="home">
-      <div className="landing-container">
-        <div className="right-container">
-          <div className="logo-container">
-            <img
-              ref={logoRef}
-              src={Logo}
-              className="logo"
-              alt="Design Frontiers Logo"
-            />
-            <img src={Logo} className="mobile-logo" alt="" />
-          </div>
-          <div className="home-info">
-            <div className="desktop-view">
-              <h3>Saturday, April 13th | 9am–5pm | DIB 208</h3>
-              <p>Journey beyond the horizons of innovation!</p>
-              <p>
-                Design Frontiers is Design Co&apos;s very own long day sprint,
-                where student teams of all backgrounds come together to create
-                innovative solutions for real-world problems.
-              </p>
+    <div className="scroll-section-one">
+      <section ref={scroll1Ref} className="one home">
+        <div className="landing-container">
+          <div className="right-container">
+            <div className="logo-container">
+              <img
+                ref={logoRef}
+                src={Logo}
+                className="logo"
+                alt="Design Frontiers Logo"
+              />
+              <img src={Logo} className="mobile-logo" alt="" />
             </div>
-            <div ref={mobileDateRef} className="mobile-h3-container">
-              <h3>
-                Saturday, May 20th <br />
-                9am-5pm
-              </h3>
-              <h3>DIB ROOM 208</h3>
+            <div className="home-info">
+              <div className="desktop-view">
+                <h3>Saturday, April 13th | 9am–5pm | DIB 208</h3>
+                <p>Journey beyond the horizons of innovation!</p>
+                <p>
+                  Design Frontiers is Design Co&apos;s very own long day sprint,
+                  where student teams of all backgrounds come together to create
+                  innovative solutions for real-world problems.
+                </p>
+              </div>
+              <div ref={mobileDateRef} className="mobile-h3-container">
+                <h3>
+                  Saturday, May 20th <br />
+                  9am-5pm
+                </h3>
+                <h3>DIB ROOM 208</h3>
+              </div>
+            </div>
+            <div className="register-button" ref={registerRef}>
+              <a className="button parallelogram" href="#">
+                <span className="skew-fix">REGISTER NOW</span>
+              </a>
             </div>
-          </div>
-          <div className="register-button" ref={registerRef}>
-            <a className="button parallelogram" href="#">
-              <span className="skew-fix">REGISTER NOW</span>
-            </a>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </div>
   );
 }
diff --git a/src/pages/Judges/Judges.tsx b/src/pages/Judges/Judges.tsx
index 65b896e..2e14ddf 100644
--- a/src/pages/Judges/Judges.tsx
+++ b/src/pages/Judges/Judges.tsx
@@ -4,50 +4,54 @@ import { useRef } from 'react';
 import { JudgeInfo } from './JudgeInfo';
 import useIsDesktop from '../../util/useIsDesktop';
 
-export default function Judges() {
+type JudgesProps = {
+  scroll4Ref: React.RefObject<HTMLElement>;
+};
+
+export default function Judges({ scroll4Ref }: JudgesProps) {
   const judge1Ref = useRef(null);
   const judge2Ref = useRef(null);
-  const judge1ContainerRef = useRef(null);
-  const judge2ContainerRef = useRef(null);
 
   const isDesktop = useIsDesktop();
 
-  console.log(JudgeInfo.slice(3, 5));
-
   return (
     <div className="judge-stuff">
       {isDesktop ? (
         <>
-          <section className="desktop judges" ref={judge1ContainerRef}>
-            <div ref={judge1Ref} className="judges-container">
-              <h2>Judges</h2>
-              {JudgeInfo.slice(0, 3).map(item => (
-                <JudgeComponent
-                  key={item.name}
-                  name={item.name}
-                  pronouns={item.pronouns}
-                  position={item.position}
-                  funFact={item.funFact}
-                  imgLink={item.imgLink}
-                />
-              ))}
-            </div>
-          </section>
-          <section className="desktop judges" ref={judge2ContainerRef}>
-            <div ref={judge2Ref} className="judges-container">
-              <h2>Judges</h2>
-              {JudgeInfo.slice(3, 5).map(item => (
-                <JudgeComponent
-                  key={item.name}
-                  name={item.name}
-                  pronouns={item.pronouns}
-                  position={item.position}
-                  funFact={item.funFact}
-                  imgLink={item.imgLink}
-                />
-              ))}
-            </div>
-          </section>
+          <div className="scroll-section-five">
+            <section ref={scroll4Ref} className="five desktop judges">
+              <div ref={judge1Ref} className="judges-container">
+                <h2>Judges</h2>
+                {JudgeInfo.slice(0, 3).map(item => (
+                  <JudgeComponent
+                    key={item.name}
+                    name={item.name}
+                    pronouns={item.pronouns}
+                    position={item.position}
+                    funFact={item.funFact}
+                    imgLink={item.imgLink}
+                  />
+                ))}
+              </div>
+            </section>
+          </div>
+          <div className="scroll-section-six">
+            <section className="six desktop judges">
+              <div ref={judge2Ref} className="judges-container">
+                <h2>Judges</h2>
+                {JudgeInfo.slice(3, 5).map(item => (
+                  <JudgeComponent
+                    key={item.name}
+                    name={item.name}
+                    pronouns={item.pronouns}
+                    position={item.position}
+                    funFact={item.funFact}
+                    imgLink={item.imgLink}
+                  />
+                ))}
+              </div>
+            </section>
+          </div>
         </>
       ) : (
         <section className="mobile judges">
diff --git a/src/pages/Timeline/Timeline.tsx b/src/pages/Timeline/Timeline.tsx
index 5e9f48e..d36ca9b 100644
--- a/src/pages/Timeline/Timeline.tsx
+++ b/src/pages/Timeline/Timeline.tsx
@@ -35,24 +35,30 @@ const TimlineList = [
   }
 ];
 
-export default function Timeline() {
+type TimelineProps = {
+  scroll3Ref: React.RefObject<HTMLElement>;
+};
+
+export default function Timeline({ scroll3Ref }: TimelineProps) {
   return (
-    <section className="timeline">
-      <ul>
-        <div>
-          <h1 className="title">Timeline</h1>
-          {TimlineList.map((item, index) => (
-            <li key={index}>
-              <p className="time">{item.time}</p>
-              <div className="orange-line"></div>
-              <div className="title-discription">
-                <h3>{item.title}</h3>
-                <p>{item.description}</p>
-              </div>
-            </li>
-          ))}
-        </div>
-      </ul>
-    </section>
+    <div className="scroll-section-four">
+      <section ref={scroll3Ref} className="four timeline">
+        <ul>
+          <div>
+            <h1 className="title">Timeline</h1>
+            {TimlineList.map((item, index) => (
+              <li key={index}>
+                <p className="time">{item.time}</p>
+                <div className="orange-line"></div>
+                <div className="title-discription">
+                  <h3>{item.title}</h3>
+                  <p>{item.description}</p>
+                </div>
+              </li>
+            ))}
+          </div>
+        </ul>
+      </section>
+    </div>
   );
 }
diff --git a/src/pages/Timeline/TimelineInfo.tsx b/src/pages/Timeline/TimelineInfo.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/App.scss b/src/styles/App.scss
index 9a8ec7f..501d9a3 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -48,7 +48,9 @@
     .scroll-section-one,
     .scroll-section-two,
     .scroll-section-three,
-    .scroll-section-four {
+    .scroll-section-four,
+    .scroll-section-five,
+    .scroll-section-six {
       scroll-snap-align: center;
       height: 100vh;
       padding-left: $content-offset;
@@ -64,7 +66,9 @@
 
     .two,
     .three,
-    .four {
+    .four,
+    .five,
+    .six {
       opacity: 1;
       height: 100vh;
       transform: rotate(80deg);
diff --git a/src/util/handleRotate.ts b/src/util/handleRotate.ts
index f3fde1b..aa5d130 100644
--- a/src/util/handleRotate.ts
+++ b/src/util/handleRotate.ts
@@ -152,7 +152,7 @@ export function handleRotate(planetRef: React.RefObject<SVGSVGElement>) {
         trigger: '.scroll-section-four',
         scrub: 0.1,
         //Where animation starts and ends
-        start: 'bottom 100%',
+        start: 'bottom 99%',
         end: 'bottom'
       },
       opacity: 1,
@@ -174,6 +174,92 @@ export function handleRotate(planetRef: React.RefObject<SVGSVGElement>) {
       ease: 'none'
     });
 
+    gsap.from('.five', {
+      scrollTrigger: {
+        scroller: '.scroll-cont',
+        trigger: '.scroll-section-five',
+        scrub: 0.1,
+        start: 'top 99%',
+        end: 'top'
+      },
+      opacity: 0,
+      duration: 1,
+      ease: 'out',
+      x: -1000,
+      y: 200
+    });
+
+    gsap.from('.five', {
+      scrollTrigger: {
+        scroller: '.scroll-cont',
+        trigger: '.scroll-section-five',
+        scrub: 0.1,
+        //Where animation starts and ends
+        start: 'bottom 99%',
+        end: 'bottom'
+      },
+      opacity: 1,
+      duration: 1,
+      ease: 'none'
+    });
+
+    gsap.to('.five', {
+      scrollTrigger: {
+        scroller: '.scroll-cont',
+        trigger: '.scroll-section-five',
+        scrub: 0.01,
+        start: 'top 99%',
+        end: 'bottom'
+      },
+      rotation: -80,
+      transformOrigin: transformOrigin,
+      duration: 1,
+      ease: 'none'
+    });
+
+    gsap.from('.six', {
+      scrollTrigger: {
+        scroller: '.scroll-cont',
+        trigger: '.scroll-section-six',
+        scrub: 0.1,
+        start: 'top 99%',
+        end: 'top'
+      },
+      opacity: 0,
+      duration: 1,
+      ease: 'out',
+      x: -1000,
+      y: 200
+    });
+
+    gsap.from('.six', {
+      scrollTrigger: {
+        scroller: '.scroll-cont',
+        trigger: '.scroll-section-six',
+        scrub: 0.1,
+        //Where animation starts and ends
+        start: 'bottom 99%',
+        end: 'bottom'
+      },
+      opacity: 1,
+      duration: 1,
+      ease: 'none'
+    });
+
+    gsap.to('.six', {
+      scrollTrigger: {
+        scroller: '.scroll-cont',
+        trigger: '.scroll-section-six',
+        scrub: 0.01,
+        start: 'top 99%',
+        end: 'bottom'
+      },
+      rotation: -80,
+      transformOrigin: transformOrigin,
+      duration: 1,
+      ease: 'none'
+    });
+
     return () => {
       // optionally return a cleanup function that will be called when none of the conditions match anymore (after having matched)
       // it'll automatically call context.revert() - do NOT do that here . Only put custom cleanup code here.