From 96b91ea6840d24a61309250b9adb1d663579e23a Mon Sep 17 00:00:00 2001
From: reehals <sunny.reehal@gmail.com>
Date: Fri, 8 May 2026 18:08:21 -0700
Subject: [PATCH 1/4] V1 background

---
 app/(pages)/(hackers)/(hub)/layout.tsx        |  34 +--
 app/(pages)/(hackers)/(hub)/page.tsx          |  10 +-
 .../_components/HomeHacking/HeroHacking.tsx   | 210 +-----------------
 .../HomeHacking/ScheduleSneakPeek.tsx         | 191 +++++++++-------
 4 files changed, 132 insertions(+), 313 deletions(-)

diff --git a/app/(pages)/(hackers)/(hub)/layout.tsx b/app/(pages)/(hackers)/(hub)/layout.tsx
index 52c13591..53851775 100644
--- a/app/(pages)/(hackers)/(hub)/layout.tsx
+++ b/app/(pages)/(hackers)/(hub)/layout.tsx
@@ -1,34 +1,34 @@
-import { auth } from '@/auth';
+// import { auth } from '@/auth';
 import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
-import Navbar from '@components/Navbar/Navbar';
-import HackbotWidgetWrapper from '../_components/Hackbot/HackbotWidgetWrapper';
-import { HackerProfile } from '@typeDefs/hackbot';
-import FeedbackButton from '../_components/FeedbackButton';
+// import Navbar from '@components/Navbar/Navbar';
+// import HackbotWidgetWrapper from '../_components/Hackbot/HackbotWidgetWrapper';
+// import { HackerProfile } from '@typeDefs/hackbot';
+// import FeedbackButton from '../_components/FeedbackButton';
 
 export default async function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const session = await auth();
-  const u = session?.user as any;
-  const profile: HackerProfile | null = u
-    ? {
-        name: u.name ?? undefined,
-        position: u.position ?? undefined,
-        is_beginner: u.is_beginner ?? undefined,
-      }
-    : null;
+  // const session = await auth();
+  // const u = session?.user as any;
+  // const profile: HackerProfile | null = u
+  //   ? {
+  //       name: u.name ?? undefined,
+  //       position: u.position ?? undefined,
+  //       is_beginner: u.is_beginner ?? undefined,
+  //     }
+  //   : null;
 
   return (
     <ProtectedDisplay
       allowedRoles={['hacker', 'admin']}
       failRedirectRoute="/login"
     >
-      <Navbar />
+      {/* <Navbar /> */}
       {children}
-      <FeedbackButton />
-      <HackbotWidgetWrapper initialProfile={profile} />
+      {/* <FeedbackButton /> */}
+      {/* <HackbotWidgetWrapper initialProfile={profile} /> */}
     </ProtectedDisplay>
   );
 }
diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx
index d2e295ab..ace890e6 100644
--- a/app/(pages)/(hackers)/(hub)/page.tsx
+++ b/app/(pages)/(hackers)/(hub)/page.tsx
@@ -27,8 +27,8 @@ export default function Page() {
         <ClientTimeProtectedDisplay featureId="hero-hacking">
           <HeroHacking rolloutTime={rolloutTime} loading={loading} />
           <ScheduleSneakPeek />
-          <BeginnersSection />
-          <MDHelp />
+          {/* <BeginnersSection /> */}
+          {/* <MDHelp /> */}
         </ClientTimeProtectedDisplay>
         {/* temporarilty set featureId below to "hero-hacking" to test */}
         <ClientTimeProtectedDisplay featureId="hero-judging">
@@ -40,9 +40,9 @@ export default function Page() {
           <TableNumberCheckin />
         </ClientTimeProtectedDisplay>
       </TableNumberContextProvider>
-      <Discord />
-      <PrizeTracks />
-      <Footer />
+      {/* <Discord />
+      <PrizeTracks /> */}
+      {/* <Footer /> */}
     </main>
   );
 }
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index cf38324b..f6aea292 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -26,15 +26,15 @@ export default function HeroHacking({
   const countdownTarget = rolloutTime ? rolloutTime + ONE_DAY_MS : undefined;
 
   return (
-    <div className="w-full h-screen p-4 md:p-10">
-      <div className="relative w-full min-h-[86vh] overflow-hidden">
+    <div className="w-full h-[25vh] p-10">
+      <div className="relative w-full max-h-[25vh] 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-[minmax(1,1fr)] md:gap-5">
+          <div className="mx-auto h-[25vh] 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"
+              className="relative flex flex-col justify-center rounded-[20px] md:rounded-[32px] backdrop-blur-xl px-6 md:px-10 py-8 md:py-10 overflow-hidden"
               style={{
                 background:
                   'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
@@ -62,208 +62,6 @@ export default function HeroHacking({
                 </div>
               </div>
             </div>
-            {/* Everything below countdown must fit remaining height */}
-            <div className="relative min-h-0">
-              {/* Decorative stars */}
-              <Image
-                src={starLeft}
-                alt="sparkling star"
-                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={startRight}
-                alt="sparkling star"
-                width={120}
-                height={120}
-                className="
-                    pointer-events-none select-none
-                    absolute z-20
-                    -right-2 top-[0%]
-                    w-[56px] sm:w-[70px] md:w-[84px] lg:w-[96px]
-                    rotate-[10deg]
-                  "
-              />
-              {/* ===================== MOBILE (2x2 animals) ===================== */}
-              <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 aspect-[5/3] rounded-[20px] bg-[#CCFFFE] overflow-hidden flex items-end justify-center">
-                    <Image
-                      src={peepingCow}
-                      alt="Peeking cow"
-                      width={520}
-                      height={320}
-                      className="h-full w-auto max-w-none pointer-events-none select-none"
-                    />
-                  </div>
-
-                  {/* Duck */}
-                  <div className="relative aspect-[5/3] rounded-[20px] bg-[#FFF3B6] overflow-hidden flex items-end justify-center">
-                    <Image
-                      src={peepingDuck}
-                      alt="Peeking duck"
-                      width={520}
-                      height={320}
-                      className="h-full w-auto max-w-none pointer-events-none select-none"
-                    />
-                  </div>
-
-                  {/* Frog */}
-                  <div className="relative aspect-[5/3] rounded-[20px] bg-[#E9FBBA] overflow-hidden flex items-end justify-center">
-                    <Image
-                      src={peepingFrog}
-                      alt="Peeking frog"
-                      width={520}
-                      height={320}
-                      className="h-full w-auto max-w-none pointer-events-none select-none"
-                    />
-                  </div>
-
-                  {/* Bunny */}
-                  <div className="relative aspect-[5/3] rounded-[20px] bg-[#FFD2D2] overflow-hidden flex items-end justify-center">
-                    <Image
-                      src={peepingBunny}
-                      alt="Peeking bunny"
-                      width={520}
-                      height={320}
-                      className="h-full w-auto max-w-none pointer-events-none select-none"
-                    />
-                  </div>
-                </div>
-
-                {/* Submit pill under grid on mobile */}
-                <a
-                  href="https://hackdavis-2026.devpost.com/"
-                  target="_blank"
-                  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:
-                      'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
-                  }}
-                >
-                  {/* background */}
-                  <Image
-                    src={clouds}
-                    alt="Background"
-                    fill
-                    className="object-cover pointer-events-none select-none -z-10 overflow-hidden"
-                  />
-                  <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 (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-[#CCFFFE] backdrop-blur-xl overflow-hidden flex items-end justify-center">
-                    <Image
-                      src={peepingCow}
-                      alt="Peeking cow"
-                      width={520}
-                      height={320}
-                      className="h-full w-auto max-w-none pointer-events-none select-none"
-                    />
-                  </div>
-
-                  {/* Duck */}
-                  <div className="min-h-0 relative rounded-[28px] bg-[#FFF3B6] overflow-hidden flex items-end justify-center">
-                    <Image
-                      src={peepingDuck}
-                      alt="Peeking duck"
-                      width={520}
-                      height={320}
-                      className="h-full w-auto max-w-none pointer-events-none select-none"
-                    />
-                  </div>
-
-                  {/* Frog */}
-                  <div className="min-h-0 relative rounded-[28px] bg-[#E9FBBA] backdrop-blur-xl overflow-hidden flex items-end justify-center">
-                    <Image
-                      src={peepingFrog}
-                      alt="Peeking frog"
-                      width={520}
-                      height={320}
-                      className="h-full w-auto max-w-none 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 overflow-hidden flex items-end justify-center">
-                    <Image
-                      src={peepingBunny}
-                      alt="Peeking bunny"
-                      width={520}
-                      height={320}
-                      className="h-full w-auto max-w-none pointer-events-none select-none"
-                    />
-                  </div>
-
-                  {/* Submit pill */}
-                  <a
-                    href="https://hackdavis-2026.devpost.com/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    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%)',
-                    }}
-                  >
-                    {/* background */}
-                    <Image
-                      src={clouds}
-                      alt="Background"
-                      fill
-                      className="object-cover pointer-events-none select-none -z-10"
-                    />
-
-                    <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={{
-                          fontSize: 'clamp(30px, 10.2vw, 195px)', // a bit smaller than to countown timer font
-                          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>
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx b/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx
index 90b730bc..1a2bc99b 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx
@@ -90,6 +90,8 @@ function Panel({
       />
     ));
 
+  const isHappeningNow = title === 'Happening now';
+
   const upcomingGroups = useMemo(() => {
     const groupsMap = new Map<number, EventEntry[]>();
     for (const entry of upcomingEvents) {
@@ -110,87 +112,103 @@ function Panel({
   }, [upcomingEvents]);
 
   return (
-    <div className="rounded-[16px] bg-[#FFFFFF] p-5 lg:p-6">
-      <h2 className="font-jakarta text-[clamp(1.1rem,3vw,2.25rem)] font-semibold leading-tight tracking-[0.64px] text-[#3F3F3F] mb-4">
-        {title}
+    <div className="rounded-[16px] bg-[#FFFFFF] p-5 lg:p-6 max-h-[60vh] overflow-y-clip">
+      <h2 className="font-jakarta text-[clamp(1.1rem,3vw,2.25rem)] font-semibold leading-tight tracking-[0.64px] text-[#3F3F3F]">
+        Schedule
       </h2>
-      <div className="border-b border-[#E3E3E3] mb-6" />
-
-      <SectionLabel label="• LIVE" />
-      <div className="space-y-3 mb-[3vw]">
-        {liveEvents.length > 0 ? (
-          renderEventItems(liveEvents, 'live')
-        ) : (
-          <div className="bg-[#F3F3FC] rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
-            <Image
-              src={title === 'Happening now' ? cucumber_cow : duckbunny}
-              alt={
-                title === 'Happening now'
-                  ? 'Cow with cucumber over their eyes'
-                  : 'Duck on top of bunny'
-              }
-            />
-            <p className="font-semibold text-center text-[#3F3F3F] text-[16px] tracking-[0.64px]">
-              {title === 'Your schedule'
-                ? 'No live events on your schedule'
-                : 'No live events'}
-            </p>
-            <p className="text-center text-[#7C7C85] md:w-[70%] text-[14px] tracking-[0.64px]">
-              This is where you’ll see live events. Seems like there’s nothing
-              going on at the moment!
-            </p>
-            <Link
-              href="/schedule"
-              className="hover:brightness-[97%] hover:saturate-[140%]"
-            >
-              {title === 'Your schedule' ? (
-                <button className="bg-[#CCFFFE] text-[#003D3D] rounded-full p-[12px] font-semibold text-center px-[24px] text-[14px] tracking-[0.64px]">
-                  Add to your schedule
-                </button>
-              ) : null}
-            </Link>
+      {/* <div className="border-b border-[#E3E3E3] mb-2" /> */}
+
+      <div
+        className={
+          isHappeningNow ? 'grid grid-cols-1 lg:grid-cols-2 gap-6' : ''
+        }
+      >
+        <div>
+          <SectionLabel label="• LIVE" />
+          <div className="space-y-3 mb-[3vw]">
+            {liveEvents.length > 0 ? (
+              renderEventItems(liveEvents, 'live')
+            ) : (
+              <div className="bg-[#F3F3FC] rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
+                <Image
+                  src={title === 'Happening now' ? cucumber_cow : duckbunny}
+                  alt={
+                    title === 'Happening now'
+                      ? 'Cow with cucumber over their eyes'
+                      : 'Duck on top of bunny'
+                  }
+                />
+                <p className="font-semibold text-center text-[#3F3F3F] text-[16px] tracking-[0.64px]">
+                  {title === 'Your schedule'
+                    ? 'No live events on your schedule'
+                    : 'No live events'}
+                </p>
+                <p className="text-center text-[#7C7C85] md:w-[70%] text-[14px] tracking-[0.64px]">
+                  This is where you’ll see live events. Seems like there’s
+                  nothing going on at the moment!
+                </p>
+                <Link
+                  href="/schedule"
+                  className="hover:brightness-[97%] hover:saturate-[140%]"
+                >
+                  {title === 'Your schedule' ? (
+                    <button className="bg-[#CCFFFE] text-[#003D3D] rounded-full p-[12px] font-semibold text-center px-[24px] text-[14px] tracking-[0.64px]">
+                      Add to your schedule
+                    </button>
+                  ) : null}
+                </Link>
+              </div>
+            )}
           </div>
-        )}
-      </div>
-      {upcomingGroups.length > 0 ? (
-        upcomingGroups.map((group) => (
-          <div key={group.startTime}>
-            <CountdownLabel targetTime={group.startTime} />
-            <div className="space-y-3">
-              {renderEventItems(group.entries, `upcoming-${group.startTime}`)}
+        </div>
+
+        <div>
+          {upcomingGroups.length > 0 ? (
+            upcomingGroups.map((group) => (
+              <div key={group.startTime}>
+                <CountdownLabel targetTime={group.startTime} />
+                <div className="space-y-3">
+                  {renderEventItems(
+                    group.entries,
+                    `upcoming-${group.startTime}`
+                  )}
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="bg-[#F3F3FC] rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
+              <Image
+                src={title === 'Happening now' ? sleeping_cow : duckfrog}
+                alt={
+                  title === 'Happening now'
+                    ? 'Sleeping cow'
+                    : 'Duck on top of frog'
+                }
+              />
+              <p className="font-semibold text-center text-[#3F3F3F] text-[16px] tracking-[0.64px]">
+                {title === 'Your schedule'
+                  ? 'No upcoming events on your schedule'
+                  : 'No upcoming events'}
+              </p>
+              <p className="text-center text-[#7C7C85] md:w-[70%] text-[14px] tracking-[0.64px]">
+                {title === 'Your schedule'
+                  ? 'This is where you’ll see upcoming events. Seems like there’s nothing coming up! Take a look to see if there’s anything you want to check out.'
+                  : 'This is where you’ll  see upcoming events. Seems like there’s nothing coming up!'}
+              </p>
+              <Link
+                href="/schedule"
+                className="hover:brightness-[97%] hover:saturate-[140%]"
+              >
+                {title === 'Your schedule' ? (
+                  <button className="bg-[#CCFFFE] text-[#003D3D] rounded-full p-[12px] font-semibold text-center px-[24px] text-[14px] tracking-[0.64px]">
+                    Explore events
+                  </button>
+                ) : null}
+              </Link>
             </div>
-          </div>
-        ))
-      ) : (
-        <div className="bg-[#F3F3FC] rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
-          <Image
-            src={title === 'Happening now' ? sleeping_cow : duckfrog}
-            alt={
-              title === 'Happening now' ? 'Sleeping cow' : 'Duck on top of frog'
-            }
-          />
-          <p className="font-semibold text-center text-[#3F3F3F] text-[16px] tracking-[0.64px]">
-            {title === 'Your schedule'
-              ? 'No upcoming events on your schedule'
-              : 'No upcoming events'}
-          </p>
-          <p className="text-center text-[#7C7C85] md:w-[70%] text-[14px] tracking-[0.64px]">
-            {title === 'Your schedule'
-              ? 'This is where you’ll see upcoming events. Seems like there’s nothing coming up! Take a look to see if there’s anything you want to check out.'
-              : 'This is where you’ll  see upcoming events. Seems like there’s nothing coming up!'}
-          </p>
-          <Link
-            href="/schedule"
-            className="hover:brightness-[97%] hover:saturate-[140%]"
-          >
-            {title === 'Your schedule' ? (
-              <button className="bg-[#CCFFFE] text-[#003D3D] rounded-full p-[12px] font-semibold text-center px-[24px] text-[14px] tracking-[0.64px]">
-                Explore events
-              </button>
-            ) : null}
-          </Link>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }
@@ -208,9 +226,12 @@ export default function ScheduleSneakPeek({
   } = useScheduleSneakPeekData();
 
   return (
-    <div id="schedule-sneak-peek" className="w-full bg-[#FAFAFF]">
-      <section className={`w-[90%] mx-auto py-[5vw] ${className ?? ''}`}>
-        <div className="inline-flex items-center group font-jakarta text-[clamp(1.25rem,4.2vw,3rem)] font-semibold leading-tight tracking-[0.72px] text-[#3F3F3F] whitespace-nowrap">
+    <div
+      id="schedule-sneak-peek"
+      className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#FFFFFF]"
+    >
+      <section className={`w-full px-[4vw] py-[5vw] ${className ?? ''}`}>
+        {/* <div className="inline-flex items-center group font-jakarta text-[clamp(1.25rem,4.2vw,3rem)] font-semibold leading-tight tracking-[0.72px] text-[#3F3F3F] whitespace-nowrap">
           <span className="w-0 group-hover:w-[20px] md:group-hover:w-[35px]  overflow-hidden transition-all duration-300 ease-out shrink-0">
             <Image
               src="/icons/arrow-right.svg"
@@ -226,11 +247,11 @@ export default function ScheduleSneakPeek({
               Schedule
             </Link>
           </span>
-        </div>
+        </div> */}
 
-        <div className="border-b border-[#E3E3E3] mt-4 mb-[2.5rem]" />
+        {/* <div className="border-b border-[#E3E3E3] mt-4 mb-[2.5rem]" /> */}
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-5">
+        <div className="grid grid-cols-1 gap-4 lg:gap-5">
           <Panel
             title="Happening now"
             liveEvents={liveAll}
@@ -238,13 +259,13 @@ export default function ScheduleSneakPeek({
             onAddToSchedule={addToPersonalSchedule}
             onRemoveFromSchedule={removeFromPersonalSchedule}
           />
-          <Panel
+          {/* <Panel
             title="Your schedule"
             liveEvents={livePersonal}
             upcomingEvents={upcomingPersonal}
             onAddToSchedule={addToPersonalSchedule}
             onRemoveFromSchedule={removeFromPersonalSchedule}
-          />
+          /> */}
         </div>
       </section>
     </div>

From a12b5ecb99af6a64b8c988c46b1211bab869f71b Mon Sep 17 00:00:00 2001
From: reehals <sunny.reehal@gmail.com>
Date: Fri, 8 May 2026 19:34:48 -0700
Subject: [PATCH 2/4] V2 display

---
 app/(pages)/(hackers)/(hub)/page.tsx          |  10 +-
 .../_components/HomeHacking/HeroHacking.tsx   |  73 ++++----
 .../HomeHacking/ScheduleSneakPeek.tsx         | 144 +++++++++++++---
 .../_components/Schedule/CalendarItem.tsx     | 162 +++++++-----------
 4 files changed, 224 insertions(+), 165 deletions(-)

diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx
index ace890e6..9c76e1cd 100644
--- a/app/(pages)/(hackers)/(hub)/page.tsx
+++ b/app/(pages)/(hackers)/(hub)/page.tsx
@@ -1,13 +1,13 @@
 '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';
-import Footer from '@components/Footer/Footer';
+// 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 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 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';
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index f6aea292..1b33e217 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -1,15 +1,15 @@
 'use client';
 
 import Image from 'next/image';
-import { GoArrowRight } from 'react-icons/go';
+// import { GoArrowRight } from 'react-icons/go';
 import Countdown from './_components/Countdown';
 import clouds from '@public/hackers/hero/Clouds.svg';
-import starLeft from '@public/hackers/hero/StarLeft.svg';
-import startRight from '@public/hackers/hero/StarRight.svg';
-import peepingBunny from '@public/hackers/hero/PeepingBunny.gif';
-import peepingCow from '@public/hackers/hero/PeepingCow.gif';
-import peepingDuck from '@public/hackers/hero/PeepingDuck.gif';
-import peepingFrog from '@public/hackers/hero/PeepingFrog.gif';
+// import starLeft from '@public/hackers/hero/StarLeft.svg';
+// import startRight from '@public/hackers/hero/StarRight.svg';
+// import peepingBunny from '@public/hackers/hero/PeepingBunny.gif';
+// import peepingCow from '@public/hackers/hero/PeepingCow.gif';
+// import peepingDuck from '@public/hackers/hero/PeepingDuck.gif';
+// import peepingFrog from '@public/hackers/hero/PeepingFrog.gif';
 
 interface HeroHackingProps {
   rolloutTime?: number;
@@ -26,45 +26,42 @@ export default function HeroHacking({
   const countdownTarget = rolloutTime ? rolloutTime + ONE_DAY_MS : undefined;
 
   return (
-    <div className="w-full h-[25vh] p-10">
+    <div className="w-full pt-5 px-10 pb-3">
       <div className="relative w-full max-h-[25vh] overflow-hidden">
         {/* content wrapper */}
-        <div className="relative z-10 w-full">
-          {/* Main grid area */}
-          <div className="mx-auto h-[25vh] 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] backdrop-blur-xl px-6 md:px-10 py-8 md:py-10 overflow-hidden"
-              style={{
-                background:
-                  'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
-              }}
-            >
-              {/* background */}
-              <Image
-                src={clouds}
-                alt="Background"
-                fill
-                className="object-cover pointer-events-none select-none -z-10"
-              />
+        <div className="relative z-10 w-full mx-auto h-[25vh] 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] backdrop-blur-xl px-6 md:px-10 py-8 md:py-10 overflow-hidden"
+            style={{
+              background:
+                'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
+            }}
+          >
+            {/* background */}
+            <Image
+              src={clouds}
+              alt="Background"
+              fill
+              className="object-cover pointer-events-none select-none -z-10"
+            />
 
-              <div className="flex items-start justify-between gap-2">
-                {/* Right: countdown (big) */}
-                <div className="flex-1 flex justify-center">
-                  <div className="text-white relative">
-                    <Countdown countdownTarget={countdownTarget} />
-                    {loading && (
-                      <div className="absolute top-full mt-2 text-white/90 text-sm">
-                        loading…
-                      </div>
-                    )}
-                  </div>
+            <div className="flex items-start justify-between gap-2">
+              {/* Right: countdown (big) */}
+              <div className="flex-1 flex justify-center">
+                <div className="text-white relative">
+                  <Countdown countdownTarget={countdownTarget} />
+                  {loading && (
+                    <div className="absolute top-full mt-2 text-white/90 text-sm">
+                      loading…
+                    </div>
+                  )}
                 </div>
               </div>
             </div>
           </div>
-          {/* end main grid area */}
         </div>
+        {/* end main grid area */}
       </div>
     </div>
   );
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx b/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx
index 1a2bc99b..d93ebf06 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 import CalendarItem from '@pages/(hackers)/_components/Schedule/CalendarItem';
 import {
   EventEntry,
-  useScheduleSneakPeekData,
+  // useScheduleSneakPeekData,
 } from '@hooks/useScheduleSneakPeekData';
 import { useSharedNow } from '@pages/_hooks/useScheduleSharedNow';
 
@@ -24,7 +24,7 @@ function SectionLabel({ label }: { label: string }) {
   const displayLabel = isLiveLabel ? 'LIVE' : label;
 
   return (
-    <div className="font-dm-mono text-lg leading-[100%] tracking-[0.36px] text-[#7C7C85] mt-5 mb-4 inline-flex items-center gap-2">
+    <div className="font-dm-mono text-3xl leading-[100%] tracking-[0.36px] text-[#3F3F3F] mx-4 mt-3 mb-3 inline-flex items-center gap-2">
       {isLiveLabel && (
         <span
           aria-hidden
@@ -81,6 +81,7 @@ function Panel({
         inPersonalSchedule={entry.inPersonalSchedule}
         tags={entry.event.tags}
         host={entry.event.host}
+        hideAddButton={true}
         onAddToSchedule={() => {
           void onAddToSchedule(entry.event._id || '');
         }}
@@ -112,24 +113,32 @@ function Panel({
   }, [upcomingEvents]);
 
   return (
-    <div className="rounded-[16px] bg-[#FFFFFF] p-5 lg:p-6 max-h-[60vh] overflow-y-clip">
-      <h2 className="font-jakarta text-[clamp(1.1rem,3vw,2.25rem)] font-semibold leading-tight tracking-[0.64px] text-[#3F3F3F]">
+    <div className="rounded-[16px] bg-[#FFFFFF] px-5 lg:px-6 py-0">
+      <h2 className="font-jakarta text-[clamp(1.1rem,3vw,2.25rem)] font-semibold leading-tight tracking-[0.64px] text-[#3F3F3F] pb-2">
         Schedule
       </h2>
       {/* <div className="border-b border-[#E3E3E3] mb-2" /> */}
 
       <div
         className={
-          isHappeningNow ? 'grid grid-cols-1 lg:grid-cols-2 gap-6' : ''
+          isHappeningNow
+            ? 'grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch'
+            : ''
         }
       >
-        <div>
+        <div
+          className={
+            isHappeningNow
+              ? 'rounded-3xl bg-[#FAFAFF] px-4 pb-4 overflow-hidden'
+              : undefined
+          }
+        >
           <SectionLabel label="• LIVE" />
           <div className="space-y-3 mb-[3vw]">
             {liveEvents.length > 0 ? (
               renderEventItems(liveEvents, 'live')
             ) : (
-              <div className="bg-[#F3F3FC] rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
+              <div className=" rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
                 <Image
                   src={title === 'Happening now' ? cucumber_cow : duckbunny}
                   alt={
@@ -138,12 +147,12 @@ function Panel({
                       : 'Duck on top of bunny'
                   }
                 />
-                <p className="font-semibold text-center text-[#3F3F3F] text-[16px] tracking-[0.64px]">
+                <p className="font-semibold text-center text-[#3F3F3F] text-[24px] tracking-[0.64px]">
                   {title === 'Your schedule'
                     ? 'No live events on your schedule'
                     : 'No live events'}
                 </p>
-                <p className="text-center text-[#7C7C85] md:w-[70%] text-[14px] tracking-[0.64px]">
+                <p className="text-center text-[#3F3F3F] md:w-[70%] text-[22px] tracking-[0.64px]">
                   This is where you’ll see live events. Seems like there’s
                   nothing going on at the moment!
                 </p>
@@ -162,7 +171,13 @@ function Panel({
           </div>
         </div>
 
-        <div>
+        <div
+          className={
+            isHappeningNow
+              ? 'rounded-xl bg-[#FAFAFF] px-4 pb-4 overflow-hidden'
+              : undefined
+          }
+        >
           {upcomingGroups.length > 0 ? (
             upcomingGroups.map((group) => (
               <div key={group.startTime}>
@@ -176,7 +191,7 @@ function Panel({
               </div>
             ))
           ) : (
-            <div className="bg-[#F3F3FC] rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
+            <div className="rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
               <Image
                 src={title === 'Happening now' ? sleeping_cow : duckfrog}
                 alt={
@@ -216,21 +231,108 @@ function Panel({
 export default function ScheduleSneakPeek({
   className,
 }: ScheduleSneakPeekProps) {
-  const {
-    liveAll,
-    upcomingAll,
-    livePersonal,
-    upcomingPersonal,
-    addToPersonalSchedule,
-    removeFromPersonalSchedule,
-  } = useScheduleSneakPeekData();
+  // TODO: TEMPORARY TEST DATA - Remove when done testing text sizes
+  const mockLiveEvents: EventEntry[] = [
+    {
+      event: {
+        _id: '680026b09d521a51759d7e83',
+        name: 'GitHub Copilot Workshop',
+        type: 'WORKSHOPS',
+        start_time: new Date('2026-05-09T22:00:00.000Z'),
+        end_time: new Date('2026-05-09T23:00:00.000Z'),
+        host: 'Major League Hacking',
+        tags: ['beginner', 'developer', 'pm'],
+        location: 'ARC Ballroom A',
+      },
+      attendeeCount: 42,
+      inPersonalSchedule: false,
+    },
+    {
+      event: {
+        _id: '67f7a5de3eaf1040a69ac6ad',
+        name: 'Bracelet Making',
+        type: 'ACTIVITIES',
+        start_time: new Date('2026-05-09T22:30:00.000Z'),
+        end_time: new Date('2026-05-10T00:30:00.000Z'),
+        host: undefined,
+        tags: [],
+        location: 'North Wing',
+      },
+      attendeeCount: 28,
+      inPersonalSchedule: false,
+    },
+  ];
+
+  const mockUpcomingEvents: EventEntry[] = [
+    {
+      event: {
+        _id: '67f7a60f3eaf1040a69ac6ae',
+        name: 'Therapy Dogs',
+        type: 'ACTIVITIES',
+        start_time: new Date('2026-05-09T22:30:00.000Z'),
+        end_time: new Date('2026-05-10T00:00:00.000Z'),
+        host: undefined,
+        tags: [],
+        location: 'South Wing',
+      },
+      attendeeCount: 85,
+      inPersonalSchedule: false,
+    },
+    {
+      event: {
+        _id: '680027589d521a51759d7e86',
+        name: 'Tech Together Meetup',
+        type: 'WORKSHOPS',
+        start_time: new Date('2026-05-09T23:00:00.000Z'),
+        end_time: new Date('2026-05-10T00:00:00.000Z'),
+        host: 'Major League Hacking',
+        tags: ['beginner', 'developer', 'pm', 'designer', 'other'],
+        location: 'ARC Ballroom A',
+      },
+      attendeeCount: 64,
+      inPersonalSchedule: false,
+    },
+    {
+      event: {
+        _id: '680028219d521a51759d7e8a',
+        name: 'Intro to UI/UX',
+        type: 'WORKSHOPS',
+        start_time: new Date('2026-05-09T23:00:00.000Z'),
+        end_time: new Date('2026-05-10T00:00:00.000Z'),
+        host: 'Design Interactive',
+        tags: ['beginner', 'designer'],
+        location: 'ARC Ballroom B',
+      },
+      attendeeCount: 37,
+      inPersonalSchedule: false,
+    },
+  ];
+
+  // Use mock data temporarily for testing
+  const liveAll = mockLiveEvents;
+  const upcomingAll = mockUpcomingEvents;
+  // const livePersonal: EventEntry[] = [];
+  // const upcomingPersonal: EventEntry[] = [];
+
+  const addToPersonalSchedule = async () => true;
+  const removeFromPersonalSchedule = async () => true;
+
+  // Uncomment below to use real data from hook:
+  // const {
+  //   liveAll,
+  //   upcomingAll,
+  //   livePersonal,
+  //   upcomingPersonal,
+  //   addToPersonalSchedule,
+  //   removeFromPersonalSchedule,
+  // } = useScheduleSneakPeekData();
 
   return (
     <div
       id="schedule-sneak-peek"
-      className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#FFFFFF]"
+      className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#FFFFFF] max-h-[65vw] overflow-x-clip"
     >
-      <section className={`w-full px-[4vw] py-[5vw] ${className ?? ''}`}>
+      <section className={`w-full ${className ?? ''}`}>
         {/* <div className="inline-flex items-center group font-jakarta text-[clamp(1.25rem,4.2vw,3rem)] font-semibold leading-tight tracking-[0.72px] text-[#3F3F3F] whitespace-nowrap">
           <span className="w-0 group-hover:w-[20px] md:group-hover:w-[35px]  overflow-hidden transition-all duration-300 ease-out shrink-0">
             <Image
diff --git a/app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx b/app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx
index 7ae20fa1..dad095e1 100644
--- a/app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx
+++ b/app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Image from 'next/image';
 import Event, { EventTag, EventType } from '@typeDefs/event';
-import { Button } from '@pages/_globals/components/ui/button';
+// import { Button } from '@pages/_globals/components/ui/button';
 import { SCHEDULE_EVENT_STYLES } from './scheduleEventStyles';
 import { formatScheduleTimeRange } from './scheduleTime';
 
@@ -28,13 +28,13 @@ const isEventType = (value: string): value is EventType => {
 export function CalendarItem({
   event,
   attendeeCount,
-  inPersonalSchedule = false,
-  hideAddButton = false,
-  disableAddButton = false,
+  // inPersonalSchedule = false,
+  // hideAddButton = false,
+  // disableAddButton = false,
+  // onAddToSchedule,
+  // onRemoveFromSchedule,
   tags,
   host,
-  onAddToSchedule,
-  onRemoveFromSchedule,
 }: CalendarItemProps) {
   const { name, type, location, start_time, end_time } = event;
   // Use originalType when present, but guard against unexpected values.
@@ -44,9 +44,9 @@ export function CalendarItem({
     ? normalizedType
     : 'GENERAL';
   const eventStyle = SCHEDULE_EVENT_STYLES[displayType];
-  const actionIconPath = inPersonalSchedule
-    ? '/icons/check.svg'
-    : '/icons/plus.svg';
+  // const actionIconPath = inPersonalSchedule
+  //   ? '/icons/check.svg'
+  //   : '/icons/plus.svg';
 
   // Handle different time display scenarios
   const timeDisplay = formatScheduleTimeRange(
@@ -56,66 +56,67 @@ export function CalendarItem({
 
   return (
     <div
-      className="w-full py-[24px] flex-shrink-0 rounded-[16px] px-[20px] 2xs:px-[38px] 2xs:py-[24px] lg:px-[40px] lg:py-[32px] mb-[8px] flex flex-col justify-center"
+      className="w-full flex-shrink-0 rounded-[16px] px-[22px] py-[22px] mb-[8px] flex flex-col justify-center"
       style={{
         backgroundColor: eventStyle.bgColor,
         color: eventStyle.textColor,
       }}
     >
-      <div className="flex items-start justify-between sm:items-center gap-[40px] relative flex-col">
-        <div className="flex flex-col sm:flex-row justify-between items-start gap-4 sm:gap-6 w-full">
-          <div className="w-full sm:w-auto">
-            <h2 className="font-metropolis text-[18px] md:text-[20px] font-semibold tracking-[0.72px] mb-1 text-balance">
-              {name}
-            </h2>
-            <div className="flex items-center flex-wrap gap-y-2">
-              <span className="font-plus-jakarta-sans text-[14px] font-normal leading-[145%] tracking-[0.36px] mr-5">
-                {timeDisplay}
-                {displayType === 'MEALS' && ' (Subject to change)'}
+      <div className="flex items-start justify-between sm:items-center gap-[10px] relative flex-col">
+        {/* Name and Host in two columns */}
+        <div className="flex flex-row justify-between items-start w-full">
+          <h2 className="font-metropolis text-[32px] font-semibold tracking-[0.72px] text-balance w-[65%]">
+            {name}
+          </h2>
+          {displayType !== 'GENERAL' && displayType !== 'MEALS' && host && (
+            <div className="flex flex-col gap-2 items-end text-right pt-1 w-[35%]">
+              <span className="font-plus-jakarta-sans text-[24px] font-normal leading-[145%] tracking-[0.36px] text-balance">
+                {host.toUpperCase()}
               </span>
-              {location && (
-                <div className="flex items-center">
-                  <Image
-                    src={location_icon}
-                    alt="location icon"
-                    width={11}
-                    height={13.44}
-                    className="mr-1"
-                  />
-                  <span className="font-plus-jakarta-sans text-[14px] font-normal leading-[145%] tracking-[0.36px]">
-                    {location}
-                  </span>
-                </div>
-              )}
             </div>
-            {tags && tags.length > 0 && (
-              <div className="flex gap-2 items-center flex-wrap mt-[12px]">
-                {tags.map((tag) => (
-                  <div
-                    className="px-[8px] py-[4px] bg-[rgba(209,247,110,0.60)]"
-                    key={tag}
-                  >
-                    <span
-                      key={tag}
-                      className="font-dm-mono text-sm font-normal leading-[145%] tracking-[0.36px]"
-                    >
-                      {tag.toUpperCase()}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-          {displayType !== 'GENERAL' && displayType !== 'MEALS' && (
-            <div className="flex flex-col gap-2 items-end text-right pt-1">
-              {host && (
-                <span className="font-plus-jakarta-sans text-[14px] font-normal leading-[145%] tracking-[0.36px] text-balance">
-                  {host.toUpperCase()}
-                </span>
-              )}
+          )}
+        </div>
+
+        {/* Time, Location, Tags below */}
+        <div className="flex items-center flex-wrap gap-y-2 w-full">
+          <span className="font-plus-jakarta-sans text-[26px] font-normal leading-[145%] tracking-[0.36px] mr-5">
+            {timeDisplay}
+            {displayType === 'MEALS' && ' (Subject to change)'}
+          </span>
+          {location && (
+            <div className="flex items-center">
+              <Image
+                src={location_icon}
+                alt="location icon"
+                width={11}
+                height={13.44}
+                className="mr-1"
+              />
+              <span className="font-plus-jakarta-sans text-[24px] font-normal leading-[145%] tracking-[0.36px]">
+                {location}
+              </span>
             </div>
           )}
         </div>
+        {tags && tags.length > 0 && (
+          <div className="flex gap-2 items-center flex-wrap mt-[8px] justify-start w-full">
+            {tags.map((tag) => (
+              <div
+                className="px-[8px] py-[4px] bg-[rgba(209,247,110,0.60)]"
+                key={tag}
+              >
+                <span
+                  key={tag}
+                  className="font-dm-mono text-xl font-normal leading-[145%] tracking-[0.36px]"
+                >
+                  {tag.toUpperCase()}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Attendee count */}
         {displayType !== 'GENERAL' && displayType !== 'MEALS' && (
           <div className="flex flex-row justify-between items-center gap-2 sm:gap-6 w-full">
             {(displayType === 'WORKSHOPS' || displayType === 'ACTIVITIES') && (
@@ -131,54 +132,13 @@ export function CalendarItem({
                 <div className="relative w-[44.4px] h-[30px]">
                   <Image src={attendee_icon} alt="attendee icon" fill />
                 </div>
-                <span className="font-plus-jakarta-sans text-[14px] font-normal leading-[145%] tracking-[0.36px] text-balance">
+                <span className="font-plus-jakarta-sans text-[22px] font-normal leading-[145%] tracking-[0.36px] text-balance">
                   {`${attendeeCount ?? ''} Hacker${
                     attendeeCount && attendeeCount < 2 ? ' is' : 's are'
                   } attending`}
                 </span>
               </div>
             )}
-
-            {!hideAddButton && (
-              <div className="flex flex-col gap-2 items-end sm:w-auto ml-auto">
-                <Button
-                  onClick={
-                    inPersonalSchedule ? onRemoveFromSchedule : onAddToSchedule
-                  }
-                  disabled={disableAddButton}
-                  className={`w-auto h-auto px-9 py-4 rounded-3xl relative shrink-0 ${
-                    disableAddButton
-                      ? 'cursor-not-allowed opacity-60'
-                      : 'cursor-pointer hover:brightness-[97%] hover:saturate-[140%]'
-                  }`}
-                  style={{
-                    backgroundColor:
-                      eventStyle.addButtonColor || 'rgba(0, 0, 0, 0)',
-                    color: eventStyle.textColor,
-                  }}
-                  variant="ghost"
-                >
-                  <p className="font-semibold relative text-[14px] z-10 inline-flex items-center gap-2">
-                    <span
-                      aria-hidden
-                      className="inline-block w-4 h-4"
-                      style={{
-                        backgroundColor: 'currentColor',
-                        WebkitMaskImage: `url(${actionIconPath})`,
-                        WebkitMaskRepeat: 'no-repeat',
-                        WebkitMaskPosition: 'center',
-                        WebkitMaskSize: 'contain',
-                        maskImage: `url(${actionIconPath})`,
-                        maskRepeat: 'no-repeat',
-                        maskPosition: 'center',
-                        maskSize: 'contain',
-                      }}
-                    />
-                    {inPersonalSchedule ? 'Added' : 'Add'}
-                  </p>
-                </Button>
-              </div>
-            )}
           </div>
         )}
       </div>

From bbb472b599a400b02f4785d3ab97bf48545b1b25 Mon Sep 17 00:00:00 2001
From: reehals <sunny.reehal@gmail.com>
Date: Sat, 9 May 2026 01:08:12 -0700
Subject: [PATCH 3/4] Use real data again

---
 .../HomeHacking/ScheduleSneakPeek.tsx         | 182 +++++++++---------
 1 file changed, 89 insertions(+), 93 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx b/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx
index d93ebf06..8a80e317 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 import CalendarItem from '@pages/(hackers)/_components/Schedule/CalendarItem';
 import {
   EventEntry,
-  // useScheduleSneakPeekData,
+  useScheduleSneakPeekData,
 } from '@hooks/useScheduleSneakPeekData';
 import { useSharedNow } from '@pages/_hooks/useScheduleSharedNow';
 
@@ -231,101 +231,97 @@ function Panel({
 export default function ScheduleSneakPeek({
   className,
 }: ScheduleSneakPeekProps) {
-  // TODO: TEMPORARY TEST DATA - Remove when done testing text sizes
-  const mockLiveEvents: EventEntry[] = [
-    {
-      event: {
-        _id: '680026b09d521a51759d7e83',
-        name: 'GitHub Copilot Workshop',
-        type: 'WORKSHOPS',
-        start_time: new Date('2026-05-09T22:00:00.000Z'),
-        end_time: new Date('2026-05-09T23:00:00.000Z'),
-        host: 'Major League Hacking',
-        tags: ['beginner', 'developer', 'pm'],
-        location: 'ARC Ballroom A',
-      },
-      attendeeCount: 42,
-      inPersonalSchedule: false,
-    },
-    {
-      event: {
-        _id: '67f7a5de3eaf1040a69ac6ad',
-        name: 'Bracelet Making',
-        type: 'ACTIVITIES',
-        start_time: new Date('2026-05-09T22:30:00.000Z'),
-        end_time: new Date('2026-05-10T00:30:00.000Z'),
-        host: undefined,
-        tags: [],
-        location: 'North Wing',
-      },
-      attendeeCount: 28,
-      inPersonalSchedule: false,
-    },
-  ];
+  // TEMPORARY TEST DATA
+  // const mockLiveEvents: EventEntry[] = [
+  //   {
+  //     event: {
+  //       _id: '680026b09d521a51759d7e83',
+  //       name: 'GitHub Copilot Workshop',
+  //       type: 'WORKSHOPS',
+  //       start_time: new Date('2026-05-09T22:00:00.000Z'),
+  //       end_time: new Date('2026-05-09T23:00:00.000Z'),
+  //       host: 'Major League Hacking',
+  //       tags: ['beginner', 'developer', 'pm'],
+  //       location: 'ARC Ballroom A',
+  //     },
+  //     attendeeCount: 42,
+  //     inPersonalSchedule: false,
+  //   },
+  //   {
+  //     event: {
+  //       _id: '67f7a5de3eaf1040a69ac6ad',
+  //       name: 'Bracelet Making',
+  //       type: 'ACTIVITIES',
+  //       start_time: new Date('2026-05-09T22:30:00.000Z'),
+  //       end_time: new Date('2026-05-10T00:30:00.000Z'),
+  //       host: undefined,
+  //       tags: [],
+  //       location: 'North Wing',
+  //     },
+  //     attendeeCount: 28,
+  //     inPersonalSchedule: false,
+  //   },
+  // ];
 
-  const mockUpcomingEvents: EventEntry[] = [
-    {
-      event: {
-        _id: '67f7a60f3eaf1040a69ac6ae',
-        name: 'Therapy Dogs',
-        type: 'ACTIVITIES',
-        start_time: new Date('2026-05-09T22:30:00.000Z'),
-        end_time: new Date('2026-05-10T00:00:00.000Z'),
-        host: undefined,
-        tags: [],
-        location: 'South Wing',
-      },
-      attendeeCount: 85,
-      inPersonalSchedule: false,
-    },
-    {
-      event: {
-        _id: '680027589d521a51759d7e86',
-        name: 'Tech Together Meetup',
-        type: 'WORKSHOPS',
-        start_time: new Date('2026-05-09T23:00:00.000Z'),
-        end_time: new Date('2026-05-10T00:00:00.000Z'),
-        host: 'Major League Hacking',
-        tags: ['beginner', 'developer', 'pm', 'designer', 'other'],
-        location: 'ARC Ballroom A',
-      },
-      attendeeCount: 64,
-      inPersonalSchedule: false,
-    },
-    {
-      event: {
-        _id: '680028219d521a51759d7e8a',
-        name: 'Intro to UI/UX',
-        type: 'WORKSHOPS',
-        start_time: new Date('2026-05-09T23:00:00.000Z'),
-        end_time: new Date('2026-05-10T00:00:00.000Z'),
-        host: 'Design Interactive',
-        tags: ['beginner', 'designer'],
-        location: 'ARC Ballroom B',
-      },
-      attendeeCount: 37,
-      inPersonalSchedule: false,
-    },
-  ];
+  // const mockUpcomingEvents: EventEntry[] = [
+  //   {
+  //     event: {
+  //       _id: '67f7a60f3eaf1040a69ac6ae',
+  //       name: 'Therapy Dogs',
+  //       type: 'ACTIVITIES',
+  //       start_time: new Date('2026-05-09T22:30:00.000Z'),
+  //       end_time: new Date('2026-05-10T00:00:00.000Z'),
+  //       host: undefined,
+  //       tags: [],
+  //       location: 'South Wing',
+  //     },
+  //     attendeeCount: 85,
+  //     inPersonalSchedule: false,
+  //   },
+  //   {
+  //     event: {
+  //       _id: '680027589d521a51759d7e86',
+  //       name: 'Tech Together Meetup',
+  //       type: 'WORKSHOPS',
+  //       start_time: new Date('2026-05-09T23:00:00.000Z'),
+  //       end_time: new Date('2026-05-10T00:00:00.000Z'),
+  //       host: 'Major League Hacking',
+  //       tags: ['beginner', 'developer', 'pm', 'designer', 'other'],
+  //       location: 'ARC Ballroom A',
+  //     },
+  //     attendeeCount: 64,
+  //     inPersonalSchedule: false,
+  //   },
+  //   {
+  //     event: {
+  //       _id: '680028219d521a51759d7e8a',
+  //       name: 'Intro to UI/UX',
+  //       type: 'WORKSHOPS',
+  //       start_time: new Date('2026-05-09T23:00:00.000Z'),
+  //       end_time: new Date('2026-05-10T00:00:00.000Z'),
+  //       host: 'Design Interactive',
+  //       tags: ['beginner', 'designer'],
+  //       location: 'ARC Ballroom B',
+  //     },
+  //     attendeeCount: 37,
+  //     inPersonalSchedule: false,
+  //   },
+  // ];
 
-  // Use mock data temporarily for testing
-  const liveAll = mockLiveEvents;
-  const upcomingAll = mockUpcomingEvents;
-  // const livePersonal: EventEntry[] = [];
-  // const upcomingPersonal: EventEntry[] = [];
+  // // Use mock data temporarily for testing
+  // const liveAll = mockLiveEvents;
+  // const upcomingAll = mockUpcomingEvents;
+  // // const livePersonal: EventEntry[] = [];
+  // // const upcomingPersonal: EventEntry[] = [];
 
-  const addToPersonalSchedule = async () => true;
-  const removeFromPersonalSchedule = async () => true;
-
-  // Uncomment below to use real data from hook:
-  // const {
-  //   liveAll,
-  //   upcomingAll,
-  //   livePersonal,
-  //   upcomingPersonal,
-  //   addToPersonalSchedule,
-  //   removeFromPersonalSchedule,
-  // } = useScheduleSneakPeekData();
+  // const addToPersonalSchedule = async () => true;
+  // const removeFromPersonalSchedule = async () => true;
+  const {
+    liveAll,
+    upcomingAll,
+    addToPersonalSchedule,
+    removeFromPersonalSchedule,
+  } = useScheduleSneakPeekData();
 
   return (
     <div

From b1d2ac0d4629b345375968b0ba5a018c515c9e09 Mon Sep 17 00:00:00 2001
From: reehals <sunny.reehal@gmail.com>
Date: Sat, 9 May 2026 01:45:58 -0700
Subject: [PATCH 4/4] More compact-er

---
 .../(hackers)/_components/HomeHacking/HeroHacking.tsx     | 8 ++++----
 .../_components/HomeHacking/_components/Countdown.tsx     | 4 ++--
 .../(hackers)/_components/Schedule/CalendarItem.tsx       | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index 1b33e217..2de515c9 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -26,13 +26,13 @@ export default function HeroHacking({
   const countdownTarget = rolloutTime ? rolloutTime + ONE_DAY_MS : undefined;
 
   return (
-    <div className="w-full pt-5 px-10 pb-3">
+    <div className="w-full pt-5 pl-5 pb-2">
       <div className="relative w-full max-h-[25vh] overflow-hidden">
         {/* content wrapper */}
-        <div className="relative z-10 w-full mx-auto h-[25vh] min-h-0 flex flex-col justify-center gap-3 md:grid md:grid-rows-[minmax(1,1fr)] md:gap-5">
+        <div className="relative z-10 w-full mx-auto h-[25vh] min-h-0 flex flex-col justify-start 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] backdrop-blur-xl px-6 md:px-10 py-8 md:py-10 overflow-hidden"
+            className="relative flex flex-col justify-center rounded-[20px] md:rounded-[32px] backdrop-blur-xl px-4 py-4 overflow-hidden"
             style={{
               background:
                 'linear-gradient(172deg, #46D8E9 43.03%, #76DEEB 63.28%, #FCFCD1 112.36%)',
@@ -46,7 +46,7 @@ export default function HeroHacking({
               className="object-cover pointer-events-none select-none -z-10"
             />
 
-            <div className="flex items-start justify-between gap-2">
+            <div className="flex items-start justify-between">
               {/* Right: countdown (big) */}
               <div className="flex-1 flex justify-center">
                 <div className="text-white relative">
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
index 8af40bf9..b944df8d 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx
@@ -53,14 +53,14 @@ export default function Countdown({
     fontStyle: 'normal',
     fontWeight: 500,
     lineHeight: 'normal',
-    letterSpacing: '4.601px',
+    letterSpacing: '0px',
     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" style={timerStyle}>
+      <div className="flex items-end gap-0" style={timerStyle}>
         <span className="leading-none">
           {timeLeft.hours.toString().padStart(2, '0')}
         </span>
diff --git a/app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx b/app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx
index dad095e1..faa47248 100644
--- a/app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx
+++ b/app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx
@@ -62,7 +62,7 @@ export function CalendarItem({
         color: eventStyle.textColor,
       }}
     >
-      <div className="flex items-start justify-between sm:items-center gap-[10px] relative flex-col">
+      <div className="flex items-start justify-between sm:items-center gap-[5px] relative flex-col">
         {/* Name and Host in two columns */}
         <div className="flex flex-row justify-between items-start w-full">
           <h2 className="font-metropolis text-[32px] font-semibold tracking-[0.72px] text-balance w-[65%]">