chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
2026-02-05 14:18:51 +01:00
parent 190720ad92
commit 103d71851c
1029 changed files with 13242 additions and 27898 deletions
--- a/apps/web/src/components/Header.tsx
+++ b/apps/web/src/components/Header.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import * as React from 'react';
+
+import IconWhite from '../assets/logo/Icon White Transparent.svg';
+
+export const Header: React.FC = () => {
+  const pathname = usePathname();
+  const [, setIsScrolled] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  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-4 group">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0">
+              <Image
+                src={IconWhite}
+                alt="Marc Mintel Icon"
+                width={32}
+                height={32}
+                className="w-8 h-8"
+              />
+            </div>
+          </div>
+        </Link>
+
+        <nav className="flex items-center gap-8">
+          <Link
+            href="/about"
+            className={`text-xs font-bold uppercase tracking-widest transition-colors ${isActive('/about') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
+              }`}
+          >
+            Über mich
+          </Link>
+          <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="/case-studies"
+            className={`text-xs font-bold uppercase tracking-widest transition-colors ${isActive('/case-studies') || pathname?.startsWith('/case-studies/') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
+              }`}
+          >
+            Case Studies
+          </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 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
+          >
+            Anfrage
+          </Link>
+        </nav>
+      </div>
+    </header>
+  );
+};