50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
export const Header: React.FC = () => {
|
|
const pathname = usePathname();
|
|
|
|
const isActive = (path: string) => pathname === path;
|
|
|
|
return (
|
|
<header className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-50">
|
|
<div className="narrow-container py-4 flex items-center justify-between">
|
|
<Link href="/" className="flex items-center gap-3 group">
|
|
<div className="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center group-hover:bg-slate-800 group-hover:scale-105 transition-all duration-500 shadow-sm">
|
|
<span className="text-white text-lg font-bold">M</span>
|
|
</div>
|
|
<span className="text-slate-900 font-bold tracking-tighter text-2xl group-hover:tracking-tight transition-all duration-500">Marc Mintel</span>
|
|
</Link>
|
|
|
|
<nav className="flex items-center gap-8">
|
|
<Link
|
|
href="/websites"
|
|
className={`text-xs font-bold uppercase tracking-widest transition-colors ${
|
|
isActive('/websites') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
Websites
|
|
</Link>
|
|
<Link
|
|
href="/blog"
|
|
className={`text-xs font-bold uppercase tracking-widest transition-colors ${
|
|
isActive('/blog') || pathname?.startsWith('/blog/') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
Blog
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 transition-all duration-300"
|
|
>
|
|
Anfrage
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|