feat: initial project setup - Next.js 16, Payload CMS v3, palette Mapuche

Next.js 16 App Router + TypeScript + Tailwind CSS v4. Payload CMS v3 with PostgreSQL adapter. Mapuche Corporate palette. Public pages, Docker Compose + Caddy, security middleware.

Co-authored-by: Cursor <cursoragent@cursor.com>

1 files changed, 93 insertions, 0 deletions

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 0000000..01cc271
--- /dev/null
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Menu, X, Shield } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const navigation = [
+  { name: "Accueil", href: "/" },
+  { name: "Services", href: "/services" },
+  { name: "Articles", href: "/articles" },
+  { name: "Démos", href: "/demos" },
+  { name: "À propos", href: "/about" },
+];
+
+export function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-50 bg-cosmos-900/95 backdrop-blur-sm border-b border-cosmos-800">
+      <nav className="mx-auto max-w-7xl px-6 lg:px-8" aria-label="Navigation principale">
+        <div className="flex h-16 items-center justify-between">
+          <Link href="/" className="flex items-center gap-3 group">
+            <div className="w-9 h-9 rounded-lg bg-araucaria-500 flex items-center justify-center group-hover:bg-araucaria-400 transition-colors">
+              <Shield className="w-5 h-5 text-cosmos-950" />
+            </div>
+            <span className="text-lg font-bold text-nieve tracking-tight">
+              Der-topogo
+            </span>
+          </Link>
+
+          <div className="hidden md:flex md:items-center md:gap-1">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                className="px-4 py-2 text-sm font-medium text-cosmos-200 hover:text-nieve hover:bg-cosmos-800 rounded-lg transition-colors"
+              >
+                {item.name}
+              </Link>
+            ))}
+            <Link
+              href="/contact"
+              className="ml-4 px-5 py-2 text-sm font-semibold bg-kultrun-700 text-nieve rounded-lg hover:bg-kultrun-600 transition-colors"
+            >
+              Contact
+            </Link>
+          </div>
+
+          <button
+            type="button"
+            className="md:hidden p-2 text-cosmos-200 hover:text-nieve"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            <span className="sr-only">Ouvrir le menu</span>
+            {mobileMenuOpen ? (
+              <X className="h-6 w-6" />
+            ) : (
+              <Menu className="h-6 w-6" />
+            )}
+          </button>
+        </div>
+
+        <div
+          className={cn(
+            "md:hidden overflow-hidden transition-all duration-300",
+            mobileMenuOpen ? "max-h-96 pb-4" : "max-h-0"
+          )}
+        >
+          <div className="space-y-1 pt-2">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                className="block px-4 py-3 text-base font-medium text-cosmos-200 hover:text-nieve hover:bg-cosmos-800 rounded-lg transition-colors"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                {item.name}
+              </Link>
+            ))}
+            <Link
+              href="/contact"
+              className="block px-4 py-3 text-base font-semibold text-kultrun-300 hover:text-kultrun-200 hover:bg-cosmos-800 rounded-lg transition-colors"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Contact
+            </Link>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+}