refactor: komplettsanierung

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

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { notFound } from "next/navigation";
 import { blogPosts } from "../../../src/data/blogPosts";
-import { PageHeader } from "../../../src/components/PageHeader";
+import { BlogPostHeader } from "../../../src/components/blog/BlogPostHeader";
 import { Section } from "../../../src/components/Section";
 import { Reveal } from "../../../src/components/Reveal";
 import { BlogPostClient } from "../../../src/components/BlogPostClient";
 import { PostComponents } from "../../../src/components/blog/posts";
-import { Card } from "../../../src/components/Layout";
+import { TextSelectionShare } from "../../../src/components/TextSelectionShare";
+import { BlogPostStickyBar } from "../../../src/components/blog/BlogPostStickyBar";
 
 export async function generateStaticParams() {
   return blogPosts.map((post) => ({
@@ -41,71 +42,50 @@ export default async function BlogPostPage({
     <div className="flex flex-col gap-8 md:gap-12 py-8 md:py-24 overflow-hidden">
       <BlogPostClient readingTime={readingTime} title={post.title} />
 
-      <PageHeader
-        variant="blog"
+      <BlogPostHeader
         title={post.title}
         description={post.description}
-        backgroundSymbol={slug.charAt(0).toUpperCase()}
+        date={formattedDate}
+        readingTime={readingTime}
+        slug={slug}
       />
 
       <main id="post-content">
+        {/* Sticky Progress Bar */}
+        <BlogPostStickyBar
+          title={post.title}
+          url={`https://mintel.me/blog/${slug}`}
+        />
+
         <Section containerVariant="wide" className="pt-0 md:pt-0">
-          <div className="max-w-5xl mx-auto px-0 sm:px-4 md:px-0">
+          <div className="max-w-3xl mx-auto px-5 md:px-0">
             <Reveal delay={0.4} width="100%">
-              <Card
-                variant="glass"
-                techBorder
-                className="relative overflow-hidden rounded-none sm:rounded-3xl"
-              >
-                {/* 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]" />
-
-                <div className="relative z-10 px-5 py-10 md:px-16 md:py-20">
-                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[9px] md:text-[10px] font-bold text-slate-400 mb-10 md: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 sm:gap-6">
-                      <div className="flex items-center gap-2">
-                        <span className="text-slate-200 hidden sm:inline">
-                          |
-                        </span>
-                        <span>{readingTime} min Lesezeit</span>
-                      </div>
-                      <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-10 md:mb-12">
-                      {post.tags.map((tag, index) => (
-                        <span
-                          key={tag}
-                          className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md: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>
-                  )}
+              {post.tags && post.tags.length > 0 && (
+                <div className="flex flex-wrap gap-2 mb-10 md:mb-12">
+                  {post.tags.map((tag, index) => (
+                    <span
+                      key={tag}
+                      className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
+                    >
+                      #{tag}
+                    </span>
+                  ))}
                 </div>
-              </Card>
+              )}
+
+              {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>
+              )}
             </Reveal>
           </div>
         </Section>
       </main>
+
+      <TextSelectionShare />
     </div>
   );
 }

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>
                 ))}