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/components/mdx-components.tsx

@@ -0,0 +1,153 @@
+/**
+ * Custom MDX Components
+ *
+ * Styled components for rendering MDX content
+ */
+
+import Image from 'next/image'
+import Link from 'next/link'
+
+type MDXComponents = {
+  [key: string]: React.ComponentType<any>
+}
+
+export const mdxComponents: MDXComponents = {
+  // Headings with anchor links
+  h1: ({ children, ...props }) => (
+    <h1 className="text-4xl font-bold text-slate-900 mt-8 mb-4" {...props}>
+      {children}
+    </h1>
+  ),
+  h2: ({ children, ...props }) => (
+    <h2 className="text-3xl font-bold text-slate-900 mt-8 mb-4 border-b border-slate-200 pb-2" {...props}>
+      {children}
+    </h2>
+  ),
+  h3: ({ children, ...props }) => (
+    <h3 className="text-2xl font-semibold text-slate-900 mt-6 mb-3" {...props}>
+      {children}
+    </h3>
+  ),
+  h4: ({ children, ...props }) => (
+    <h4 className="text-xl font-semibold text-slate-900 mt-4 mb-2" {...props}>
+      {children}
+    </h4>
+  ),
+
+  // Paragraphs
+  p: ({ children, ...props }) => (
+    <p className="text-slate-700 leading-relaxed mb-4" {...props}>
+      {children}
+    </p>
+  ),
+
+  // Lists
+  ul: ({ children, ...props }) => (
+    <ul className="list-disc list-inside space-y-2 mb-4 text-slate-700" {...props}>
+      {children}
+    </ul>
+  ),
+  ol: ({ children, ...props }) => (
+    <ol className="list-decimal list-inside space-y-2 mb-4 text-slate-700" {...props}>
+      {children}
+    </ol>
+  ),
+  li: ({ children, ...props }) => (
+    <li className="ml-4" {...props}>
+      {children}
+    </li>
+  ),
+
+  // Links
+  a: ({ href, children, ...props }) => (
+    <Link
+      href={href || '#'}
+      className="text-teal-600 hover:text-teal-700 underline underline-offset-2"
+      {...props}
+    >
+      {children}
+    </Link>
+  ),
+
+  // Images
+  img: ({ src, alt, ...props }) => {
+    if (!src) return null
+
+    return (
+      <figure className="my-8">
+        <div className="relative rounded-lg overflow-hidden border border-slate-200 bg-slate-50">
+          <Image
+            src={src}
+            alt={alt || ''}
+            width={1200}
+            height={675}
+            className="w-full h-auto"
+            {...props}
+          />
+        </div>
+        {alt && (
+          <figcaption className="text-sm text-slate-500 italic mt-2 text-center">
+            {alt}
+          </figcaption>
+        )}
+      </figure>
+    )
+  },
+
+  // Code blocks
+  pre: ({ children, ...props }) => (
+    <pre className="bg-slate-900 text-slate-50 rounded-lg p-4 overflow-x-auto mb-4 text-sm" {...props}>
+      {children}
+    </pre>
+  ),
+  code: ({ children, ...props }) => (
+    <code className="bg-slate-100 text-slate-800 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
+      {children}
+    </code>
+  ),
+
+  // Blockquote
+  blockquote: ({ children, ...props }) => (
+    <blockquote className="border-l-4 border-teal-500 pl-4 py-2 my-4 bg-teal-50 text-slate-700 italic" {...props}>
+      {children}
+    </blockquote>
+  ),
+
+  // Horizontal rule
+  hr: (props) => (
+    <hr className="my-8 border-slate-200" {...props} />
+  ),
+
+  // Table
+  table: ({ children, ...props }) => (
+    <div className="overflow-x-auto my-6">
+      <table className="min-w-full divide-y divide-slate-200" {...props}>
+        {children}
+      </table>
+    </div>
+  ),
+  th: ({ children, ...props }) => (
+    <th className="px-4 py-3 bg-slate-50 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider" {...props}>
+      {children}
+    </th>
+  ),
+  td: ({ children, ...props }) => (
+    <td className="px-4 py-3 text-sm text-slate-700 border-t border-slate-200" {...props}>
+      {children}
+    </td>
+  ),
+
+  // Strong/Bold
+  strong: ({ children, ...props }) => (
+    <strong className="font-semibold text-slate-900" {...props}>
+      {children}
+    </strong>
+  ),
+
+  // Emphasis/Italic
+  em: ({ children, ...props }) => (
+    <em className="italic" {...props}>
+      {children}
+    </em>
+  ),
+}