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 />
|
<Header />
|
||||||
|
|
||||||
{/* Hero Section - "Bloomberg meets Apple" */}
|
{/* 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="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 */}
|
{/* 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">
|
<div className="relative">
|
||||||
<Image
|
<Image
|
||||||
src="/pounce-puma.png"
|
src="/pounce-puma.png"
|
||||||
alt="pounce"
|
alt="pounce"
|
||||||
width={400}
|
width={320}
|
||||||
height={280}
|
height={224}
|
||||||
className="w-40 h-auto sm:w-52 md:w-64 object-contain drop-shadow-[0_0_60px_rgba(16,185,129,0.3)]"
|
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
|
priority
|
||||||
/>
|
/>
|
||||||
{/* Glow ring */}
|
{/* Glow ring */}
|
||||||
@ -203,49 +203,53 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main Headline - Konzept: "Der Markt schläft nie. Du schon." */}
|
{/* Main Headline - kompakter */}
|
||||||
<h1 className="animate-slide-up">
|
<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.
|
The market never sleeps.
|
||||||
</span>
|
</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.
|
You should.
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
{/* Subheadline - Konzept Versprechen */}
|
{/* Subheadline - kompakter */}
|
||||||
<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">
|
<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.{' '}
|
We scan. We watch. We alert.{' '}
|
||||||
<span className="text-foreground font-medium">You pounce.</span>
|
<span className="text-foreground font-medium">You pounce.</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Tagline */}
|
{/* 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.
|
Don't guess. Know.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Domain Checker */}
|
{/* Domain Checker - PROMINENT */}
|
||||||
<div className="mt-10 sm:mt-12 animate-slide-up delay-200">
|
<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 />
|
<DomainChecker />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Trust Indicators */}
|
{/* 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="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-2">
|
<div className="flex items-center gap-1.5">
|
||||||
<Globe className="w-4 h-4 text-accent" />
|
<Globe className="w-3.5 h-3.5 text-accent" />
|
||||||
<span className="text-sm font-medium"><AnimatedNumber value={886} />+ TLDs</span>
|
<span className="text-xs sm:text-sm font-medium"><AnimatedNumber value={886} />+ TLDs</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-1.5">
|
||||||
<Gavel className="w-4 h-4 text-accent" />
|
<Gavel className="w-3.5 h-3.5 text-accent" />
|
||||||
<span className="text-sm font-medium">Live Auctions</span>
|
<span className="text-xs sm:text-sm font-medium">Live Auctions</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-1.5">
|
||||||
<Bell className="w-4 h-4 text-accent" />
|
<Bell className="w-3.5 h-3.5 text-accent" />
|
||||||
<span className="text-sm font-medium">Instant Alerts</span>
|
<span className="text-xs sm:text-sm font-medium">Instant Alerts</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-1.5">
|
||||||
<LineChart className="w-4 h-4 text-accent" />
|
<LineChart className="w-3.5 h-3.5 text-accent" />
|
||||||
<span className="text-sm font-medium">Price Intel</span>
|
<span className="text-xs sm:text-sm font-medium">Price Intel</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -109,7 +109,7 @@ export function CommandCenterLayout({
|
|||||||
>
|
>
|
||||||
{/* Top Bar */}
|
{/* 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">
|
<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 */}
|
{/* Left: Title */}
|
||||||
<div className="ml-10 lg:ml-0 min-w-0 flex-1">
|
<div className="ml-10 lg:ml-0 min-w-0 flex-1">
|
||||||
{title && (
|
{title && (
|
||||||
|
|||||||
@ -62,21 +62,21 @@ export function DomainChecker() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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 */}
|
{/* Search Form */}
|
||||||
<form onSubmit={handleCheck} className="relative">
|
<form onSubmit={handleCheck} className="relative">
|
||||||
{/* Glow effect container */}
|
{/* Glow effect container - always visible, stronger on focus */}
|
||||||
<div className={clsx(
|
<div className={clsx(
|
||||||
"absolute -inset-px rounded-xl sm:rounded-2xl transition-opacity duration-700",
|
"absolute -inset-1 rounded-2xl transition-opacity duration-500",
|
||||||
isFocused ? "opacity-100" : "opacity-0"
|
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>
|
</div>
|
||||||
|
|
||||||
{/* Input container */}
|
{/* Input container */}
|
||||||
<div className={clsx(
|
<div className={clsx(
|
||||||
"relative bg-background-secondary rounded-xl sm:rounded-2xl transition-all duration-500",
|
"relative bg-background-secondary rounded-2xl transition-all duration-300 shadow-2xl shadow-accent/10",
|
||||||
isFocused ? "ring-1 ring-accent/60" : "ring-1 ring-accent/30"
|
isFocused ? "ring-2 ring-accent/50" : "ring-1 ring-accent/30"
|
||||||
)}>
|
)}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@ -85,30 +85,30 @@ export function DomainChecker() {
|
|||||||
onFocus={() => setIsFocused(true)}
|
onFocus={() => setIsFocused(true)}
|
||||||
onBlur={() => setIsFocused(false)}
|
onBlur={() => setIsFocused(false)}
|
||||||
placeholder="Hunt any domain..."
|
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
|
className="w-full px-5 sm:px-7 py-5 sm:py-6 pr-32 sm:pr-40 bg-transparent rounded-2xl
|
||||||
text-body-sm sm:text-body-lg text-foreground placeholder:text-foreground-subtle
|
text-base sm:text-lg text-foreground placeholder:text-foreground-subtle
|
||||||
focus:outline-none transition-colors"
|
focus:outline-none transition-colors"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={loading || !domain.trim()}
|
disabled={loading || !domain.trim()}
|
||||||
className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2
|
className="absolute right-2.5 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
|
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-foreground/90 active:scale-[0.98]
|
hover:bg-accent-hover active:scale-[0.98] shadow-lg shadow-accent/25
|
||||||
disabled:opacity-40 disabled:cursor-not-allowed
|
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 ? (
|
{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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="mt-4 sm:mt-5 text-center text-ui-sm sm:text-ui text-foreground-subtle">
|
<p className="mt-3 sm:mt-4 text-center text-xs sm:text-sm 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>
|
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>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user