Landing judingapp

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 (
-    <div className="w-full overflow-hidden bg-[#f2f2f7] flex flex-col justify-center gap-4 relative">
-      <div className="px-[20px] pt-[50px] pb-0 flex flex-col gap-2 z-[1]">
-        <div className="w-full flex flex-col text-start">
-          <h1 className="font-bold">Welcome!</h1>
-          <p className="text-[1.5rem]">
-            We appreciate you for helping us judge one of California's biggest
-            hackathons!
-          </p>
-        </div>
-      </div>
-      <div>
-        <div className="items-center flex justify-center">
+    <div className="h-[100vh] w-full relative flex justify-center py-[15px]">
+      <div className="absolute z-3 h-[95%] w-full bg-white overflow-hidden rounded-[32px]">
+        <div className="relative w-full overflow-visible">
+          <Image src={green} alt="green" className="w-full -mt-[10%] block" />
           <Image
-            src={judgeHeroes}
-            alt="Judging Animals"
-            className="right-0 bottom-0"
-            priority={true}
+            src={froggy}
+            alt="froggy"
+            className="absolute z-10 w-[200px] left-1/2 -translate-x-[25%] bottom-0 translate-y-[20%] pointer-events-none"
           />
         </div>
+        <div className="m-[25px] ml-[65px] text-[#3F3F3F] gap-[4px]">
+          <p className="text-[22px] font-semibold">Welcome Michelley,</p>
+          <p className="text-[18px]">
+            We appreciate you for helping us judge one of California’s biggest
+            hackathons!
+          </p>
+        </div>
+        <Image
+          src={pink}
+          alt="pink"
+          className="w-[440px] max-w-none ml-[65px]"
+        />
+        <Image
+          src={yellow}
+          alt="yellow"
+          className="w-[255px] translate-x-[60%] translate-y-[10%]"
+        />
+
+        <Image
+          src={blue_flower}
+          alt="blue flower"
+          className="absolute left-[-12%] top-[14%] animate-spinning-clockwise"
+        />
+        <Image
+          src={pink_circle}
+          alt="pink circle"
+          className="absolute bottom-[-80px] left-[-65px] animate-spinning-counterclockwise"
+        />
       </div>
+      <Button
+        onClick={() => {
+          const cardsSection = document.getElementById('cards');
+          if (!cardsSection) return;
+          const targetTop =
+            cardsSection.getBoundingClientRect().top + window.scrollY - 24;
+          window.scrollTo({
+            top: Math.max(targetTop, 0),
+            behavior: 'smooth',
+          });
+        }}
+        className="absolute z-5 bottom-[3px] bg-[#121212] font-semibold rounded-full px-[24px] py-[10px] outline outline-white outline-[8px] text-[14px]"
+      >
+        SCROLL DOWN
+      </Button>
     </div>
   );
 }

app/(pages)/judges/(app)/_components/JudgingHub/JudgingHub.tsx

@@ -3,15 +3,15 @@
 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';
 import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay';
 
 export default function JudgingHub() {
   return (
-    <div className={styles.container}>
+    <div className="w-full display flex-col bg-[#FAFAFF] px-[22px] pt-[63px] pb-[43px] flex gap-[40px]">
       <ClientTimeProtectedDisplay featureId="view-projects">
         <ViewProjects />
       </ClientTimeProtectedDisplay>

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 (
-    <div className={styles.container}>
-      <div className={styles.header}>
-        If you have any questions, please ask a HackDavis director (bright white
-        shirt)!
-      </div>
-      <div className={styles.vinyl_container}>
-        <Image src={vinyl} alt="Vinyl" className={styles.vinyl} />
-        <Image src={bunnyHand} alt="Bunny hand" className={styles.bunny_hand} />
-        <Image
-          src={vinylPlayer}
-          alt="Vinyl Player"
-          className={styles.vinyl_player}
-        />
-      </div>
+    <div className="bg-white rounded-[32px] py-[34px] px-[30px] text-[#3F3F3F]">
+      <p className="font-semibold text-[22px]">Question?</p>
+      <p className="text-[18px]">
+        Please ask a HackDavis director (dark blue shirt)!
+      </p>
+      <Image
+        src={mascots_around_couch}
+        alt="mascots around couch"
+        className="w-full"
+      />
     </div>
   );
 }

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 (
+    <div className="relative min-w-full h-[420px] bg-white rounded-[20px] overflow-hidden snap-start">
+      <Image src={card.src} alt={card.title} className="w-full" />
+      <div className="w-full py-[16px] px-[24px]">
+        <p className="text-[#3F3F3F] text-[22px] font-semibold">{card.title}</p>
+        <p className="text-[#5E5E65] text-wrap text-[16px]">{card.desc}</p>
+
+        {card.linkMap ? (
+          <div className="absolute bottom-[12px] left-[24px] z-10 flex flex-row items-center gap-[4px] pt-[60px]">
+            <Image src={arrow} alt="arrow" className="" />
+            <button className="text-[#3F3F3F] text-[16px] bg-transparent shadow-none underline">
+              MAP
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/*const tips = [
   '🔋 Charge your phone!',
   '👋 Say hi to other judges!',
   '🍿 Grab a snack and water!',
-];
+];*/
 
-const TipCard = (tip: string) => {
+/*const TipCard = (tip: string) => {
   return (
     <div className="flex text-xl items-center justify-center bg-white rounded-[16px] py-[20px]">
       {tip}
     </div>
   );
-};
+};*/
 
 export default function Waiting() {
+  const [activeCardIndex, setActiveCardIndex] = useState(0);
+  const cardsContainerRef = useRef<HTMLDivElement>(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<HTMLDivElement>) => {
+    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 (
-    <div className="flex flex-col px-[20px] bg-[#f2f2f7] gap-4 py-8">
-      <h3 className="font-bold text-2xl">
-        While you're waiting, feel free to...
-      </h3>
-      <div className="flex flex-col gap-4">
-        {tips.map((tip, index) => (
-          <div key={index}>{TipCard(tip)}</div>
+    <div id="cards" className="display flex flex-col gap-[20px]">
+      <p className="text-[22px] text-[#3F3F3F] font-semibold">
+        While you are waiting...
+      </p>
+      <div
+        className="flex overflow-x-auto snap-x snap-mandatory [scrollbar-width:none] gap-[10px]"
+        ref={cardsContainerRef}
+        onScroll={handleCardsScroll}
+      >
+        {cards.map((card, index) => (
+          <Card key={index} card={card} />
+        ))}
+      </div>
+      <div className="w-full justify-center flex gap-[12px]">
+        {cards.map((_, index) => (
+          <Image
+            key={index}
+            src={activeCardIndex === index ? dark_circle : light_circle}
+            alt="carousel indicator"
+            className="w-[12px]"
+          />
         ))}
       </div>
     </div>

app/(pages)/judges/(app)/page.tsx

@@ -23,17 +23,17 @@ export default function Judges() {
   };
 
   return (
-    <>
+    <div className="flex flex-col justify-center items-center bg-[#FAFAFF] pb-[43px]">
       <JudgingHub />
-      <form onSubmit={handleLogout}>
+      <form onSubmit={handleLogout} className="flex flex-col justify-center">
         <button
           type="submit"
           disabled={loading}
-          className="w-full bg-text-error text-white text-[1.5rem] py-4 font-jakarta font-semibold"
+          className="mt-[20px] bg-[#FF8D8D] text-white rounded-[20px] py-[15px] w-[342px]"
         >
           Sign Out
         </button>
       </form>
-    </>
+    </div>
   );
 }