Move the field guide into the docs section

components/BackNavigationTransition.tsx

@@ -1,36 +1,24 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
 
-/** Animate the new content after browser history navigation, without delaying it. */
+/** Animate newly committed pages without delaying navigation. */
 export function BackNavigationTransition() {
   const pathname = usePathname();
   const search = useSearchParams();
-  const route = `${pathname}?${search.toString()}`;
-  const historyNavigation = useRef(false);
+  // Documentation pages share a pathname; other query changes are filters or
+  // state updates and should not animate the entire page.
+  const route =
+    pathname === "/docs"
+      ? `${pathname}?page=${search.get("page") ?? "welcome"}`
+      : pathname;
   const previousPath = useRef(route);
 
-  useEffect(() => {
-    const onPopState = () => {
-      historyNavigation.current =
-        `${window.location.pathname}?${new URLSearchParams(window.location.search).toString()}` !==
-        previousPath.current;
-    };
-    window.addEventListener("popstate", onPopState);
-    return () => window.removeEventListener("popstate", onPopState);
-  }, []);
-
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (previousPath.current === route) return;
     previousPath.current = route;
-    const fromHistory = historyNavigation.current;
-    historyNavigation.current = false;
-    if (
-      !fromHistory ||
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches
-    )
-      return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
     const main = document.getElementById("main-content");
     if (!main || typeof main.animate !== "function") return;
     const animation = main.animate(

components/PlayerGuide.tsx

@@ -0,0 +1,47 @@
+import { getI18n } from "@/lib/i18n";
+import Link from "next/link";
+export async function PlayerGuide() {
+  const { t } = await getI18n();
+  return (
+    <>
+      <span className="eyebrow">{t("THE EXPLORER’S FIELD GUIDE")}</span>
+      <h1>
+        {t("You know this place.")}
+        <br />
+        <span className="green">{t("Probably.")}</span>
+      </h1>
+      <p className="lead">
+        {t(
+          "MineGeo drops you into a panorama from a community Minecraft world. Find out where you are before the clock runs out.",
+        )}
+      </p>
+      <h2>{t("Look for the little things")}</h2>
+      <p>
+        {t(
+          "Drag to look around. Mountains, shorelines, roofs, and landmarks all help. You stay in one place throughout a round.",
+        )}
+      </p>
+      <h2>{t("Make your guess")}</h2>
+      <p>
+        {t(
+          "Expand the map in the bottom-right corner and click to place a pin. North is up, X increases east, and Z increases south. Move your pin until you’re ready, then submit.",
+        )}
+      </p>
+      <h2>{t("Five chances to find your way")}</h2>
+      <p>
+        {t(
+          "Easy gives you 180 seconds, Normal 90, and Hard 30. Void is the hardest: just 10 seconds, a fixed panorama and map, no zoom, no compass or coordinates, and strict scoring. A timed-out round scores zero; you can still finish the expedition.",
+        )}
+      </p>
+      <h2>{t("Closer means better")}</h2>
+      <p>
+        {t(
+          "Each round awards up to 5,000 points based on horizontal distance. A guess within one block earns a perfect score. Compare all five guesses at the end.",
+        )}
+      </p>
+      <Link href="/servers" className="button primary">
+        {t("Let’s find a world →")}
+      </Link>
+    </>
+  );
+}

components/SiteNav.tsx

@@ -12,7 +12,6 @@ const links = [
   ["/tournaments", "Tournaments"],
   ["/changelogs", "Changelogs"],
   ["/downloads", "Downloads"],
-  ["/about", "Guide"],
   ["/docs", "Docs"],
 ] as const;