feat(ui): refine public discovery pages

app/(main)/page.tsx

@@ -5,6 +5,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { IconInput } from "@/components/ui/icon-input"
+import { StatusBadge } from "@/components/ui/status-badge"
 import { listGames, listPlayers, listShops } from "@/lib/api"
 import { toApiError } from "@/lib/errors"
 import { GameIcon } from "@/lib/game-icons"
@@ -55,10 +56,7 @@ export default function HomePage() {
       <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="mb-3 text-3xl font-bold tracking-tight text-foreground lg:text-5xl"
-              style={{ fontFamily: "'Space Grotesk', sans-serif" }}
-            >
+            <h1 className="mb-3 text-3xl font-bold tracking-tight text-foreground lg:text-5xl">
               找到你的<span className="text-primary">游戏搭档</span>
             </h1>
             <p className="mb-8 text-base text-muted-foreground lg:text-lg">
@@ -74,7 +72,7 @@ export default function HomePage() {
                 type="text"
                 name="q"
                 placeholder="搜索陪玩、店铺、游戏..."
-                className="w-full border-border bg-card shadow-card transition-shadow focus:shadow-card-hover"
+                className="w-full border-border bg-card shadow-sm transition-shadow focus-visible:shadow-md"
               />
             </form>
           </div>
@@ -140,10 +138,7 @@ export default function HomePage() {
           {/* Players */}
           {!loading && !loadingError
             ? players.map((player) => (
-                <Card
-                  key={player.id}
-                  className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
-                >
+                <Card key={player.id} className="flex flex-col h-full border-border/80 shadow-sm">
                   <CardHeader className="flex flex-row items-center gap-3 space-y-0 pb-3">
                     <Avatar className="h-12 w-12">
                       <AvatarImage src={player.user.avatar} />
@@ -153,22 +148,29 @@ 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-primary text-primary mr-0.5" />
+                          <Star className="h-3.5 w-3.5 fill-warning text-warning mr-0.5" />
                           {player.rating}
                         </div>
                         <span className="text-xs text-muted-foreground">
                           {player.totalOrders} 单
                         </span>
-                        <Badge
-                          variant={player.status === "available" ? "default" : "secondary"}
+                        <StatusBadge
+                          status={
+                            player.status === "available"
+                              ? "success"
+                              : player.status === "busy"
+                                ? "warning"
+                                : "neutral"
+                          }
                           className="text-[10px] px-1.5 py-0 font-normal"
+                          icon={false}
                         >
                           {player.status === "available"
                             ? "可接单"
                             : player.status === "busy"
                               ? "忙碌"
                               : "离线"}
-                        </Badge>
+                        </StatusBadge>
                       </div>
                     </div>
                   </CardHeader>
@@ -208,7 +210,7 @@ export default function HomePage() {
             : null}
 
           {/* Community Teaser */}
-          <Card className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60">
+          <Card className="flex flex-col h-full border-border/80 shadow-sm">
             <CardHeader>
               <CardTitle className="text-lg">逛逛社区</CardTitle>
               <p className="text-sm text-muted-foreground">发现更多有趣的游戏日常和讨论</p>
@@ -228,10 +230,7 @@ export default function HomePage() {
           {/* Shops */}
           {!loading && !loadingError
             ? shops.map((shop) => (
-                <Card
-                  key={shop.id}
-                  className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
-                >
+                <Card key={shop.id} className="flex flex-col h-full border-border/80 shadow-sm">
                   <CardHeader>
                     <CardTitle className="text-lg">{shop.name}</CardTitle>
                     <p className="text-sm text-muted-foreground">{shop.description}</p>
@@ -239,7 +238,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-primary text-primary mr-0.5" />
+                        <Star className="h-3.5 w-3.5 fill-warning text-warning mr-0.5" />
                         {shop.rating}
                       </div>
                       <div className="flex items-center text-muted-foreground">