fancytextstuff/components/Header.jsx

59 lines
1.8 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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