refactor: komplettsanierung

apps/web/src/components/blog/BlogPostHeader.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { Reveal } from "../Reveal";
+import { Clock, Calendar, ArrowLeft } from "lucide-react";
+
+interface BlogPostHeaderProps {
+  title: string;
+  description: string;
+  date: string;
+  readingTime: number;
+  slug: string;
+}
+
+export const BlogPostHeader: React.FC<BlogPostHeaderProps> = ({
+  title,
+  description,
+  date,
+  readingTime,
+  slug,
+}) => {
+  return (
+    <header className="pt-32 pb-8 md:pt-40 md:pb-12 max-w-4xl mx-auto px-5 md:px-0">
+      <div className="space-y-8 md:space-y-10">
+        <Reveal>
+          <Link
+            href="/blog"
+            className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors mb-8 group"
+          >
+            <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
+            Zurück zur Übersicht
+          </Link>
+          <div className="space-y-6">
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-slate-900 tracking-tighter leading-[1.1]">
+              {title}
+            </h1>
+            <p className="font-serif italic text-slate-500 text-xl md:text-2xl leading-relaxed max-w-2xl">
+              {description}
+            </p>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.2}>
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 py-6 border-y border-slate-100">
+            <div className="flex items-center gap-6 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">
+              <div className="flex items-center gap-2">
+                <Calendar className="w-3 h-3 text-slate-300" />
+                <time dateTime={date}>{date}</time>
+              </div>
+              <div className="flex items-center gap-2">
+                <Clock className="w-3 h-3 text-slate-300" />
+                <span>{readingTime} min Lesezeit</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
+                {slug?.substring(0, 4).toUpperCase() || "BLOG"}-
+                {slug
+                  ? slug
+                      .split("")
+                      .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+                      .toString(16)
+                      .toUpperCase()
+                      .padStart(4, "0")
+                  : "0000"}
+              </span>
+              <span
+                className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"
+                title="System Live"
+              />
+            </div>
+          </div>
+        </Reveal>
+      </div>
+    </header>
+  );
+};