117 lines
4.2 KiB
TypeScript
117 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import Logo from "./Logo";
|
|
import ThemeToggle from "./ThemeToggle";
|
|
|
|
const navLinks = [
|
|
{ label: "Services", href: "/#services" },
|
|
{ label: "Pakete & Preise", href: "/pakete" },
|
|
{ label: "Technologien", href: "/#technologies" },
|
|
{ label: "Datenschutz", href: "/#datensouveraenitaet" },
|
|
{ label: "Über uns", href: "/#about" },
|
|
{ label: "Kontakt", href: "/#contact" },
|
|
];
|
|
|
|
export default function Header() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 20);
|
|
window.addEventListener("scroll", onScroll);
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
scrolled
|
|
? "bg-white/95 dark:bg-[#111925]/95 backdrop-blur-md border-b border-slate-200 dark:border-gray-800"
|
|
: "bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-3 group">
|
|
<Logo className="h-8 w-auto" />
|
|
<div className="flex flex-col leading-tight">
|
|
<span className="font-black text-slate-900 dark:text-white text-base tracking-wider uppercase">
|
|
MBO-<span className="text-gradient">TECH-IT</span>
|
|
</span>
|
|
<span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block">
|
|
Digital Denken. Lokal Handeln.
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Desktop Nav */}
|
|
<nav className="hidden md:flex items-center gap-6">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href="/#contact"
|
|
className="btn-nav"
|
|
>
|
|
Jetzt anfragen
|
|
</Link>
|
|
<ThemeToggle />
|
|
</nav>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="md:hidden text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
aria-label="Menu"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
{menuOpen ? (
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
) : (
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{menuOpen && (
|
|
<div className="md:hidden bg-white/98 dark:bg-[#111925]/98 backdrop-blur-md border-t border-slate-200 dark:border-gray-800">
|
|
<nav className="px-4 py-4 flex flex-col gap-4">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium py-1"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href="/#contact"
|
|
className="px-4 py-2 rounded-lg bg-orange-500 hover:bg-orange-400 text-white text-sm font-bold text-center mt-2 transition-colors"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
Jetzt anfragen
|
|
</Link>
|
|
<div className="flex justify-end pt-1">
|
|
<ThemeToggle />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|