refactor(pages): migrate app data reads to api adapters

app/(main)/page.tsx

@@ -4,10 +4,14 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { listGames, listPlayers, listShops } from "@/lib/api"
 import { GameIcon } from "@/lib/game-icons"
-import { mockGames, mockPlayers, mockShops } from "@/lib/mock"
 
 export default function HomePage() {
+  const games = listGames()
+  const players = listPlayers()
+  const shops = listShops()
+
   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">
@@ -44,7 +48,7 @@ export default function HomePage() {
           </Button>
         </div>
         <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
-          {mockGames.map((game) => (
+          {games.map((game) => (
             <Link
               key={game.id}
               href={`/search?game=${encodeURIComponent(game.name)}`}
@@ -67,7 +71,7 @@ export default function HomePage() {
           </Button>
         </div>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {mockPlayers.map((player) => (
+          {players.map((player) => (
             <Card key={player.id} className="hover:shadow-md transition-shadow">
               <CardHeader className="flex flex-row items-center gap-3 space-y-0 pb-3">
                 <Avatar className="h-12 w-12">
@@ -127,7 +131,7 @@ export default function HomePage() {
           </Button>
         </div>
         <div className="grid gap-4 md:grid-cols-2">
-          {mockShops.map((shop) => (
+          {shops.map((shop) => (
             <Card key={shop.id} className="hover:shadow-md transition-shadow">
               <CardHeader>
                 <CardTitle className="text-lg">{shop.name}</CardTitle>