+
);
}
diff --git a/app/(pages)/judges/(app)/_components/JudgingHub/PanelsAreLive.tsx b/app/(pages)/judges/(app)/_components/Landing/PanelsAreLive.tsx
similarity index 100%
rename from app/(pages)/judges/(app)/_components/JudgingHub/PanelsAreLive.tsx
rename to app/(pages)/judges/(app)/_components/Landing/PanelsAreLive.tsx
diff --git a/app/(pages)/judges/(app)/_components/Landing/Questions.tsx b/app/(pages)/judges/(app)/_components/Landing/Questions.tsx
new file mode 100644
index 000000000..540c2106d
--- /dev/null
+++ b/app/(pages)/judges/(app)/_components/Landing/Questions.tsx
@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import mascots_around_couch from '@public/judges/landing/mascots_around_couch.svg';
+
+export default function Questions() {
+ return (
+
+
Question?
+
+ Please ask a HackDavis director (dark blue shirt)!
+
+
+
+ );
+}
diff --git a/app/(pages)/judges/(app)/_components/JudgingHub/ViewProjects.module.scss b/app/(pages)/judges/(app)/_components/Landing/ViewProjects.module.scss
similarity index 100%
rename from app/(pages)/judges/(app)/_components/JudgingHub/ViewProjects.module.scss
rename to app/(pages)/judges/(app)/_components/Landing/ViewProjects.module.scss
diff --git a/app/(pages)/judges/(app)/_components/JudgingHub/ViewProjects.tsx b/app/(pages)/judges/(app)/_components/Landing/ViewProjects.tsx
similarity index 100%
rename from app/(pages)/judges/(app)/_components/JudgingHub/ViewProjects.tsx
rename to app/(pages)/judges/(app)/_components/Landing/ViewProjects.tsx
diff --git a/app/(pages)/judges/(app)/_components/Landing/Waiting.tsx b/app/(pages)/judges/(app)/_components/Landing/Waiting.tsx
new file mode 100644
index 000000000..ecd73b7fa
--- /dev/null
+++ b/app/(pages)/judges/(app)/_components/Landing/Waiting.tsx
@@ -0,0 +1,124 @@
+import charge_phone from '@public/judges/landing/charge_phone.svg';
+import say_hi from '@public/judges/landing/say_hi.svg';
+import snack from '@public/judges/landing/snack.svg';
+import { useState, useRef, useEffect } from 'react';
+import Image from 'next/image';
+import arrow from '@public/judges/landing/arrow.svg';
+import type { StaticImageData } from 'next/image';
+
+import dark_circle from '@public/judges/landing/dark_circle.svg';
+import light_circle from '@public/judges/landing/light_circle.svg';
+
+interface Card {
+ src: StaticImageData;
+ title: string;
+ desc: string;
+ linkMap: boolean;
+}
+
+function Card({ card }: { card: Card }) {
+ return (
+
+
+
+
{card.title}
+
{card.desc}
+
+ {card.linkMap ? (
+
+
+
+
+ ) : null}
+
+
+ );
+}
+
+export default function Waiting() {
+ const [activeCardIndex, setActiveCardIndex] = useState(0);
+ const cardsContainerRef = useRef
(null);
+
+ const cards = [
+ {
+ src: charge_phone,
+ title: 'Charge your phone',
+ desc: 'Feel free to charge your phone.',
+ linkMap: false,
+ },
+ {
+ src: snack,
+ title: 'Grab a snack and water',
+ desc: 'Feel free to re-energize as you wait for our hackers',
+ linkMap: true,
+ },
+ {
+ src: say_hi,
+ title: 'Say hi to other judges',
+ desc: 'Get comfy and meet other Judges.',
+ linkMap: false,
+ },
+ ];
+
+ const handleCardsScroll = (event: React.UIEvent) => {
+ const container = event.currentTarget;
+ const cardWidth = container.clientWidth + 10;
+ const nextIndex = Math.round(container.scrollLeft / cardWidth);
+
+ setActiveCardIndex(Math.max(0, Math.min(cards.length - 1, nextIndex)));
+ };
+
+ useEffect(() => {
+ const intervalId = window.setInterval(() => {
+ const container = cardsContainerRef.current;
+ if (!container || cards.length === 0) return;
+
+ const firstCard = container.firstElementChild as HTMLElement | null;
+ if (!firstCard) return;
+
+ const styles = window.getComputedStyle(container);
+ const gap = parseFloat(styles.gap || '0');
+ const cardWidth = firstCard.offsetWidth + gap;
+
+ setActiveCardIndex((prevIndex) => {
+ const nextIndex = (prevIndex + 1) % cards.length;
+ container.scrollTo({
+ left: cardWidth * nextIndex,
+ behavior: 'smooth',
+ });
+ return nextIndex;
+ });
+ }, 10000);
+
+ return () => window.clearInterval(intervalId);
+ }, [cards.length]);
+
+ return (
+
+
+ While you are waiting...
+
+
+ {cards.map((card, index) => (
+
+ ))}
+
+
+ {cards.map((_, index) => (
+
+ ))}
+
+
-
-
-
-
-
Go Back
-
-
-
-