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

@@ -1,5 +1,7 @@
-import * as React from 'react';
-import Link from 'next/link';
+import * as React from "react";
+import Link from "next/link";
+import { Card } from "./Layout";
+import { ArrowRight } from "lucide-react";
 
 interface Post {
   title: string;
@@ -14,34 +16,53 @@ interface MediumCardProps {
 }
 
 export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
-  const { title, description, date, slug } = post;
+  const { title, description, date, slug, tags } = post;
 
-  const formattedDate = new Date(date).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
+  const formattedDate = new Date(date).toLocaleDateString("de-DE", {
+    month: "long",
+    year: "numeric",
   });
 
   return (
-    <Link href={`/blog/${slug}`} className="group block">
-      <article className="space-y-4 py-8 px-8 border border-slate-200 rounded-3xl group-hover:border-slate-400 transition-all duration-500 bg-white">
-        <time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-colors">
-          {formattedDate}
-        </time>
-        
-        <h3 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:text-slate-900 transition-colors">
-          {title}
-        </h3>
-        
-        <p className="text-xl text-slate-500 font-serif italic leading-snug line-clamp-2">
-          {description}
-        </p>
-        
-        <div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-xs uppercase tracking-widest group/link">
-          Lesen
-          <div className="w-10 h-px bg-slate-200 group-hover:bg-slate-400 group-hover:w-16 transition-all duration-500"></div>
+    <Link href={`/blog/${slug}`} className="group block w-full">
+      <Card
+        variant="glass"
+        padding="normal"
+        techBorder={false}
+        className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm"
+      >
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
+              {formattedDate}
+            </time>
+            <div className="flex gap-2">
+              {tags?.slice(0, 2).map((tag) => (
+                <span
+                  key={tag}
+                  className="text-[9px] font-mono text-slate-300 uppercase"
+                >
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
+              {title}
+            </h3>
+            <p className="text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
+              {description}
+            </p>
+          </div>
+
+          <div className="pt-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
+            <span>Beitrag öffnen</span>
+            <ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
+          </div>
         </div>
-      </article>
+      </Card>
     </Link>
   );
 };