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/page.tsx

@@ -3,19 +3,19 @@
 import * as React from "react";
 import { useState, useEffect } from "react";
 import { MediumCard } from "../../src/components/MediumCard";
-import { SearchBar } from "../../src/components/SearchBar";
-import { Tag } from "../../src/components/Tag";
+import { BlogCommandBar } from "../../src/components/blog/BlogCommandBar";
 import { blogPosts } from "../../src/data/blogPosts";
 import { PageHeader } from "../../src/components/PageHeader";
+import { SectionHeader } from "../../src/components/SectionHeader";
 import { Reveal } from "../../src/components/Reveal";
 import { Section } from "../../src/components/Section";
 import { AbstractCircuit, GradientMesh } from "../../src/components/Effects";
-import { Label } from "../../src/components/Typography";
 
 export default function BlogPage() {
   const [searchQuery, setSearchQuery] = useState("");
+  const [activeTags, setActiveTags] = useState<string[]>([]);
 
-  // Memoize allPosts to prevent infinite re-render loop
+  // Memoize allPosts
   const allPosts = React.useMemo(
     () =>
       [...blogPosts].sort(
@@ -32,110 +32,123 @@ export default function BlogPage() {
     [allPosts],
   );
 
-  useEffect(() => {
-    const query = searchQuery.toLowerCase().trim();
-    if (query.startsWith("#")) {
-      const tag = query.slice(1);
-      setFilteredPosts(
-        allPosts.filter((post) =>
-          post.tags?.some((t) => t.toLowerCase() === tag.toLowerCase()),
-        ),
-      );
-    } else {
-      setFilteredPosts(
-        allPosts.filter((post) => {
-          const title = post.title.toLowerCase();
-          const description = post.description.toLowerCase();
-          const tags = (post.tags || []).join(" ").toLowerCase();
-          return (
-            title.includes(query) ||
-            description.includes(query) ||
-            tags.includes(query)
-          );
-        }),
-      );
-    }
-  }, [searchQuery, allPosts]);
+  const [visibleCount, setVisibleCount] = useState(8);
 
-  const filterByTag = (tag: string) => {
-    setSearchQuery(`#${tag}`);
+  const handleTagToggle = (tag: string) => {
+    setActiveTags((prev) =>
+      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
+    );
+    setVisibleCount(8); // Reset pagination on filter change
   };
 
+  useEffect(() => {
+    const query = searchQuery.toLowerCase().trim();
+
+    let filtered = allPosts;
+
+    if (query) {
+      filtered = filtered.filter((post) => {
+        const title = post.title.toLowerCase();
+        const description = post.description.toLowerCase();
+        const pTagString = (post.tags || []).join(" ").toLowerCase();
+        return (
+          title.includes(query) ||
+          description.includes(query) ||
+          pTagString.includes(query)
+        );
+      });
+    }
+
+    if (activeTags.length > 0) {
+      filtered = filtered.filter((post) =>
+        post.tags?.some((tag) => activeTags.includes(tag)),
+      );
+    }
+
+    setFilteredPosts(filtered);
+  }, [searchQuery, activeTags, allPosts]);
+
+  const loadMore = () => {
+    setVisibleCount((prev) => prev + 6);
+  };
+
+  const hasMore = visibleCount < filteredPosts.length;
+  const postsToShow = filteredPosts.slice(0, visibleCount);
+
   return (
-    <div className="flex flex-col bg-white overflow-hidden relative min-h-screen">
+    <div className="flex flex-col bg-slate-50/30 overflow-hidden relative min-h-screen">
       <AbstractCircuit />
 
-      <PageHeader
-        title={
-          <>
-            Blog <br />
-            <span className="text-slate-400">& Notes.</span>
-          </>
-        }
-        description="Ein technisches Notizbuch über Lösungen, Fehler und Werkzeuge."
-        backLink={{ href: "/", label: "Zurück" }}
-        backgroundSymbol="B"
-      />
-
       <Section
-        number="01"
-        title="Journal"
-        borderTop
-        effects={<GradientMesh variant="metallic" className="opacity-50" />}
+        effects={<GradientMesh variant="metallic" className="opacity-40" />}
+        className="pb-32 pt-12 md:pt-20"
+        containerVariant="wide"
       >
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
-          {/* Sidebar / Filter area */}
-          <div className="lg:col-span-4 lg:order-2">
-            <div className="sticky top-32 space-y-16">
-              <Reveal>
-                <div className="space-y-6">
-                  <Label className="text-slate-400 uppercase tracking-[0.3em]">
-                    Suchen
-                  </Label>
-                  <SearchBar value={searchQuery} onChange={setSearchQuery} />
-                </div>
-              </Reveal>
-
-              {allTags.length > 0 && (
-                <Reveal delay={0.2}>
-                  <div className="space-y-8">
-                    <Label className="text-slate-400 uppercase tracking-[0.3em]">
-                      Themen
-                    </Label>
-                    <div className="flex flex-wrap gap-2">
-                      {allTags.map((tag, index) => (
-                        <button
-                          key={tag}
-                          onClick={() => filterByTag(tag)}
-                          className="text-left group"
-                        >
-                          <Tag tag={tag} index={index} />
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                </Reveal>
-              )}
-            </div>
+        <div className="max-w-[calc(100vw-2rem)] md:max-w-7xl mx-auto space-y-12">
+          {/* Section Header & Filters - Centered & Compact */}
+          <div className="relative z-20 space-y-12 flex flex-col items-center text-center">
+            <SectionHeader
+              title="Alle Artikel"
+              subtitle="Index"
+              align="center"
+              className="py-0 md:py-0"
+            />
+            <Reveal width="100%" className="max-w-2xl mx-auto">
+              <BlogCommandBar
+                searchQuery={searchQuery}
+                onSearchChange={setSearchQuery}
+                tags={allTags}
+                activeTags={activeTags}
+                onTagToggle={handleTagToggle}
+              />
+            </Reveal>
           </div>
 
-          {/* Posts area */}
-          <div className="lg:col-span-8 lg:order-1">
-            <div id="posts-container" className="flex flex-col gap-12">
-              {filteredPosts.length === 0 ? (
-                <div className="py-24 text-center border border-dashed border-slate-200 rounded-3xl">
-                  <p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
-                    Keine Beiträge gefunden.
-                  </p>
-                </div>
-              ) : (
-                filteredPosts.map((post, i) => (
-                  <Reveal key={post.slug} delay={0.1 * i} width="100%">
+          {/* Posts List (Vertical & Minimal) */}
+          <div id="posts-container" className="space-y-12">
+            {postsToShow.length === 0 ? (
+              <div className="py-24 text-center border border-dashed border-slate-200 rounded-3xl bg-white/50">
+                <p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
+                  Keine Beiträge gefunden.
+                </p>
+                <button
+                  onClick={() => {
+                    setSearchQuery("");
+                    setActiveTags([]);
+                  }}
+                  className="mt-4 text-xs font-bold text-slate-900 underline underline-offset-4 hover:text-slate-600"
+                >
+                  Filter zurücksetzen
+                </button>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 gap-6 max-w-3xl mx-auto w-full">
+                {postsToShow.map((post, i) => (
+                  <Reveal key={post.slug} delay={0.05 * (i % 6)} width="100%">
                     <MediumCard post={post} />
                   </Reveal>
-                ))
-              )}
-            </div>
+                ))}
+              </div>
+            )}
+
+            {/* Pagination */}
+            {hasMore && (
+              <div className="flex justify-center pt-8">
+                <Reveal delay={0.1}>
+                  <button
+                    onClick={loadMore}
+                    className="group relative px-8 py-4 bg-white border border-slate-200 text-slate-600 rounded-full overflow-hidden transition-all hover:border-slate-400 hover:text-slate-900 hover:shadow-lg"
+                  >
+                    <span className="relative z-10 font-mono text-xs uppercase tracking-widest flex items-center gap-3">
+                      Mehr laden
+                      <div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors" />
+                      <div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors delay-75" />
+                      <div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors delay-150" />
+                    </span>
+                  </button>
+                </Reveal>
+              </div>
+            )}
           </div>
         </div>
       </Section>