feat: add release notes page with MDX content system

Implemented comprehensive release notes feature with:

- MDX-based content system for easy release note authoring
- Thematic sidebar navigation (Foundation, Features, Infrastructure)
- Auto-generated pages from MDX frontmatter
- Overview page with status filtering (completed/in_progress/planned)
- Detail pages with custom MDX components
- Mobile-responsive navigation (horizontal scroll tabs)
- Integration with timeline (link to detailed release notes)
- Added "Releases" link to header navigation

Technical implementation:
- next-mdx-remote for MDX parsing and rendering
- gray-matter for frontmatter extraction
- Custom MDX components for images, code blocks, typography
- Static site generation (SSG) for performance
- Template system for consistent release note structure

Files added:
- app/(marketing)/releases/ - Route structure and components
- content/nl/releases/ - MDX content files and index
- lib/mdx/releases.ts - MDX utility functions
- docs/specs/releasepage/ - Build plan documentation
- docs/templates/release-note-template.mdx - Content template

First release note: authentication.mdx (login, signup, password reset)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

app/(marketing)/releases/[category]/page.tsx

@@ -0,0 +1,130 @@
+/**
+ * Release Detail Page
+ *
+ * Renders individual release note from MDX file
+ */
+
+import { notFound } from 'next/navigation'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+import { getRelease, getAllReleases } from '@/lib/mdx/releases'
+import { mdxComponents } from '../components/mdx-components'
+
+interface ReleasePageProps {
+  params: Promise<{
+    category: string
+  }>
+}
+
+// Generate static params for all releases
+export async function generateStaticParams() {
+  const releases = await getAllReleases()
+
+  return releases.map((release) => ({
+    category: release.slug,
+  }))
+}
+
+// Generate metadata for SEO
+export async function generateMetadata({ params }: ReleasePageProps) {
+  const { category } = await params
+  const release = await getRelease(category)
+
+  if (!release) {
+    return {
+      title: 'Release Not Found',
+    }
+  }
+
+  return {
+    title: `${release.frontmatter.title} - Release Notes`,
+    description: release.frontmatter.description,
+  }
+}
+
+export default async function ReleasePage({ params }: ReleasePageProps) {
+  const { category } = await params
+  const release = await getRelease(category)
+
+  if (!release) {
+    notFound()
+  }
+
+  const { frontmatter, content } = release
+
+  return (
+    <div className="min-h-screen bg-white pt-24 pb-16">
+      <article className="max-w-4xl mx-auto px-4 md:px-8">
+        {/* Header */}
+        <header className="mb-8 pb-8 border-b border-slate-200">
+          <div className="flex items-center gap-3 mb-4">
+            <StatusBadge status={frontmatter.status} />
+            <span className="text-sm text-slate-500">v{frontmatter.version}</span>
+            <span className="text-sm text-slate-500">•</span>
+            <time className="text-sm text-slate-500">
+              {new Date(frontmatter.releaseDate).toLocaleDateString('nl-NL', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+              })}
+            </time>
+          </div>
+
+          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            {frontmatter.title}
+          </h1>
+
+          <p className="text-xl text-slate-600">
+            {frontmatter.description}
+          </p>
+        </header>
+
+        {/* MDX Content */}
+        <div className="prose prose-slate max-w-none">
+          <MDXRemote source={content} components={mdxComponents} />
+        </div>
+
+        {/* Footer Navigation */}
+        <footer className="mt-12 pt-8 border-t border-slate-200">
+          <div className="flex justify-between items-center">
+            <a
+              href="/releases"
+              className="text-teal-600 hover:text-teal-700 font-medium flex items-center gap-2"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+              Terug naar overzicht
+            </a>
+
+            <a
+              href="/#timeline"
+              className="text-slate-600 hover:text-slate-700 font-medium"
+            >
+              Bekijk timeline →
+            </a>
+          </div>
+        </footer>
+      </article>
+    </div>
+  )
+}
+
+function StatusBadge({ status }: { status: 'completed' | 'in_progress' | 'planned' }) {
+  const styles = {
+    completed: 'bg-teal-100 text-teal-700 border-teal-200',
+    in_progress: 'bg-amber-100 text-amber-700 border-amber-200',
+    planned: 'bg-slate-100 text-slate-600 border-slate-200',
+  }
+
+  const labels = {
+    completed: 'Voltooid',
+    in_progress: 'Bezig',
+    planned: 'Gepland',
+  }
+
+  return (
+    <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border ${styles[status]}`}>
+      {labels[status]}
+    </span>
+  )
+}