394 during judging hero

app/(pages)/(hackers)/(hub)/page.tsx

@@ -3,9 +3,9 @@ import BeginnersSection from '@pages/(hackers)/_components/HomeHacking/Beginners
 import Discord from '@pages/(hackers)/_components/StayUpToDate/Discord';
 import Footer from '@components/Footer/Footer';
 import HeroMVP from '../_components/HomeHacking/HeroMVP';
-import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay';
-import TableNumberCheckin from '@pages/(hackers)/_components/TableNumberCheckin/TableNumberCheckin';
-import TableNumberContextProvider from '@pages/_contexts/TableNumberContext';
+// import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay';
+// import TableNumberCheckin from '@pages/(hackers)/_components/TableNumberCheckin/TableNumberCheckin';
+// import TableNumberContextProvider from '@pages/_contexts/TableNumberContext';
 import MDHelp from '@pages/(hackers)/_components/HomeHacking/MDHelp';
 import ScheduleSneakPeek from '@pages/(hackers)/_components/HomeHacking/ScheduleSneakPeek';
 import HeroJudging from '../_components/HomeJudging/HeroJudging';
@@ -15,23 +15,21 @@ import HeroWaiting from '../_components/HomeJudging/HeroWaiting';
 export default function Page() {
   return (
     <main id="home">
-      <TableNumberContextProvider>
-        <ClientTimeProtectedDisplay featureId="hero-hacking">
-          <HeroMVP />
-          <ScheduleSneakPeek />
-          <BeginnersSection />
-          <MDHelp />
-        </ClientTimeProtectedDisplay>
-        {/* temporarilty set featureId below to "hero-hacking" to test */}
-        <ClientTimeProtectedDisplay featureId="hero-judging">
-          <HeroWaiting />
-          <HeroJudging />
-          <HackerChoiceAward />
-        </ClientTimeProtectedDisplay>
-        <ClientTimeProtectedDisplay featureId="table-number-checkin">
-          <TableNumberCheckin />
-        </ClientTimeProtectedDisplay>
-      </TableNumberContextProvider>
+      {/* <TableNumberContextProvider> */}
+      {/* <ClientTimeProtectedDisplay featureId="hero-hacking"> */}
+      <HeroMVP />
+      <ScheduleSneakPeek />
+      <BeginnersSection />
+      <MDHelp />
+      {/* </ClientTimeProtectedDisplay> */}
+      {/* Always show judging hero while developing */}
+      <HeroWaiting />
+      <HeroJudging />
+      <HackerChoiceAward />
+      {/* <ClientTimeProtectedDisplay featureId="table-number-checkin"> */}
+      {/* <TableNumberCheckin /> */}
+      {/* </ClientTimeProtectedDisplay> */}
+      {/* </TableNumberContextProvider> */}
       <Discord />
       <PrizeTracks />
       <Footer />

app/(pages)/(hackers)/_components/HomeJudging/HeroJudging.tsx

@@ -1,3 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import JudgeBanners from './_components/JudgeBanners';
+import useTableNumberContext from '@pages/_hooks/useTableNumberContext';
+import { GoArrowRight } from 'react-icons/go';
+import { LuEye, LuEyeOff } from 'react-icons/lu';
+
 export default function HeroJudging() {
-  return <div>Hero Judging</div>;
+  const { storedValue: tableNumber } = useTableNumberContext();
+  const [showPreviousJudges, setShowPreviousJudges] = useState(false);
+
+  return (
+    <div className="w-full h-screen p-4 md:p-10">
+      <div
+        className="relative w-full h-full overflow-hidden flex items-center justify-center"
+        style={{
+          borderRadius: '38.812px',
+          background:
+            'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
+        }}
+      >
+        <Image
+          src="/Hero/Clouds.svg"
+          alt="Background"
+          fill
+          className="object-cover pointer-events-none select-none"
+          priority
+        />
+        <div className="relative w-[90%] max-w-[900px] flex flex-col items-center justify-center">
+          <div
+            className="text-center font-medium tracking-[2.4px] 
+                    text-[48px] sm:text-[64px] md:text-[90px] lg:text-[120px]"
+            style={{
+              color: 'rgba(255,255,255,0.9)',
+              fontFamily: '"Plus Jakarta Sans"',
+              textShadow: '0 0 31.729px rgba(255,255,255,0.40)',
+            }}
+          >
+            TABLE {tableNumber ?? '---'}
+          </div>
+          <div className="relative w-full mt-2">
+            <div
+              className={`transition duration-300 ${
+                !showPreviousJudges ? 'blur-[3px]' : ''
+              }`}
+            >
+              <JudgeBanners />
+            </div>
+          </div>
+          <div className="flex flex-col md:flex-row w-full text-white text-sm md:text-base font-semibold mt-4 gap-3 md:gap-0 md:justify-between">
+            {/* Previous Judges (top on mobile) */}
+            <button
+              type="button"
+              onClick={() => setShowPreviousJudges((prev) => !prev)}
+              className="flex items-center gap-2 md:max-w-[45%] underline underline-offset-4 cursor-pointer md:justify-end md:order-2"
+            >
+              {showPreviousJudges ? (
+                <LuEyeOff className="text-lg" />
+              ) : (
+                <LuEye className="text-lg" />
+              )}
+              <span>
+                {showPreviousJudges
+                  ? 'Hide previous judges'
+                  : 'View previous judges'}
+              </span>
+            </button>
+
+            {/* Judging Process */}
+            <div className="flex items-center gap-2 md:max-w-[45%] md:order-1">
+              <GoArrowRight className="text-lg" />
+              <p className="cursor-pointer">
+                Learn more about our judging process{' '}
+                <span className="underline underline-offset-4">here</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

app/(pages)/(hackers)/_components/HomeJudging/_components/AssigningJudges.tsx

@@ -0,0 +1,26 @@
+import styles from '../../2025IndexHero/AssigningJudges.module.scss';
+import sleeping_cow from 'public/hackers/hero/sleeping_cow.svg';
+import radio from 'public/hackers/hero/radio.svg';
+import Image from 'next/image';
+
+export default function AssigningJudges() {
+  return (
+    <div className="border-2 border-green-500">
+      <div className="w-full">
+        <p>PLEASE SIT TIGHT FOR JUDGING INFORMATION...</p>
+        <br />
+        <p>
+          Hi hacker, we're assigning you your judges. Sit tight, practice
+          pitching your project, and submit your vote for{' '}
+          <b>Hackers Choice Award!</b>
+        </p>
+      </div>
+      <Image src={radio} alt="radio" className={styles.radio_img} />
+      <Image
+        src={sleeping_cow}
+        alt="sleeping cow"
+        className={styles.sleeping_cow_img}
+      />
+    </div>
+  );
+}

app/(pages)/(hackers)/_components/HomeJudging/_components/DoneJudging.tsx

@@ -0,0 +1,47 @@
+import styles from '../../2025IndexHero/DoneJudging.module.scss';
+import bunny_phone from 'public/hackers/hero/bunny_phone.svg';
+import stars from 'public/hackers/hero/stars.svg';
+import ducky from 'public/hackers/hero/ducky.svg';
+import Image from 'next/image';
+
+export default function DoneJudging() {
+  return (
+    <div>
+      <div className={styles.container}>
+        <div className={styles.text_container}>
+          <p>CONGRATS!</p>
+          <br />
+          <p>
+            You're all done, thank you so much for your participation at
+            HackDavis 2025. Please wait until <b>Closing Ceremony</b> for
+            judging results! In the meantime, put in your vote for{' '}
+            <a href="/" target="_blank">
+              Hacker's Choice Award
+            </a>{' '}
+            and check out our insta <b>@hackdavis!</b>
+          </p>
+        </div>
+        <Image src={stars} alt="stars" className={styles.stars_img} />
+        <Image
+          src={bunny_phone}
+          alt="bunny phone"
+          className={styles.bunny_phone_img}
+        />
+      </div>
+      <div className={styles.grid_container}>
+        <div className={styles.left_container}>
+          <Image
+            src={bunny_phone}
+            alt="bunny phone"
+            className={styles.bunny_phone_img_mobile}
+          />
+          <p className={styles.hackdavis_text}>@hackdavis</p>
+          <p>Check out our instagram</p>
+        </div>
+        <div className={styles.right_container}>
+          <Image src={ducky} alt="ducky" className={styles.ducky_img} />
+        </div>
+      </div>
+    </div>
+  );
+}

app/(pages)/(hackers)/_components/HomeJudging/_components/JudgeBannerIndividual.tsx

@@ -0,0 +1,46 @@
+import styles from '../../2025IndexHero/JudgeBannerIndividual.module.scss';
+import Image from 'next/image';
+
+type JudgeBannerIndividualProps = {
+  icon: string;
+  name: string;
+  teamsAhead?: number;
+  description?: string;
+  completed: boolean;
+};
+
+export default function JudgeBannerIndividual({
+  icon,
+  name,
+  teamsAhead,
+  description,
+  completed,
+}: JudgeBannerIndividualProps) {
+  return (
+    <div
+      className={`${styles.judgeBanner} ${completed ? styles.finishing : ''}`}
+    >
+      <Image
+        src={icon}
+        alt={`${name} icon`}
+        width={124}
+        height={124}
+        className={styles.icon}
+      />
+      <div className={styles.info}>
+        <h3>{name}</h3>
+        {completed ? (
+          <p>This judge has already visited you.</p>
+        ) : (
+          <>
+            {typeof teamsAhead === 'number' && (
+              <p>There are {teamsAhead} teams ahead of you for this judge.</p>
+            )}
+            {description && <p>{description}</p>}
+          </>
+        )}
+      </div>
+      <h1 className={`${completed ? styles.hidden : ''}`}>{teamsAhead}</h1>
+    </div>
+  );
+}