initial commit

components/Header.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Sparkles } from "lucide-react";
+
+export default function Header() {
+  return (
+    <header className="text-center mb-8 space-y-4 relative">
+
+      {/* 🔗 About + Privacy Links oben rechts (aktuell vollständig versteckt) */}
+      <div
+        className="fixed top-4 right-4 z-50 flex gap-6 text-sm"
+        aria-hidden="true"
+        style={{ display: "none" }} // 🔧 Sichtbar machen = einfach löschen
+      >
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            document.getElementById("about")?.scrollIntoView({ behavior: "smooth" });
+            window.history.replaceState(null, '', window.location.pathname);
+          }}
+          className="text-white hover:underline cursor-pointer"
+        >
+          About
+        </a>
+
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            document.getElementById("privacy")?.scrollIntoView({ behavior: "smooth" });
+            window.history.replaceState(null, '', window.location.pathname);
+          }}
+          className="text-white hover:underline cursor-pointer"
+        >
+          Privacy
+        </a>
+      </div>
+
+      {/* 🔥 Logo + Titel */}
+      <div className="flex items-center justify-center gap-3 mb-4 mt-[250px]">
+        <Sparkles className="w-8 h-8 text-yellow-300 animate-pulse" />
+        <h1 className="text-4xl md:text-5xl font-black text-white tracking-tight">
+          FancyText
+        </h1>
+        <Sparkles className="w-8 h-8 text-yellow-300 animate-pulse" />
+      </div>
+
+      <p className="text-xl text-white/90 font-medium mb-2">
+        Coole Schriftarten für Instagram & TikTok
+      </p>
+
+      <p className="text-white/80 mb-6">
+        30+ Fancy Fonts zum Kopieren – perfekt für deine Bio ✨
+      </p>
+      
+    </header>
+  );
+}