style: Improve Command Center header padding and hero section
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
This commit is contained in:
yves.gugger
@ -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'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>
|
||||
|
||||
@ -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 && (
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user