Add player leaderboard and homepage preview

app/page.tsx

@@ -11,20 +11,23 @@ import {
 import { Header, Footer } from "@/components/Shell";
 import { MapCard } from "@/components/MapCard";
 import { catalog } from "@/lib/catalog";
+import { leaderboard } from "@/lib/leaderboard";
+import { LeaderboardPreview } from "@/components/Leaderboard";
 export const dynamic = "force-dynamic";
 export default async function Home() {
-  const maps = await catalog();
+  const [maps, rankings] = await Promise.all([
+    catalog(),
+    leaderboard({ limit: 5 }),
+  ]);
   const servers = new Set(maps.map((map) => map.server_id)).size;
   const locations = maps.reduce((total, map) => total + map.panorama_count, 0);
   return (
     <>
       <Header />
-      <main className="home-page">
+      <main className="home-page" id="main-content">
         <section className="hero">
           <div className="hero-copy">
-            <div className="status-label">
-              <span className="live-dot" /> MINECRAFT · EXPLORE · GUESS
-            </div>
+            <div className="status-label">A MINECRAFT GUESSING GAME</div>
             <h1>
               Guess where you are
               <br />
@@ -40,10 +43,13 @@ export default async function Home() {
               <Link href="/servers" className="button primary">
                 Start exploring <ArrowRight size={18} />
               </Link>
-              <span className="hero-mode-note">3 difficulty levels</span>
+              <Link href="/leaderboard" className="text-link">
+                Meet the top explorers <ArrowRight size={14} />
+              </Link>
             </div>
             <div className="hero-notes">
-              <span className="mode-dots" aria-hidden="true">
+              <span className="round-blocks" aria-hidden="true">
+                <i />
                 <i />
                 <i />
                 <i />
@@ -53,10 +59,10 @@ export default async function Home() {
             </div>
           </div>
           <div className="hero-art" aria-label="Minecraft surface map">
-            <div className="map-art-frame">
+            <div className="map-art-frame minecraft-paper">
               <Image
                 src={maps[0]?.mapImage || "/images/example-map.webp"}
-                alt="A Minecraft surface map framed in parchment"
+                alt="A Minecraft surface map on the original Minecraft parchment texture"
                 width={1024}
                 height={1024}
                 loading="eager"
@@ -123,12 +129,12 @@ export default async function Home() {
           {maps.length ? (
             <div className="cards-grid">
               {maps.slice(0, 4).map((map, index) => (
-                <MapCard map={map} index={index} key={map.id} />
+                <MapCard map={map} index={index} key={map.id} minecraftPaper />
               ))}
             </div>
           ) : (
             <div className="first-map-panel">
-              <div className="empty-map-art" aria-hidden="true">
+              <div className="empty-map-art minecraft-paper" aria-hidden="true">
                 <Image
                   src="/images/example-map.webp"
                   alt=""
@@ -155,6 +161,7 @@ export default async function Home() {
             </div>
           )}
         </section>
+        <LeaderboardPreview data={rankings} />
         <section className="section home-panels">
           <article className="home-panel">
             <span className="eyebrow">HOW TO PLAY</span>