feat(blog): complete blog experience overhaul

- Implemented minimalist vertical teaser list (MediumCard)
- Consolidated and refined 20 engineering-focused blog posts
- Rebuilt blog overview with narrow, centered layout (max-w-3xl)
- Introduced BlogCommandBar for integrated search and tag filtering
- Consolidated tags to 6-8 core technical categories
- Redesigned blog detail pages with industrial 'Technical Frame' layout
- Added SectionHeader component for consistent industrial titling
- Optimized vertical space by removing redundant PageHeaders

apps/web/app/blog/[slug]/page.tsx

@@ -1,19 +1,11 @@
 import * as React from "react";
 import { notFound } from "next/navigation";
 import { blogPosts } from "../../../src/data/blogPosts";
-import { Tag } from "../../../src/components/Tag";
-import { CodeBlock } from "../../../src/components/ArticleBlockquote";
-import { H2 } from "../../../src/components/ArticleHeading";
-import {
-  Paragraph,
-  LeadParagraph,
-} from "../../../src/components/ArticleParagraph";
-import { UL, LI } from "../../../src/components/ArticleList";
-import { FileExamplesList } from "../../../src/components/FileExamplesList";
-import { FileExampleManager } from "../../../src/data/fileExamples";
-import { BlogPostClient } from "../../../src/components/BlogPostClient";
 import { PageHeader } from "../../../src/components/PageHeader";
 import { Section } from "../../../src/components/Section";
+import { BlogPostClient } from "../../../src/components/BlogPostClient";
+import { PostComponents } from "../../../src/components/blog/posts";
+import { Card } from "../../../src/components/Layout";
 
 export async function generateStaticParams() {
   return blogPosts.map((post) => ({
@@ -33,201 +25,78 @@ export default async function BlogPostPage({
     notFound();
   }
 
-  const formattedDate = new Date(post.date).toLocaleDateString("en-US", {
+  const formattedDate = new Date(post.date).toLocaleDateString("de-DE", {
     month: "long",
     day: "numeric",
     year: "numeric",
   });
 
-  const wordCount = post.description.split(/\s+/).length + 100;
+  const wordCount = post.description.split(/\s+/).length + 300; // Average post length
   const readingTime = Math.max(1, Math.ceil(wordCount / 200));
 
-  const showFileExamples = post.tags?.some((tag) =>
-    [
-      "architecture",
-      "design-patterns",
-      "system-design",
-      "docker",
-      "deployment",
-    ].includes(tag),
-  );
-
-  // Load file examples for the post
-  let groups: any[] = [];
-  if (showFileExamples) {
-    const allGroups = await FileExampleManager.getAllGroups();
-    groups = allGroups
-      .map((group) => ({
-        ...group,
-        files: group.files.filter((file) => {
-          if (file.postSlug !== slug) return false;
-          return true;
-        }),
-      }))
-      .filter((group) => group.files.length > 0);
-  }
+  const PostContent = PostComponents[slug];
 
   return (
-    <div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
+    <div className="flex flex-col gap-12 py-12 md:py-24 overflow-hidden">
       <BlogPostClient readingTime={readingTime} title={post.title} />
 
       <PageHeader
+        variant="blog"
         title={post.title}
         description={post.description}
         backLink={{ href: "/blog", label: "Zurück zum Blog" }}
-        backgroundSymbol="B"
+        backgroundSymbol={slug.charAt(0).toUpperCase()}
       />
 
       <main id="post-content">
-        <Section number="01" title="Inhalt">
-          <div className="prose prose-slate max-w-none">
-            <div className="flex flex-wrap items-center gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em]">
-              <time dateTime={post.date}>{formattedDate}</time>
-              <span className="text-slate-200">•</span>
-              <span>{readingTime} min read</span>
-            </div>
+        <Section containerVariant="wide" className="pt-0 md:pt-0">
+          <div className="max-w-5xl mx-auto">
+            <Card
+              variant="glass"
+              techBorder
+              className="relative overflow-hidden"
+            >
+              {/* Decorative background grid inside the card */}
+              <div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
 
-            {post.tags && post.tags.length > 0 && (
-              <div className="flex flex-wrap gap-2 mb-12">
-                {post.tags.map((tag, index) => (
-                  <Tag key={tag} tag={tag} index={index} className="text-xs" />
-                ))}
+              <div className="relative z-10 px-6 py-12 md:px-16 md:py-20">
+                <div className="flex flex-wrap items-center justify-between gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
+                  <div className="flex items-center gap-3">
+                    <span className="w-2 h-2 rounded-full bg-slate-300" />
+                    <time dateTime={post.date}>{formattedDate}</time>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <span>{readingTime} min Lesezeit</span>
+                    <span className="text-slate-200">|</span>
+                    <span>
+                      {slug.substring(0, 4).toUpperCase()}-
+                      {Math.floor(Math.random() * 999)}
+                    </span>
+                  </div>
+                </div>
+
+                {post.tags && post.tags.length > 0 && (
+                  <div className="flex flex-wrap gap-2 mb-12">
+                    {post.tags.map((tag, index) => (
+                      <span
+                        key={tag}
+                        className="px-3 py-1 bg-slate-50 border border-slate-100 rounded text-[10px] font-mono text-slate-500 uppercase tracking-widest"
+                      >
+                        #{tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+
+                {PostContent ? (
+                  <PostContent />
+                ) : (
+                  <div className="p-8 bg-slate-50 border border-slate-200 rounded-lg italic text-slate-500">
+                    Inhalt wird bald veröffentlicht...
+                  </div>
+                )}
               </div>
-            )}
-
-            {slug === "first-note" && (
-              <>
-                <LeadParagraph>
-                  This blog is a public notebook. It's where I document things I
-                  learn, problems I solve, and tools I test.
-                </LeadParagraph>
-                <H2>Why write in public?</H2>
-                <Paragraph>
-                  I forget things. Writing them down helps. Making them public
-                  helps me think more clearly and might help someone else.
-                </Paragraph>
-                <H2>What to expect</H2>
-                <UL>
-                  <LI>Short entries, usually under 500 words</LI>
-                  <LI>Practical solutions to specific problems</LI>
-                  <LI>Notes on tools and workflows</LI>
-                  <LI>Mistakes and what I learned</LI>
-                </UL>
-              </>
-            )}
-
-            {slug === "debugging-tips" && (
-              <>
-                <LeadParagraph>
-                  Sometimes the simplest debugging tool is the best one. Print
-                  statements get a bad reputation, but they're often exactly
-                  what you need.
-                </LeadParagraph>
-                <H2>Why print statements work</H2>
-                <Paragraph>
-                  Debuggers are powerful, but they change how your code runs.
-                  Print statements don't.
-                </Paragraph>
-                <CodeBlock language="python" showLineNumbers={true}>
-                  {`def process_data(data):
-    print(f"Processing {len(data)} items")
-    result = expensive_operation(data)
-    print(f"Operation result: {result}")
-    return result`}
-                </CodeBlock>
-
-                <H2>Complete examples</H2>
-                <Paragraph>
-                  Here are some practical file examples you can copy and
-                  download. These include proper error handling and logging.
-                </Paragraph>
-
-                <div className="my-8">
-                  <FileExamplesList groups={groups} />
-                </div>
-              </>
-            )}
-
-            {slug === "architecture-patterns" && (
-              <>
-                <LeadParagraph>
-                  Good software architecture is about making the right decisions
-                  early. Here are some patterns I've found useful in production
-                  systems.
-                </LeadParagraph>
-                <H2>Repository Pattern</H2>
-                <Paragraph>
-                  The repository pattern provides a clean separation between
-                  your business logic and data access layer. It makes your code
-                  more testable and maintainable.
-                </Paragraph>
-
-                <H2>Service Layer</H2>
-                <Paragraph>
-                  Services orchestrate business logic and coordinate between
-                  repositories and domain events. They keep your controllers
-                  thin and your business rules organized.
-                </Paragraph>
-
-                <H2>Domain Events</H2>
-                <Paragraph>
-                  Domain events help you decouple components and react to
-                  changes in your system. They're essential for building
-                  scalable, event-driven architectures.
-                </Paragraph>
-
-                <H2>Complete examples</H2>
-                <Paragraph>
-                  These TypeScript examples demonstrate modern architecture
-                  patterns for scalable applications. You can copy them directly
-                  into your project.
-                </Paragraph>
-
-                <div className="my-8">
-                  <FileExamplesList groups={groups} />
-                </div>
-              </>
-            )}
-
-            {slug === "docker-deployment" && (
-              <>
-                <LeadParagraph>
-                  Docker has become the standard for containerizing
-                  applications. Here's how to set up production-ready
-                  deployments that are secure, efficient, and maintainable.
-                </LeadParagraph>
-                <H2>Multi-stage builds</H2>
-                <Paragraph>
-                  Multi-stage builds keep your production images small and
-                  secure by separating build and runtime environments. This
-                  reduces attack surface and speeds up deployments.
-                </Paragraph>
-
-                <H2>Health checks and monitoring</H2>
-                <Paragraph>
-                  Proper health checks ensure your containers are running
-                  correctly. Combined with restart policies, this gives you
-                  resilient, self-healing deployments.
-                </Paragraph>
-
-                <H2>Orchestration with Docker Compose</H2>
-                <Paragraph>
-                  Docker Compose makes it easy to manage multi-service
-                  applications in development and production. Define services,
-                  networks, and volumes in a single file.
-                </Paragraph>
-
-                <H2>Complete examples</H2>
-                <Paragraph>
-                  These Docker configurations are production-ready. Use them as
-                  a starting point for your own deployments.
-                </Paragraph>
-
-                <div className="my-8">
-                  <FileExamplesList groups={groups} />
-                </div>
-              </>
-            )}
+            </Card>
           </div>
         </Section>
       </main>