diff --git a/app/(pages)/judges/(app)/_components/JudgingHub/HubHero.tsx b/app/(pages)/judges/(app)/_components/JudgingHub/HubHero.tsx index 06f75cbe..a16e44a0 100644 --- a/app/(pages)/judges/(app)/_components/JudgingHub/HubHero.tsx +++ b/app/(pages)/judges/(app)/_components/JudgingHub/HubHero.tsx @@ -1,28 +1,72 @@ import Image from 'next/image'; -import judgeHeroes from '/public/judges/hub/judgingheroes.svg'; +//import judgeHeroes from '/public/judges/hub/judgingheroes.svg'; + +import green from '@public/judges/landing/just_green.svg'; +import froggy from '@public/judges/landing/peeking_froggie.svg'; +import pink from '@public/judges/landing/pink.svg'; +import yellow from '@public/judges/landing/yellow.svg'; + +import pink_circle from '@public/judges/landing/pink_cirlces.svg'; +import blue_flower from '@public/judges/landing/blue_flower.svg'; + +import { Button } from '@pages/_globals/components/ui/button'; export default function HubHero() { return ( -
-
-
-

Welcome!

-

- We appreciate you for helping us judge one of California's biggest - hackathons! -

-
-
-
-
+
+
+
+ green Judging Animals
+
+

Welcome Michelley,

+

+ We appreciate you for helping us judge one of California’s biggest + hackathons! +

+
+ pink + yellow + + blue flower + pink circle
+
); } diff --git a/app/(pages)/judges/(app)/_components/JudgingHub/JudgingHub.tsx b/app/(pages)/judges/(app)/_components/JudgingHub/JudgingHub.tsx index 867c2bc3..892b2e2f 100644 --- a/app/(pages)/judges/(app)/_components/JudgingHub/JudgingHub.tsx +++ b/app/(pages)/judges/(app)/_components/JudgingHub/JudgingHub.tsx @@ -3,7 +3,7 @@ import HubHero from './HubHero'; import TableLocations from './TableLocations'; import ViewProjects from './ViewProjects'; -import styles from './JudgingHub.module.scss'; +//import styles from './JudgingHub.module.scss'; import Waiting from './Waiting'; import PanelsAreLive from './PanelsAreLive'; // import Dismiss from './Dismiss'; @@ -11,7 +11,7 @@ import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ export default function JudgingHub() { return ( -
+
diff --git a/app/(pages)/judges/(app)/_components/JudgingHub/TableLocations.tsx b/app/(pages)/judges/(app)/_components/JudgingHub/TableLocations.tsx index fc550b38..f486a6d6 100644 --- a/app/(pages)/judges/(app)/_components/JudgingHub/TableLocations.tsx +++ b/app/(pages)/judges/(app)/_components/JudgingHub/TableLocations.tsx @@ -1,8 +1,10 @@ -import styles from './TableLocations.module.scss'; +//import styles from './TableLocations.module.scss'; import Image from 'next/image'; -import vinyl from '/public/judges/hub/vinyl.svg'; -import bunnyHand from '/public/judges/hub/bunny-hand.svg'; -import vinylPlayer from '/public/judges/hub/vinyl-player.svg'; +//import vinyl from '/public/judges/hub/vinyl.svg'; +//import bunnyHand from '/public/judges/hub/bunny-hand.svg'; +//import vinylPlayer from '/public/judges/hub/vinyl-player.svg'; +import mascots_around_couch from '@public/judges/landing/mascots_around_couch.svg'; + export default function TableLocations() { /* const logOutStyle = { zIndex: 1, @@ -26,20 +28,16 @@ export default function TableLocations() { 'https://www.figma.com/proto/9frZI5Kc9f2c8o4ZIZG8fX/Judging-Table-Map?page-id=0:1&type=design&node-id=1-4&viewport=134,164,0.69&t=Jfp4HXeR7nRs3B6R-1&scaling=min-zoom&mode=design'; */ return ( -
-
- If you have any questions, please ask a HackDavis director (bright white - shirt)! -
-
- Vinyl - Bunny hand - Vinyl Player -
+
+

Question?

+

+ Please ask a HackDavis director (dark blue shirt)! +

+ mascots around couch
); } diff --git a/app/(pages)/judges/(app)/_components/JudgingHub/Waiting.tsx b/app/(pages)/judges/(app)/_components/JudgingHub/Waiting.tsx index 4f4f8bb7..3513ef4b 100644 --- a/app/(pages)/judges/(app)/_components/JudgingHub/Waiting.tsx +++ b/app/(pages)/judges/(app)/_components/JudgingHub/Waiting.tsx @@ -1,26 +1,137 @@ -const tips = [ +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 { Button } from '@pages/_globals/components/ui/button'; +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.title}

+

{card.desc}

+ + {card.linkMap ? ( +
+ arrow + +
+ ) : null} +
+
+ ); +} + +/*const tips = [ '🔋 Charge your phone!', '👋 Say hi to other judges!', '🍿 Grab a snack and water!', -]; +];*/ -const TipCard = (tip: string) => { +/*const TipCard = (tip: string) => { return (
{tip}
); -}; +};*/ 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're waiting, feel free to... -

-
- {tips.map((tip, index) => ( -
{TipCard(tip)}
+
+

+ While you are waiting... +

+
+ {cards.map((card, index) => ( + + ))} +
+
+ {cards.map((_, index) => ( + carousel indicator ))}
diff --git a/app/(pages)/judges/(app)/page.tsx b/app/(pages)/judges/(app)/page.tsx index fa3bd330..596ed7da 100644 --- a/app/(pages)/judges/(app)/page.tsx +++ b/app/(pages)/judges/(app)/page.tsx @@ -23,17 +23,17 @@ export default function Judges() { }; return ( - <> +
-
+
- +
); } diff --git a/public/judges/landing/arrow.svg b/public/judges/landing/arrow.svg new file mode 100644 index 00000000..2eeda650 --- /dev/null +++ b/public/judges/landing/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/judges/landing/blue_flower.svg b/public/judges/landing/blue_flower.svg new file mode 100644 index 00000000..ed55ddf0 --- /dev/null +++ b/public/judges/landing/blue_flower.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/judges/landing/charge_phone.svg b/public/judges/landing/charge_phone.svg new file mode 100644 index 00000000..ae060ec4 --- /dev/null +++ b/public/judges/landing/charge_phone.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/judges/landing/dark_circle.svg b/public/judges/landing/dark_circle.svg new file mode 100644 index 00000000..d5390b1d --- /dev/null +++ b/public/judges/landing/dark_circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/judges/landing/greenFrog.svg b/public/judges/landing/greenFrog.svg new file mode 100644 index 00000000..13090902 --- /dev/null +++ b/public/judges/landing/greenFrog.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/judges/landing/just_green.svg b/public/judges/landing/just_green.svg new file mode 100644 index 00000000..54d5bea7 --- /dev/null +++ b/public/judges/landing/just_green.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/judges/landing/light_circle.svg b/public/judges/landing/light_circle.svg new file mode 100644 index 00000000..ec59059a --- /dev/null +++ b/public/judges/landing/light_circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/judges/landing/mascots_around_couch.svg b/public/judges/landing/mascots_around_couch.svg new file mode 100644 index 00000000..209e517e --- /dev/null +++ b/public/judges/landing/mascots_around_couch.svg @@ -0,0 +1,263 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/judges/landing/peeking_froggie.svg b/public/judges/landing/peeking_froggie.svg new file mode 100644 index 00000000..f7ce61d3 --- /dev/null +++ b/public/judges/landing/peeking_froggie.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/judges/landing/pink.svg b/public/judges/landing/pink.svg new file mode 100644 index 00000000..8dd1f016 --- /dev/null +++ b/public/judges/landing/pink.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/judges/landing/pink_cirlces.svg b/public/judges/landing/pink_cirlces.svg new file mode 100644 index 00000000..78053d0b --- /dev/null +++ b/public/judges/landing/pink_cirlces.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/judges/landing/say_hi.svg b/public/judges/landing/say_hi.svg new file mode 100644 index 00000000..ff0d644a --- /dev/null +++ b/public/judges/landing/say_hi.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/judges/landing/snack.svg b/public/judges/landing/snack.svg new file mode 100644 index 00000000..9f711781 --- /dev/null +++ b/public/judges/landing/snack.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/judges/landing/tempgreen.svg b/public/judges/landing/tempgreen.svg new file mode 100644 index 00000000..251fb5c6 --- /dev/null +++ b/public/judges/landing/tempgreen.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/judges/landing/yellow.svg b/public/judges/landing/yellow.svg new file mode 100644 index 00000000..3482da5e --- /dev/null +++ b/public/judges/landing/yellow.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/tailwind.config.ts b/tailwind.config.ts index 5b2a30cd..511ce70e 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -122,11 +122,21 @@ const config: Config = { transform: 'translateX(-75%)', }, }, + 'spin': { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + } + } }, animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', moveClouds: 'moveClouds 30s linear infinite', + 'spinning-clockwise': 'spin 10s linear infinite', + 'spinning-counterclockwise': 'spin 10s linear infinite reverse', }, fontFamily: { jakarta: ['var(--font-jakarta)'],