From 21802ba9bf4ea0375516f0f9555f80f7abc040b2 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 27 Nov 2025 16:23:17 +1000
Subject: [PATCH] fix(ui): resolve visual defects in brutalist homepage design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Number Formatting Fixes:**
- Add missing separator="," to INVOCATIONS counter in HeroSection
- Implement adaptive number display (12M+ on mobile, 12,000,000+ on desktop)
- Increase metrics strip text size from text-sm to text-base for better readability

**Search UI Improvements:**
- Increase input right padding (pr-36 md:pr-40) to prevent text overlap
- Make search button taller and more responsive (h-12 md:h-16)
- Add shadow-lg to search button for better visual separation
- Improve button sizing consistency across breakpoints

**Typography Enhancements:**
- Enhance header "TPMJS" title with larger font (text-xl md:text-2xl)
- Add font-bold, uppercase, and tracking-tight for brutalist aesthetic
- Improve visual hierarchy and prominence

**Visual Consistency:**
- All counters now display with proper thousand separators
- Responsive design ensures optimal display across mobile, tablet, desktop
- Maintains brutalist design principles with improved clarity

Fixes visual defects identified in screenshot analysis

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/page.tsx                    |  5 ++++-
 apps/web/src/components/home/HeroSection.tsx | 17 +++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 9c30886..7c238de 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -17,7 +17,10 @@ export default function HomePage(): React.ReactElement {
       {/* Header */}
       <Header
         title={
-          <Link href="/" className="text-foreground hover:text-foreground">
+          <Link
+            href="/"
+            className="text-foreground hover:text-foreground text-xl md:text-2xl font-bold uppercase tracking-tight"
+          >
             TPMJS
           </Link>
         }
diff --git a/apps/web/src/components/home/HeroSection.tsx b/apps/web/src/components/home/HeroSection.tsx
index c9b493a..d234bc5 100644
--- a/apps/web/src/components/home/HeroSection.tsx
+++ b/apps/web/src/components/home/HeroSection.tsx
@@ -60,14 +60,23 @@ export function HeroSection(): React.ReactElement {
           </h1>
 
           {/* Live Metrics Strip */}
-          <div className="mb-12 flex flex-wrap items-center gap-3 border-l-[6px] border-brutalist-accent pl-6 font-mono text-sm md:text-base font-bold uppercase tracking-wider">
+          <div className="mb-12 flex flex-wrap items-center gap-3 border-l-[6px] border-brutalist-accent pl-6 font-mono text-base md:text-lg font-bold uppercase tracking-wider">
             <div className="flex items-center gap-2">
               <AnimatedCounter value={2847} separator="," size="md" />
               <span className="text-foreground-secondary">TOOLS</span>
             </div>
             <span className="text-foreground-tertiary">/</span>
             <div className="flex items-center gap-2">
-              <AnimatedCounter value={12000000} suffix="+" size="md" />
+              {/* Mobile: abbreviated */}
+              <AnimatedCounter value={12} suffix="M+" size="md" className="md:hidden" />
+              {/* Desktop: full */}
+              <AnimatedCounter
+                value={12000000}
+                suffix="+"
+                separator=","
+                size="md"
+                className="hidden md:inline"
+              />
               <span className="text-foreground-secondary">INVOCATIONS</span>
             </div>
             <span className="text-foreground-tertiary">/</span>
@@ -97,14 +106,14 @@ export function HeroSection(): React.ReactElement {
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder="search tools..."
-                className="brutalist-border h-16 md:h-20 pl-14 pr-4 text-lg md:text-xl font-mono placeholder:text-foreground-tertiary placeholder:uppercase focus:ring-4 focus:ring-brutalist-accent focus:ring-offset-0 bg-background"
+                className="brutalist-border h-16 md:h-20 pl-14 pr-36 md:pr-40 text-lg md:text-xl font-mono placeholder:text-foreground-tertiary placeholder:uppercase focus:ring-4 focus:ring-brutalist-accent focus:ring-offset-0 bg-background"
                 style={{ borderRadius: 0 }}
               />
 
               {/* Search Button */}
               <Button
                 size="lg"
-                className="brutalist-border-thick absolute right-2 top-1/2 -translate-y-1/2 h-12 md:h-14 px-8 bg-brutalist-accent text-background hover:bg-brutalist-accent-hover font-bold uppercase tracking-wider"
+                className="brutalist-border-thick absolute right-2 top-1/2 -translate-y-1/2 h-12 md:h-16 px-6 md:px-8 bg-brutalist-accent text-background hover:bg-brutalist-accent-hover font-bold uppercase tracking-wider shadow-lg"
                 style={{ borderRadius: 0, borderColor: 'hsl(var(--foreground))' }}
               >
                 Search