From 2a08b9f8dce91abd8ad2d217a43db44b99bf844e Mon Sep 17 00:00:00 2001
From: "yves.gugger" <yves.gugger@gentwo.com>
Date: Wed, 10 Dec 2025 16:50:49 +0100
Subject: [PATCH] style: Improve Command Center header padding and hero section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

COMMAND CENTER HEADER:
- Changed from fixed h-16/h-18 to py-5/py-6 for more breathing room
- More vertical padding gives titles more presence

LANDING PAGE HERO SECTION:
- Reduced top padding from pt-32/40/48 to pt-24/32/36
- Smaller puma logo: w-32/40/48 (was w-40/52/64)
- Smaller headline: 2rem-4rem (was 2.5rem-6.5rem)
- More compact spacing overall
- Reduced max-width from 5xl to 4xl for better focus

DOMAIN CHECKER (more prominent):
- Removed px-4 wrapper, full max-w-2xl
- Always-visible glow effect (opacity-60, opacity-100 on focus)
- Larger padding: py-5/6 (was py-4/5)
- Ring-2 on focus (was ring-1)
- Shadow-2xl with accent shadow
- Button: bg-accent instead of bg-foreground
- Button text: 'Hunt' instead of 'Check'
- Larger icons on desktop
- Accent-colored example domains
- Added glow wrapper in landing page

RESULT:
- Search field is now the visual center of the hero
- More compact, action-focused above-the-fold
- Better hierarchy: logo → headline → search
---
 frontend/src/app/page.tsx                     | 60 ++++++++++---------
 .../src/components/CommandCenterLayout.tsx    |  2 +-
 frontend/src/components/DomainChecker.tsx     | 36 +++++------
 3 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 1876447..b2bd36b 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -184,18 +184,18 @@ export default function HomePage() {
       <Header />
       
       {/* Hero Section - "Bloomberg meets Apple" */}
-      <section className="relative pt-32 sm:pt-40 md:pt-48 pb-16 sm:pb-20 px-4 sm:px-6">
+      <section className="relative pt-24 sm:pt-32 md:pt-36 pb-12 sm:pb-16 px-4 sm:px-6">
         <div className="max-w-7xl mx-auto">
-          <div className="text-center max-w-5xl mx-auto">
+          <div className="text-center max-w-4xl mx-auto">
             {/* Puma Logo */}
-            <div className="flex justify-center mb-8 sm:mb-10 animate-fade-in">
+            <div className="flex justify-center mb-6 sm:mb-8 animate-fade-in">
               <div className="relative">
                 <Image
                   src="/pounce-puma.png"
                   alt="pounce"
-                  width={400}
-                  height={280}
-                  className="w-40 h-auto sm:w-52 md:w-64 object-contain drop-shadow-[0_0_60px_rgba(16,185,129,0.3)]"
+                  width={320}
+                  height={224}
+                  className="w-32 h-auto sm:w-40 md:w-48 object-contain drop-shadow-[0_0_60px_rgba(16,185,129,0.3)]"
                   priority
                 />
                 {/* Glow ring */}
@@ -203,49 +203,53 @@ export default function HomePage() {
               </div>
             </div>
             
-            {/* Main Headline - Konzept: "Der Markt schläft nie. Du schon." */}
+            {/* Main Headline - kompakter */}
             <h1 className="animate-slide-up">
-              <span className="block font-display text-[2.5rem] sm:text-[3.5rem] md:text-[4.5rem] lg:text-[5.5rem] xl:text-[6.5rem] leading-[0.95] tracking-[-0.04em] text-foreground">
+              <span className="block font-display text-[2rem] sm:text-[2.5rem] md:text-[3.5rem] lg:text-[4rem] leading-[0.95] tracking-[-0.03em] text-foreground">
                 The market never sleeps.
               </span>
-              <span className="block font-display text-[2.5rem] sm:text-[3.5rem] md:text-[4.5rem] lg:text-[5.5rem] xl:text-[6.5rem] leading-[0.95] tracking-[-0.04em] text-foreground/30 mt-1">
+              <span className="block font-display text-[2rem] sm:text-[2.5rem] md:text-[3.5rem] lg:text-[4rem] leading-[0.95] tracking-[-0.03em] text-foreground/30 mt-1">
                 You should.
               </span>
             </h1>
             
-            {/* Subheadline - Konzept Versprechen */}
-            <p className="mt-8 sm:mt-10 text-lg sm:text-xl md:text-2xl text-foreground-muted max-w-2xl mx-auto animate-slide-up delay-100 leading-relaxed">
+            {/* Subheadline - kompakter */}
+            <p className="mt-5 sm:mt-6 text-base sm:text-lg md:text-xl text-foreground-muted max-w-xl mx-auto animate-slide-up delay-100 leading-relaxed">
               We scan. We watch. We alert.{' '}
               <span className="text-foreground font-medium">You pounce.</span>
             </p>
             
             {/* Tagline */}
-            <p className="mt-4 text-base sm:text-lg text-accent font-medium animate-slide-up delay-150">
+            <p className="mt-3 text-sm sm:text-base text-accent font-medium animate-slide-up delay-150">
               Don&apos;t guess. Know.
             </p>
             
-            {/* Domain Checker */}
-            <div className="mt-10 sm:mt-12 animate-slide-up delay-200">
-              <DomainChecker />
+            {/* Domain Checker - PROMINENT */}
+            <div className="mt-8 sm:mt-10 animate-slide-up delay-200">
+              <div className="relative max-w-2xl mx-auto">
+                {/* Glow effect behind search */}
+                <div className="absolute inset-0 bg-accent/10 rounded-2xl blur-xl scale-105 -z-10" />
+                <DomainChecker />
+              </div>
             </div>
 
             {/* Trust Indicators */}
-            <div className="mt-10 sm:mt-12 flex flex-wrap items-center justify-center gap-6 sm:gap-10 text-foreground-subtle animate-fade-in delay-300">
-              <div className="flex items-center gap-2">
-                <Globe className="w-4 h-4 text-accent" />
-                <span className="text-sm font-medium"><AnimatedNumber value={886} />+ TLDs</span>
+            <div className="mt-8 sm:mt-10 flex flex-wrap items-center justify-center gap-4 sm:gap-8 text-foreground-subtle animate-fade-in delay-300">
+              <div className="flex items-center gap-1.5">
+                <Globe className="w-3.5 h-3.5 text-accent" />
+                <span className="text-xs sm:text-sm font-medium"><AnimatedNumber value={886} />+ TLDs</span>
               </div>
-              <div className="flex items-center gap-2">
-                <Gavel className="w-4 h-4 text-accent" />
-                <span className="text-sm font-medium">Live Auctions</span>
+              <div className="flex items-center gap-1.5">
+                <Gavel className="w-3.5 h-3.5 text-accent" />
+                <span className="text-xs sm:text-sm font-medium">Live Auctions</span>
               </div>
-              <div className="flex items-center gap-2">
-                <Bell className="w-4 h-4 text-accent" />
-                <span className="text-sm font-medium">Instant Alerts</span>
+              <div className="flex items-center gap-1.5">
+                <Bell className="w-3.5 h-3.5 text-accent" />
+                <span className="text-xs sm:text-sm font-medium">Instant Alerts</span>
               </div>
-              <div className="flex items-center gap-2">
-                <LineChart className="w-4 h-4 text-accent" />
-                <span className="text-sm font-medium">Price Intel</span>
+              <div className="flex items-center gap-1.5">
+                <LineChart className="w-3.5 h-3.5 text-accent" />
+                <span className="text-xs sm:text-sm font-medium">Price Intel</span>
               </div>
             </div>
           </div>
diff --git a/frontend/src/components/CommandCenterLayout.tsx b/frontend/src/components/CommandCenterLayout.tsx
index 9444a3e..ccfd1d5 100755
--- a/frontend/src/components/CommandCenterLayout.tsx
+++ b/frontend/src/components/CommandCenterLayout.tsx
@@ -109,7 +109,7 @@ export function CommandCenterLayout({
       >
         {/* Top Bar */}
         <header className="sticky top-0 z-30 bg-gradient-to-r from-background/95 via-background/90 to-background/95 backdrop-blur-xl border-b border-border/30">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 sm:h-18 flex items-center justify-between">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 sm:py-6 flex items-center justify-between">
             {/* Left: Title */}
             <div className="ml-10 lg:ml-0 min-w-0 flex-1">
               {title && (
diff --git a/frontend/src/components/DomainChecker.tsx b/frontend/src/components/DomainChecker.tsx
index ab490bf..2d0fbce 100644
--- a/frontend/src/components/DomainChecker.tsx
+++ b/frontend/src/components/DomainChecker.tsx
@@ -62,21 +62,21 @@ export function DomainChecker() {
   }
 
   return (
-    <div className="w-full max-w-xl sm:max-w-2xl mx-auto px-4 sm:px-0">
+    <div className="w-full max-w-2xl mx-auto">
       {/* Search Form */}
       <form onSubmit={handleCheck} className="relative">
-        {/* Glow effect container */}
+        {/* Glow effect container - always visible, stronger on focus */}
         <div className={clsx(
-          "absolute -inset-px rounded-xl sm:rounded-2xl transition-opacity duration-700",
-          isFocused ? "opacity-100" : "opacity-0"
+          "absolute -inset-1 rounded-2xl transition-opacity duration-500",
+          isFocused ? "opacity-100" : "opacity-60"
         )}>
-          <div className="absolute inset-0 bg-gradient-to-r from-accent/20 via-accent/10 to-accent/20 rounded-xl sm:rounded-2xl blur-xl" />
+          <div className="absolute inset-0 bg-gradient-to-r from-accent/30 via-accent/20 to-accent/30 rounded-2xl blur-xl" />
         </div>
         
         {/* Input container */}
         <div className={clsx(
-          "relative bg-background-secondary rounded-xl sm:rounded-2xl transition-all duration-500",
-          isFocused ? "ring-1 ring-accent/60" : "ring-1 ring-accent/30"
+          "relative bg-background-secondary rounded-2xl transition-all duration-300 shadow-2xl shadow-accent/10",
+          isFocused ? "ring-2 ring-accent/50" : "ring-1 ring-accent/30"
         )}>
           <input
             type="text"
@@ -85,30 +85,30 @@ export function DomainChecker() {
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}
             placeholder="Hunt any domain..."
-            className="w-full px-4 sm:px-6 py-4 sm:py-5 pr-28 sm:pr-36 bg-transparent rounded-xl sm:rounded-2xl
-                       text-body-sm sm:text-body-lg text-foreground placeholder:text-foreground-subtle
+            className="w-full px-5 sm:px-7 py-5 sm:py-6 pr-32 sm:pr-40 bg-transparent rounded-2xl
+                       text-base sm:text-lg text-foreground placeholder:text-foreground-subtle
                        focus:outline-none transition-colors"
           />
           <button
             type="submit"
             disabled={loading || !domain.trim()}
-            className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2
-                       px-4 sm:px-6 py-2.5 sm:py-3 bg-foreground text-background text-ui-sm sm:text-ui font-medium rounded-lg sm:rounded-xl
-                       hover:bg-foreground/90 active:scale-[0.98]
+            className="absolute right-2.5 sm:right-3 top-1/2 -translate-y-1/2
+                       px-5 sm:px-7 py-3 sm:py-3.5 bg-accent text-background text-sm sm:text-base font-semibold rounded-xl
+                       hover:bg-accent-hover active:scale-[0.98] shadow-lg shadow-accent/25
                        disabled:opacity-40 disabled:cursor-not-allowed
-                       transition-all duration-300 flex items-center gap-2 sm:gap-2.5"
+                       transition-all duration-300 flex items-center gap-2"
           >
             {loading ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
+              <Loader2 className="w-4 h-4 sm:w-5 sm:h-5 animate-spin" />
             ) : (
-              <Search className="w-4 h-4" />
+              <Search className="w-4 h-4 sm:w-5 sm:h-5" />
             )}
-            <span className="hidden sm:inline">Check</span>
+            <span>Hunt</span>
           </button>
         </div>
         
-        <p className="mt-4 sm:mt-5 text-center text-ui-sm sm:text-ui text-foreground-subtle">
-          Try <span className="text-foreground-muted">dream.com</span>, <span className="text-foreground-muted">startup.io</span>, or <span className="text-foreground-muted">next.co</span>
+        <p className="mt-3 sm:mt-4 text-center text-xs sm:text-sm text-foreground-subtle">
+          Try <span className="text-accent/70">dream.com</span>, <span className="text-accent/70">startup.io</span>, or <span className="text-accent/70">next.ai</span>
         </p>
       </form>