design

src/components/Header.tsx

@@ -1,7 +1,14 @@
-import React from 'react';
+'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">
       <div className="max-w-4xl mx-auto px-6 py-8 flex items-center justify-between">
@@ -13,18 +20,28 @@ export const Header: React.FC = () => {
         </Link>
         
         <nav className="flex items-center gap-8">
-          <Link href="/websites" className="text-xs font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors">
+          <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 text-slate-400 hover:text-slate-900 transition-colors">
+          <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>
-          <a 
-            href="mailto:marc@mintel.me" 
-            className="text-xs font-bold uppercase tracking-widest text-slate-900 hover:text-slate-600 transition-colors"
+          <Link
+            href="/contact"
+            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 bg-white border border-slate-200 rounded-full px-5 py-2.5 hover:border-slate-900 hover:shadow-sm transition-all duration-300"
           >
-            Kontakt
-          </a>
+            Anfrage
+          </Link>
         </nav>
       </div>
     </header>