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

app/(main)/page.tsx

@@ -15,15 +15,11 @@ export default function HomePage() {
 
   return (
     <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">
-        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10">
-          <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">
+      <section className="py-16 md:py-24 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">
-              找到你的游戏搭档
+              找到你的<span className="text-primary">游戏搭档</span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
               找人一起打游戏，从这里开始
@@ -50,7 +46,12 @@ export default function HomePage() {
       <section>
         <div className="flex items-center justify-between mb-4">
           <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">
               查看全部 <ArrowRight className="ml-1 h-4 w-4" />
             </Link>
@@ -61,7 +62,7 @@ export default function HomePage() {
             <Link
               key={game.id}
               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" />
               <span className="text-sm font-medium">{game.name}</span>
@@ -73,32 +74,28 @@ export default function HomePage() {
       <section className="space-y-6">
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
           <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>
-            <span className="text-muted-foreground/30">|</span>
             <Link
               href="/search?sort=rating"
               className="text-muted-foreground hover:text-foreground transition-colors"
             >
               评分最高
             </Link>
-            <span className="text-muted-foreground/30">|</span>
             <Link
               href="/search?sort=orders"
               className="text-muted-foreground hover:text-foreground transition-colors"
             >
               接单最多
             </Link>
-            <span className="text-muted-foreground/30">|</span>
             <Link
               href="/search?sort=price_asc"
               className="text-muted-foreground hover:text-foreground transition-colors"
             >
               价格最低
             </Link>
-            <span className="text-muted-foreground/30">|</span>
             <Link
               href="/search?sort=price_desc"
               className="text-muted-foreground hover:text-foreground transition-colors"
@@ -113,7 +110,7 @@ export default function HomePage() {
           {players.map((player) => (
             <Card
               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">
                 <Avatar className="h-12 w-12">
@@ -124,13 +121,13 @@ export default function HomePage() {
                   <CardTitle className="text-base">{player.user.nickname}</CardTitle>
                   <div className="flex items-center gap-2 mt-1">
                     <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}
                     </div>
                     <span className="text-xs text-muted-foreground">{player.totalOrders} 单</span>
                     <Badge
                       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"
                         ? "可接单"
@@ -142,19 +139,31 @@ export default function HomePage() {
                 </div>
               </CardHeader>
               <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) => (
-                    <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}
                     </Badge>
                   ))}
                 </div>
                 {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>
-              <CardFooter className="pt-0">
-                <Button variant="outline" size="sm" className="w-full" asChild>
+              <CardFooter className="pt-0 flex items-end justify-between">
+                <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>
                 </Button>
               </CardFooter>
@@ -162,7 +171,7 @@ export default function HomePage() {
           ))}
 
           {/* 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>
               <CardTitle className="text-lg">逛逛社区</CardTitle>
               <p className="text-sm text-muted-foreground">发现更多有趣的游戏日常和讨论</p>
@@ -173,7 +182,7 @@ export default function HomePage() {
               </div>
             </CardContent>
             <CardFooter>
-              <Button className="w-full" asChild>
+              <Button variant="outline" className="w-full rounded-full" asChild>
                 <Link href="/community">进入社区</Link>
               </Button>
             </CardFooter>
@@ -181,7 +190,10 @@ export default function HomePage() {
 
           {/* Shops */}
           {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>
                 <CardTitle className="text-lg">{shop.name}</CardTitle>
                 <p className="text-sm text-muted-foreground">{shop.description}</p>
@@ -189,7 +201,7 @@ export default function HomePage() {
               <CardContent className="flex-grow">
                 <div className="flex items-center gap-4 text-sm">
                   <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}
                   </div>
                   <div className="flex items-center text-muted-foreground">
@@ -200,7 +212,7 @@ export default function HomePage() {
                 </div>
               </CardContent>
               <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>
                 </Button>
               </CardFooter>

components/header.tsx

@@ -105,10 +105,10 @@ export function Header() {
                 key={link.href}
                 href={link.href}
                 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))
-                    ? "bg-primary/10 text-primary"
-                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                    ? "bg-secondary text-foreground"
+                    : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground",
                 )}
               >
                 {link.label}