From 0dfc304a1af5380a9d0365844982c6ee7fd4eaa1 Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Mon, 30 Mar 2026 11:48:54 -0700
Subject: [PATCH] change cow bg and h-full gifs

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

diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx
index 676eefa9..2c767b7d 100644
--- a/app/(pages)/(hackers)/(hub)/page.tsx
+++ b/app/(pages)/(hackers)/(hub)/page.tsx
@@ -24,7 +24,7 @@ export default function Page() {
   return (
     <main id="home">
       <TableNumberContextProvider>
-        <ClientTimeProtectedDisplay featureId="hero-judging">
+        <ClientTimeProtectedDisplay featureId="hero-hacking">
           <HeroHacking rolloutTime={rolloutTime} loading={loading} />
           <ScheduleSneakPeek />
           <BeginnersSection />
diff --git a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
index 4e1566f5..cf38324b 100644
--- a/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
+++ b/app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx
@@ -97,46 +97,46 @@ export default function HeroHacking({
                 {/* 2x2 animals */}
                 <div className="grid grid-cols-2 gap-2">
                   {/* Cow */}
-                  <div className="relative rounded-[20px] bg-[#93F5F3] overflow-hidden flex items-end justify-center">
+                  <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="w-[100%] h-auto pointer-events-none select-none"
+                      className="h-full w-auto max-w-none pointer-events-none select-none"
                     />
                   </div>
 
                   {/* Duck */}
-                  <div className="relative rounded-[20px] bg-[#FFF3B6] overflow-hidden flex items-end justify-center">
+                  <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="w-[100%] h-auto pointer-events-none select-none"
+                      className="h-full w-auto max-w-none pointer-events-none select-none"
                     />
                   </div>
 
                   {/* Frog */}
-                  <div className="relative rounded-[20px] bg-[#E9FBBA] overflow-hidden flex items-end justify-center">
+                  <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="w-[100%] h-auto pointer-events-none select-none"
+                      className="h-full w-auto max-w-none pointer-events-none select-none"
                     />
                   </div>
 
                   {/* Bunny */}
-                  <div className="relative rounded-[20px] bg-[#FFD2D2] overflow-hidden flex items-end justify-center">
+                  <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="w-[100%] h-auto pointer-events-none select-none"
+                      className="h-full w-auto max-w-none pointer-events-none select-none"
                     />
                   </div>
                 </div>
@@ -174,13 +174,13 @@ 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 overflow-hidden flex items-end justify-center">
+                  <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="w-[100%] max-h-full h-auto pointer-events-none select-none"
+                      className="h-full w-auto max-w-none pointer-events-none select-none"
                     />
                   </div>
 
@@ -191,7 +191,7 @@ export default function HeroHacking({
                       alt="Peeking duck"
                       width={520}
                       height={320}
-                      className="w-[100%] max-h-full h-auto pointer-events-none select-none"
+                      className="h-full w-auto max-w-none pointer-events-none select-none"
                     />
                   </div>
 
@@ -202,7 +202,7 @@ export default function HeroHacking({
                       alt="Peeking frog"
                       width={520}
                       height={320}
-                      className="w-[100%] max-h-full h-auto pointer-events-none select-none"
+                      className="h-full w-auto max-w-none pointer-events-none select-none"
                     />
                   </div>
                 </div>
@@ -216,7 +216,7 @@ export default function HeroHacking({
                       alt="Peeking bunny"
                       width={520}
                       height={320}
-                      className="w-[100%] max-h-full h-auto pointer-events-none select-none"
+                      className="h-full w-auto max-w-none pointer-events-none select-none"
                     />
                   </div>