The front page and the about page point to the other games of the Kestrel's Nest

The list is the kit's family.json, shipped as /family.json and refreshed
at deploy when the kit is beside this checkout.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

packages/web/src/App.svelte

@@ -10,6 +10,7 @@
   import Card from "./Card.svelte";
   import Help from "./Help.svelte";
   import { HELP_TABS, type HelpTab } from "./help-state";
+  import { otherGames, type FamilyGame } from "./family";
   import { summarizeMissed } from "./catchup";
   import Replay from "./Replay.svelte";
   import FxGallery from "./FxGallery.svelte";
@@ -26,6 +27,11 @@
   net.startGamePolling();
 
   let name = $state(prefs.wizardName);
+  /** The other games of the Kestrel's Nest, for the front page. */
+  let family = $state<FamilyGame[]>([]);
+  $effect(() => {
+    void otherGames("wizwar").then((g) => (family = g));
+  });
   let joinCode = $state("");
   let claimPhrase = $state("");
   /** A /join/<CODE> recruiting link. The visitor lands looking at the
@@ -2561,6 +2567,10 @@
             <img src="/hero.jpg" alt="Through a wizard's eyes: an ambush watches its corridor through a wormhole" />
           </a>
           <a class="about-link clips-link" href="/clips">watch clips from the labyrinth</a>
+          {#if family.length}
+            <p class="family-line">Also at the Kestrel's Nest:
+              {#each family as g, i (g.slug)}{i > 0 ? ", " : " "}<a href={g.url} title={g.pitch}>{g.name}</a>{/each}</p>
+          {/if}
         </div>
 
         <details class="more-ways" open={local.hasSave()}>
@@ -4108,6 +4118,8 @@
     margin-bottom: 1.2rem;
   }
   .about-link:hover { color: #43331f; }
+  .family-line { margin: 0.5rem 0 0; font-size: 0.85rem; color: #7b6a51; }
+  .family-line a { color: #5a4630; }
   .clips-link { display: inline-block; margin: 0 0 0.9rem; }
   .field { display: block; text-align: left; margin-bottom: 1rem; }
   .field span {