juwan/juwan-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(discover,header): refine hero, cards and nav visuals

Browse Source
This commit is contained in:
zetaloop
2026-02-25 12:22:37 +08:00
parent 523ba2d8be
commit c56e4486a0
2 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(main)/page.tsx
+39 -27
View File
@@ -15,15 +15,11 @@ 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="relative overflow-hidden rounded-3xl bg-linear-to-b from-primary/10 via-primary/5 to-transparent px-6 py-16 md:py-24 text-center"> <section className="py-16 md:py-24 text-center">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10"> <div className="space-y-8 max-w-3xl mx-auto">
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-primary/10 blur-[100px]" />
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-primary/10 blur-[100px]" />
</div>
<div className="relative z-10 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="text-4xl md:text-6xl font-bold tracking-tighter leading-tight">
找到你的游戏搭档 找到你的<span className="text-primary">游戏搭档</span>
</h1> </h1>
<p className="text-lg md:text-xl text-muted-foreground leading-relaxed"> <p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
找人一起打游戏，从这里开始 找人一起打游戏，从这里开始
@@ -50,7 +46,12 @@ export default function HomePage() {
<section> <section>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold">游戏分类</h2> <h2 className="text-xl font-semibold">游戏分类</h2>
<Button variant="ghost" size="sm" asChild> <Button
variant="ghost"
size="sm"
className="text-muted-foreground hover:text-foreground"
asChild
>
<Link href="/search"> <Link href="/search">
查看全部 <ArrowRight className="ml-1 h-4 w-4" /> 查看全部 <ArrowRight className="ml-1 h-4 w-4" />
</Link> </Link>
@@ -61,7 +62,7 @@ export default function HomePage() {
<Link <Link
key={game.id} key={game.id}
href={`/search?game=${encodeURIComponent(game.name)}`} href={`/search?game=${encodeURIComponent(game.name)}`}
className="flex items-center gap-2 rounded-full border bg-card px-4 py-2 hover:bg-accent/50 hover:shadow-sm transition-all" className="flex items-center gap-2 rounded-full bg-muted/50 text-muted-foreground px-4 py-2 hover:bg-muted hover:text-foreground transition-all"
> >
<GameIcon name={game.icon} className="h-5 w-5" /> <GameIcon name={game.icon} className="h-5 w-5" />
<span className="text-sm font-medium">{game.name}</span> <span className="text-sm font-medium">{game.name}</span>
@@ -73,32 +74,28 @@ export default function HomePage() {
<section className="space-y-6"> <section className="space-y-6">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<h2 className="text-xl font-semibold">推荐内容</h2> <h2 className="text-xl font-semibold">推荐内容</h2>
<div className="flex flex-wrap items-center gap-2 text-sm"> <div className="flex flex-wrap items-center gap-4 text-sm">
<Link href="/search?sort=composite" className="text-primary font-medium"> <Link href="/search?sort=composite" className="text-primary font-medium">
综合排序 综合排序
</Link> </Link>
<span className="text-muted-foreground/30">|</span>
<Link <Link
href="/search?sort=rating" href="/search?sort=rating"
className="text-muted-foreground hover:text-foreground transition-colors" className="text-muted-foreground hover:text-foreground transition-colors"
> >
评分最高 评分最高
</Link> </Link>
<span className="text-muted-foreground/30">|</span>
<Link <Link
href="/search?sort=orders" href="/search?sort=orders"
className="text-muted-foreground hover:text-foreground transition-colors" className="text-muted-foreground hover:text-foreground transition-colors"
> >
接单最多 接单最多
</Link> </Link>
<span className="text-muted-foreground/30">|</span>
<Link <Link
href="/search?sort=price_asc" href="/search?sort=price_asc"
className="text-muted-foreground hover:text-foreground transition-colors" className="text-muted-foreground hover:text-foreground transition-colors"
> >
价格最低 价格最低
</Link> </Link>
<span className="text-muted-foreground/30">|</span>
<Link <Link
href="/search?sort=price_desc" href="/search?sort=price_desc"
className="text-muted-foreground hover:text-foreground transition-colors" className="text-muted-foreground hover:text-foreground transition-colors"
@@ -113,7 +110,7 @@ export default function HomePage() {
{players.map((player) => ( {players.map((player) => (
<Card <Card
key={player.id} key={player.id}
className="hover:shadow-md transition-shadow flex flex-col h-full" className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
> >
<CardHeader className="flex flex-row items-center gap-3 space-y-0 pb-3"> <CardHeader className="flex flex-row items-center gap-3 space-y-0 pb-3">
<Avatar className="h-12 w-12"> <Avatar className="h-12 w-12">
@@ -124,13 +121,13 @@ export default function HomePage() {
<CardTitle className="text-base">{player.user.nickname}</CardTitle> <CardTitle className="text-base">{player.user.nickname}</CardTitle>
<div className="flex items-center gap-2 mt-1"> <div className="flex items-center gap-2 mt-1">
<div className="flex items-center text-sm"> <div className="flex items-center text-sm">
<Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400 mr-0.5" /> <Star className="h-3.5 w-3.5 fill-primary text-primary mr-0.5" />
{player.rating} {player.rating}
</div> </div>
<span className="text-xs text-muted-foreground">{player.totalOrders} 单</span> <span className="text-xs text-muted-foreground">{player.totalOrders} 单</span>
<Badge <Badge
variant={player.status === "available" ? "default" : "secondary"} variant={player.status === "available" ? "default" : "secondary"}
className="text-[10px] px-1.5 py-0" className="text-[10px] px-1.5 py-0 font-normal"
> >
{player.status === "available" {player.status === "available"
? "可接单" ? "可接单"
@@ -142,19 +139,31 @@ export default function HomePage() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pb-3 flex-grow"> <CardContent className="pb-3 flex-grow">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1.5">
{player.tags.map((tag) => ( {player.tags.map((tag) => (
<Badge key={tag} variant="outline" className="text-xs"> <Badge
key={tag}
variant="secondary"
className="text-xs bg-muted/50 text-muted-foreground font-normal"
>
{tag} {tag}
</Badge> </Badge>
))} ))}
</div> </div>
{player.shopName && ( {player.shopName && (
<p className="text-xs text-muted-foreground mt-2">所属店铺: {player.shopName}</p> <p className="text-xs text-muted-foreground mt-3">所属店铺: {player.shopName}</p>
)} )}
</CardContent> </CardContent>
<CardFooter className="pt-0"> <CardFooter className="pt-0 flex items-end justify-between">
<Button variant="outline" size="sm" className="w-full" asChild> <div className="flex items-baseline gap-1">
<span className="text-lg font-bold leading-none">
{player.services?.[0]?.price ?? 35}
</span>
<span className="text-xs text-muted-foreground">
元/{player.services?.[0]?.unit ?? "时"}
</span>
</div>
<Button variant="outline" size="sm" className="rounded-full px-6" asChild>
<Link href={`/player/${player.id}`}>查看详情</Link> <Link href={`/player/${player.id}`}>查看详情</Link>
</Button> </Button>
</CardFooter> </CardFooter>
@@ -162,7 +171,7 @@ export default function HomePage() {
))} ))}
{/* Community Teaser */} {/* Community Teaser */}
<Card className="hover:shadow-md transition-shadow flex flex-col h-full bg-primary/5 border-primary/20"> <Card className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60">
<CardHeader> <CardHeader>
<CardTitle className="text-lg">逛逛社区</CardTitle> <CardTitle className="text-lg">逛逛社区</CardTitle>
<p className="text-sm text-muted-foreground">发现更多有趣的游戏日常和讨论</p> <p className="text-sm text-muted-foreground">发现更多有趣的游戏日常和讨论</p>
@@ -173,7 +182,7 @@ export default function HomePage() {
</div> </div>
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<Button className="w-full" asChild> <Button variant="outline" className="w-full rounded-full" asChild>
<Link href="/community">进入社区</Link> <Link href="/community">进入社区</Link>
</Button> </Button>
</CardFooter> </CardFooter>
@@ -181,7 +190,10 @@ export default function HomePage() {
{/* Shops */} {/* Shops */}
{shops.map((shop) => ( {shops.map((shop) => (
<Card key={shop.id} className="hover:shadow-md transition-shadow flex flex-col h-full"> <Card
key={shop.id}
className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
>
<CardHeader> <CardHeader>
<CardTitle className="text-lg">{shop.name}</CardTitle> <CardTitle className="text-lg">{shop.name}</CardTitle>
<p className="text-sm text-muted-foreground">{shop.description}</p> <p className="text-sm text-muted-foreground">{shop.description}</p>
@@ -189,7 +201,7 @@ export default function HomePage() {
<CardContent className="flex-grow"> <CardContent className="flex-grow">
<div className="flex items-center gap-4 text-sm"> <div className="flex items-center gap-4 text-sm">
<div className="flex items-center"> <div className="flex items-center">
<Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400 mr-0.5" /> <Star className="h-3.5 w-3.5 fill-primary text-primary mr-0.5" />
{shop.rating} {shop.rating}
</div> </div>
<div className="flex items-center text-muted-foreground"> <div className="flex items-center text-muted-foreground">
@@ -200,7 +212,7 @@ export default function HomePage() {
</div> </div>
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<Button variant="outline" size="sm" className="w-full" asChild> <Button variant="outline" size="sm" className="w-full rounded-full" asChild>
<Link href={`/shop/${shop.id}`}>进入店铺</Link> <Link href={`/shop/${shop.id}`}>进入店铺</Link>
</Button> </Button>
</CardFooter> </CardFooter>
components/header.tsx
+3 -3
View File
@@ -105,10 +105,10 @@ export function Header() {
key={link.href} key={link.href}
href={link.href} href={link.href}
className={cn( className={cn(
"px-3 py-1.5 rounded-full text-sm font-medium transition-colors", "rounded-lg px-4 py-2 text-sm font-medium transition-colors",
pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href)) pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href))
? "bg-primary/10 text-primary" ? "bg-secondary text-foreground"
: "text-muted-foreground hover:text-foreground hover:bg-accent/50", : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground",
)} )}
> >
{link.label} {link.label}