feat: add World Heritage Basics navigation to criteria pages

client/src/app/features/top/components/TopPage.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { Map } from "./Map.tsx";
+import { WorldHeritageBasics } from "./WorldHeritageBasics.tsx";
 
 export default function TopPage({
   hero,
@@ -26,6 +27,8 @@ export default function TopPage({
           <Map />
         </div>
 
+        <WorldHeritageBasics />
+
         <div className="pt-8">
           {content}
           {pagination}

client/src/app/features/top/components/WorldHeritageBasics.tsx

@@ -0,0 +1,36 @@
+import { Link } from "react-router-dom";
+import { CRITERIA_CODES, getCriteria } from "../../../../domain/criteria";
+import { useLocale } from "@shared/locale/LocaleHooks.ts";
+import { useText } from "@shared/locale/ui-text.ts";
+
+export function WorldHeritageBasics() {
+  const { locale } = useLocale();
+  const text = useText();
+
+  return (
+    <section aria-label={text.worldHeritageBasics} className="mt-8">
+      <h2 className="text-lg font-semibold text-zinc-900">{text.worldHeritageBasics}</h2>
+      <p className="mt-1 max-w-2xl text-sm text-zinc-600">{text.worldHeritageBasicsDescription}</p>
+
+      <ul className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
+        {CRITERIA_CODES.map((code) => {
+          const { title } = getCriteria(code, locale);
+
+          return (
+            <li key={code}>
+              <Link
+                to={`/heritages/criteria/${code}`}
+                className="flex h-full items-center gap-2 rounded bg-gray-200 px-3 py-2 text-sm hover:bg-gray-300"
+              >
+                <span className="inline-block w-12 shrink-0 font-mono text-xs opacity-70">
+                  ({code})
+                </span>
+                <span className="font-medium">{title}</span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

client/src/app/features/top/components/__tests__/WorldHeritageBasics.test.tsx

@@ -0,0 +1,38 @@
+/** @jest-environment jsdom */
+
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { LocaleProvider } from "@shared/locale/LocaleProvider.tsx";
+import { WorldHeritageBasics } from "../WorldHeritageBasics";
+import { CRITERIA_CODES } from "../../../../../domain/criteria";
+
+const renderBasics = () =>
+  render(
+    <MemoryRouter>
+      <LocaleProvider>
+        <WorldHeritageBasics />
+      </LocaleProvider>
+    </MemoryRouter>,
+  );
+
+describe("WorldHeritageBasics", () => {
+  test("見出しと説明文を表示する", () => {
+    renderBasics();
+
+    expect(screen.getByRole("heading", { name: "World Heritage Basics" })).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Every site is inscribed under one or more of these 10 selection criteria. Explore what each one means.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  test("10個の登録基準すべてに /heritages/criteria/:code へのリンクを表示する", () => {
+    renderBasics();
+
+    CRITERIA_CODES.forEach((code) => {
+      const link = screen.getByRole("link", { name: new RegExp(`^\\(${code}\\)`) });
+      expect(link).toHaveAttribute("href", `/heritages/criteria/${code}`);
+    });
+  });
+});

client/src/locals/en/ui.json

@@ -61,5 +61,7 @@
   "searchOtherSites": "Search other sites",
   "exampleSites": "Example sites",
   "viewAllResults": "View all results",
-  "unescoCriteriaSource": "UNESCO official criteria page"
+  "unescoCriteriaSource": "UNESCO official criteria page",
+  "worldHeritageBasics": "World Heritage Basics",
+  "worldHeritageBasicsDescription": "Every site is inscribed under one or more of these 10 selection criteria. Explore what each one means."
 }

client/src/locals/ja/ui.json

@@ -61,5 +61,7 @@
   "searchOtherSites": "他の遺産を検索",
   "exampleSites": "実例",
   "viewAllResults": "すべての結果を見る",
-  "unescoCriteriaSource": "UNESCO 公式の登録基準ページ"
+  "unescoCriteriaSource": "UNESCO 公式の登録基準ページ",
+  "worldHeritageBasics": "世界遺産の基礎知識",
+  "worldHeritageBasicsDescription": "すべての世界遺産は、以下の10個の登録基準のいずれか（または複数）を満たして登録されています。各基準の意味を見てみましょう。"
 }