refactor: komplettsanierung

apps/web/app/blog/page.tsx

@@ -9,10 +9,15 @@ 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 { Share2 } from "lucide-react";
+import { ShareModal } from "../../src/components/ShareModal";
+import { useAnalytics } from "../../src/components/analytics/useAnalytics";
 
 export default function BlogPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [activeTags, setActiveTags] = useState<string[]>([]);
+  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
+  const { trackEvent } = useAnalytics();
 
   // Memoize allPosts
   const allPosts = React.useMemo(
@@ -78,21 +83,41 @@ export default function BlogPage() {
     <div className="flex flex-col bg-slate-50/30 overflow-hidden relative min-h-screen">
       <AbstractCircuit />
 
-      <Section
-        effects={<GradientMesh variant="metallic" className="opacity-40" />}
-        className="pb-32 pt-12 md:pt-20"
-        containerVariant="wide"
-      >
-        <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">
+      {/* Header Section */}
+      <header className="relative pt-32 pb-8 md:pt-44 md:pb-12 z-20 overflow-hidden">
+        <GradientMesh
+          variant="metallic"
+          className="opacity-20 absolute inset-0 -z-10"
+        />
+        <div className="narrow-container">
+          <div className="space-y-4 text-center">
+            <Reveal direction="down" delay={0.1}>
+              <div className="flex items-center justify-center gap-4 text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">
+                <div className="w-6 h-px bg-slate-200" />
+                <span>Knowledge Base</span>
+                <div className="w-12 h-px bg-slate-100" />
+              </div>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <div className="flex flex-col items-center gap-6">
+                <h1 className="text-5xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-none">
+                  Alle Artikel<span className="text-slate-300">.</span>
+                </h1>
+                <p className="font-serif italic text-slate-400 text-sm md:text-xl max-w-sm">
+                  Gedanken über Engineering, Design und die Architektur der
+                  Zukunft.
+                </p>
+              </div>
+            </Reveal>
+          </div>
+        </div>
+      </header>
+
+      {/* Sticky Filter Bar */}
+      <div className="sticky top-0 z-40 bg-slate-50/80 backdrop-blur-xl border-y border-slate-200/50 py-4 shadow-sm transition-all duration-300">
+        <div className="narrow-container">
+          <div className="flex flex-col md:flex-row items-center gap-4">
+            <Reveal width="100%" className="flex-1">
               <BlogCommandBar
                 searchQuery={searchQuery}
                 onSearchChange={setSearchQuery}
@@ -101,8 +126,38 @@ export default function BlogPage() {
                 onTagToggle={handleTagToggle}
               />
             </Reveal>
+            <div className="flex-shrink-0 flex items-center gap-2">
+              <button
+                onClick={() => {
+                  setIsShareModalOpen(true);
+                  trackEvent("blog_index_share_opened", {
+                    url: window.location.href,
+                  });
+                }}
+                className="inline-flex items-center gap-2 px-6 py-3 bg-white border border-slate-200 rounded-2xl text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition-all text-sm font-bold shadow-sm"
+                aria-label="Blog teilen"
+              >
+                <Share2 className="w-4 h-4" />
+                <span className="hidden sm:inline">Index teilen</span>
+              </button>
+            </div>
           </div>
+        </div>
+      </div>
 
+      <ShareModal
+        isOpen={isShareModalOpen}
+        onClose={() => setIsShareModalOpen(false)}
+        url={typeof window !== "undefined" ? window.location.href : ""}
+        title="Mintel Knowledge Base - Alle Artikel"
+      />
+
+      <Section
+        className="pb-32 pt-12"
+        containerVariant="narrow"
+        variant="white"
+      >
+        <div className="space-y-12 relative z-10 p-4 md:p-0">
           {/* Posts List (Vertical & Minimal) */}
           <div id="posts-container" className="space-y-12">
             {postsToShow.length === 0 ? (
@@ -123,7 +178,12 @@ export default function BlogPage() {
             ) : (
               <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} width="100%">
+                  <Reveal
+                    key={post.slug}
+                    delay={0.05 * i}
+                    width="100%"
+                    viewport={{ once: true, margin: "20% 0px" }} // Added more margin for better back-navigation detection
+                  >
                     <MediumCard post={post} />
                   </Reveal>
                 ))}