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, 174 insertions, 0 deletions

diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
new file mode 100644
index 0000000..36ecee7
--- /dev/null
+++ b/src/app/(public)/page.tsx
@@ -0,0 +1,174 @@
+import Link from "next/link";
+import {
+  Shield,
+  Key,
+  Lock,
+  Network,
+  Server,
+  ArrowRight,
+  CheckCircle,
+} from "lucide-react";
+
+const expertises = [
+  {
+    icon: Key,
+    title: "OIDC & OAuth2",
+    description:
+      "Intégration et sécurisation des flux d'authentification. Authorization Code, PKCE, Client Credentials.",
+  },
+  {
+    icon: Shield,
+    title: "Zero Trust",
+    description:
+      "Architecture Zero Trust de bout en bout. Never trust, always verify. Micro-segmentation et contrôle d'accès continu.",
+  },
+  {
+    icon: Lock,
+    title: "Active Directory & Entra ID",
+    description:
+      "Administration, durcissement et migration AD. Configuration Entra ID, Conditional Access, PIM.",
+  },
+  {
+    icon: Network,
+    title: "IAM & Gouvernance",
+    description:
+      "Stratégie IAM complète. Gestion des identités, provisioning, RBAC/ABAC, audit et conformité.",
+  },
+  {
+    icon: Server,
+    title: "Infrastructure & DevSecOps",
+    description:
+      "Sécurisation Linux & Windows. Automatisation, durcissement, monitoring sécurité.",
+  },
+];
+
+const highlights = [
+  "Expert senior avec expérience en développement, systèmes et sécurité",
+  "Maîtrise des environnements Open Source et Windows",
+  "Approche pragmatique orientée résultats",
+  "Accompagnement de la stratégie à l'implémentation",
+];
+
+export default function HomePage() {
+  return (
+    <>
+      {/* Hero */}
+      <section className="relative overflow-hidden bg-cosmos-900 py-24 sm:py-32">
+        <div className="absolute inset-0 opacity-10">
+          <div
+            className="absolute inset-0"
+            style={{
+              backgroundImage: `radial-gradient(circle at 25% 25%, var(--color-araucaria-500) 1px, transparent 1px),
+                               radial-gradient(circle at 75% 75%, var(--color-kultrun-700) 1px, transparent 1px)`,
+              backgroundSize: "60px 60px",
+            }}
+          />
+        </div>
+        <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-3xl text-center">
+            <p className="text-sm font-semibold text-araucaria-400 uppercase tracking-widest">
+              Consulting IAM & Sécurité
+            </p>
+            <h1 className="mt-4 text-4xl font-bold tracking-tight text-nieve sm:text-6xl">
+              Sécurisez vos identités,
+              <br />
+              <span className="text-araucaria-400">protégez vos accès</span>
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-cosmos-300">
+              Expert senior en Identity & Access Management. J&apos;accompagne
+              les organisations dans leur stratégie de sécurité des identités,
+              de l&apos;audit à l&apos;implémentation.
+            </p>
+            <div className="mt-10 flex items-center justify-center gap-4 flex-wrap">
+              <Link
+                href="/services"
+                className="inline-flex items-center gap-2 rounded-lg bg-kultrun-700 px-6 py-3 text-sm font-semibold text-nieve hover:bg-kultrun-600 transition-colors"
+              >
+                Mes services
+                <ArrowRight className="w-4 h-4" />
+              </Link>
+              <Link
+                href="/demos"
+                className="inline-flex items-center gap-2 rounded-lg border border-cosmos-600 px-6 py-3 text-sm font-semibold text-cosmos-200 hover:bg-cosmos-800 hover:text-nieve transition-colors"
+              >
+                Voir les démos
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Highlights */}
+      <section className="py-12 bg-pewma border-b border-border">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {highlights.map((text) => (
+              <div key={text} className="flex items-start gap-3">
+                <CheckCircle className="w-5 h-5 text-ngunechen-700 mt-0.5 shrink-0" />
+                <p className="text-sm text-tierra-700 font-medium">{text}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Expertises */}
+      <section className="py-20 sm:py-28">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-cosmos-900 sm:text-4xl">
+              Domaines d&apos;expertise
+            </h2>
+            <p className="mt-4 text-lg text-muted">
+              Une expertise transversale, du développement à
+              l&apos;infrastructure, centrée sur la sécurité des identités.
+            </p>
+          </div>
+
+          <div className="mx-auto mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {expertises.map((item) => {
+              const Icon = item.icon;
+              return (
+                <div
+                  key={item.title}
+                  className="group relative rounded-xl border border-border bg-nieve p-8 hover:border-cosmos-300 hover:shadow-lg transition-all duration-300"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-cosmos-900 flex items-center justify-center group-hover:bg-cosmos-800 transition-colors">
+                    <Icon className="w-6 h-6 text-araucaria-400" />
+                  </div>
+                  <h3 className="mt-6 text-lg font-semibold text-cosmos-900">
+                    {item.title}
+                  </h3>
+                  <p className="mt-2 text-sm text-muted leading-relaxed">
+                    {item.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="bg-cosmos-900 py-16">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-2xl font-bold text-nieve sm:text-3xl">
+              Un projet de sécurisation ?
+            </h2>
+            <p className="mt-4 text-cosmos-300">
+              Discutons de vos besoins en IAM et sécurité informatique.
+            </p>
+            <Link
+              href="/contact"
+              className="mt-8 inline-flex items-center gap-2 rounded-lg bg-araucaria-500 px-8 py-3 text-sm font-semibold text-cosmos-950 hover:bg-araucaria-400 transition-colors"
+            >
+              Prendre contact
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}