Initial commit: spreewaldzeit + Dockerfile for Coolify (Next.js + Prisma/SQLite)

components/layout/Header.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { href: "/#wohnungen", label: "Wohnungen" },
+  { href: "/#umgebung", label: "Umgebung" },
+  { href: "/anfrage", label: "Anfrage" },
+];
+
+export function Header() {
+  const [scrolled, setScrolled] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const pathname = usePathname();
+  const isHome = pathname === "/";
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 12);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  // On non-home pages the header is always opaque
+  const transparent = isHome && !scrolled;
+
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname]);
+
+  if (pathname?.startsWith("/admin")) return null;
+
+  return (
+    <header
+      className={cn(
+        "fixed top-0 left-0 right-0 z-40 transition-all duration-300",
+        transparent
+          ? "bg-transparent"
+          : "bg-parchment/95 backdrop-blur-md border-b border-ink/8 shadow-[0_1px_12px_rgba(28,38,32,0.06)]"
+      )}
+    >
+      <div className="container flex items-center justify-between py-5 md:py-6">
+        <Link href="/" className="flex items-baseline gap-2.5 group">
+          <span className={cn(
+            "font-display text-2xl md:text-[1.7rem] tracking-tight leading-none transition-colors duration-200",
+            transparent ? "text-parchment group-hover:text-moss-200" : "text-ink group-hover:text-moss-700"
+          )}>
+            Spreewaldzeit
+          </span>
+          <span
+            className="hidden sm:inline-block h-1.5 w-1.5 rounded-full bg-moss-400 opacity-70 group-hover:opacity-100 group-hover:scale-110 transition-all duration-200"
+            aria-hidden="true"
+          />
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-9 text-sm">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "link-underline transition-colors duration-200",
+                transparent ? "text-parchment/70 hover:text-parchment" : "text-ink/70 hover:text-ink"
+              )}
+            >
+              {item.label}
+            </Link>
+          ))}
+          <Link
+            href="/anfrage"
+            className={cn(
+              "inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm transition-colors",
+              transparent
+                ? "bg-parchment/15 text-parchment border border-parchment/25 hover:bg-parchment/25"
+                : "bg-ink text-parchment hover:bg-moss-700"
+            )}
+          >
+            Jetzt anfragen
+            <span aria-hidden="true">→</span>
+          </Link>
+        </nav>
+
+        <button
+          className="md:hidden p-2 -mr-2 rounded-sm transition"
+          onClick={() => setMobileOpen((v) => !v)}
+          aria-label={mobileOpen ? "Menü schließen" : "Menü öffnen"}
+          aria-expanded={mobileOpen}
+        >
+          <span className="relative block w-6 h-[2px]">
+            <span
+              className={cn(
+                "absolute inset-x-0 h-[2px] transition-all duration-300",
+                transparent ? "bg-parchment" : "bg-ink",
+                mobileOpen ? "top-0 rotate-45" : "-top-2"
+              )}
+            />
+            <span
+              className={cn(
+                "absolute inset-x-0 h-[2px] top-0 transition-opacity",
+                transparent ? "bg-parchment" : "bg-ink",
+                mobileOpen && "opacity-0"
+              )}
+            />
+            <span
+              className={cn(
+                "absolute inset-x-0 h-[2px] transition-all duration-300",
+                transparent ? "bg-parchment" : "bg-ink",
+                mobileOpen ? "top-0 -rotate-45" : "top-2"
+              )}
+            />
+          </span>
+        </button>
+      </div>
+
+      {/* Mobile menu */}
+      <div
+        className={cn(
+          "md:hidden overflow-hidden border-t border-ink/8 bg-parchment/95 backdrop-blur-md transition-[max-height,opacity] duration-300",
+          mobileOpen ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0"
+        )}
+      >
+        <nav className="container flex flex-col py-5 gap-1">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className="py-3 text-lg font-display hover:text-moss-600 transition-colors"
+            >
+              {item.label}
+            </Link>
+          ))}
+          <Link
+            href="/anfrage"
+            className="mt-3 inline-flex items-center justify-center bg-ink text-parchment px-5 py-3 rounded-full text-sm hover:bg-moss-700 transition-colors"
+          >
+            Jetzt anfragen →
+          </Link>
+        </nav>
+      </div>
+    </header>
+  );
+}