style(discover): tighten hero section and restyle search bar
This commit is contained in:
+9
-6
@@ -15,27 +15,30 @@ export default function HomePage() {
|
||||
|
||||
return (
|
||||
<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-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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
<Input
|
||||
type="text"
|
||||
name="q"
|
||||
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>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user