feat: add /notes with two engineering write-ups and diagrams

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/app/(site)/notes/page.tsx

@@ -1,8 +1,14 @@
 import type { Metadata } from "next";
-import { Container } from "@/src/components/site/Container";
-import { SectionHeader } from "@/src/components/site/SectionHeader";
+import Link from "next/link";
+import { Container, Pill, SectionHeader } from "@/src/components/site";
+import { NOTES } from "@/src/content/notes";
 
-export const metadata: Metadata = { title: "Notes" };
+export const metadata: Metadata = {
+  title: "Notes",
+  description:
+    "Evergreen engineering write-ups with diagrams: verification, architecture and testing.",
+  alternates: { canonical: "/notes" },
+};
 
 export default function Page() {
   return (
@@ -11,8 +17,35 @@ export default function Page() {
         as="h1"
         kicker="/notes"
         title="Notes"
-        lead="This page is coming soon."
+        lead="Evergreen engineering write-ups with diagrams. No client work, no hype."
       />
+      <ul className="mt-12 max-w-3xl divide-y divide-border border-y border-border">
+        {NOTES.map((note) => (
+          <li key={note.slug}>
+            <Link
+              href={`/notes/${note.slug}`}
+              className="group block py-8 hover:text-fg"
+            >
+              <p className="font-mono text-xs text-muted">
+                <time dateTime={note.publishedOn}>{note.publishedOn}</time>
+                {" · "}
+                {note.readingMinutes} min read
+              </p>
+              <h2 className="!mb-2 !mt-2 !text-xl !leading-snug text-fg group-hover:text-accent md:!text-2xl">
+                {note.title}
+              </h2>
+              <p className="!mb-4 text-base leading-relaxed text-muted">
+                {note.summary}
+              </p>
+              <span className="flex flex-wrap gap-2">
+                {note.tags.map((tag) => (
+                  <Pill key={tag}>{tag}</Pill>
+                ))}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
     </Container>
   );
 }