style(discover): tighten hero section and restyle search bar

This commit is contained in:
zetaloop
2026-02-25 12:37:04 +08:00
parent 5a17cab60c
commit 075c6ee18c
+9 -6
View File
@@ -15,27 +15,30 @@ export default function HomePage() {
return ( return (
<div className="container mx-auto py-8 px-4 space-y-12"> <div className="container mx-auto py-8 px-4 space-y-12">
<section className="py-16 md:py-24 text-center"> <section className="pb-8 pt-12 lg:pb-12 lg:pt-20 text-center">
<div className="space-y-8 max-w-3xl mx-auto"> <div className="space-y-8 max-w-3xl mx-auto">
<div className="space-y-4"> <div className="space-y-4">
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter leading-tight"> <h1
className="mb-3 text-3xl font-bold tracking-tight text-foreground lg:text-5xl"
style={{ fontFamily: "'Space Grotesk', sans-serif" }}
>
<span className="text-primary"></span> <span className="text-primary"></span>
</h1> </h1>
<p className="text-lg md:text-xl text-muted-foreground leading-relaxed"> <p className="mb-8 text-base text-muted-foreground lg:text-lg">
</p> </p>
</div> </div>
<div id="discover-search" className="w-full max-w-2xl mx-auto"> <div id="discover-search" className="w-full max-w-2xl mx-auto">
<form method="get" action="/search" className="relative flex items-center w-full"> <form action="/search" className="relative flex items-center w-full max-w-xl mx-auto">
<Search className="absolute left-4 h-5 w-5 text-muted-foreground z-10" /> <Search className="absolute left-4 h-5 w-5 text-muted-foreground z-10" />
<Input <Input
type="text" type="text"
name="q" name="q"
placeholder="搜索陪玩、店铺、游戏..." placeholder="搜索陪玩、店铺、游戏..."
className="w-full h-14 pl-12 pr-32 rounded-full text-base shadow-sm bg-background" className="w-full h-12 pl-12 pr-24 rounded-xl border-border bg-card text-base shadow-[var(--shadow-card)] transition-shadow focus:shadow-[var(--shadow-card-hover)]"
/> />
<Button type="submit" size="lg" className="absolute right-1.5 rounded-full px-8 h-11"> <Button type="submit" className="absolute right-1.5 rounded-lg px-6 h-9">
</Button> </Button>
</form> </form>