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 (
|
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>
|
||||||
|
|||||||
Reference in New Issue
Block a user