init

app/recipes/page.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from "next";
+import { RecipeBrowser, type RecipeSummary } from "@/app/components/RecipeBrowser";
+import { SiteHeader } from "@/app/components/SiteHeader";
+import { CATALOG_BY_ID } from "@/app/lib/catalog";
+import { CUISINES } from "@/app/lib/plan";
+import { RECIPES } from "@/app/lib/recipes";
+
+export const metadata: Metadata = {
+  title: "Recipes",
+  description: `Browse all ${RECIPES.length} budget-friendly recipes across ${CUISINES.length} cuisines.`,
+};
+
+const SUMMARIES: RecipeSummary[] = RECIPES.map((r) => ({
+  id: r.id,
+  title: r.title,
+  description: r.description,
+  cuisine: r.cuisine,
+  kind: r.kind,
+  styles: r.styles,
+  appliances: r.requiredAppliances,
+  prepTime: r.prepTime,
+  ingredientText: r.ingredients.map((i) => CATALOG_BY_ID.get(i.itemId)?.name ?? i.itemId).join(" ").toLowerCase(),
+}));
+
+export default function RecipesPage() {
+  return (
+    <div className="min-h-dvh">
+      <SiteHeader active="recipes" />
+      <main className="mx-auto max-w-7xl px-4 py-10 sm:px-6">
+        <div className="border-b border-line pb-6">
+          <p className="font-mono text-xs tracking-widest text-brand-300 uppercase">Complete Index</p>
+          <h1 className="mt-1 font-serif text-3xl font-semibold tracking-tight sm:text-4xl">Recipe library</h1>
+          <p className="mt-2 max-w-2xl text-ink-muted">
+            Every dish the planner draws from: {RECIPES.length} tested recipes across {CUISINES.length} cuisines. Search by
+            ingredient (try &ldquo;chickpeas&rdquo; or &ldquo;gochujang&rdquo;) or filter strictly to the appliances in your kitchen.
+          </p>
+        </div>
+
+        <div className="mt-8">
+          <RecipeBrowser recipes={SUMMARIES} />
+        </div>
+      </main>
+    </div>
+  );
+}