From 043892d8510ccc64c0a30e683665fad2faa835f1 Mon Sep 17 00:00:00 2001
From: Haylie Tan <haytan@ucdavis.edu>
Date: Sat, 28 Feb 2026 17:31:50 -0800
Subject: [PATCH 01/18] init files

---
 app/(api)/_utils/mongodb/mongoClient.mjs      |  10 +-
 app/(pages)/(hackers)/(hub)/layout.tsx        |  12 +-
 app/(pages)/(hackers)/(hub)/page.tsx          |  30 ++--
 .../HomeHacking/IndexHeroContentHacking.tsx   | 158 ++++++++++++++++++
 .../HomeHacking/_components/Countdown.tsx     |  80 +++++++++
 .../HomeHacking/_components/TimeTracker.tsx   |  56 +++++++
 public/hackers/hero/PeepingBunny.svg          |  23 +++
 public/hackers/hero/PeepingCow.svg            |  29 ++++
 public/hackers/hero/PeepingDuck.svg           |  31 ++++
 public/hackers/hero/PeepingFrog.svg           |  23 +++
 10 files changed, 431 insertions(+), 21 deletions(-)
 create mode 100644 app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
 create mode 100644 app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
 create mode 100644 app/(pages)/(hackers)/_components/HomeHacking/_components/TimeTracker.tsx
 create mode 100644 public/hackers/hero/PeepingBunny.svg
 create mode 100644 public/hackers/hero/PeepingCow.svg
 create mode 100644 public/hackers/hero/PeepingDuck.svg
 create mode 100644 public/hackers/hero/PeepingFrog.svg

diff --git a/app/(api)/_utils/mongodb/mongoClient.mjs b/app/(api)/_utils/mongodb/mongoClient.mjs
index 33bcfaaf5..4c199b937 100644
--- a/app/(api)/_utils/mongodb/mongoClient.mjs
+++ b/app/(api)/_utils/mongodb/mongoClient.mjs
@@ -2,13 +2,19 @@ import { MongoClient } from 'mongodb';
 
 const uri = process.env.MONGODB_URI;
 let cachedClient = null;
+let cachedPromise = null;
 
 export async function getClient() {
   if (cachedClient) {
     return cachedClient;
   }
-  const client = new MongoClient(uri);
-  cachedClient = client;
+
+  if (!cachedPromise) {
+    const client = new MongoClient(uri);
+    cachedPromise = client.connect();
+  }
+
+  cachedClient = await cachedPromise;
   return cachedClient;
 }
 
diff --git a/app/(pages)/(hackers)/(hub)/layout.tsx b/app/(pages)/(hackers)/(hub)/layout.tsx
index 602aadd8d..c2a223fc2 100644
--- a/app/(pages)/(hackers)/(hub)/layout.tsx
+++ b/app/(pages)/(hackers)/(hub)/layout.tsx
@@ -3,12 +3,14 @@ import Navbar from '@components/Navbar/Navbar';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <ProtectedDisplay
-      allowedRoles={['hacker', 'admin']}
-      failRedirectRoute="/login"
-    >
+    <div>
+    {/* // <ProtectedDisplay */}
+    {/* //   allowedRoles={['hacker', 'admin']}
+    //   failRedirectRoute="/login"
+    // > */}
       <Navbar />
       {children}
-    </ProtectedDisplay>
+    {/* // </ProtectedDisplay> */}
+    </div>
   );
 }
diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx
index d56d57553..eb32809e6 100644
--- a/app/(pages)/(hackers)/(hub)/page.tsx
+++ b/app/(pages)/(hackers)/(hub)/page.tsx
@@ -2,36 +2,38 @@ import PrizeTracks from '@pages/(hackers)/_components/PrizeTracks/PrizeTracks';
 import BeginnersSection from '@pages/(hackers)/_components/HomeHacking/BeginnersSection';
 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 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 MDHelp from '@pages/(hackers)/_components/HomeHacking/MDHelp';
 import ScheduleSneakPeek from '@pages/(hackers)/_components/HomeHacking/ScheduleSneakPeek';
 import HeroJudging from '../_components/HomeJudging/HeroJudging';
 import HackerChoiceAward from '../_components/HomeJudging/HackersChoiceAwards';
 import HeroWaiting from '../_components/HomeJudging/HeroWaiting';
+import IndexHeroContentHacking from '../_components/HomeHacking/IndexHeroContentHacking';
 
 export default function Page() {
   return (
     <main id="home">
-      <TableNumberContextProvider>
-        <ClientTimeProtectedDisplay featureId="hero-hacking">
-          <HeroMVP />
+      {/* <TableNumberContextProvider> */}
+        {/* <ClientTimeProtectedDisplay featureId="hero-hacking"> */}
+          {/* <HeroMVP /> */}
+          <IndexHeroContentHacking />
           <ScheduleSneakPeek />
           <BeginnersSection />
           <MDHelp />
-        </ClientTimeProtectedDisplay>
+        {/* </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">
-          <TableNumberCheckin />
-        </ClientTimeProtectedDisplay>
-      </TableNumberContextProvider>
+        {/* </ClientTimeProtectedDisplay> */}
+        {/* <ClientTimeProtectedDisplay featureId="table-number-checkin"> */}
+          {/* <TableNumberCheckin /> */}
+        {/* </ClientTimeProtectedDisplay> */}
+      {/* </TableNumberContextProvider> */}
       <Discord />
       <PrizeTracks />
       <Footer />
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
new file mode 100644
index 000000000..b9292a77f
--- /dev/null
+++ b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
@@ -0,0 +1,158 @@
+'use client';
+
+import { useEffect } from 'react';
+import Image from 'next/image';
+import { LuArrowUpRight } from 'react-icons/lu';
+import { GoArrowRight } from 'react-icons/go';
+
+import { useRollout } from '@pages/_hooks/useRollout';
+import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay';
+import Countdown from './_components/Countdown';
+
+export default function IndexHeroContentHacking() {
+  const { loading, rolloutRes, fetchRollout } = useRollout('hacking-starts');
+
+  // Ensure rollout data is fetched on mount (prevents "loading forever" -> blank render)
+  useEffect(() => {
+    fetchRollout('hacking-starts');
+  }, [fetchRollout]);
+
+  // If rollout hasn't returned yet, render the hero shell + a fallback countdown
+  const hasRollout =
+    !!rolloutRes && (rolloutRes as any).ok && (rolloutRes as any).body?.rollout_time;
+
+  const countdownTarget = hasRollout
+    ? (rolloutRes as any).body.rollout_time + 24 * 60 * 60 * 1000
+    : undefined;
+
+  // If rollout errored, still render the hero (so the page isn't blank) and show error text
+  const rolloutError =
+    rolloutRes && !(rolloutRes as any).ok ? (rolloutRes as any).error : null;
+
+  return (
+    <div className="w-full min-h-screen p-4 md:p-10">
+      <div
+        className="relative w-full min-h-[86vh] overflow-hidden"
+        style={{
+          borderRadius: '38.812px',
+          background:
+            'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
+        }}
+      >
+        {/* background */}
+        <Image
+          src="/Hero/Clouds.svg"
+          alt="Background"
+          fill
+          className="object-cover pointer-events-none select-none"
+          priority
+        />
+
+        {/* content wrapper */}
+        <div className="relative z-10 w-full h-full px-4 md:px-10 py-[15%] md:py-10">
+          {/* Main grid area */}
+          <div className="mx-auto mt-6 md:mt-8 w-full max-w-[1200px]">
+            {/* Countdown bar */}
+            <div className="rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10">
+              <div className="flex items-start justify-between gap-6">
+                {/* Right: countdown (big) */}
+                <div className="flex-1 flex justify-center">
+                  <div className="text-white">
+                    <ClientTimeProtectedDisplay
+                      featureId="hacking-starts"
+                      fallback={<Countdown />}
+                      callback={() => fetchRollout('hacking-starts')}
+                    >
+                      {hasRollout && countdownTarget ? (
+                        <Countdown countdownTarget={countdownTarget} />
+                      ) : (
+                        <Countdown />
+                      )}
+                    </ClientTimeProtectedDisplay>
+
+                    {/* If the hook is still loading, show a subtle hint (won't affect layout much) */}
+                    {loading && (
+                      <div className="mt-2 text-white/90 text-sm text-right">
+                        loading…
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Middle row: 3 tiles */}
+            <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-5">
+              {/* Cow tile */}
+              <div className="relative rounded-[28px] bg-[#93F5F3] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-center justify-center">
+                <Image
+                  src="/hackers/hero/PeepingCow.svg"
+                  alt="Peeking cow"
+                  width={520}
+                  height={320}
+                  className="w-[85%] h-auto pointer-events-none select-none"
+                  priority
+                />
+              </div>
+
+              {/* Duck tile */}
+              <div className="relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-center justify-center">
+                <Image
+                  src="/hackers/hero/PeepingDuck.svg"
+                  alt="Peeking duck"
+                  width={520}
+                  height={320}
+                  className="w-[85%] h-auto pointer-events-none select-none"
+                  priority
+                />
+              </div>
+
+              {/* Frog tile (swap src if your frog asset path differs) */}
+              <div className="relative rounded-[28px] bg-[#E9FBBA] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-center justify-center">
+                <Image
+                  src="/hackers/hero/PeepingFrog.svg"
+                  alt="Peeking frog"
+                  width={520}
+                  height={320}
+                  className="w-[85%] h-auto pointer-events-none select-none"
+                />
+              </div>
+            </div>
+
+            {/* Bottom row: bunny + big submit pill */}
+            <div className="mt-6 grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-5 items-stretch">
+              {/* Bunny tile */}
+              <div className="relative rounded-[28px] bg-[#FFD2D2] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[170px] flex items-center justify-center">
+                <Image
+                  src="/hackers/hero/PeepingBunny.svg"
+                  alt="Peeking bunny"
+                  width={520}
+                  height={320}
+                  className="w-[85%] h-auto pointer-events-none select-none"
+                />
+              </div>
+
+              {/* Submit pill */}
+              <a
+                href="https://hackdavis-2026.devpost.com/"
+                target="_blank"
+                rel="noreferrer"
+                className="group relative rounded-[999px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[170px] flex items-center justify-center overflow-hidden"
+              >
+                {/* subtle inner gradient overlay */}
+                <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />
+
+                <div className="relative flex items-center gap-6">
+                  <span className="text-white text-5xl md:text-7xl font-extrabold tracking-wide drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+                    SUBMIT!
+                  </span>
+                  <GoArrowRight className="text-white text-5xl md:text-6xl drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)] transition-transform duration-300 group-hover:translate-x-1" />
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
new file mode 100644
index 000000000..932780d92
--- /dev/null
+++ b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface CountdownProps {
+  countdownTarget?: number;
+}
+
+export default function Countdown({
+  countdownTarget = new Date('2026-04-20T07:00:00-07:00').getTime(),
+}: CountdownProps) {
+  const [timeLeft, setTimeLeft] = useState({
+    hours: 24,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const now = Date.now();
+      const difference = countdownTarget - now;
+
+      if (difference <= 0) {
+        return { hours: 0, minutes: 0, seconds: 0 };
+      }
+
+      if (difference > 24 * 60 * 60 * 1000) {
+        return { hours: 24, minutes: 0, seconds: 0 };
+      }
+
+      return {
+        hours: Math.floor(difference / (1000 * 60 * 60)),
+        minutes: Math.floor((difference / (1000 * 60)) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    };
+
+    setTimeLeft(calculateTimeLeft());
+
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [countdownTarget]);
+
+  return (
+    <div className="flex flex-col items-end text-white">
+      {/* BIG TIMER */}
+      <div className="flex items-end gap-3 md:gap-6">
+        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+          {timeLeft.hours.toString().padStart(2, '0')}
+        </span>
+
+        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold leading-none">
+          :
+        </span>
+
+        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+          {timeLeft.minutes.toString().padStart(2, '0')}
+        </span>
+
+        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold leading-none">
+          :
+        </span>
+
+        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+          {timeLeft.seconds.toString().padStart(2, '0')}
+        </span>
+      </div>
+
+      {/* LABEL ROW */}
+      <div className="flex gap-8 md:gap-14 mt-3 text-xs md:text-sm font-semibold tracking-widest opacity-90">
+        <span>HOURS</span>
+        <span>MINUTES</span>
+        <span>SECONDS</span>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/_components/TimeTracker.tsx b/app/(pages)/(hackers)/_components/HomeHacking/_components/TimeTracker.tsx
new file mode 100644
index 000000000..2e7ec007a
--- /dev/null
+++ b/app/(pages)/(hackers)/_components/HomeHacking/_components/TimeTracker.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+type CountdownProps = {
+  targetTime: number;
+};
+
+const Countdown = ({ targetTime }: CountdownProps) => {
+  const [timeLeft, setTimeLeft] = useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const difference = targetTime - new Date().getTime();
+      if (difference <= 0) {
+        return { hours: 0, minutes: 0, seconds: 0 };
+      }
+      return {
+        hours: Math.floor(difference / (1000 * 60 * 60)),
+        minutes: Math.floor((difference / (1000 * 60)) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    };
+
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetTime]);
+
+  return (
+    <div>
+      <span>{timeLeft.hours.toString().padStart(2, '0')}</span> :{' '}
+      <span>{timeLeft.minutes.toString().padStart(2, '0')}</span> :{' '}
+      <span>{timeLeft.seconds.toString().padStart(2, '0')}</span>
+    </div>
+  );
+};
+
+type TimeTrackerProps = {
+  targetTime?: number;
+};
+
+const TimeTracker = ({ targetTime }: TimeTrackerProps) => {
+  const effectiveTargetTime =
+    targetTime || new Date('2025-05-01T09:00:00Z').getTime();
+
+  return <Countdown targetTime={effectiveTargetTime} />;
+};
+
+export default TimeTracker;
diff --git a/public/hackers/hero/PeepingBunny.svg b/public/hackers/hero/PeepingBunny.svg
new file mode 100644
index 000000000..5c4aec470
--- /dev/null
+++ b/public/hackers/hero/PeepingBunny.svg
@@ -0,0 +1,23 @@
+<svg width="384" height="300" viewBox="0 0 384 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M193.533 -20.9043C194.037 -24.3199 198.964 -24.3199 199.468 -20.9043L210.721 55.291C211.154 58.2198 215.117 58.8182 216.395 56.1477L249.654 -13.3556C251.144 -16.4701 255.852 -15.0153 255.325 -11.6029L243.576 64.5052C243.125 67.4317 246.736 69.1737 248.745 66.9984L301.047 10.373C303.39 7.83627 307.459 10.6158 305.949 13.7211L272.253 82.9748C270.957 85.6383 273.895 88.369 276.457 86.8818L343.144 48.1667C346.13 46.4326 349.2 50.2892 346.84 52.811L294.201 109.062C292.177 111.225 294.181 114.702 297.068 114.035L372.207 96.6613C375.572 95.8831 377.371 100.474 374.372 102.188L307.468 140.45C304.895 141.921 305.787 145.835 308.743 146.046L385.658 151.547C389.104 151.793 389.472 156.71 386.101 157.466L310.87 174.347C307.978 174.995 307.678 178.999 310.442 180.071L382.312 207.952C385.532 209.202 384.437 214.009 380.993 213.74L304.107 207.739C301.152 207.509 299.688 211.246 302.013 213.084L362.459 260.871C365.169 263.013 362.707 267.285 359.495 266.014L287.782 237.656C285.027 236.566 282.528 239.705 284.207 242.146L327.862 305.605C329.819 308.45 326.21 311.806 323.515 309.646L263.347 261.438C261.035 259.586 257.724 261.848 258.608 264.674L281.588 338.176C282.618 341.472 278.18 343.613 276.242 340.756L232.977 276.978C231.315 274.528 227.485 275.711 227.495 278.672L227.746 355.685C227.758 359.138 222.886 359.874 221.877 356.572L199.369 282.898C198.504 280.067 194.496 280.067 193.631 282.898L171.123 356.572C170.115 359.874 165.243 359.138 165.254 355.685L165.506 278.672C165.516 275.711 161.686 274.528 160.023 276.978L116.759 340.756C114.82 343.613 110.382 341.472 111.413 338.176L134.393 264.674C135.277 261.848 131.965 259.586 129.654 261.438L69.4861 309.646C66.7909 311.805 63.1812 308.45 65.1386 305.604L108.795 242.146C110.474 239.705 107.975 236.566 105.22 237.655L33.505 266.015C30.2929 267.285 27.8316 263.014 30.5413 260.871L90.9879 213.084C93.3126 211.246 91.8484 207.509 88.8939 207.739L12.007 213.74C8.56296 214.009 7.46789 209.202 10.6885 207.952L82.5588 180.071C85.322 178.999 85.0225 174.995 82.1305 174.347L6.89904 157.466C3.52821 156.71 3.896 151.793 7.34183 151.547L84.2581 146.046C87.2143 145.835 88.1062 141.921 85.5334 140.45L18.6289 102.188C15.6303 100.474 17.4285 95.8832 20.794 96.6613L95.9336 114.035C98.8205 114.702 100.825 111.225 98.7999 109.062L46.1605 52.8112C43.8005 50.2893 46.8702 46.4327 49.8572 48.1668L116.544 86.8818C119.105 88.369 122.044 85.6383 120.748 82.9748L87.0519 13.7211C85.5411 10.6159 89.6103 7.83626 91.9533 10.373L144.256 66.9985C146.265 69.1737 149.876 67.4317 149.425 64.5052L137.676 -11.6029C137.149 -15.0153 141.856 -16.4701 143.347 -13.3556L176.606 56.1477C177.884 58.8182 181.847 58.2198 182.28 55.291L193.533 -20.9043Z" fill="#FFE2D5"/>
+<g clip-path="url(#clip0_3009_1472)">
+<path d="M311.726 221.536C311.726 270.685 257.831 286.983 192.327 286.983C126.822 286.983 72.5303 270.685 72.5303 221.536C72.5303 137.731 126.822 108.999 192.327 108.999C257.831 108.999 311.726 133.741 311.726 221.536Z" fill="white"/>
+<path d="M278.263 230.885L292.388 230.885" stroke="#FFC0C1" stroke-width="18.8343" stroke-linecap="round"/>
+<path d="M284.994 258.902C285.412 283.237 254.893 309.983 239.581 320.313C237.493 320.313 232.481 319.51 229.141 316.296C224.965 312.278 242.191 256.606 248.454 244.553C254.718 232.501 284.472 228.483 284.994 258.902Z" fill="#E7EAEE"/>
+<path d="M250.008 378.497C270.199 365.07 242.905 281.313 223.183 270.763C203.462 260.214 171.385 261.812 157.298 270.763C143.211 279.715 108.4 364.75 128.591 378.497C148.782 392.243 229.817 391.923 250.008 378.497Z" fill="white"/>
+<path d="M94.1917 338.034C93.7741 313.699 124.294 286.953 139.605 276.622C141.693 276.622 146.705 277.426 150.045 280.64C154.221 284.657 136.996 340.329 130.732 352.382C124.468 364.435 94.7137 368.452 94.1917 338.034Z" fill="white"/>
+<path d="M241.097 349.999C241.097 375.12 219.594 381.153 193.07 381.153C166.545 381.153 145.042 375.12 145.042 349.999C145.042 316.975 166.545 298.282 193.07 298.282C219.594 298.282 241.097 316.975 241.097 349.999Z" fill="#E7EAEE"/>
+<path d="M238.808 64.1069C237.852 89.6448 219.067 144.176 217.651 165.253L155.341 181.949C143.576 164.403 102.445 125.927 86.9002 104.81C67.6211 78.6211 69.3313 37.4094 101.466 28.7989C127.999 21.6896 152.168 62.173 161.945 84.7024C159.146 60.3032 160.746 12.9151 186.369 6.04947C218.503 -2.56107 240.025 31.6094 238.808 64.1069Z" fill="white"/>
+<path d="M148.714 194.158L148.714 209.226" stroke="#123041" stroke-width="14.1258" stroke-linecap="round"/>
+<path d="M262.662 194.154L262.662 209.222" stroke="#123041" stroke-width="14.1258" stroke-linecap="round"/>
+<path d="M121.94 230.885L136.066 230.885" stroke="#FFC0C1" stroke-width="18.8343" stroke-linecap="round"/>
+<path d="M222.706 233.195C222.706 241.681 222.706 245.948 207.167 245.948C191.629 245.948 191.629 242.439 191.629 233.195C191.629 223.951 198.586 209.221 207.167 209.221C215.749 209.221 222.706 224.709 222.706 233.195Z" fill="#FFC0C1"/>
+<path d="M207.164 209.215C212.685 209.215 217.531 215.629 220.287 222.462C216.561 224.2 212.039 225.221 207.164 225.221C202.237 225.221 197.672 224.181 193.924 222.409C196.659 215.484 201.565 209.215 207.164 209.215Z" fill="#E7EAEE"/>
+<path d="M203.315 196.038C205.163 196.038 206.011 196.808 207.166 197.579C208.321 196.808 209.168 196.038 211.017 196.038C213.327 196.038 214.669 198.459 214.097 199.89C213.327 201.816 210.503 203.743 207.166 204.513C203.829 203.743 201.005 201.816 200.235 199.89C199.663 198.459 201.005 196.038 203.315 196.038Z" fill="#FFC0C1"/>
+</g>
+<defs>
+<clipPath id="clip0_3009_1472">
+<rect width="307.589" height="439.201" fill="white" transform="matrix(-1 -8.74228e-08 -8.74228e-08 1 345.626 -4)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/hackers/hero/PeepingCow.svg b/public/hackers/hero/PeepingCow.svg
new file mode 100644
index 000000000..4ce35eb5a
--- /dev/null
+++ b/public/hackers/hero/PeepingCow.svg
@@ -0,0 +1,29 @@
+<svg width="478" height="300" viewBox="0 0 478 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M238.793 -28C287.15 -28 326.352 11.7953 326.352 60.8848C326.352 73.4559 323.78 85.4172 319.145 96.2568C335.058 74.0176 360.881 59.5576 390.031 59.5576C438.388 59.5578 477.589 99.353 477.589 148.442C477.589 192.285 446.318 228.714 405.185 236C446.318 243.286 477.589 279.716 477.589 323.559C477.589 372.647 438.388 412.441 390.031 412.441C360.88 412.441 335.058 397.982 319.145 375.743C323.78 386.583 326.352 398.545 326.352 411.116C326.352 460.204 287.15 500 238.793 500C190.437 500 151.236 460.204 151.236 411.116C151.236 398.545 153.807 386.583 158.444 375.743C142.53 397.983 116.707 412.441 87.5576 412.441C39.2009 412.441 0.000180382 372.647 0 323.559C0 279.716 31.2689 243.286 72.4023 236C31.2689 228.714 4.42608e-05 192.285 0 148.442C0 99.3529 39.2008 59.5577 87.5576 59.5576C116.707 59.5576 142.53 74.0175 158.444 96.2568C153.807 85.4172 151.236 73.4559 151.236 60.8848C151.236 11.7954 190.437 -27.9998 238.793 -28Z" fill="#CCFFFE"/>
+<g clip-path="url(#clip0_3009_1470)">
+<path d="M122.183 84.2539C153.898 103.023 144.101 112.38 135.907 126.226C127.713 140.072 123.581 152.783 92.5102 134.395C76.7369 125.06 70.5928 106.268 78.7869 92.4224C86.9809 78.5764 106.41 74.9193 122.183 84.2539Z" fill="white"/>
+<path d="M168.673 87.4607C168.673 104.942 162.575 105.046 155.054 105.046C147.532 105.046 141.435 104.942 141.435 87.4607C141.435 69.9792 149.782 55.8076 155.054 55.8076C160.326 55.8076 168.673 69.9792 168.673 87.4607Z" fill="#6A5B3D"/>
+<path d="M333.151 87.4607C333.151 104.942 327.053 105.046 319.532 105.046C312.01 105.046 305.913 104.942 305.913 87.4607C305.913 69.9792 314.26 55.8076 319.532 55.8076C324.804 55.8076 333.151 69.9792 333.151 87.4607Z" fill="#6A5B3D"/>
+<path d="M355.393 84.2539C323.678 103.023 333.476 112.38 341.67 126.226C349.864 140.072 353.995 152.783 385.067 134.395C400.84 125.06 406.984 106.268 398.79 92.4224C390.596 78.5764 371.166 74.9193 355.393 84.2539Z" fill="#123041"/>
+<path d="M363.22 100.257C347.413 109.612 351.506 112.94 354.614 118.193C357.723 123.446 358.992 128.446 374.478 119.281C382.34 114.629 386.193 106.598 383.084 101.345C379.975 96.0915 371.081 95.6044 363.22 100.257Z" fill="#FFC0C1"/>
+<path d="M113.417 100.257C129.224 109.612 125.132 112.94 122.023 118.193C118.914 123.446 117.645 128.446 102.159 119.281C94.2974 114.629 90.4446 106.598 93.5536 101.345C96.6625 96.0915 105.556 95.6044 113.417 100.257Z" fill="#FFC0C1"/>
+<path d="M370.504 257.393C354.421 279.174 309.377 282.169 288.865 280.943C287.02 279.532 283.136 275.434 282.358 270.336C281.385 263.963 334.242 226.426 347.924 220.013C361.606 213.6 390.609 230.166 370.504 257.393Z" fill="#E7EAEE"/>
+<path d="M108.194 259.401C124.278 281.182 169.322 284.177 189.834 282.952C191.679 281.54 195.562 277.442 196.341 272.344C197.314 265.972 144.457 228.434 130.775 222.021C117.092 215.608 88.0901 232.175 108.194 259.401Z" fill="#E7EAEE"/>
+<path d="M304.297 363.998C326.759 349.061 296.395 255.885 274.456 244.149C252.516 232.413 216.833 234.191 201.162 244.149C185.49 254.107 146.764 348.705 169.226 363.998C191.688 379.29 281.835 378.934 304.297 363.998Z" fill="white"/>
+<path d="M296.482 330.199C296.482 358.145 272.561 364.857 243.053 364.857C213.545 364.857 189.625 358.145 189.625 330.199C189.625 293.461 213.545 272.667 243.053 272.667C272.561 272.667 296.482 293.461 296.482 330.199Z" fill="#FFC0C1"/>
+<path d="M369.816 192.526C369.816 247.202 309.86 265.333 236.989 265.333C164.119 265.333 103.721 247.202 103.721 192.526C103.721 99.2971 164.119 67.333 236.989 67.333C309.86 67.333 369.816 94.8577 369.816 192.526Z" fill="white"/>
+<path d="M246.252 67.4946C309.409 69.6349 360.978 94.5534 368.79 171.404C333.63 174.262 327.432 147.512 316.092 137.044C304.551 126.391 280.58 132.161 261.936 117.068C250.507 107.816 246.866 84.9394 246.252 67.4946Z" fill="#123041"/>
+<path d="M193.817 221.541C193.817 200.018 211.265 182.57 232.789 182.57H252.274C273.798 182.57 291.246 200.018 291.246 221.541V221.541C291.246 235.89 279.614 247.522 265.265 247.522H219.798C205.449 247.522 193.817 235.89 193.817 221.541V221.541Z" fill="#FFC0C1"/>
+<path d="M222.104 211.908V223.432" stroke="#123041" stroke-width="10.4762" stroke-linecap="round"/>
+<path d="M264.006 211.908L264.006 223.432" stroke="#123041" stroke-width="10.4762" stroke-linecap="round"/>
+<path d="M141.435 223.427H157.149" stroke="#FFC0C1" stroke-width="20.9524" stroke-linecap="round"/>
+<path d="M328.959 223.427H344.673" stroke="#FFC0C1" stroke-width="20.9524" stroke-linecap="round"/>
+<path d="M183.184 200.725C183.184 200.725 180.146 197.24 173.31 197.24C166.474 197.24 163.436 200.725 163.436 200.725" stroke="#123041" stroke-width="12.3849" stroke-linecap="round"/>
+<path d="M323.562 200.725C323.562 200.725 320.524 197.24 313.688 197.24C306.853 197.24 303.815 200.725 303.815 200.725" stroke="#123041" stroke-width="12.3849" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3009_1470">
+<rect width="330" height="374" fill="white" transform="translate(73.3418 38)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/hackers/hero/PeepingDuck.svg b/public/hackers/hero/PeepingDuck.svg
new file mode 100644
index 000000000..497c08b05
--- /dev/null
+++ b/public/hackers/hero/PeepingDuck.svg
@@ -0,0 +1,31 @@
+<svg width="403" height="300" viewBox="0 0 403 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.594 133.562C379.944 -5.7988 497.392 200.34 317.593 233.728C497.392 268.569 378.494 473.255 259.594 333.893C320.493 508.094 84.1453 506.643 145.045 333.893C24.6957 473.255 -92.7535 268.569 87.0453 233.728C-94.2034 200.34 24.6957 -4.34715 145.045 133.562C82.6953 -39.1874 320.493 -39.1874 259.594 133.562ZM201.594 207.598C216.095 207.598 229.144 219.212 229.144 233.728C229.144 248.244 216.095 261.31 201.594 261.31C187.095 261.31 175.494 248.244 175.494 233.728C175.494 219.212 187.095 207.598 201.594 207.598Z" fill="#FFEB93"/>
+<g clip-path="url(#clip0_3009_1473)">
+<mask id="mask0_3009_1473" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="3" width="337" height="323">
+<rect x="342.121" y="325.397" width="298.276" height="280.834" transform="rotate(-171.59 342.121 325.397)" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_3009_1473)">
+<g clip-path="url(#clip1_3009_1473)">
+<path d="M118.62 359.71C98.6036 341.667 142.225 254.021 165.621 245.628C189.018 237.235 224.023 244.206 238.056 256.337C252.088 268.467 276.539 367.614 252.106 379.445C227.673 391.276 138.636 377.754 118.62 359.71Z" fill="#FFDB40"/>
+<path d="M82.8625 163.677C65.8524 215.583 117.13 251.448 186.309 274.119C255.488 296.789 318.466 298.367 335.476 246.461C364.48 157.956 317.087 108.821 247.908 86.1503C178.729 63.4798 113.248 70.9573 82.8625 163.677Z" fill="#FFDB40"/>
+<path d="M282.411 257.158L267.493 252.269" stroke="#FCA18E" stroke-width="20.9317" stroke-linecap="round"/>
+<path d="M117.316 203.057L102.398 198.168" stroke="#FCA18E" stroke-width="20.9317" stroke-linecap="round"/>
+<path d="M257.49 207.771L252.276 223.684" stroke="#123041" stroke-width="15.6988" stroke-linecap="round"/>
+<path d="M137.15 168.337L131.936 184.25" stroke="#123041" stroke-width="15.6988" stroke-linecap="round"/>
+<path d="M164.788 202.583C161.818 211.646 171.905 219.233 185.912 223.823C199.918 228.413 212.539 228.268 215.509 219.205C218.479 210.142 210.673 195.594 196.667 191.003C182.661 186.413 167.758 193.52 164.788 202.583Z" fill="#FFB132"/>
+<path d="M250.104 48.5651C260.807 66.8879 264.556 84.7325 262.645 99.229L237.023 87.697C226.473 82.9486 220.223 66.6302 225.832 51.147C231.441 35.6638 244.661 39.2473 250.104 48.5651Z" fill="#FFDB40"/>
+<path d="M270.887 78.7852C264.687 81.8325 260.224 91.4387 258.767 95.861C268.143 98.0019 284.328 100.208 288.976 95.2785C293.624 90.3488 294.29 82.5445 291.522 79.7253C288.754 76.9061 278.638 74.9762 270.887 78.7852Z" fill="#FFDB40"/>
+</g>
+</g>
+<path d="M233.179 294.562C233.644 303.51 248.674 310.124 265.991 309.224C283.309 308.325 296.354 300.253 295.89 291.306C295.103 276.151 282.346 264.665 262.868 265.676C243.391 266.688 232.365 278.885 233.179 294.562Z" fill="#FFC532"/>
+<path d="M111.776 294.563C112.241 303.51 127.271 310.124 144.588 309.225C161.905 308.326 174.951 300.253 174.487 291.306C173.699 276.151 160.942 264.666 141.465 265.677C121.988 266.688 110.962 278.885 111.776 294.563Z" fill="#FFC532"/>
+</g>
+<defs>
+<clipPath id="clip0_3009_1473">
+<rect width="337" height="323.133" fill="white" transform="matrix(-1 0 0 1 370 -12)"/>
+</clipPath>
+<clipPath id="clip1_3009_1473">
+<rect width="294.09" height="503.047" fill="white" transform="matrix(-0.989247 -0.146252 -0.146252 0.989247 381.442 30.7886)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/hackers/hero/PeepingFrog.svg b/public/hackers/hero/PeepingFrog.svg
new file mode 100644
index 000000000..f695d6697
--- /dev/null
+++ b/public/hackers/hero/PeepingFrog.svg
@@ -0,0 +1,23 @@
+<svg width="313" height="279" viewBox="0 0 313 279" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M78.25 0C35.0337 0 0 32.7952 0 73.25C0 113.705 35.0337 146.5 78.25 146.5C35.0337 146.5 0 179.295 0 219.75C0 260.205 35.0337 293 78.25 293C121.467 293 156.5 260.205 156.5 219.75C156.5 260.205 191.533 293 234.75 293C277.967 293 313 260.205 313 219.75C313 179.295 277.967 146.5 234.75 146.5C277.967 146.5 313 113.705 313 73.25C313 32.7952 277.967 0 234.75 0C191.533 0 156.5 32.7952 156.5 73.25C156.5 32.7952 121.467 0 78.25 0Z" fill="#BBE769"/>
+<g clip-path="url(#clip0_3009_1183)">
+<ellipse cx="73.2733" cy="95.9422" rx="40.3379" ry="43.4692" transform="rotate(-28.6896 73.2733 95.9422)" fill="#5BB42B"/>
+<ellipse cx="40.3379" cy="43.4692" rx="40.3379" ry="43.4692" transform="matrix(-0.877234 -0.480063 -0.480063 0.877234 304.778 76.0566)" fill="#5BB42B"/>
+<path d="M278.95 239.606C260.294 257.833 217.002 253.724 197.688 249.392C196.152 247.765 193.092 243.268 193.139 238.301C193.198 232.091 249.252 204.562 263.252 200.577C277.252 196.593 302.27 216.823 278.95 239.606Z" fill="#5C9A15"/>
+<path d="M224.359 336.215C245.997 321.826 216.748 232.071 195.614 220.766C174.48 209.461 140.106 211.174 125.01 220.766C109.914 230.358 72.61 321.484 94.2472 336.215C115.884 350.946 202.722 350.603 224.359 336.215Z" fill="#5BB42B"/>
+<path d="M57.3888 292.845C56.9413 266.767 89.6464 238.106 106.055 227.036C108.292 227.036 113.663 227.897 117.243 231.341C121.718 235.646 103.258 295.305 96.5455 308.221C89.833 321.137 57.9482 325.443 57.3888 292.845Z" fill="#5BB42B"/>
+<path d="M214.811 301.12C214.811 331.711 191.768 339.058 163.344 339.058C134.919 339.058 111.876 331.711 111.876 301.12C111.876 260.905 134.919 238.142 163.344 238.142C191.768 238.142 214.811 260.905 214.811 301.12Z" fill="#A1DC3C"/>
+<path d="M291.509 165.755C291.509 218.981 232.845 236.632 161.544 236.632C90.2424 236.632 31.146 218.981 31.146 165.755C31.146 89.2943 90.2424 56.4966 161.544 56.4966C232.845 56.4966 291.509 83.2393 291.509 165.755Z" fill="#5BB42B"/>
+<path d="M80.5938 95.853V112" stroke="#123041" stroke-width="15.1374" stroke-linecap="round"/>
+<path d="M252.151 94.8438V110.99" stroke="#123041" stroke-width="15.1374" stroke-linecap="round"/>
+<path d="M58.3926 147.321H75.5483" stroke="#A1DC3C" stroke-width="20.1832" stroke-linecap="round"/>
+<path d="M245.089 147.321H262.245" stroke="#A1DC3C" stroke-width="20.1832" stroke-linecap="round"/>
+<path d="M185.546 131.226C185.546 119.101 185.546 113.005 162.84 113.005C140.134 113.005 140.134 118.018 140.134 131.226C140.134 152.867 150.3 165.481 162.84 165.481C175.381 165.481 185.546 151.353 185.546 131.226Z" fill="#D52C2F"/>
+<path d="M162.841 165.492C171.625 165.492 179.242 158.56 183.019 147.489C178.627 142.358 172.129 137.907 164.282 135.156C155.723 132.156 147.156 131.738 140.173 133.48C140.852 153.747 150.74 165.492 162.841 165.492Z" fill="#FF686B"/>
+</g>
+<defs>
+<clipPath id="clip0_3009_1183">
+<rect width="283.574" height="372.38" fill="white" transform="translate(21.0552 30.252)"/>
+</clipPath>
+</defs>
+</svg>

From e2da1cbaff298b692d8fa0509fe0ee8ac70302c3 Mon Sep 17 00:00:00 2001
From: Haylie Tan <haytan@ucdavis.edu>
Date: Tue, 3 Mar 2026 09:41:52 -0800
Subject: [PATCH 02/18] Added mobile

---
 app/(pages)/(hackers)/(hub)/layout.tsx        |   8 +-
 app/(pages)/(hackers)/(hub)/page.tsx          |  32 +--
 .../HomeHacking/IndexHeroContentHacking.tsx   | 243 ++++++++++++------
 public/hackers/hero/PeepingCow.svg            |  54 ++--
 public/hackers/hero/PeepingDuck.svg           |  44 ++--
 5 files changed, 242 insertions(+), 139 deletions(-)

diff --git a/app/(pages)/(hackers)/(hub)/layout.tsx b/app/(pages)/(hackers)/(hub)/layout.tsx
index c2a223fc2..8f8a14cb4 100644
--- a/app/(pages)/(hackers)/(hub)/layout.tsx
+++ b/app/(pages)/(hackers)/(hub)/layout.tsx
@@ -1,16 +1,16 @@
-import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
+// import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
 import Navbar from '@components/Navbar/Navbar';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-    {/* // <ProtectedDisplay */}
-    {/* //   allowedRoles={['hacker', 'admin']}
+      {/* // <ProtectedDisplay */}
+      {/* //   allowedRoles={['hacker', 'admin']}
     //   failRedirectRoute="/login"
     // > */}
       <Navbar />
       {children}
-    {/* // </ProtectedDisplay> */}
+      {/* // </ProtectedDisplay> */}
     </div>
   );
 }
diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx
index eb32809e6..6fac8e14c 100644
--- a/app/(pages)/(hackers)/(hub)/page.tsx
+++ b/app/(pages)/(hackers)/(hub)/page.tsx
@@ -17,22 +17,22 @@ export default function Page() {
   return (
     <main id="home">
       {/* <TableNumberContextProvider> */}
-        {/* <ClientTimeProtectedDisplay featureId="hero-hacking"> */}
-          {/* <HeroMVP /> */}
-          <IndexHeroContentHacking />
-          <ScheduleSneakPeek />
-          <BeginnersSection />
-          <MDHelp />
-        {/* </ClientTimeProtectedDisplay> */}
-        {/* temporarilty set featureId below to "hero-hacking" to test */}
-        {/* <ClientTimeProtectedDisplay featureId="hero-hacking"> */}
-          <HeroWaiting />
-          <HeroJudging />
-          <HackerChoiceAward />
-        {/* </ClientTimeProtectedDisplay> */}
-        {/* <ClientTimeProtectedDisplay featureId="table-number-checkin"> */}
-          {/* <TableNumberCheckin /> */}
-        {/* </ClientTimeProtectedDisplay> */}
+      {/* <ClientTimeProtectedDisplay featureId="hero-hacking"> */}
+      {/* <HeroMVP /> */}
+      <IndexHeroContentHacking />
+      <ScheduleSneakPeek />
+      <BeginnersSection />
+      <MDHelp />
+      {/* </ClientTimeProtectedDisplay> */}
+      {/* temporarilty set featureId below to "hero-hacking" to test */}
+      {/* <ClientTimeProtectedDisplay featureId="hero-hacking"> */}
+      <HeroWaiting />
+      <HeroJudging />
+      <HackerChoiceAward />
+      {/* </ClientTimeProtectedDisplay> */}
+      {/* <ClientTimeProtectedDisplay featureId="table-number-checkin"> */}
+      {/* <TableNumberCheckin /> */}
+      {/* </ClientTimeProtectedDisplay> */}
       {/* </TableNumberContextProvider> */}
       <Discord />
       <PrizeTracks />
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
index b9292a77f..a63a16bf3 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 import Image from 'next/image';
-import { LuArrowUpRight } from 'react-icons/lu';
+// import { LuArrowUpRight } from 'react-icons/lu';
 import { GoArrowRight } from 'react-icons/go';
 
 import { useRollout } from '@pages/_hooks/useRollout';
@@ -19,42 +19,44 @@ export default function IndexHeroContentHacking() {
 
   // If rollout hasn't returned yet, render the hero shell + a fallback countdown
   const hasRollout =
-    !!rolloutRes && (rolloutRes as any).ok && (rolloutRes as any).body?.rollout_time;
+    !!rolloutRes &&
+    (rolloutRes as any).ok &&
+    (rolloutRes as any).body?.rollout_time;
 
   const countdownTarget = hasRollout
     ? (rolloutRes as any).body.rollout_time + 24 * 60 * 60 * 1000
     : undefined;
 
   // If rollout errored, still render the hero (so the page isn't blank) and show error text
-  const rolloutError =
-    rolloutRes && !(rolloutRes as any).ok ? (rolloutRes as any).error : null;
+  // const rolloutError =
+  //   rolloutRes && !(rolloutRes as any).ok ? (rolloutRes as any).error : null;
 
   return (
     <div className="w-full min-h-screen p-4 md:p-10">
       <div
         className="relative w-full min-h-[86vh] overflow-hidden"
-        style={{
-          borderRadius: '38.812px',
-          background:
-            'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
-        }}
       >
-        {/* background */}
-        <Image
-          src="/Hero/Clouds.svg"
-          alt="Background"
-          fill
-          className="object-cover pointer-events-none select-none"
-          priority
-        />
 
         {/* content wrapper */}
         <div className="relative z-10 w-full h-full px-4 md:px-10 py-[15%] md:py-10">
           {/* Main grid area */}
           <div className="mx-auto mt-6 md:mt-8 w-full max-w-[1200px]">
             {/* Countdown bar */}
-            <div className="rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10">
+            <div className="rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10"
+              style={{
+                borderRadius: '38.812px',
+                background:
+                  'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
+              }}>
               <div className="flex items-start justify-between gap-6">
+                {/* background */}
+                <Image
+                  src="/Hero/Clouds.svg"
+                  alt="Background"
+                  fill
+                  className="object-cover pointer-events-none select-none -z-10"
+                  priority
+                />
                 {/* Right: countdown (big) */}
                 <div className="flex-1 flex justify-center">
                   <div className="text-white">
@@ -80,79 +82,174 @@ export default function IndexHeroContentHacking() {
                 </div>
               </div>
             </div>
+            
+            {/* ===================== MOBILE (2x2 animals) ===================== */}
+            <div className="mt-2 md:hidden">
+              {/* 2x2 animals */}
+              <div className="grid grid-cols-2 gap-2">
+                {/* Cow */}
+                <div className="relative rounded-[28px] bg-[#93F5F3] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <Image
+                    src="/hackers/hero/PeepingCow.svg"
+                    alt="Peeking cow"
+                    width={520}
+                    height={320}
+                    className="w-[85%] h-auto pointer-events-none select-none"
+                    priority
+                  />
+                </div>
 
-            {/* Middle row: 3 tiles */}
-            <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-5">
-              {/* Cow tile */}
-              <div className="relative rounded-[28px] bg-[#93F5F3] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-center justify-center">
-                <Image
-                  src="/hackers/hero/PeepingCow.svg"
-                  alt="Peeking cow"
-                  width={520}
-                  height={320}
-                  className="w-[85%] h-auto pointer-events-none select-none"
-                  priority
-                />
-              </div>
-
-              {/* Duck tile */}
-              <div className="relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-center justify-center">
-                <Image
-                  src="/hackers/hero/PeepingDuck.svg"
-                  alt="Peeking duck"
-                  width={520}
-                  height={320}
-                  className="w-[85%] h-auto pointer-events-none select-none"
-                  priority
-                />
-              </div>
+                {/* Duck */}
+                <div className="relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <Image
+                    src="/hackers/hero/PeepingDuck.svg"
+                    alt="Peeking duck"
+                    width={520}
+                    height={320}
+                    className="w-[100%] h-auto pointer-events-none select-none"
+                    priority
+                  />
+                </div>
 
-              {/* Frog tile (swap src if your frog asset path differs) */}
-              <div className="relative rounded-[28px] bg-[#E9FBBA] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-center justify-center">
-                <Image
-                  src="/hackers/hero/PeepingFrog.svg"
-                  alt="Peeking frog"
-                  width={520}
-                  height={320}
-                  className="w-[85%] h-auto pointer-events-none select-none"
-                />
-              </div>
-            </div>
+                {/* Frog */}
+                <div className="relative rounded-[28px] bg-[#E9FBBA] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <Image
+                    src="/hackers/hero/PeepingFrog.svg"
+                    alt="Peeking frog"
+                    width={520}
+                    height={320}
+                    className="w-[65%] h-auto pointer-events-none select-none"
+                  />
+                </div>
 
-            {/* Bottom row: bunny + big submit pill */}
-            <div className="mt-6 grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-5 items-stretch">
-              {/* Bunny tile */}
-              <div className="relative rounded-[28px] bg-[#FFD2D2] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[170px] flex items-center justify-center">
-                <Image
-                  src="/hackers/hero/PeepingBunny.svg"
-                  alt="Peeking bunny"
-                  width={520}
-                  height={320}
-                  className="w-[85%] h-auto pointer-events-none select-none"
-                />
+                {/* Bunny */}
+                <div className="relative rounded-[28px] bg-[#FFD2D2] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <Image
+                    src="/hackers/hero/PeepingBunny.svg"
+                    alt="Peeking bunny"
+                    width={520}
+                    height={320}
+                    className="w-[85%] h-auto pointer-events-none select-none"
+                  />
+                </div>
               </div>
 
-              {/* Submit pill */}
+              {/* Submit pill under grid on mobile */}
               <a
                 href="https://hackdavis-2026.devpost.com/"
                 target="_blank"
                 rel="noreferrer"
-                className="group relative rounded-[999px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[170px] flex items-center justify-center overflow-hidden"
+                className="mt-2 group relative rounded-[999px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[110px] flex items-center justify-center overflow-hidden"
+                style={{
+                borderRadius: '38.812px',
+                background:
+                  'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
+              }}
               >
-                {/* subtle inner gradient overlay */}
+                {/* background */}
+                <Image
+                  src="/Hero/Clouds.svg"
+                  alt="Background"
+                  fill
+                  className="object-cover pointer-events-none select-none -z-10"
+                  priority
+                />
                 <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />
-
-                <div className="relative flex items-center gap-6">
-                  <span className="text-white text-5xl md:text-7xl font-extrabold tracking-wide drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+                <div className="relative flex items-center gap-2">
+                  <span className="text-white text-4xl md:text-5xl font-extrabold tracking-wide drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
                     SUBMIT!
                   </span>
-                  <GoArrowRight className="text-white text-5xl md:text-6xl drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)] transition-transform duration-300 group-hover:translate-x-1" />
+                  <GoArrowRight className="text-white text-4xl md:text-5xl drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)] transition-transform duration-300 group-hover:translate-x-1" />
                 </div>
               </a>
             </div>
+
+            {/* ===================== DESKTOP (original layout) ===================== */}
+            <div className="hidden md:block">
+              {/* Middle row: 3 tiles */}
+              <div className="mt-6 grid grid-cols-1 gap-5 md:grid-cols-[50fr_30fr_20fr]">
+                {/* Cow */}
+                <div className="relative rounded-[28px] bg-[#93F5F3] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-end justify-center">
+                  <Image
+                    src="/hackers/hero/PeepingCow.svg"
+                    alt="Peeking cow"
+                    width={520}
+                    height={320}
+                    className="w-[55%] h-auto pointer-events-none select-none"
+                    priority
+                  />
+                </div>
+
+                {/* Duck */}
+                <div className="relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-end justify-center">
+                  <Image
+                    src="/hackers/hero/PeepingDuck.svg"
+                    alt="Peeking duck"
+                    width={520}
+                    height={320}
+                    className="w-[100%] h-auto pointer-events-none select-none"
+                    priority
+                  />
+                </div>
+
+                {/* Frog */}
+                <div className="relative rounded-[28px] bg-[#E9FBBA] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-end justify-center">
+                  <Image
+                    src="/hackers/hero/PeepingFrog.svg"
+                    alt="Peeking frog"
+                    width={520}
+                    height={320}
+                    className="w-[90%] h-auto pointer-events-none select-none"
+                  />
+                </div>
+              </div>
+
+              {/* Bottom row: bunny + submit pill (unchanged) */}
+              <div className="mt-6 grid grid-cols-[1fr_2fr] gap-5 items-stretch">
+                {/* Bunny */}
+                <div className="relative rounded-[28px] bg-[#FFD2D2] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[170px] flex items-end justify-center">
+                  <Image
+                    src="/hackers/hero/PeepingBunny.svg"
+                    alt="Peeking bunny"
+                    width={520}
+                    height={320}
+                    className="w-[85%] h-auto pointer-events-none select-none"
+                  />
+                </div>
+
+                {/* Submit pill */}
+                <a
+                  href="https://hackdavis-2026.devpost.com/"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="group relative rounded-[999px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[170px] flex items-center justify-center overflow-hidden"
+                  style={{
+                    borderRadius: '38.812px',
+                    background:
+                      'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
+                  }}
+                >
+                  {/* background */}
+                  <Image
+                    src="/Hero/Clouds.svg"
+                    alt="Background"
+                    fill
+                    className="object-cover pointer-events-none select-none -z-10"
+                    priority
+                  />
+                  <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />
+                  <div className="relative flex items-center gap-6">
+                    <span className="text-white text-5xl md:text-7xl font-extrabold tracking-wide drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+                      SUBMIT!
+                    </span>
+                    <GoArrowRight className="text-white text-5xl md:text-6xl drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)] transition-transform duration-300 group-hover:translate-x-1" />
+                  </div>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/public/hackers/hero/PeepingCow.svg b/public/hackers/hero/PeepingCow.svg
index 4ce35eb5a..2ef1eb44d 100644
--- a/public/hackers/hero/PeepingCow.svg
+++ b/public/hackers/hero/PeepingCow.svg
@@ -1,29 +1,35 @@
-<svg width="478" height="300" viewBox="0 0 478 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M238.793 -28C287.15 -28 326.352 11.7953 326.352 60.8848C326.352 73.4559 323.78 85.4172 319.145 96.2568C335.058 74.0176 360.881 59.5576 390.031 59.5576C438.388 59.5578 477.589 99.353 477.589 148.442C477.589 192.285 446.318 228.714 405.185 236C446.318 243.286 477.589 279.716 477.589 323.559C477.589 372.647 438.388 412.441 390.031 412.441C360.88 412.441 335.058 397.982 319.145 375.743C323.78 386.583 326.352 398.545 326.352 411.116C326.352 460.204 287.15 500 238.793 500C190.437 500 151.236 460.204 151.236 411.116C151.236 398.545 153.807 386.583 158.444 375.743C142.53 397.983 116.707 412.441 87.5576 412.441C39.2009 412.441 0.000180382 372.647 0 323.559C0 279.716 31.2689 243.286 72.4023 236C31.2689 228.714 4.42608e-05 192.285 0 148.442C0 99.3529 39.2008 59.5577 87.5576 59.5576C116.707 59.5576 142.53 74.0175 158.444 96.2568C153.807 85.4172 151.236 73.4559 151.236 60.8848C151.236 11.7954 190.437 -27.9998 238.793 -28Z" fill="#CCFFFE"/>
-<g clip-path="url(#clip0_3009_1470)">
-<path d="M122.183 84.2539C153.898 103.023 144.101 112.38 135.907 126.226C127.713 140.072 123.581 152.783 92.5102 134.395C76.7369 125.06 70.5928 106.268 78.7869 92.4224C86.9809 78.5764 106.41 74.9193 122.183 84.2539Z" fill="white"/>
-<path d="M168.673 87.4607C168.673 104.942 162.575 105.046 155.054 105.046C147.532 105.046 141.435 104.942 141.435 87.4607C141.435 69.9792 149.782 55.8076 155.054 55.8076C160.326 55.8076 168.673 69.9792 168.673 87.4607Z" fill="#6A5B3D"/>
-<path d="M333.151 87.4607C333.151 104.942 327.053 105.046 319.532 105.046C312.01 105.046 305.913 104.942 305.913 87.4607C305.913 69.9792 314.26 55.8076 319.532 55.8076C324.804 55.8076 333.151 69.9792 333.151 87.4607Z" fill="#6A5B3D"/>
-<path d="M355.393 84.2539C323.678 103.023 333.476 112.38 341.67 126.226C349.864 140.072 353.995 152.783 385.067 134.395C400.84 125.06 406.984 106.268 398.79 92.4224C390.596 78.5764 371.166 74.9193 355.393 84.2539Z" fill="#123041"/>
-<path d="M363.22 100.257C347.413 109.612 351.506 112.94 354.614 118.193C357.723 123.446 358.992 128.446 374.478 119.281C382.34 114.629 386.193 106.598 383.084 101.345C379.975 96.0915 371.081 95.6044 363.22 100.257Z" fill="#FFC0C1"/>
-<path d="M113.417 100.257C129.224 109.612 125.132 112.94 122.023 118.193C118.914 123.446 117.645 128.446 102.159 119.281C94.2974 114.629 90.4446 106.598 93.5536 101.345C96.6625 96.0915 105.556 95.6044 113.417 100.257Z" fill="#FFC0C1"/>
-<path d="M370.504 257.393C354.421 279.174 309.377 282.169 288.865 280.943C287.02 279.532 283.136 275.434 282.358 270.336C281.385 263.963 334.242 226.426 347.924 220.013C361.606 213.6 390.609 230.166 370.504 257.393Z" fill="#E7EAEE"/>
-<path d="M108.194 259.401C124.278 281.182 169.322 284.177 189.834 282.952C191.679 281.54 195.562 277.442 196.341 272.344C197.314 265.972 144.457 228.434 130.775 222.021C117.092 215.608 88.0901 232.175 108.194 259.401Z" fill="#E7EAEE"/>
-<path d="M304.297 363.998C326.759 349.061 296.395 255.885 274.456 244.149C252.516 232.413 216.833 234.191 201.162 244.149C185.49 254.107 146.764 348.705 169.226 363.998C191.688 379.29 281.835 378.934 304.297 363.998Z" fill="white"/>
-<path d="M296.482 330.199C296.482 358.145 272.561 364.857 243.053 364.857C213.545 364.857 189.625 358.145 189.625 330.199C189.625 293.461 213.545 272.667 243.053 272.667C272.561 272.667 296.482 293.461 296.482 330.199Z" fill="#FFC0C1"/>
-<path d="M369.816 192.526C369.816 247.202 309.86 265.333 236.989 265.333C164.119 265.333 103.721 247.202 103.721 192.526C103.721 99.2971 164.119 67.333 236.989 67.333C309.86 67.333 369.816 94.8577 369.816 192.526Z" fill="white"/>
-<path d="M246.252 67.4946C309.409 69.6349 360.978 94.5534 368.79 171.404C333.63 174.262 327.432 147.512 316.092 137.044C304.551 126.391 280.58 132.161 261.936 117.068C250.507 107.816 246.866 84.9394 246.252 67.4946Z" fill="#123041"/>
-<path d="M193.817 221.541C193.817 200.018 211.265 182.57 232.789 182.57H252.274C273.798 182.57 291.246 200.018 291.246 221.541V221.541C291.246 235.89 279.614 247.522 265.265 247.522H219.798C205.449 247.522 193.817 235.89 193.817 221.541V221.541Z" fill="#FFC0C1"/>
-<path d="M222.104 211.908V223.432" stroke="#123041" stroke-width="10.4762" stroke-linecap="round"/>
-<path d="M264.006 211.908L264.006 223.432" stroke="#123041" stroke-width="10.4762" stroke-linecap="round"/>
-<path d="M141.435 223.427H157.149" stroke="#FFC0C1" stroke-width="20.9524" stroke-linecap="round"/>
-<path d="M328.959 223.427H344.673" stroke="#FFC0C1" stroke-width="20.9524" stroke-linecap="round"/>
-<path d="M183.184 200.725C183.184 200.725 180.146 197.24 173.31 197.24C166.474 197.24 163.436 200.725 163.436 200.725" stroke="#123041" stroke-width="12.3849" stroke-linecap="round"/>
-<path d="M323.562 200.725C323.562 200.725 320.524 197.24 313.688 197.24C306.853 197.24 303.815 200.725 303.815 200.725" stroke="#123041" stroke-width="12.3849" stroke-linecap="round"/>
+<svg width="478" height="357" viewBox="0 0 478 357" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3105_1186)">
+<path d="M238.793 21C287.15 21 326.352 60.7953 326.352 109.885C326.352 122.456 323.78 134.417 319.145 145.257C335.058 123.018 360.881 108.558 390.031 108.558C438.388 108.558 477.589 148.353 477.589 197.442C477.589 241.285 446.318 277.714 405.185 285C446.318 292.286 477.589 328.716 477.589 372.559C477.589 421.647 438.388 461.441 390.031 461.441C360.88 461.441 335.058 446.982 319.145 424.743C323.78 435.583 326.352 447.545 326.352 460.116C326.352 509.204 287.15 549 238.793 549C190.437 549 151.236 509.204 151.236 460.116C151.236 447.545 153.807 435.583 158.444 424.743C142.53 446.983 116.707 461.441 87.5576 461.441C39.2009 461.441 0.000180382 421.647 0 372.559C0 328.716 31.2689 292.286 72.4023 285C31.2689 277.714 4.42608e-05 241.285 0 197.442C0 148.353 39.2008 108.558 87.5576 108.558C116.707 108.558 142.53 123.018 158.444 145.257C153.807 134.417 151.236 122.456 151.236 109.885C151.236 60.7954 190.437 21.0002 238.793 21Z" fill="#CCFFFE"/>
+<g clip-path="url(#clip1_3105_1186)">
+<path d="M122.183 133.254C153.898 152.023 144.101 161.38 135.907 175.226C127.713 189.072 123.581 201.783 92.5102 183.395C76.7369 174.06 70.5928 155.268 78.7869 141.422C86.9809 127.576 106.41 123.919 122.183 133.254Z" fill="white"/>
+<path d="M168.673 136.461C168.673 153.942 162.575 154.046 155.054 154.046C147.532 154.046 141.435 153.942 141.435 136.461C141.435 118.979 149.782 104.808 155.054 104.808C160.326 104.808 168.673 118.979 168.673 136.461Z" fill="#6A5B3D"/>
+<path d="M333.151 136.461C333.151 153.942 327.053 154.046 319.532 154.046C312.01 154.046 305.913 153.942 305.913 136.461C305.913 118.979 314.26 104.808 319.532 104.808C324.804 104.808 333.151 118.979 333.151 136.461Z" fill="#6A5B3D"/>
+<path d="M355.393 133.254C323.678 152.023 333.476 161.38 341.67 175.226C349.864 189.072 353.995 201.783 385.067 183.395C400.84 174.06 406.984 155.268 398.79 141.422C390.596 127.576 371.166 123.919 355.393 133.254Z" fill="#123041"/>
+<path d="M363.22 149.257C347.413 158.612 351.506 161.94 354.614 167.193C357.723 172.446 358.992 177.446 374.478 168.281C382.34 163.629 386.193 155.598 383.084 150.345C379.975 145.091 371.081 144.604 363.22 149.257Z" fill="#FFC0C1"/>
+<path d="M113.417 149.257C129.224 158.612 125.132 161.94 122.023 167.193C118.914 172.446 117.645 177.446 102.159 168.281C94.2974 163.629 90.4446 155.598 93.5536 150.345C96.6625 145.091 105.556 144.604 113.417 149.257Z" fill="#FFC0C1"/>
+<path d="M370.504 306.393C354.421 328.174 309.377 331.169 288.865 329.943C287.02 328.532 283.136 324.434 282.358 319.336C281.385 312.963 334.242 275.426 347.924 269.013C361.606 262.6 390.609 279.166 370.504 306.393Z" fill="#E7EAEE"/>
+<path d="M108.194 308.401C124.278 330.182 169.322 333.177 189.834 331.952C191.679 330.54 195.562 326.442 196.341 321.344C197.314 314.972 144.457 277.434 130.775 271.021C117.092 264.608 88.0901 281.175 108.194 308.401Z" fill="#E7EAEE"/>
+<path d="M304.297 412.998C326.759 398.061 296.395 304.885 274.456 293.149C252.516 281.413 216.833 283.191 201.162 293.149C185.49 303.107 146.764 397.705 169.226 412.998C191.688 428.29 281.835 427.934 304.297 412.998Z" fill="white"/>
+<path d="M171.088 350.501C176.79 352.996 181.723 356.816 183.863 362.521C188.892 375.93 206.212 381.727 214.244 382.95C214.244 382.95 234.296 390.021 240.434 400.759C244.269 407.469 244.447 418.718 244.272 424.23C213.759 425.01 181.459 421.324 169.228 412.998C157.917 405.297 162.124 377.487 171.088 350.501Z" fill="#123041"/>
+<path d="M296.482 379.199C296.482 407.145 272.561 413.857 243.053 413.857C213.545 413.857 189.625 407.145 189.625 379.199C189.625 342.461 213.545 321.667 243.053 321.667C272.561 321.667 296.482 342.461 296.482 379.199Z" fill="#FFC0C1"/>
+<path d="M369.816 241.526C369.816 296.202 309.86 314.333 236.989 314.333C164.119 314.333 103.721 296.202 103.721 241.526C103.721 148.297 164.119 116.333 236.989 116.333C309.86 116.333 369.816 143.858 369.816 241.526Z" fill="white"/>
+<path d="M246.252 116.495C309.409 118.635 360.978 143.553 368.79 220.404C333.63 223.262 327.432 196.512 316.092 186.044C304.551 175.391 280.58 181.161 261.936 166.068C250.507 156.816 246.866 133.939 246.252 116.495Z" fill="#123041"/>
+<path d="M193.817 270.541C193.817 249.018 211.265 231.57 232.789 231.57H252.274C273.798 231.57 291.246 249.018 291.246 270.541V270.541C291.246 284.89 279.614 296.522 265.265 296.522H219.798C205.449 296.522 193.817 284.89 193.817 270.541V270.541Z" fill="#FFC0C1"/>
+<path d="M222.104 260.908V272.432" stroke="#123041" stroke-width="10.4762" stroke-linecap="round"/>
+<path d="M264.006 260.908L264.006 272.432" stroke="#123041" stroke-width="10.4762" stroke-linecap="round"/>
+<path d="M141.435 272.427H157.149" stroke="#FFC0C1" stroke-width="20.9524" stroke-linecap="round"/>
+<path d="M328.959 272.427H344.673" stroke="#FFC0C1" stroke-width="20.9524" stroke-linecap="round"/>
+<path d="M183.184 249.725C183.184 249.725 180.146 246.24 173.31 246.24C166.474 246.24 163.436 249.725 163.436 249.725" stroke="#123041" stroke-width="12.3849" stroke-linecap="round"/>
+<path d="M323.562 249.725C323.562 249.725 320.524 246.24 313.688 246.24C306.853 246.24 303.815 249.725 303.815 249.725" stroke="#123041" stroke-width="12.3849" stroke-linecap="round"/>
+</g>
 </g>
 <defs>
-<clipPath id="clip0_3009_1470">
-<rect width="330" height="374" fill="white" transform="translate(73.3418 38)"/>
+<clipPath id="clip0_3105_1186">
+<rect width="478" height="357" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3105_1186">
+<rect width="330" height="374" fill="white" transform="translate(73.3418 87)"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/public/hackers/hero/PeepingDuck.svg b/public/hackers/hero/PeepingDuck.svg
index 497c08b05..da908ccf5 100644
--- a/public/hackers/hero/PeepingDuck.svg
+++ b/public/hackers/hero/PeepingDuck.svg
@@ -1,31 +1,31 @@
-<svg width="403" height="300" viewBox="0 0 403 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M259.594 133.562C379.944 -5.7988 497.392 200.34 317.593 233.728C497.392 268.569 378.494 473.255 259.594 333.893C320.493 508.094 84.1453 506.643 145.045 333.893C24.6957 473.255 -92.7535 268.569 87.0453 233.728C-94.2034 200.34 24.6957 -4.34715 145.045 133.562C82.6953 -39.1874 320.493 -39.1874 259.594 133.562ZM201.594 207.598C216.095 207.598 229.144 219.212 229.144 233.728C229.144 248.244 216.095 261.31 201.594 261.31C187.095 261.31 175.494 248.244 175.494 233.728C175.494 219.212 187.095 207.598 201.594 207.598Z" fill="#FFEB93"/>
-<g clip-path="url(#clip0_3009_1473)">
-<mask id="mask0_3009_1473" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="3" width="337" height="323">
-<rect x="342.121" y="325.397" width="298.276" height="280.834" transform="rotate(-171.59 342.121 325.397)" fill="#D9D9D9"/>
+<svg width="529" height="370" viewBox="0 0 529 370" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3105_1187)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M322.594 158.695C442.944 19.334 560.392 225.473 380.593 258.861C560.392 293.701 441.494 498.388 322.594 359.025C383.493 533.226 147.145 531.776 208.045 359.025C87.6957 498.388 -29.7535 293.701 150.045 258.861C-31.2034 225.473 87.6957 20.7857 208.045 158.695C145.695 -14.0545 383.493 -14.0545 322.594 158.695ZM264.594 232.731C279.095 232.731 292.144 244.344 292.144 258.861C292.144 273.377 279.095 286.443 264.594 286.443C250.095 286.443 238.494 273.377 238.494 258.861C238.494 244.344 250.095 232.731 264.594 232.731Z" fill="#FFEB93"/>
+<mask id="mask0_3105_1187" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="96" y="69" width="337" height="322">
+<rect x="391.069" y="390.438" width="298.276" height="280.834" transform="rotate(-171.59 391.069 390.438)" fill="#D9D9D9"/>
 </mask>
-<g mask="url(#mask0_3009_1473)">
-<g clip-path="url(#clip1_3009_1473)">
-<path d="M118.62 359.71C98.6036 341.667 142.225 254.021 165.621 245.628C189.018 237.235 224.023 244.206 238.056 256.337C252.088 268.467 276.539 367.614 252.106 379.445C227.673 391.276 138.636 377.754 118.62 359.71Z" fill="#FFDB40"/>
-<path d="M82.8625 163.677C65.8524 215.583 117.13 251.448 186.309 274.119C255.488 296.789 318.466 298.367 335.476 246.461C364.48 157.956 317.087 108.821 247.908 86.1503C178.729 63.4798 113.248 70.9573 82.8625 163.677Z" fill="#FFDB40"/>
-<path d="M282.411 257.158L267.493 252.269" stroke="#FCA18E" stroke-width="20.9317" stroke-linecap="round"/>
-<path d="M117.316 203.057L102.398 198.168" stroke="#FCA18E" stroke-width="20.9317" stroke-linecap="round"/>
-<path d="M257.49 207.771L252.276 223.684" stroke="#123041" stroke-width="15.6988" stroke-linecap="round"/>
-<path d="M137.15 168.337L131.936 184.25" stroke="#123041" stroke-width="15.6988" stroke-linecap="round"/>
-<path d="M164.788 202.583C161.818 211.646 171.905 219.233 185.912 223.823C199.918 228.413 212.539 228.268 215.509 219.205C218.479 210.142 210.673 195.594 196.667 191.003C182.661 186.413 167.758 193.52 164.788 202.583Z" fill="#FFB132"/>
-<path d="M250.104 48.5651C260.807 66.8879 264.556 84.7325 262.645 99.229L237.023 87.697C226.473 82.9486 220.223 66.6302 225.832 51.147C231.441 35.6638 244.661 39.2473 250.104 48.5651Z" fill="#FFDB40"/>
-<path d="M270.887 78.7852C264.687 81.8325 260.224 91.4387 258.767 95.861C268.143 98.0019 284.328 100.208 288.976 95.2785C293.624 90.3488 294.29 82.5445 291.522 79.7253C288.754 76.9061 278.638 74.9762 270.887 78.7852Z" fill="#FFDB40"/>
+<g mask="url(#mask0_3105_1187)">
+<g clip-path="url(#clip1_3105_1187)">
+<path d="M167.568 424.751C147.552 406.708 191.174 319.062 214.57 310.669C237.967 302.276 272.972 309.247 287.005 321.378C301.037 333.508 325.487 432.655 301.055 444.486C276.622 456.317 187.584 442.795 167.568 424.751Z" fill="#FFDB40"/>
+<path d="M131.811 228.718C114.801 280.624 166.079 316.489 235.258 339.16C304.437 361.83 367.415 363.408 384.425 311.502C413.429 222.997 366.036 173.862 296.857 151.191C227.678 128.521 162.196 135.998 131.811 228.718Z" fill="#FFDB40"/>
+<path d="M331.36 322.199L316.442 317.31" stroke="#FCA18E" stroke-width="20.9317" stroke-linecap="round"/>
+<path d="M166.265 268.098L151.347 263.209" stroke="#FCA18E" stroke-width="20.9317" stroke-linecap="round"/>
+<path d="M306.439 272.812L301.224 288.725" stroke="#123041" stroke-width="15.6988" stroke-linecap="round"/>
+<path d="M186.099 233.378L180.884 249.291" stroke="#123041" stroke-width="15.6988" stroke-linecap="round"/>
+<path d="M213.737 267.624C210.767 276.687 220.854 284.274 234.86 288.864C248.867 293.454 261.488 293.309 264.458 284.246C267.428 275.183 259.622 260.635 245.616 256.045C231.609 251.454 216.707 258.561 213.737 267.624Z" fill="#FFB132"/>
+<path d="M299.053 113.606C309.755 131.929 313.505 149.774 311.594 164.27L285.972 152.738C275.421 147.99 269.172 131.671 274.781 116.188C280.39 100.705 293.61 104.288 299.053 113.606Z" fill="#FFDB40"/>
+<path d="M319.836 143.826C313.635 146.873 309.173 156.48 307.716 160.902C317.091 163.043 333.277 165.249 337.925 160.32C342.572 155.39 343.238 147.586 340.471 144.766C337.703 141.947 327.586 140.017 319.836 143.826Z" fill="#FFDB40"/>
 </g>
 </g>
-<path d="M233.179 294.562C233.644 303.51 248.674 310.124 265.991 309.224C283.309 308.325 296.354 300.253 295.89 291.306C295.103 276.151 282.346 264.665 262.868 265.676C243.391 266.688 232.365 278.885 233.179 294.562Z" fill="#FFC532"/>
-<path d="M111.776 294.563C112.241 303.51 127.271 310.124 144.588 309.225C161.905 308.326 174.951 300.253 174.487 291.306C173.699 276.151 160.942 264.666 141.465 265.677C121.988 266.688 110.962 278.885 111.776 294.563Z" fill="#FFC532"/>
+<path d="M282.128 359.602C282.593 368.55 297.623 375.164 314.94 374.264C332.257 373.365 345.303 365.293 344.839 356.346C344.052 341.191 331.294 329.705 311.817 330.716C292.34 331.728 281.314 343.925 282.128 359.602Z" fill="#FFC532"/>
+<path d="M160.725 359.603C161.189 368.55 176.22 375.164 193.537 374.265C210.854 373.366 223.9 365.293 223.435 356.346C222.648 341.191 209.891 329.706 190.414 330.717C170.937 331.728 159.911 343.925 160.725 359.603Z" fill="#FFC532"/>
 </g>
 <defs>
-<clipPath id="clip0_3009_1473">
-<rect width="337" height="323.133" fill="white" transform="matrix(-1 0 0 1 370 -12)"/>
+<clipPath id="clip0_3105_1187">
+<rect width="529" height="370" fill="white"/>
 </clipPath>
-<clipPath id="clip1_3009_1473">
-<rect width="294.09" height="503.047" fill="white" transform="matrix(-0.989247 -0.146252 -0.146252 0.989247 381.442 30.7886)"/>
+<clipPath id="clip1_3105_1187">
+<rect width="294.09" height="503.047" fill="white" transform="matrix(-0.989247 -0.146252 -0.146252 0.989247 430.391 95.8296)"/>
 </clipPath>
 </defs>
 </svg>

From cb899fa24247ad31cf36c8833ed1a29172aedff4 Mon Sep 17 00:00:00 2001
From: Haylie Tan <haytan@ucdavis.edu>
Date: Tue, 3 Mar 2026 09:49:15 -0800
Subject: [PATCH 03/18] Updated Counter

---
 .../HomeHacking/IndexHeroContentHacking.tsx   | 21 +++++++++----------
 .../HomeHacking/_components/Countdown.tsx     | 14 ++++++-------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
index a63a16bf3..76a4d123a 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
@@ -48,15 +48,15 @@ export default function IndexHeroContentHacking() {
                 background:
                   'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
               }}>
+              {/* background */}
+              <Image
+                src="/Hero/Clouds.svg"
+                alt="Background"
+                fill
+                className="object-cover pointer-events-none select-none -z-10"
+                priority
+              />
               <div className="flex items-start justify-between gap-6">
-                {/* background */}
-                <Image
-                  src="/Hero/Clouds.svg"
-                  alt="Background"
-                  fill
-                  className="object-cover pointer-events-none select-none -z-10"
-                  priority
-                />
                 {/* Right: countdown (big) */}
                 <div className="flex-1 flex justify-center">
                   <div className="text-white">
@@ -72,7 +72,6 @@ export default function IndexHeroContentHacking() {
                       )}
                     </ClientTimeProtectedDisplay>
 
-                    {/* If the hook is still loading, show a subtle hint (won't affect layout much) */}
                     {loading && (
                       <div className="mt-2 text-white/90 text-sm text-right">
                         loading…
@@ -139,7 +138,7 @@ export default function IndexHeroContentHacking() {
                 href="https://hackdavis-2026.devpost.com/"
                 target="_blank"
                 rel="noreferrer"
-                className="mt-2 group relative rounded-[999px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[110px] flex items-center justify-center overflow-hidden"
+                className="mt-2 group relative rounded-xl bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[110px] flex items-center justify-center overflow-hidden"
                 style={{
                 borderRadius: '38.812px',
                 background:
@@ -151,7 +150,7 @@ export default function IndexHeroContentHacking() {
                   src="/Hero/Clouds.svg"
                   alt="Background"
                   fill
-                  className="object-cover pointer-events-none select-none -z-10"
+                  className="object-cover pointer-events-none select-none -z-10 overflow-hidden"
                   priority
                 />
                 <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
index 932780d92..7ee17dfad 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
@@ -48,33 +48,33 @@ export default function Countdown({
     <div className="flex flex-col items-end text-white">
       {/* BIG TIMER */}
       <div className="flex items-end gap-3 md:gap-6">
-        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
           {timeLeft.hours.toString().padStart(2, '0')}
         </span>
 
-        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold leading-none">
+        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold leading-none">
           :
         </span>
 
-        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
           {timeLeft.minutes.toString().padStart(2, '0')}
         </span>
 
-        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold leading-none">
+        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold leading-none">
           :
         </span>
 
-        <span className="text-[72px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
           {timeLeft.seconds.toString().padStart(2, '0')}
         </span>
       </div>
 
       {/* LABEL ROW */}
-      <div className="flex gap-8 md:gap-14 mt-3 text-xs md:text-sm font-semibold tracking-widest opacity-90">
+      {/* <div className="flex gap-8 md:gap-14 mt-3 text-xs md:text-sm font-semibold tracking-widest opacity-90">
         <span>HOURS</span>
         <span>MINUTES</span>
         <span>SECONDS</span>
-      </div>
+      </div> */}
     </div>
   );
 }

From dac26f2d62dd6d27f2c3d4d74c3edc3856673edf Mon Sep 17 00:00:00 2001
From: Haylie Tan <haytan@ucdavis.edu>
Date: Wed, 4 Mar 2026 19:29:07 -0800
Subject: [PATCH 04/18] linting

---
 .../HomeHacking/IndexHeroContentHacking.tsx   | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
index 76a4d123a..b0c7747d5 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
@@ -33,21 +33,20 @@ export default function IndexHeroContentHacking() {
 
   return (
     <div className="w-full min-h-screen p-4 md:p-10">
-      <div
-        className="relative w-full min-h-[86vh] overflow-hidden"
-      >
-
+      <div className="relative w-full min-h-[86vh] overflow-hidden">
         {/* content wrapper */}
-        <div className="relative z-10 w-full h-full px-4 md:px-10 py-[15%] md:py-10">
+        <div className="relative z-10 w-full h-full">
           {/* Main grid area */}
           <div className="mx-auto mt-6 md:mt-8 w-full max-w-[1200px]">
             {/* Countdown bar */}
-            <div className="rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10"
+            <div
+              className="rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10"
               style={{
                 borderRadius: '38.812px',
                 background:
                   'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
-              }}>
+              }}
+            >
               {/* background */}
               <Image
                 src="/Hero/Clouds.svg"
@@ -56,7 +55,7 @@ export default function IndexHeroContentHacking() {
                 className="object-cover pointer-events-none select-none -z-10"
                 priority
               />
-              <div className="flex items-start justify-between gap-6">
+              <div className="flex items-start justify-between gap-2">
                 {/* Right: countdown (big) */}
                 <div className="flex-1 flex justify-center">
                   <div className="text-white">
@@ -81,7 +80,7 @@ export default function IndexHeroContentHacking() {
                 </div>
               </div>
             </div>
-            
+
             {/* ===================== MOBILE (2x2 animals) ===================== */}
             <div className="mt-2 md:hidden">
               {/* 2x2 animals */}
@@ -140,10 +139,10 @@ export default function IndexHeroContentHacking() {
                 rel="noreferrer"
                 className="mt-2 group relative rounded-xl bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[110px] flex items-center justify-center overflow-hidden"
                 style={{
-                borderRadius: '38.812px',
-                background:
-                  'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
-              }}
+                  borderRadius: '38.812px',
+                  background:
+                    'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
+                }}
               >
                 {/* background */}
                 <Image
@@ -237,7 +236,7 @@ export default function IndexHeroContentHacking() {
                     priority
                   />
                   <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />
-                  <div className="relative flex items-center gap-6">
+                  <div className="relative flex items-center gap-2">
                     <span className="text-white text-5xl md:text-7xl font-extrabold tracking-wide drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
                       SUBMIT!
                     </span>

From 1ce691f0308bda4803151709874a05118971c603 Mon Sep 17 00:00:00 2001
From: Haylie Tan <haytan@ucdavis.edu>
Date: Wed, 4 Mar 2026 19:45:06 -0800
Subject: [PATCH 05/18] vh

---
 .../_components/HomeHacking/IndexHeroContentHacking.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
index b0c7747d5..245c44012 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
@@ -32,12 +32,12 @@ export default function IndexHeroContentHacking() {
   //   rolloutRes && !(rolloutRes as any).ok ? (rolloutRes as any).error : null;
 
   return (
-    <div className="w-full min-h-screen p-4 md:p-10">
+    <div className="w-full h-full p-4 md:p-10 mb-[5%]">
       <div className="relative w-full min-h-[86vh] overflow-hidden">
         {/* content wrapper */}
-        <div className="relative z-10 w-full h-full">
+        <div className="relative z-10 w-full">
           {/* Main grid area */}
-          <div className="mx-auto mt-6 md:mt-8 w-full max-w-[1200px]">
+          <div className="mx-auto h-[90vh] border-2 border-red-400">
             {/* Countdown bar */}
             <div
               className="rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10"

From d6b182b3637849885351522bc87d0f453de830b9 Mon Sep 17 00:00:00 2001
From: Haylie Tan <haytan@ucdavis.edu>
Date: Thu, 5 Mar 2026 11:07:57 -0800
Subject: [PATCH 06/18] Updated font

---
 .../HomeHacking/IndexHeroContentHacking.tsx   | 300 +++++++++---------
 .../HomeHacking/_components/Countdown.tsx     |  26 +-
 2 files changed, 177 insertions(+), 149 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
index 245c44012..2cf2d401c 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
@@ -2,7 +2,6 @@
 
 import { useEffect } from 'react';
 import Image from 'next/image';
-// import { LuArrowUpRight } from 'react-icons/lu';
 import { GoArrowRight } from 'react-icons/go';
 
 import { useRollout } from '@pages/_hooks/useRollout';
@@ -27,20 +26,15 @@ export default function IndexHeroContentHacking() {
     ? (rolloutRes as any).body.rollout_time + 24 * 60 * 60 * 1000
     : undefined;
 
-  // If rollout errored, still render the hero (so the page isn't blank) and show error text
-  // const rolloutError =
-  //   rolloutRes && !(rolloutRes as any).ok ? (rolloutRes as any).error : null;
-
   return (
     <div className="w-full h-full p-4 md:p-10 mb-[5%]">
       <div className="relative w-full min-h-[86vh] overflow-hidden">
         {/* content wrapper */}
         <div className="relative z-10 w-full">
           {/* Main grid area */}
-          <div className="mx-auto h-[90vh] border-2 border-red-400">
-            {/* Countdown bar */}
+          <div className="mx-auto h-[90vh] min-h-0 border-2 border-red-400 grid grid-rows-[auto_minmax(0,1fr)] gap-3 md:gap-5">            {/* Countdown bar */}
             <div
-              className="rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10"
+              className="relative rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10 overflow-hidden"
               style={{
                 borderRadius: '38.812px',
                 background:
@@ -55,6 +49,7 @@ export default function IndexHeroContentHacking() {
                 className="object-cover pointer-events-none select-none -z-10"
                 priority
               />
+
               <div className="flex items-start justify-between gap-2">
                 {/* Right: countdown (big) */}
                 <div className="flex-1 flex justify-center">
@@ -81,146 +76,65 @@ export default function IndexHeroContentHacking() {
               </div>
             </div>
 
-            {/* ===================== MOBILE (2x2 animals) ===================== */}
-            <div className="mt-2 md:hidden">
-              {/* 2x2 animals */}
-              <div className="grid grid-cols-2 gap-2">
-                {/* Cow */}
-                <div className="relative rounded-[28px] bg-[#93F5F3] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
-                  <Image
-                    src="/hackers/hero/PeepingCow.svg"
-                    alt="Peeking cow"
-                    width={520}
-                    height={320}
-                    className="w-[85%] h-auto pointer-events-none select-none"
-                    priority
-                  />
-                </div>
-
-                {/* Duck */}
-                <div className="relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
-                  <Image
-                    src="/hackers/hero/PeepingDuck.svg"
-                    alt="Peeking duck"
-                    width={520}
-                    height={320}
-                    className="w-[100%] h-auto pointer-events-none select-none"
-                    priority
-                  />
-                </div>
-
-                {/* Frog */}
-                <div className="relative rounded-[28px] bg-[#E9FBBA] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
-                  <Image
-                    src="/hackers/hero/PeepingFrog.svg"
-                    alt="Peeking frog"
-                    width={520}
-                    height={320}
-                    className="w-[65%] h-auto pointer-events-none select-none"
-                  />
-                </div>
-
-                {/* Bunny */}
-                <div className="relative rounded-[28px] bg-[#FFD2D2] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
-                  <Image
-                    src="/hackers/hero/PeepingBunny.svg"
-                    alt="Peeking bunny"
-                    width={520}
-                    height={320}
-                    className="w-[85%] h-auto pointer-events-none select-none"
-                  />
-                </div>
-              </div>
-
-              {/* Submit pill under grid on mobile */}
-              <a
-                href="https://hackdavis-2026.devpost.com/"
-                target="_blank"
-                rel="noreferrer"
-                className="mt-2 group relative rounded-xl bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[110px] flex items-center justify-center overflow-hidden"
-                style={{
-                  borderRadius: '38.812px',
-                  background:
-                    'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
-                }}
-              >
-                {/* background */}
-                <Image
-                  src="/Hero/Clouds.svg"
-                  alt="Background"
-                  fill
-                  className="object-cover pointer-events-none select-none -z-10 overflow-hidden"
-                  priority
-                />
-                <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />
-                <div className="relative flex items-center gap-2">
-                  <span className="text-white text-4xl md:text-5xl font-extrabold tracking-wide drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
-                    SUBMIT!
-                  </span>
-                  <GoArrowRight className="text-white text-4xl md:text-5xl drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)] transition-transform duration-300 group-hover:translate-x-1" />
-                </div>
-              </a>
-            </div>
-
-            {/* ===================== DESKTOP (original layout) ===================== */}
-            <div className="hidden md:block">
-              {/* Middle row: 3 tiles */}
-              <div className="mt-6 grid grid-cols-1 gap-5 md:grid-cols-[50fr_30fr_20fr]">
-                {/* Cow */}
-                <div className="relative rounded-[28px] bg-[#93F5F3] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-end justify-center">
-                  <Image
-                    src="/hackers/hero/PeepingCow.svg"
-                    alt="Peeking cow"
-                    width={520}
-                    height={320}
-                    className="w-[55%] h-auto pointer-events-none select-none"
-                    priority
-                  />
-                </div>
+            {/* Everything below countdown must fit remaining height */}
+            <div className="min-h-0">
+              {/* ===================== MOBILE (2x2 animals) ===================== */}
+              <div className="md:hidden">
+                {/* 2x2 animals */}
+                <div className="grid grid-cols-2 gap-2">
+                  {/* Cow */}
+                  <div className="relative rounded-[28px] bg-[#93F5F3] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                    <Image
+                      src="/hackers/hero/PeepingCow.svg"
+                      alt="Peeking cow"
+                      width={520}
+                      height={320}
+                      className="w-[85%] h-auto pointer-events-none select-none"
+                      priority
+                    />
+                  </div>
 
-                {/* Duck */}
-                <div className="relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-end justify-center">
-                  <Image
-                    src="/hackers/hero/PeepingDuck.svg"
-                    alt="Peeking duck"
-                    width={520}
-                    height={320}
-                    className="w-[100%] h-auto pointer-events-none select-none"
-                    priority
-                  />
-                </div>
+                  {/* Duck */}
+                  <div className="relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                    <Image
+                      src="/hackers/hero/PeepingDuck.svg"
+                      alt="Peeking duck"
+                      width={520}
+                      height={320}
+                      className="w-[100%] h-auto pointer-events-none select-none"
+                      priority
+                    />
+                  </div>
 
-                {/* Frog */}
-                <div className="relative rounded-[28px] bg-[#E9FBBA] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[180px] flex items-end justify-center">
-                  <Image
-                    src="/hackers/hero/PeepingFrog.svg"
-                    alt="Peeking frog"
-                    width={520}
-                    height={320}
-                    className="w-[90%] h-auto pointer-events-none select-none"
-                  />
-                </div>
-              </div>
+                  {/* Frog */}
+                  <div className="relative rounded-[28px] bg-[#E9FBBA] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                    <Image
+                      src="/hackers/hero/PeepingFrog.svg"
+                      alt="Peeking frog"
+                      width={520}
+                      height={320}
+                      className="w-[65%] h-auto pointer-events-none select-none"
+                    />
+                  </div>
 
-              {/* Bottom row: bunny + submit pill (unchanged) */}
-              <div className="mt-6 grid grid-cols-[1fr_2fr] gap-5 items-stretch">
-                {/* Bunny */}
-                <div className="relative rounded-[28px] bg-[#FFD2D2] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden min-h-[170px] flex items-end justify-center">
-                  <Image
-                    src="/hackers/hero/PeepingBunny.svg"
-                    alt="Peeking bunny"
-                    width={520}
-                    height={320}
-                    className="w-[85%] h-auto pointer-events-none select-none"
-                  />
+                  {/* Bunny */}
+                  <div className="relative rounded-[28px] bg-[#FFD2D2] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                    <Image
+                      src="/hackers/hero/PeepingBunny.svg"
+                      alt="Peeking bunny"
+                      width={520}
+                      height={320}
+                      className="w-[85%] h-auto pointer-events-none select-none"
+                    />
+                  </div>
                 </div>
 
-                {/* Submit pill */}
+                {/* Submit pill under grid on mobile */}
                 <a
                   href="https://hackdavis-2026.devpost.com/"
                   target="_blank"
                   rel="noreferrer"
-                  className="group relative rounded-[999px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[170px] flex items-center justify-center overflow-hidden"
+                  className="mt-2 group relative rounded-xl bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[110px] flex items-center justify-center overflow-hidden"
                   style={{
                     borderRadius: '38.812px',
                     background:
@@ -232,22 +146,122 @@ export default function IndexHeroContentHacking() {
                     src="/Hero/Clouds.svg"
                     alt="Background"
                     fill
-                    className="object-cover pointer-events-none select-none -z-10"
+                    className="object-cover pointer-events-none select-none -z-10 overflow-hidden"
                     priority
                   />
                   <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />
                   <div className="relative flex items-center gap-2">
-                    <span className="text-white text-5xl md:text-7xl font-extrabold tracking-wide drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+                    <span className="text-white text-4xl md:text-5xl font-extrabold tracking-wide drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
                       SUBMIT!
                     </span>
-                    <GoArrowRight className="text-white text-5xl md:text-6xl drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)] transition-transform duration-300 group-hover:translate-x-1" />
+                    <GoArrowRight className="text-white text-4xl md:text-5xl drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)] transition-transform duration-300 group-hover:translate-x-1" />
                   </div>
                 </a>
               </div>
+
+              {/* ===================== DESKTOP (dynamically fits remaining height) ===================== */}
+              <div className="hidden md:grid min-h-0 h-full grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-5">
+                {/* Row 1: 3 tiles */}
+                <div className="min-h-0 grid grid-cols-[50fr_30fr_20fr] gap-5">
+                  {/* Cow */}
+                  <div className="min-h-0 relative rounded-[28px] bg-[#93F5F3] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                    <Image
+                      src="/hackers/hero/PeepingCow.svg"
+                      alt="Peeking cow"
+                      width={520}
+                      height={320}
+                      className="w-[55%] max-h-full h-auto pointer-events-none select-none"
+                      priority
+                    />
+                  </div>
+
+                  {/* Duck */}
+                  <div className="min-h-0 relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                    <Image
+                      src="/hackers/hero/PeepingDuck.svg"
+                      alt="Peeking duck"
+                      width={520}
+                      height={320}
+                      className="w-[100%] max-h-full h-auto pointer-events-none select-none"
+                      priority
+                    />
+                  </div>
+
+                  {/* Frog */}
+                  <div className="min-h-0 relative rounded-[28px] bg-[#E9FBBA] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                    <Image
+                      src="/hackers/hero/PeepingFrog.svg"
+                      alt="Peeking frog"
+                      width={520}
+                      height={320}
+                      className="w-[90%] max-h-full h-auto pointer-events-none select-none"
+                    />
+                  </div>
+                </div>
+
+                {/* Row 2: bunny + submit pill */}
+                <div className="min-h-0 grid grid-cols-[1fr_2fr] gap-5 items-stretch">
+                  {/* Bunny */}
+                  <div className="min-h-0 relative rounded-[28px] bg-[#FFD2D2] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                    <Image
+                      src="/hackers/hero/PeepingBunny.svg"
+                      alt="Peeking bunny"
+                      width={520}
+                      height={320}
+                      className="w-[85%] max-h-full h-auto pointer-events-none select-none"
+                    />
+                  </div>
+
+                  {/* Submit pill */}
+                  <a
+                    href="https://hackdavis-2026.devpost.com/"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="group relative rounded-full bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] flex items-center justify-center overflow-hidden"
+                    style={{
+                      background:
+                        'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
+                    }}
+                  >
+                    {/* background */}
+                    <Image
+                      src="/Hero/Clouds.svg"
+                      alt="Background"
+                      fill
+                      className="object-cover pointer-events-none select-none -z-10"
+                      priority
+                    />
+
+                    <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />
+
+                    <div className="relative flex items-center gap-6">
+                      <span
+                        className="text-white font-medium tracking-[4.601px]"
+                        style={{
+                          fontFamily: '"DM Mono", monospace',
+                          fontSize: 'clamp(28px, 6vw, 90px)',
+                          textShadow: '0 0 31.729px rgba(255, 255, 255, 0.30)',
+                        }}
+                      >
+                        SUBMIT
+                      </span>
+
+                      <GoArrowRight
+                        className="text-white transition-transform duration-300 group-hover:translate-x-3"
+                        style={{
+                          fontSize: 'clamp(40px, 5vw, 120px)',
+                          textShadow: '0 0 31.729px rgba(255, 255, 255, 0.30)',
+                        }}
+                      />
+                    </div>
+                  </a>
+                </div>
+              </div>
             </div>
           </div>
+          {/* end main grid area */}
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
index 7ee17dfad..b41d74cac 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
@@ -44,27 +44,41 @@ export default function Countdown({
     return () => clearInterval(timer);
   }, [countdownTarget]);
 
+  const timerStyle = {
+    color: '#FFF',
+    fontFamily: '"DM Mono", monospace',
+    fontSize: 'clamp(36px, 12vw, 230.034px)',
+    fontStyle: 'normal',
+    fontWeight: 500,
+    lineHeight: 'normal',
+    letterSpacing: '4.601px',
+    textShadow: '0 0 31.729px rgba(255, 255, 255, 0.30)',
+  };
+
   return (
     <div className="flex flex-col items-end text-white">
       {/* BIG TIMER */}
-      <div className="flex items-end gap-3 md:gap-6">
-        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+      <div
+        className="flex items-end gap-3 md:gap-6"
+        style={timerStyle}
+      >
+        <span className="leading-none">
           {timeLeft.hours.toString().padStart(2, '0')}
         </span>
 
-        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold leading-none">
+        <span className="leading-none">
           :
         </span>
 
-        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+        <span className="leading-none">
           {timeLeft.minutes.toString().padStart(2, '0')}
         </span>
 
-        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold leading-none">
+        <span className="leading-none">
           :
         </span>
 
-        <span className="text-[40px] sm:text-[96px] md:text-[120px] font-extrabold tracking-wide leading-none drop-shadow-[0_6px_14px_rgba(0,0,0,0.18)]">
+        <span className="leading-none">
           {timeLeft.seconds.toString().padStart(2, '0')}
         </span>
       </div>

From 450c2044405daee0d35054671c5ff8d32c870726 Mon Sep 17 00:00:00 2001
From: Haylie Tan <haytan@ucdavis.edu>
Date: Thu, 5 Mar 2026 11:15:25 -0800
Subject: [PATCH 07/18] Added stars

---
 .../HomeHacking/IndexHeroContentHacking.tsx   | 37 +++++++++++++++++--
 .../HomeHacking/_components/Countdown.tsx     | 13 ++-----
 public/hackers/hero/StarLeft.svg              | 16 ++++++++
 public/hackers/hero/StarRight.svg             | 16 ++++++++
 4 files changed, 68 insertions(+), 14 deletions(-)
 create mode 100644 public/hackers/hero/StarLeft.svg
 create mode 100644 public/hackers/hero/StarRight.svg

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
index 2cf2d401c..7f0d21672 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
@@ -32,7 +32,9 @@ export default function IndexHeroContentHacking() {
         {/* content wrapper */}
         <div className="relative z-10 w-full">
           {/* Main grid area */}
-          <div className="mx-auto h-[90vh] min-h-0 border-2 border-red-400 grid grid-rows-[auto_minmax(0,1fr)] gap-3 md:gap-5">            {/* Countdown bar */}
+          <div className="mx-auto h-[90vh] min-h-0 grid grid-rows-[auto_minmax(0,1fr)] gap-3 md:gap-5">
+            {' '}
+            {/* Countdown bar */}
             <div
               className="relative rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10 overflow-hidden"
               style={{
@@ -75,9 +77,36 @@ export default function IndexHeroContentHacking() {
                 </div>
               </div>
             </div>
-
             {/* Everything below countdown must fit remaining height */}
-            <div className="min-h-0">
+            <div className="relative min-h-0">
+              {/* Decorative stars */}
+              <Image
+                src="/hackers/hero/StarLeft.svg"
+                alt=""
+                width={120}
+                height={120}
+                className="
+                    pointer-events-none select-none
+                    absolute z-20
+                    -left-2 top-[35%] md:top-[50%]
+                    w-[56px] sm:w-[70px] md:w-[84px] lg:w-[96px]
+                    rotate-[-8deg]
+                  "
+              />
+
+              <Image
+                src="/hackers/hero/StarRight.svg"
+                alt=""
+                width={120}
+                height={120}
+                className="
+                    pointer-events-none select-none
+                    absolute z-20
+                    -right-2 top-[10%]
+                    w-[56px] sm:w-[70px] md:w-[84px] lg:w-[96px]
+                    rotate-[10deg]
+                  "
+              />
               {/* ===================== MOBILE (2x2 animals) ===================== */}
               <div className="md:hidden">
                 {/* 2x2 animals */}
@@ -264,4 +293,4 @@ export default function IndexHeroContentHacking() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
index b41d74cac..a0ddec04d 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
@@ -58,25 +58,18 @@ export default function Countdown({
   return (
     <div className="flex flex-col items-end text-white">
       {/* BIG TIMER */}
-      <div
-        className="flex items-end gap-3 md:gap-6"
-        style={timerStyle}
-      >
+      <div className="flex items-end gap-3 md:gap-6" style={timerStyle}>
         <span className="leading-none">
           {timeLeft.hours.toString().padStart(2, '0')}
         </span>
 
-        <span className="leading-none">
-          :
-        </span>
+        <span className="leading-none">:</span>
 
         <span className="leading-none">
           {timeLeft.minutes.toString().padStart(2, '0')}
         </span>
 
-        <span className="leading-none">
-          :
-        </span>
+        <span className="leading-none">:</span>
 
         <span className="leading-none">
           {timeLeft.seconds.toString().padStart(2, '0')}
diff --git a/public/hackers/hero/StarLeft.svg b/public/hackers/hero/StarLeft.svg
new file mode 100644
index 000000000..aff7480b9
--- /dev/null
+++ b/public/hackers/hero/StarLeft.svg
@@ -0,0 +1,16 @@
+<svg width="117" height="113" viewBox="0 0 117 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2202_5467)">
+<path d="M72.7335 97.285L80.7711 69.7423C80.9348 69.0545 81.3652 68.4518 81.8508 67.9911L103.204 47.6697C105.447 45.52 104.477 41.8993 101.438 41.0778L72.8437 34.0527C72.1279 33.9139 71.5013 33.5248 71.033 33.076L50.2577 13.3407C48.0778 11.245 44.2303 12.2759 43.3091 15.2026L35.2708 42.7456C35.107 43.4333 34.6774 44.0358 34.1918 44.4966L12.8378 64.8181C10.5948 66.9679 11.565 70.5886 14.6041 71.41L43.258 78.332C43.9739 78.4708 44.5996 78.8601 45.0679 79.3089L65.8008 99.1426C68.0619 101.217 71.9094 100.186 72.7494 97.2808L72.7335 97.285Z" fill="white"/>
+</g>
+<path d="M68.6142 85.7937L74.4013 65.9629C74.5192 65.4677 74.829 65.0337 75.1787 64.702L90.553 50.0706C92.168 48.5228 91.4695 45.9159 89.2813 45.3245L68.6936 40.2664C68.1782 40.1665 67.727 39.8863 67.3899 39.5632L52.4317 25.3538C50.8621 23.8448 48.0919 24.5871 47.4286 26.6943L41.6411 46.5253C41.5232 47.0204 41.2138 47.4542 40.8642 47.786L25.4893 62.4175C23.8743 63.9653 24.5729 66.5722 26.7611 67.1636L47.3919 72.1475C47.9073 72.2474 48.3578 72.5277 48.695 72.8509L63.6226 87.1311C65.2506 88.6244 68.0209 87.8821 68.6257 85.7906L68.6142 85.7937Z" fill="#FFC53D"/>
+<defs>
+<filter id="filter0_d_2202_5467" x="11.6096" y="12.2354" width="96.8225" height="91.9976" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.584314 0 0 0 0 0.615686 0 0 0 0 0.647059 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2202_5467"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2202_5467" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/hackers/hero/StarRight.svg b/public/hackers/hero/StarRight.svg
new file mode 100644
index 000000000..656a14b86
--- /dev/null
+++ b/public/hackers/hero/StarRight.svg
@@ -0,0 +1,16 @@
+<svg width="68" height="64" viewBox="0 0 68 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2202_5464)">
+<path d="M33.9861 58.6361L43.8149 42.4502C44.0368 42.0398 44.4141 41.729 44.8024 41.5183L61.8866 32.2108C63.6838 31.2234 63.6838 28.7494 61.8866 27.7066L44.8577 18.3436C44.425 18.1328 44.0921 17.7777 43.8702 17.4116L33.9969 1.28132C32.9652 -0.427108 30.3362 -0.427108 29.249 1.28132L19.4196 17.4672C19.1977 17.8776 18.8209 18.1883 18.4326 18.3991L1.34789 27.7066C-0.449295 28.694 -0.449295 31.1679 1.34789 32.2108L18.4326 41.5183C18.8653 41.729 19.1977 42.0841 19.4196 42.4502L29.249 58.6361C30.3362 60.3445 32.9652 60.3445 33.9969 58.6361H33.9861Z" fill="white"/>
+</g>
+<path d="M33.3235 50.6057L40.4003 38.9519C40.56 38.6563 40.8317 38.4326 41.1113 38.2808L53.4119 31.5794C54.7059 30.8686 54.7059 29.0873 53.4119 28.3365L41.151 21.5951C40.8395 21.4433 40.5998 21.1877 40.4401 20.9241L33.3313 9.31025C32.5884 8.08018 30.6956 8.08018 29.9128 9.31025L22.8356 20.964C22.6759 21.2596 22.4046 21.4833 22.125 21.6351L9.82399 28.3365C8.53002 29.0474 8.53002 30.8286 9.82399 31.5794L22.125 38.2808C22.4365 38.4326 22.6759 38.6883 22.8356 38.9519L29.9128 50.6057C30.6956 51.8357 32.5884 51.8357 33.3313 50.6057H33.3235Z" fill="#FFC53D"/>
+<defs>
+<filter id="filter0_d_2202_5464" x="0" y="0" width="67.2344" height="63.9175" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.584314 0 0 0 0 0.615686 0 0 0 0 0.647059 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2202_5464"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2202_5464" result="shape"/>
+</filter>
+</defs>
+</svg>

From 67998a9f04581b90ad69650685513c919868d8bd Mon Sep 17 00:00:00 2001
From: Haylie Tan <haytan@ucdavis.edu>
Date: Thu, 5 Mar 2026 16:41:33 -0800
Subject: [PATCH 08/18] linting

---
 app/(pages)/(hackers)/(hub)/page.tsx | 44 ++++++++++++++--------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx
index 6fac8e14c..6f989565a 100644
--- a/app/(pages)/(hackers)/(hub)/page.tsx
+++ b/app/(pages)/(hackers)/(hub)/page.tsx
@@ -2,10 +2,10 @@ import PrizeTracks from '@pages/(hackers)/_components/PrizeTracks/PrizeTracks';
 import BeginnersSection from '@pages/(hackers)/_components/HomeHacking/BeginnersSection';
 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 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 MDHelp from '@pages/(hackers)/_components/HomeHacking/MDHelp';
 import ScheduleSneakPeek from '@pages/(hackers)/_components/HomeHacking/ScheduleSneakPeek';
 import HeroJudging from '../_components/HomeJudging/HeroJudging';
@@ -16,24 +16,24 @@ import IndexHeroContentHacking from '../_components/HomeHacking/IndexHeroContent
 export default function Page() {
   return (
     <main id="home">
-      {/* <TableNumberContextProvider> */}
-      {/* <ClientTimeProtectedDisplay featureId="hero-hacking"> */}
-      {/* <HeroMVP /> */}
-      <IndexHeroContentHacking />
-      <ScheduleSneakPeek />
-      <BeginnersSection />
-      <MDHelp />
-      {/* </ClientTimeProtectedDisplay> */}
-      {/* temporarilty set featureId below to "hero-hacking" to test */}
-      {/* <ClientTimeProtectedDisplay featureId="hero-hacking"> */}
-      <HeroWaiting />
-      <HeroJudging />
-      <HackerChoiceAward />
-      {/* </ClientTimeProtectedDisplay> */}
-      {/* <ClientTimeProtectedDisplay featureId="table-number-checkin"> */}
-      {/* <TableNumberCheckin /> */}
-      {/* </ClientTimeProtectedDisplay> */}
-      {/* </TableNumberContextProvider> */}
+      <TableNumberContextProvider>
+        <ClientTimeProtectedDisplay featureId="hero-hacking">
+          <HeroMVP />
+          <IndexHeroContentHacking />
+          <ScheduleSneakPeek />
+          <BeginnersSection />
+          <MDHelp />
+        </ClientTimeProtectedDisplay>
+        {/* temporarilty set featureId below to "hero-hacking" to test */}
+        <ClientTimeProtectedDisplay featureId="hero-hacking">
+          <HeroWaiting />
+          <HeroJudging />
+          <HackerChoiceAward />
+        </ClientTimeProtectedDisplay>
+        <ClientTimeProtectedDisplay featureId="table-number-checkin">
+          <TableNumberCheckin />
+        </ClientTimeProtectedDisplay>
+      </TableNumberContextProvider>
       <Discord />
       <PrizeTracks />
       <Footer />

From 3ed20b8867dce7392fcb49fa5df7592cec09023a Mon Sep 17 00:00:00 2001
From: Haylie Tan <haytan@ucdavis.edu>
Date: Thu, 5 Mar 2026 16:56:21 -0800
Subject: [PATCH 09/18] build errors

---
 app/(pages)/_components/Navbar/Navbar.tsx | 97 +++++------------------
 1 file changed, 22 insertions(+), 75 deletions(-)

diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx
index 8e036a745..fcaef306c 100644
--- a/app/(pages)/_components/Navbar/Navbar.tsx
+++ b/app/(pages)/_components/Navbar/Navbar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+import { useRouter, usePathname } from 'next/navigation';
 import { MouseEvent, useEffect, useState } from 'react';
 import LogoutAction from '@actions/auth/logout';
 
@@ -17,8 +17,6 @@ interface NavLink {
   action?: () => void;
 }
 
-// todo: change hamburger menu color in mobile
-// todo: fix logout button around 400px
 const sections = [
   {
     id: 'home',
@@ -27,34 +25,17 @@ const sections = [
     activeColor: '#1A3819',
     background: 'rgba(255, 255, 255, 0.50)',
   },
-  // {
-  //   id: 'schedule',
-  //   page: '/schedule',
-  //   baseColor: '#1589BE',
-  //   activeColor: '#FFC53D',
-  //   background: 'rgba(255, 255, 255, 0.50)',
-  // },
-  // {
-  //   id: 'project-info',
-  //   page: '/project-info',
-  //   baseColor: '#1589BE',
-  //   activeColor: '#7FB732',
-  //   background: 'rgba(255, 255, 255, 0.50)',
-  // },
-  // {
-  //   id: 'starter-kit',
-  //   page: '/starter-kit',
-  //   baseColor: '#1589BE',
-  //   activeColor: '#AFD157',
-  //   background: 'rgba(255, 255, 255, 0.50)',
-  // },
 ];
 
 export default function Navbar() {
   const pathname = usePathname();
   const router = useRouter();
-  const searchParams = useSearchParams();
-  const section = searchParams.get('section');
+
+  const section =
+    typeof window !== 'undefined'
+      ? new URLSearchParams(window.location.search).get('section')
+      : null;
+
   const [activeLink, setActiveLink] = useState(
     section || (pathname === '/' ? 'home' : 'about')
   );
@@ -83,18 +64,6 @@ export default function Navbar() {
       page: '/schedule',
       path: '/schedule',
     },
-    // {
-    //   ids: ['starter-kit'],
-    //   body: 'Starter Kit',
-    //   page: '/starter-kit',
-    //   path: '/starter-kit',
-    // },
-    // {
-    //   ids: ['project-info'],
-    //   body: 'Project Info',
-    //   page: '/project-info',
-    //   path: '/project-info',
-    // },
     {
       ids: [],
       body: 'Log Out',
@@ -107,6 +76,7 @@ export default function Navbar() {
   useEffect(() => {
     const updateActiveSection = () => {
       const currScroll = window.scrollY + window.innerHeight * 0.2;
+
       const pageSections = sections
         .filter((section) => section.page === pathname)
         .map((section) => {
@@ -127,44 +97,32 @@ export default function Navbar() {
           (section) => section.sectionStart !== 0 || section.sectionEnd !== 0
         );
 
-      // Add safety check for empty pageSections array
-      if (pageSections.length === 0) {
-        // No valid sections found, so don't update state
-        return;
-      }
+      if (pageSections.length === 0) return;
 
       let i = pageSections.length - 1;
       for (i; i >= 0; i--) {
-        if (currScroll >= pageSections[i].sectionStart) {
-          break;
-        }
+        if (currScroll >= pageSections[i].sectionStart) break;
       }
-
       i = i < 0 ? 0 : i;
 
       setActiveLink(
         currScroll > pageSections[i].sectionEnd ? '' : pageSections[i].id
       );
-
       setActiveSection(
         currScroll > pageSections[i].sectionEnd ? '' : pageSections[i].id
       );
     };
 
     const handleScroll = () => updateActiveSection();
-
     window.addEventListener('scroll', handleScroll, { passive: true });
-
     updateActiveSection();
 
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
+    return () => window.removeEventListener('scroll', handleScroll);
   }, [pathname]);
 
   useEffect(() => {
-    const currentSection = section;
-    const sectionContainer = document.getElementById(currentSection as string);
+    if (!section) return;
+    const sectionContainer = document.getElementById(section);
     if (sectionContainer) {
       sectionContainer.scrollIntoView({ behavior: 'smooth' });
     }
@@ -173,24 +131,13 @@ export default function Navbar() {
   const getClickHandler = (link: NavLink) => {
     return (e: MouseEvent<HTMLAnchorElement>) => {
       e.preventDefault();
-      if (link.action) {
-        link.action();
-      } else {
-        router.push(link.path, { scroll: false });
-      }
+      if (link.action) link.action();
+      else router.push(link.path, { scroll: false });
       setShowNavbar(false);
     };
   };
 
-  const getLogoColor = () => {
-    // const currentSection = sections.find(
-    //   (section) => activeSection === section.id
-    // );
-    // if (!currentSection) return '#005271';
-    return '#005271';
-
-    // return currentSection.activeColor;
-  };
+  const getLogoColor = () => '#005271';
 
   const getLinkColor = (link: NavLink) => {
     const currentSection = sections.find(
@@ -220,15 +167,14 @@ export default function Navbar() {
         >
           <Logo />
         </Link>
+
         <div className={styles.links}>
           {links.map((link) => (
             <Link
               className={`${styles.link} ${
                 link.ids.find((id) => activeLink === id) ? styles.active : null
               }`}
-              style={{
-                color: getLinkColor(link),
-              }}
+              style={{ color: getLinkColor(link) }}
               key={link.path}
               href={link.path}
               onClick={getClickHandler(link)}
@@ -238,6 +184,7 @@ export default function Navbar() {
           ))}
         </div>
       </div>
+
       <div className={styles.items}>
         <div className={styles.menu} onClick={() => setShowNavbar(!showNavbar)}>
           <div
@@ -248,15 +195,15 @@ export default function Navbar() {
             <span
               className={styles.hamburger_line}
               style={{ backgroundColor: getLogoColor() }}
-            ></span>
+            />
             <span
               className={styles.hamburger_line}
               style={{ backgroundColor: getLogoColor() }}
-            ></span>
+            />
             <span
               className={styles.hamburger_line}
               style={{ backgroundColor: getLogoColor() }}
-            ></span>
+            />
           </div>
         </div>
       </div>

From 4f404e6a0350e3e64a76e5a323fef7f0e2184d71 Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 8 Mar 2026 13:45:13 -0700
Subject: [PATCH 10/18] move and rename files; remove useEffect

---
 app/(pages)/(hackers)/(hub)/layout.tsx           | 16 ++++++++--------
 app/(pages)/(hackers)/(hub)/page.tsx             |  8 +++-----
 ...dexHeroContentHacking.tsx => HeroHacking.tsx} | 12 +++---------
 .../HomeHacking/_components/Countdown.tsx        |  2 +-
 4 files changed, 15 insertions(+), 23 deletions(-)
 rename app/(pages)/(hackers)/_components/HomeHacking/{IndexHeroContentHacking.tsx => HeroHacking.tsx} (97%)

diff --git a/app/(pages)/(hackers)/(hub)/layout.tsx b/app/(pages)/(hackers)/(hub)/layout.tsx
index 8f8a14cb4..563aef384 100644
--- a/app/(pages)/(hackers)/(hub)/layout.tsx
+++ b/app/(pages)/(hackers)/(hub)/layout.tsx
@@ -1,16 +1,16 @@
-// import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
+import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
 import Navbar from '@components/Navbar/Navbar';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      {/* // <ProtectedDisplay */}
-      {/* //   allowedRoles={['hacker', 'admin']}
-    //   failRedirectRoute="/login"
-    // > */}
-      <Navbar />
-      {children}
-      {/* // </ProtectedDisplay> */}
+      <ProtectedDisplay
+        allowedRoles={['hacker', 'admin']}
+        failRedirectRoute="/login"
+      >
+        <Navbar />
+        {children}
+      </ProtectedDisplay>
     </div>
   );
 }
diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx
index 6f989565a..99ce39257 100644
--- a/app/(pages)/(hackers)/(hub)/page.tsx
+++ b/app/(pages)/(hackers)/(hub)/page.tsx
@@ -2,7 +2,6 @@ import PrizeTracks from '@pages/(hackers)/_components/PrizeTracks/PrizeTracks';
 import BeginnersSection from '@pages/(hackers)/_components/HomeHacking/BeginnersSection';
 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';
@@ -11,21 +10,20 @@ import ScheduleSneakPeek from '@pages/(hackers)/_components/HomeHacking/Schedule
 import HeroJudging from '../_components/HomeJudging/HeroJudging';
 import HackerChoiceAward from '../_components/HomeJudging/HackersChoiceAwards';
 import HeroWaiting from '../_components/HomeJudging/HeroWaiting';
-import IndexHeroContentHacking from '../_components/HomeHacking/IndexHeroContentHacking';
+import HeroHacking from '../_components/HomeHacking/HeroHacking';
 
 export default function Page() {
   return (
     <main id="home">
       <TableNumberContextProvider>
         <ClientTimeProtectedDisplay featureId="hero-hacking">
-          <HeroMVP />
-          <IndexHeroContentHacking />
+          <HeroHacking />
           <ScheduleSneakPeek />
           <BeginnersSection />
           <MDHelp />
         </ClientTimeProtectedDisplay>
         {/* temporarilty set featureId below to "hero-hacking" to test */}
-        <ClientTimeProtectedDisplay featureId="hero-hacking">
+        <ClientTimeProtectedDisplay featureId="hero-judging">
           <HeroWaiting />
           <HeroJudging />
           <HackerChoiceAward />
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
similarity index 97%
rename from app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
rename to app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index 7f0d21672..436be8465 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/IndexHeroContentHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useEffect } from 'react';
 import Image from 'next/image';
 import { GoArrowRight } from 'react-icons/go';
 
@@ -8,14 +7,9 @@ import { useRollout } from '@pages/_hooks/useRollout';
 import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay';
 import Countdown from './_components/Countdown';
 
-export default function IndexHeroContentHacking() {
+export default function HeroHacking() {
   const { loading, rolloutRes, fetchRollout } = useRollout('hacking-starts');
 
-  // Ensure rollout data is fetched on mount (prevents "loading forever" -> blank render)
-  useEffect(() => {
-    fetchRollout('hacking-starts');
-  }, [fetchRollout]);
-
   // If rollout hasn't returned yet, render the hero shell + a fallback countdown
   const hasRollout =
     !!rolloutRes &&
@@ -27,8 +21,8 @@ export default function IndexHeroContentHacking() {
     : undefined;
 
   return (
-    <div className="w-full h-full p-4 md:p-10 mb-[5%]">
-      <div className="relative w-full min-h-[86vh] overflow-hidden">
+    <div className="w-full h-screen p-4 md:p-10 ">
+      <div className="relative w-full h-full overflow-hidden">
         {/* content wrapper */}
         <div className="relative z-10 w-full">
           {/* Main grid area */}
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
index a0ddec04d..06e04df37 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
@@ -7,7 +7,7 @@ interface CountdownProps {
 }
 
 export default function Countdown({
-  countdownTarget = new Date('2026-04-20T07:00:00-07:00').getTime(),
+  countdownTarget = new Date('2026-03-09T07:00:00-00:00').getTime(), // END OF HACKING TIME
 }: CountdownProps) {
   const [timeLeft, setTimeLeft] = useState({
     hours: 24,

From 06bbec21e372d7cbc2caa3ef1c6001fc933a5742 Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 8 Mar 2026 14:14:14 -0700
Subject: [PATCH 11/18] fixed border and center mobile

---
 .../_components/HomeHacking/HeroHacking.tsx   | 31 +++++++++----------
 .../HomeHacking/_components/Countdown.tsx     |  6 ++--
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index 436be8465..c1ef509ee 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -21,18 +21,17 @@ export default function HeroHacking() {
     : undefined;
 
   return (
-    <div className="w-full h-screen p-4 md:p-10 ">
+    <div className="w-full h-screen p-4 md:p-10">
       <div className="relative w-full h-full overflow-hidden">
         {/* content wrapper */}
         <div className="relative z-10 w-full">
           {/* Main grid area */}
-          <div className="mx-auto h-[90vh] min-h-0 grid grid-rows-[auto_minmax(0,1fr)] gap-3 md:gap-5">
+          <div className="mx-auto h-[90vh] min-h-0 flex flex-col justify-center gap-3 md:grid md:grid-rows-[auto_minmax(0,1fr)] md:gap-5">
             {' '}
             {/* Countdown bar */}
             <div
-              className="relative rounded-[28px] bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] px-6 md:px-10 py-8 md:py-10 overflow-hidden"
+              className="relative flex flex-col justify-center rounded-[20px] md:rounded-[32px] bg-white/25 backdrop-blur-xl px-6 md:px-10 py-8 md:py-10 overflow-hidden"
               style={{
-                borderRadius: '38.812px',
                 background:
                   'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
               }}
@@ -102,11 +101,11 @@ export default function HeroHacking() {
                   "
               />
               {/* ===================== MOBILE (2x2 animals) ===================== */}
-              <div className="md:hidden">
+              <div className="md:hidden h-full flex flex-col justify-center">
                 {/* 2x2 animals */}
                 <div className="grid grid-cols-2 gap-2">
                   {/* Cow */}
-                  <div className="relative rounded-[28px] bg-[#93F5F3] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <div className="relative rounded-[20px] bg-[#93F5F3] overflow-hidden flex items-end justify-center">
                     <Image
                       src="/hackers/hero/PeepingCow.svg"
                       alt="Peeking cow"
@@ -118,7 +117,7 @@ export default function HeroHacking() {
                   </div>
 
                   {/* Duck */}
-                  <div className="relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <div className="relative rounded-[20px] bg-[#FFF3B6] overflow-hidden flex items-end justify-center">
                     <Image
                       src="/hackers/hero/PeepingDuck.svg"
                       alt="Peeking duck"
@@ -130,7 +129,7 @@ export default function HeroHacking() {
                   </div>
 
                   {/* Frog */}
-                  <div className="relative rounded-[28px] bg-[#E9FBBA] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <div className="relative rounded-[20px] bg-[#E9FBBA] overflow-hidden flex items-end justify-center">
                     <Image
                       src="/hackers/hero/PeepingFrog.svg"
                       alt="Peeking frog"
@@ -141,7 +140,7 @@ export default function HeroHacking() {
                   </div>
 
                   {/* Bunny */}
-                  <div className="relative rounded-[28px] bg-[#FFD2D2] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <div className="relative rounded-[20px] bg-[#FFD2D2] overflow-hidden flex items-end justify-center">
                     <Image
                       src="/hackers/hero/PeepingBunny.svg"
                       alt="Peeking bunny"
@@ -157,9 +156,8 @@ export default function HeroHacking() {
                   href="https://hackdavis-2026.devpost.com/"
                   target="_blank"
                   rel="noreferrer"
-                  className="mt-2 group relative rounded-xl bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] min-h-[110px] flex items-center justify-center overflow-hidden"
+                  className="mt-2 group relative rounded-[1000px] bg-white/25 backdrop-blur-xl min-h-[110px] flex items-center justify-center overflow-hidden"
                   style={{
-                    borderRadius: '38.812px',
                     background:
                       'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
                   }}
@@ -187,7 +185,7 @@ export default function HeroHacking() {
                 {/* Row 1: 3 tiles */}
                 <div className="min-h-0 grid grid-cols-[50fr_30fr_20fr] gap-5">
                   {/* Cow */}
-                  <div className="min-h-0 relative rounded-[28px] bg-[#93F5F3] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <div className="min-h-0 relative rounded-[28px] bg-[#93F5F3] backdrop-blur-xl overflow-hidden flex items-end justify-center">
                     <Image
                       src="/hackers/hero/PeepingCow.svg"
                       alt="Peeking cow"
@@ -199,7 +197,7 @@ export default function HeroHacking() {
                   </div>
 
                   {/* Duck */}
-                  <div className="min-h-0 relative rounded-[28px] bg-[#FFF3B6] border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <div className="min-h-0 relative rounded-[28px] bg-[#FFF3B6] overflow-hidden flex items-end justify-center">
                     <Image
                       src="/hackers/hero/PeepingDuck.svg"
                       alt="Peeking duck"
@@ -211,7 +209,7 @@ export default function HeroHacking() {
                   </div>
 
                   {/* Frog */}
-                  <div className="min-h-0 relative rounded-[28px] bg-[#E9FBBA] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <div className="min-h-0 relative rounded-[28px] bg-[#E9FBBA] backdrop-blur-xl overflow-hidden flex items-end justify-center">
                     <Image
                       src="/hackers/hero/PeepingFrog.svg"
                       alt="Peeking frog"
@@ -225,7 +223,7 @@ export default function HeroHacking() {
                 {/* Row 2: bunny + submit pill */}
                 <div className="min-h-0 grid grid-cols-[1fr_2fr] gap-5 items-stretch">
                   {/* Bunny */}
-                  <div className="min-h-0 relative rounded-[28px] bg-[#FFD2D2] backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden flex items-end justify-center">
+                  <div className="min-h-0 relative rounded-[28px] bg-[#FFD2D2] backdrop-blur-xl overflow-hidden flex items-end justify-center">
                     <Image
                       src="/hackers/hero/PeepingBunny.svg"
                       alt="Peeking bunny"
@@ -240,7 +238,7 @@ export default function HeroHacking() {
                     href="https://hackdavis-2026.devpost.com/"
                     target="_blank"
                     rel="noreferrer"
-                    className="group relative rounded-full bg-white/25 backdrop-blur-xl border border-white/35 shadow-[0_10px_30px_rgba(0,0,0,0.08)] flex items-center justify-center overflow-hidden"
+                    className="group relative rounded-full bg-white/25 backdrop-blur-xl flex items-center justify-center overflow-hidden"
                     style={{
                       background:
                         'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
@@ -261,7 +259,6 @@ export default function HeroHacking() {
                       <span
                         className="text-white font-medium tracking-[4.601px]"
                         style={{
-                          fontFamily: '"DM Mono", monospace',
                           fontSize: 'clamp(28px, 6vw, 90px)',
                           textShadow: '0 0 31.729px rgba(255, 255, 255, 0.30)',
                         }}
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
index 06e04df37..4dbe1bffc 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
@@ -6,8 +6,10 @@ interface CountdownProps {
   countdownTarget?: number;
 }
 
+const HACKING_ENDS_TIME = new Date('2026-05-10T11:00:00-07:00').getTime(); // May 10, 2026 at 11:00 AM PDT
+
 export default function Countdown({
-  countdownTarget = new Date('2026-03-09T07:00:00-00:00').getTime(), // END OF HACKING TIME
+  countdownTarget = HACKING_ENDS_TIME,
 }: CountdownProps) {
   const [timeLeft, setTimeLeft] = useState({
     hours: 24,
@@ -46,7 +48,7 @@ export default function Countdown({
 
   const timerStyle = {
     color: '#FFF',
-    fontFamily: '"DM Mono", monospace',
+    fontFamily: 'DM Mono',
     fontSize: 'clamp(36px, 12vw, 230.034px)',
     fontStyle: 'normal',
     fontWeight: 500,

From 1dcd842bb2190583f5bc839dfe33a61ab5212cd9 Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 8 Mar 2026 14:32:17 -0700
Subject: [PATCH 12/18] fix min height

---
 app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index c1ef509ee..2ce0b3e48 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -22,11 +22,11 @@ export default function HeroHacking() {
 
   return (
     <div className="w-full h-screen p-4 md:p-10">
-      <div className="relative w-full h-full overflow-hidden">
+      <div className="relative w-full min-h-[86vh] overflow-hidden">
         {/* content wrapper */}
         <div className="relative z-10 w-full">
           {/* Main grid area */}
-          <div className="mx-auto h-[90vh] min-h-0 flex flex-col justify-center gap-3 md:grid md:grid-rows-[auto_minmax(0,1fr)] md:gap-5">
+          <div className="mx-auto h-[90vh] min-h-0 flex flex-col justify-center gap-3 md:grid md:grid-rows-[minmax(1,1fr)] md:gap-5">
             {' '}
             {/* Countdown bar */}
             <div

From a9c229f5a064045b1bf4269baa261ec3cdfa186d Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 8 Mar 2026 14:38:10 -0700
Subject: [PATCH 13/18] revert layout

---
 app/(pages)/(hackers)/(hub)/layout.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/(pages)/(hackers)/(hub)/layout.tsx b/app/(pages)/(hackers)/(hub)/layout.tsx
index 563aef384..602aadd8d 100644
--- a/app/(pages)/(hackers)/(hub)/layout.tsx
+++ b/app/(pages)/(hackers)/(hub)/layout.tsx
@@ -3,14 +3,12 @@ import Navbar from '@components/Navbar/Navbar';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div>
-      <ProtectedDisplay
-        allowedRoles={['hacker', 'admin']}
-        failRedirectRoute="/login"
-      >
-        <Navbar />
-        {children}
-      </ProtectedDisplay>
-    </div>
+    <ProtectedDisplay
+      allowedRoles={['hacker', 'admin']}
+      failRedirectRoute="/login"
+    >
+      <Navbar />
+      {children}
+    </ProtectedDisplay>
   );
 }

From e485e2714e92a5b89cc31eb1feafdd2bcb972527 Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 8 Mar 2026 14:52:24 -0700
Subject: [PATCH 14/18] removed unused timetracker

---
 .../HomeHacking/_components/TimeTracker.tsx   | 56 -------------------
 1 file changed, 56 deletions(-)
 delete mode 100644 app/(pages)/(hackers)/_components/HomeHacking/_components/TimeTracker.tsx

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/_components/TimeTracker.tsx b/app/(pages)/(hackers)/_components/HomeHacking/_components/TimeTracker.tsx
deleted file mode 100644
index 2e7ec007a..000000000
--- a/app/(pages)/(hackers)/_components/HomeHacking/_components/TimeTracker.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-
-type CountdownProps = {
-  targetTime: number;
-};
-
-const Countdown = ({ targetTime }: CountdownProps) => {
-  const [timeLeft, setTimeLeft] = useState({
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
-  });
-
-  useEffect(() => {
-    const calculateTimeLeft = () => {
-      const difference = targetTime - new Date().getTime();
-      if (difference <= 0) {
-        return { hours: 0, minutes: 0, seconds: 0 };
-      }
-      return {
-        hours: Math.floor(difference / (1000 * 60 * 60)),
-        minutes: Math.floor((difference / (1000 * 60)) % 60),
-        seconds: Math.floor((difference / 1000) % 60),
-      };
-    };
-
-    const timer = setInterval(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [targetTime]);
-
-  return (
-    <div>
-      <span>{timeLeft.hours.toString().padStart(2, '0')}</span> :{' '}
-      <span>{timeLeft.minutes.toString().padStart(2, '0')}</span> :{' '}
-      <span>{timeLeft.seconds.toString().padStart(2, '0')}</span>
-    </div>
-  );
-};
-
-type TimeTrackerProps = {
-  targetTime?: number;
-};
-
-const TimeTracker = ({ targetTime }: TimeTrackerProps) => {
-  const effectiveTargetTime =
-    targetTime || new Date('2025-05-01T09:00:00Z').getTime();
-
-  return <Countdown targetTime={effectiveTargetTime} />;
-};
-
-export default TimeTracker;

From 578da365a66aa6cdbccaf2bee57c02403cdedd57 Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 8 Mar 2026 14:54:09 -0700
Subject: [PATCH 15/18] reverted urlsearchparams

---
 app/(pages)/_components/Navbar/Navbar.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx
index fcaef306c..dcaac0382 100644
--- a/app/(pages)/_components/Navbar/Navbar.tsx
+++ b/app/(pages)/_components/Navbar/Navbar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useRouter, usePathname } from 'next/navigation';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import { MouseEvent, useEffect, useState } from 'react';
 import LogoutAction from '@actions/auth/logout';
 
@@ -30,11 +30,8 @@ const sections = [
 export default function Navbar() {
   const pathname = usePathname();
   const router = useRouter();
-
-  const section =
-    typeof window !== 'undefined'
-      ? new URLSearchParams(window.location.search).get('section')
-      : null;
+  const searchParams = useSearchParams();
+  const section = searchParams.get('section');
 
   const [activeLink, setActiveLink] = useState(
     section || (pathname === '/' ? 'home' : 'about')

From 68cbf24ae9de8748262bbb1c0f5cb1ce597b61af Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 8 Mar 2026 14:56:12 -0700
Subject: [PATCH 16/18] removed priority

---
 .../(hackers)/_components/HomeHacking/HeroHacking.tsx      | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index 2ce0b3e48..c7a0b16a0 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -42,7 +42,6 @@ export default function HeroHacking() {
                 alt="Background"
                 fill
                 className="object-cover pointer-events-none select-none -z-10"
-                priority
               />
 
               <div className="flex items-start justify-between gap-2">
@@ -112,7 +111,6 @@ export default function HeroHacking() {
                       width={520}
                       height={320}
                       className="w-[85%] h-auto pointer-events-none select-none"
-                      priority
                     />
                   </div>
 
@@ -124,7 +122,6 @@ export default function HeroHacking() {
                       width={520}
                       height={320}
                       className="w-[100%] h-auto pointer-events-none select-none"
-                      priority
                     />
                   </div>
 
@@ -168,7 +165,6 @@ export default function HeroHacking() {
                     alt="Background"
                     fill
                     className="object-cover pointer-events-none select-none -z-10 overflow-hidden"
-                    priority
                   />
                   <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />
                   <div className="relative flex items-center gap-2">
@@ -192,7 +188,6 @@ export default function HeroHacking() {
                       width={520}
                       height={320}
                       className="w-[55%] max-h-full h-auto pointer-events-none select-none"
-                      priority
                     />
                   </div>
 
@@ -204,7 +199,6 @@ export default function HeroHacking() {
                       width={520}
                       height={320}
                       className="w-[100%] max-h-full h-auto pointer-events-none select-none"
-                      priority
                     />
                   </div>
 
@@ -250,7 +244,6 @@ export default function HeroHacking() {
                       alt="Background"
                       fill
                       className="object-cover pointer-events-none select-none -z-10"
-                      priority
                     />
 
                     <div className="absolute inset-0 opacity-70 pointer-events-none bg-gradient-to-r from-white/0 via-white/10 to-white/0" />

From 731ea9f3103bbba6ff0969a9c7737126c4ced10e Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 8 Mar 2026 15:04:19 -0700
Subject: [PATCH 17/18] added rollout props

---
 app/(pages)/(hackers)/(hub)/page.tsx          | 10 ++++++-
 .../_components/HomeHacking/HeroHacking.tsx   | 28 +++++++------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx
index 99ce39257..5aef90db0 100644
--- a/app/(pages)/(hackers)/(hub)/page.tsx
+++ b/app/(pages)/(hackers)/(hub)/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import PrizeTracks from '@pages/(hackers)/_components/PrizeTracks/PrizeTracks';
 import BeginnersSection from '@pages/(hackers)/_components/HomeHacking/BeginnersSection';
 import Discord from '@pages/(hackers)/_components/StayUpToDate/Discord';
@@ -11,13 +13,19 @@ import HeroJudging from '../_components/HomeJudging/HeroJudging';
 import HackerChoiceAward from '../_components/HomeJudging/HackersChoiceAwards';
 import HeroWaiting from '../_components/HomeJudging/HeroWaiting';
 import HeroHacking from '../_components/HomeHacking/HeroHacking';
+import { useRollout } from '@pages/_hooks/useRollout';
 
 export default function Page() {
+  const { rolloutRes, loading } = useRollout('hacking-starts');
+  const rolloutTime = rolloutRes?.ok
+    ? rolloutRes.body?.rollout_time
+    : undefined;
+
   return (
     <main id="home">
       <TableNumberContextProvider>
         <ClientTimeProtectedDisplay featureId="hero-hacking">
-          <HeroHacking />
+          <HeroHacking rolloutTime={rolloutTime} loading={loading} />
           <ScheduleSneakPeek />
           <BeginnersSection />
           <MDHelp />
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index c7a0b16a0..1ac33b1e4 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -3,22 +3,19 @@
 import Image from 'next/image';
 import { GoArrowRight } from 'react-icons/go';
 
-import { useRollout } from '@pages/_hooks/useRollout';
 import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay';
 import Countdown from './_components/Countdown';
 
-export default function HeroHacking() {
-  const { loading, rolloutRes, fetchRollout } = useRollout('hacking-starts');
-
-  // If rollout hasn't returned yet, render the hero shell + a fallback countdown
-  const hasRollout =
-    !!rolloutRes &&
-    (rolloutRes as any).ok &&
-    (rolloutRes as any).body?.rollout_time;
+interface HeroHackingProps {
+  rolloutTime?: number;
+  loading?: boolean;
+}
 
-  const countdownTarget = hasRollout
-    ? (rolloutRes as any).body.rollout_time + 24 * 60 * 60 * 1000
-    : undefined;
+export default function HeroHacking({
+  rolloutTime,
+  loading,
+}: HeroHackingProps) {
+  const countdownTarget = rolloutTime ? rolloutTime + 86400000 : undefined;
 
   return (
     <div className="w-full h-screen p-4 md:p-10">
@@ -51,13 +48,8 @@ export default function HeroHacking() {
                     <ClientTimeProtectedDisplay
                       featureId="hacking-starts"
                       fallback={<Countdown />}
-                      callback={() => fetchRollout('hacking-starts')}
                     >
-                      {hasRollout && countdownTarget ? (
-                        <Countdown countdownTarget={countdownTarget} />
-                      ) : (
-                        <Countdown />
-                      )}
+                      <Countdown countdownTarget={countdownTarget} />
                     </ClientTimeProtectedDisplay>
 
                     {loading && (

From 2834154c9def549a3189d7537267e044d6aa335b Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 8 Mar 2026 15:20:09 -0700
Subject: [PATCH 18/18] final cleanup

---
 .../_components/HomeHacking/HeroHacking.tsx         | 13 ++++++++-----
 app/(pages)/_components/Navbar/Navbar.tsx           |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index 1ac33b1e4..01c839738 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -11,11 +11,13 @@ interface HeroHackingProps {
   loading?: boolean;
 }
 
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+
 export default function HeroHacking({
   rolloutTime,
   loading,
 }: HeroHackingProps) {
-  const countdownTarget = rolloutTime ? rolloutTime + 86400000 : undefined;
+  const countdownTarget = rolloutTime ? rolloutTime + ONE_DAY_MS : undefined;
 
   return (
     <div className="w-full h-screen p-4 md:p-10">
@@ -24,7 +26,6 @@ export default function HeroHacking({
         <div className="relative z-10 w-full">
           {/* Main grid area */}
           <div className="mx-auto h-[90vh] min-h-0 flex flex-col justify-center gap-3 md:grid md:grid-rows-[minmax(1,1fr)] md:gap-5">
-            {' '}
             {/* Countdown bar */}
             <div
               className="relative flex flex-col justify-center rounded-[20px] md:rounded-[32px] bg-white/25 backdrop-blur-xl px-6 md:px-10 py-8 md:py-10 overflow-hidden"
@@ -49,7 +50,9 @@ export default function HeroHacking({
                       featureId="hacking-starts"
                       fallback={<Countdown />}
                     >
-                      <Countdown countdownTarget={countdownTarget} />
+                      {countdownTarget !== undefined && (
+                        <Countdown countdownTarget={countdownTarget} />
+                      )}
                     </ClientTimeProtectedDisplay>
 
                     {loading && (
@@ -144,7 +147,7 @@ export default function HeroHacking({
                 <a
                   href="https://hackdavis-2026.devpost.com/"
                   target="_blank"
-                  rel="noreferrer"
+                  rel="noopener noreferrer"
                   className="mt-2 group relative rounded-[1000px] bg-white/25 backdrop-blur-xl min-h-[110px] flex items-center justify-center overflow-hidden"
                   style={{
                     background:
@@ -223,7 +226,7 @@ export default function HeroHacking({
                   <a
                     href="https://hackdavis-2026.devpost.com/"
                     target="_blank"
-                    rel="noreferrer"
+                    rel="noopener noreferrer"
                     className="group relative rounded-full bg-white/25 backdrop-blur-xl flex items-center justify-center overflow-hidden"
                     style={{
                       background:
diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx
index dcaac0382..189adf255 100644
--- a/app/(pages)/_components/Navbar/Navbar.tsx
+++ b/app/(pages)/_components/Navbar/Navbar.tsx
@@ -169,7 +169,7 @@ export default function Navbar() {
           {links.map((link) => (
             <Link
               className={`${styles.link} ${
-                link.ids.find((id) => activeLink === id) ? styles.active : null
+                link.ids.find((id) => activeLink === id) ? styles.active : ''
               }`}
               style={{ color: getLinkColor(link) }}
               key={link.path}