396 table number check in

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

@@ -31,12 +31,12 @@ export default function Page() {
           <MDHelp />
         </ClientTimeProtectedDisplay>
         {/* temporarilty set featureId below to "hero-hacking" to test */}
-        <ClientTimeProtectedDisplay featureId="hero-judging">
+        <ClientTimeProtectedDisplay featureId="hero-hacking">
           <HeroWaiting />
           <HeroJudging />
           <HackerChoiceAward />
         </ClientTimeProtectedDisplay>
-        <ClientTimeProtectedDisplay featureId="table-number-checkin">
+        <ClientTimeProtectedDisplay featureId="hero-hacking">
           <TableNumberCheckin />
         </ClientTimeProtectedDisplay>
       </TableNumberContextProvider>

app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+
+interface ConfirmStageProps {
+  tableNumber: number | null;
+  onConfirm: () => void;
+  onReset: () => void;
+}
+
+export default function ConfirmStage({
+  tableNumber,
+  onConfirm,
+  onReset,
+}: ConfirmStageProps) {
+  return (
+    <div
+      className="flex flex-col p-[20px] h-[556px] mb-[5%] gap-4 rounded-[20px] bg-[#FAFAFF]
+                    md:flex-row md:h-[569px] md:items-stretch md:p-[60px] md:gap-8"
+    >
+      {/* RIGHT column — first in DOM so it appears at top on mobile, right on desktop */}
+      <div className="flex flex-col gap-3 md:order-2 md:w-1/2">
+        {/* Table Number Card */}
+        <div className="flex flex-col justify-center items-center gap-4 rounded-[16px] w-full h-[171px] bg-[#0B2638] md:flex-1 md:h-auto">
+          <h1 className="text-6xl text-[#FAFAFF] text-center font-medium tracking-[1.2px] md:text-[120px]">
+            TABLE
+          </h1>
+          <h1 className="text-6xl text-[#FAFAFF] text-center font-medium tracking-[1.2px] md:text-[120px]">
+            {tableNumber ?? 'A1'}
+          </h1>
+        </div>
+      </div>
+
+      {/* LEFT column — second in DOM, reordered to first on desktop */}
+      <div className="flex flex-col justify-between flex-1 md:order-1 md:w-1/2 md:flex-none">
+        <div className="flex flex-col gap-1">
+          <h3 className="text-lg font-semibold md:text-[32px] leading-normal">
+            Your Table Number
+          </h3>
+
+          <p className="text-lg font-semibold text-[#878796] md:text-[32px] leading-normal">
+            Check that you and your team members received the same table number.
+            It is extremely important to be
+            <span className="text-[#5E5E65]"> present at your table </span> when
+            the judges arrive.
+          </p>
+
+          <div className="flex gap-2 items-center mt-2">
+            <div className="relative w-4 h-4 md:w-6 md:h-6">
+              <Image
+                src={'./hackers/table-number-checkin/map.svg'}
+                alt="Map Icon"
+                fill
+                className="object-cover"
+              />
+            </div>
+
+            <Link
+              href="#"
+              className="text-[14px] font-normal text-[#5E5E65] border-b border-[#5E5E65] leading-none tracking-wide md:text-[18px]"
+            >
+              MAP LINK
+            </Link>
+          </div>
+        </div>
+
+        {/* Buttons */}
+        <div className="flex justify-between items-center mt-4 md:justify-normal md:gap-[56px] md:mt-auto">
+          <button
+            onClick={onReset}
+            className="text-[#5E5E65] text-base font-semibold border-none bg-transparent"
+          >
+            Wait, this is not my team
+          </button>
+
+          <button
+            onClick={onConfirm}
+            className="bg-[#CCFFFE] text-[#1A3819] font-semibold text-base flex gap-2 justify-center items-center px-8 py-3 rounded-[40px] cursor-pointer md:px-[44px] md:py-5 whitespace-nowrap"
+          >
+            Got it
+            <div className="relative hidden md:block w-4 h-4">
+              <Image
+                src={'./hackers/table-number-checkin/check.svg'}
+                alt="Checkmark"
+                fill
+                className="object-cover"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import Image from 'next/image';
+
+interface DevpostStageProps {
+  teamNumber: string;
+  error: string | null;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onBack: () => void;
+}
+
+export default function DevpostStage({
+  teamNumber,
+  error,
+  onChange,
+  onSubmit,
+  onBack,
+}: DevpostStageProps) {
+  const hasTeamNumber = teamNumber.length;
+
+  return (
+    <div
+      className="flex flex-col p-[20px] h-[556px] mb-[5%] rounded-[20px] bg-[#FAFAFF]
+                    md:flex-row md:h-[569px] md:items-stretch md:p-[60px] md:gap-8"
+    >
+      {/* RIGHT column — first in DOM so image appears at top on mobile, right on desktop */}
+      <div className="flex flex-col gap-3 md:order-2 md:w-1/2">
+        {/* Screenshot image */}
+        <div className="relative w-full h-[171px] md:flex-1 md:rounded-[16px] md:overflow-hidden">
+          <Image
+            src={'./hackers/table-number-checkin/Filler.svg'}
+            alt="mascots hanging out"
+            fill
+            className="object-cover"
+          />
+        </div>
+
+        {/* Devpost Number Input — below image */}
+        <div className="flex flex-col gap-1">
+          <p className="text-[14px] font-normal text-[#878796] tracking-wide">
+            DEVPOST NUMBER
+          </p>
+          <input
+            type="text"
+            placeholder="#####"
+            inputMode="numeric"
+            maxLength={5}
+            pattern="[0-9]*"
+            className="w-full border border-[#E0E0F0] rounded-[12px] px-4 py-3 text-base bg-white placeholder:text-[#ACACB9] focus:outline-none focus:ring-2 focus:ring-[#CCFFFE]"
+            onChange={(e) => {
+              const val = e.target.value.replace(/\D/g, '').slice(0, 5);
+              onChange(val);
+            }}
+          />
+        </div>
+      </div>
+
+      {/* LEFT column — second in DOM, reordered to first on desktop */}
+      <div className="flex flex-col justify-between md:order-1 md:w-1/2">
+        <div className="flex flex-col gap-1">
+          <h3 className="text-lg font-semibold md:text-[32px] md:leading-normal">
+            {error
+              ? 'Oops! We did not find your Devpost number.'
+              : 'Find your Devpost number.'}
+          </h3>
+
+          <p className="text-lg font-semibold text-[#878796] md:text-[32px] leading-normal">
+            {error
+              ? 'Please double check you have entered the same number on your devpost account.'
+              : 'This can be found by going to _____ and selecting____. Enter the number exactly as it is presented.'}
+          </p>
+        </div>
+
+        {/* Buttons — bottom of left column on desktop, bottom of card on mobile */}
+        <div className="flex justify-between items-center mt-4 md:justify-normal md:gap-[56px] md:mt-auto">
+          <button
+            onClick={onBack}
+            className="text-[#5E5E65] text-base font-semibold border-none bg-transparent"
+          >
+            Back
+          </button>
+
+          <button
+            className={`${
+              hasTeamNumber
+                ? 'bg-[#CCFFFE] text-[#1A3819]'
+                : 'bg-[#F3F3FC] text-[#ACACB9]'
+            } font-semibold text-base flex justify-center items-center px-8 py-3 rounded-[40px] cursor-pointer disabled:opacity-30 md:px-[44px] md:py-5`}
+            disabled={!hasTeamNumber}
+            onClick={onSubmit}
+          >
+            {hasTeamNumber ? 'Next' : 'Got it'}
+            <div className="relative w-6 h-6 ml-2">
+              <Image
+                src={'./hackers/table-number-checkin/arrow-right.svg'}
+                alt="Right Arrow"
+                fill
+                className="object-cover"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import Image from 'next/image';
+
+interface InitStageProps {
+  onNext: () => void;
+}
+
+export default function InitStage({ onNext }: InitStageProps) {
+  return (
+    <div
+      className="flex flex-col mb-[5%] p-[20px] h-[556px] gap-4 rounded-[20px] bg-[#FAFAFF]
+                    md:flex-row md:h-[569] md:items-center md:p-[60px]"
+    >
+      {/* Image - top half on mobile, right side on desktop */}
+      <div className="relative w-full h-1/2 md:order-2 md:h-full md:w-1/2 md:rounded-[16px] md:overflow-hidden">
+        <Image
+          src={'./hackers/table-number-checkin/end-of-hackathon.svg'}
+          alt="mascots hanging out"
+          fill
+          className="object-cover"
+        />
+      </div>
+
+      {/* Content - bottom on mobile, left side on desktop */}
+      <div className="flex flex-col justify-between h-1/2 md:h-full md:w-1/2">
+        <div className="flex flex-col gap-1 text-black">
+          <h3 className="text-md font-semibold md:text-[32px]">
+            The Hackathon has ended!
+          </h3>
+          <p className="text-md font-semibold text-[#878796] md:text-[32px] leading-normal ">
+            Thank you for all your hard work. Next, please follow the directions
+            to find your assigned table number.
+          </p>
+        </div>
+
+        <div className="flex flex-row w-full">
+          <button
+            className="text-[#1A3819] font-semibold text-base flex justify-center items-center px-8 py-3 rounded-[40px] bg-[#CCFFFE] cursor-pointer shrink-0 md:px-[44px] md:py-5"
+            onClick={() => {
+              onNext();
+            }}
+          >
+            Ready to find my table
+            <div className="relative w-6 h-6 ml-2">
+              <Image
+                src={'./hackers/table-number-checkin/arrow-right.svg'}
+                alt="Right Arrow"
+                fill
+                className="object-cover"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import Image from 'next/image';
+
+interface LoadingStageProps {
+  teamNumber: string;
+}
+
+export default function LoadingStage({ teamNumber }: LoadingStageProps) {
+  return (
+    <div
+      className="flex flex-col p-[20px] h-[556px] mb-[5%] rounded-[20px] bg-[#FAFAFF]
+                    md:flex-row md:h-[569px] md:items-stretch md:p-[60px] md:gap-8"
+    >
+      {/* RIGHT column — first in DOM so image appears at top on mobile, right on desktop */}
+      <div className="flex flex-col gap-3 md:order-2 md:w-1/2">
+        {/* Image */}
+        <div className="relative w-full h-[171px] rounded-[20px] md:flex-1 md:rounded-[16px] md:overflow-hidden">
+          <Image
+            src={'./hackers/table-number-checkin/loading.svg'}
+            alt="mascots hanging out"
+            fill
+            className="object-cover rounded-[20px]"
+          />
+        </div>
+
+        {/* Devpost Number — below image */}
+        <div className="flex flex-col gap-1">
+          <p className="text-[12px] font-normal text-[#878796] tracking-wide md:text-[14px]">
+            DEVPOST NUMBER
+          </p>
+
+          <input
+            type="text"
+            value={teamNumber}
+            readOnly
+            placeholder="#####"
+            inputMode="numeric"
+            maxLength={5}
+            pattern="[0-9]*"
+            className="w-full border border-[#E0E0F0] rounded-[12px] px-4 py-5 text-base bg-white placeholder:text-[#ACACB9] focus:outline-none cursor-default"
+          />
+        </div>
+      </div>
+
+      {/* LEFT column — second in DOM, reordered to first on desktop */}
+      <div className="flex flex-1 flex-col justify-between md:order-1 md:w-1/2 mt-4">
+        <div className="flex flex-col gap-1">
+          <h3 className="text-lg font-semibold md:text-[32px]">
+            Searching high and low...
+          </h3>
+
+          <p className="text-lg font-semibold text-[#878796] md:text-[32px] leading-normal">
+            Did you know that this year is HackDavis's 10 year anniversary?
+          </p>
+        </div>
+
+        {/* Buttons */}
+        <div className="flex justify-between items-center mt-4 md:justify-normal md:gap-[56px] md:mt-auto">
+          <button
+            disabled
+            className="text-[#5E5E65] text-base font-semibold border-none bg-transparent opacity-30"
+          >
+            Back
+          </button>
+
+          <button
+            disabled
+            className="bg-[#F3F3FC] text-[#ACACB9] font-semibold text-base flex justify-center items-center px-8 py-3 rounded-[40px] opacity-30 md:px-[44px] md:py-5"
+          >
+            Next
+            <div className="relative w-6 h-6 ml-2">
+              <Image
+                src={'./hackers/table-number-checkin/arrow-right.svg'}
+                alt="Right Arrow"
+                fill
+                className="object-cover"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}