From 41de25238f762b1ccb27500ca3b6a1f105ce7eaa Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sat, 8 Nov 2025 14:30:30 -0600
Subject: [PATCH] feat: make 404 page abacus hero-sized and responsive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Scale the interactive 404 abacus to match the hero section sizing with
responsive breakpoints:
- Mobile (base): 1.5x scale
- Small (sm): 2x scale
- Medium (md): 2.5x scale
- Large (lg): 3x scale

Prevent layout dominance on small screens with maxWidth constraints
and centered positioning.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/not-found.tsx | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
index cfa39a91..82d8159d 100644
--- a/apps/web/src/app/not-found.tsx
+++ b/apps/web/src/app/not-found.tsx
@@ -177,17 +177,32 @@ export default function NotFound() {
           {/* Interactive Abacus */}
           <div
             className={css({
-              transform: 'scale(1.2)',
-              transformOrigin: 'center',
               position: 'relative',
+              width: '100%',
+              maxWidth: { base: '90vw', sm: '500px', md: '600px', lg: '700px' },
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
             })}
           >
-            <AbacusReact
-              value={abacusValue}
-              columns={3}
-              showNumbers={false}
-              onValueChange={setAbacusValue}
-            />
+            <div
+              className={css({
+                transform: {
+                  base: 'scale(1.5)',
+                  sm: 'scale(2)',
+                  md: 'scale(2.5)',
+                  lg: 'scale(3)',
+                },
+                transformOrigin: 'center',
+              })}
+            >
+              <AbacusReact
+                value={abacusValue}
+                columns={3}
+                showNumbers={false}
+                onValueChange={setAbacusValue}
+              />
+            </div>
           </div>
 
           {/* Main message */}