Initial import: was v0 exportiert hat

components/header.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { Menu, X } from 'lucide-react'
+import { ThemeToggle } from './theme-toggle'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const navLinks = [
+  { href: '#projekte', label: 'Projekte' },
+  { href: '#ueber', label: 'Über' },
+  { href: '#fokus', label: 'Fokus' },
+  { href: '#philosophie', label: 'Philosophie' },
+  { href: '#kontakt', label: 'Kontakt' },
+]
+
+export function Header() {
+  const [isScrolled, setIsScrolled] = useState(false)
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20)
+    }
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return (
+    <header
+      className={cn(
+        'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
+        isScrolled 
+          ? 'bg-background/80 backdrop-blur-md border-b border-border/50' 
+          : 'bg-transparent'
+      )}
+    >
+      <div className="max-w-6xl mx-auto px-6 lg:px-8">
+        <nav className="flex items-center justify-between h-16 lg:h-20">
+          {/* Logo */}
+          <Link 
+            href="/" 
+            className="font-mono text-lg tracking-tight text-foreground hover:text-accent transition-colors"
+          >
+            Jamulix
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+            <ThemeToggle />
+          </div>
+
+          {/* Mobile Menu Button */}
+          <div className="flex items-center gap-2 md:hidden">
+            <ThemeToggle />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="size-9 text-muted-foreground"
+              aria-label={isMobileMenuOpen ? 'Menü schließen' : 'Menü öffnen'}
+            >
+              {isMobileMenuOpen ? <X className="size-5" /> : <Menu className="size-5" />}
+            </Button>
+          </div>
+        </nav>
+
+        {/* Mobile Navigation */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden pb-6 border-b border-border/50">
+            <div className="flex flex-col gap-4">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors py-2"
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}