1 files changed, 148 insertions, 0 deletions
diff --git a/src/app/(public)/services/page.tsx b/src/app/(public)/services/page.tsx
new file mode 100644
index 0000000..424e939
--- /dev/null
+++ b/src/app/(public)/services/page.tsx
@@ -0,0 +1,148 @@
+import {
+  Search,
+  Key,
+  ShieldCheck,
+  Server,
+  ArrowRight,
+} from "lucide-react";
+import Link from "next/link";
+
+const services = [
+  {
+    id: "audit",
+    icon: Search,
+    title: "Audit IAM & Sécurité",
+    description:
+      "Évaluation complète de votre posture de sécurité des identités. Analyse des configurations AD, Entra ID, politiques d'accès, et recommandations priorisées.",
+    deliverables: [
+      "Rapport d'audit détaillé",
+      "Matrice de risques priorisée",
+      "Plan de remédiation",
+    ],
+  },
+  {
+    id: "oidc",
+    icon: Key,
+    title: "Intégration OIDC / OAuth2",
+    description:
+      "Conception et implémentation de flux d'authentification modernes. Intégration d'applications existantes avec OIDC, migration depuis SAML, mise en place de SSO.",
+    deliverables: [
+      "Architecture d'authentification",
+      "Implémentation et tests",
+      "Documentation technique",
+    ],
+  },
+  {
+    id: "zero-trust",
+    icon: ShieldCheck,
+    title: "Stratégie Zero Trust",
+    description:
+      "Définition et déploiement d'une architecture Zero Trust adaptée à votre contexte. Conditional Access, micro-segmentation, vérification continue.",
+    deliverables: [
+      "Feuille de route Zero Trust",
+      "Configuration Conditional Access",
+      "Formation des équipes",
+    ],
+  },
+  {
+    id: "ad-entra",
+    icon: Server,
+    title: "AD & Entra ID",
+    description:
+      "Administration avancée, durcissement et migration Active Directory. Configuration Entra ID, synchronisation hybride, PIM/PAM.",
+    deliverables: [
+      "Durcissement AD (tiering model)",
+      "Configuration Entra ID",
+      "Migration et synchronisation",
+    ],
+  },
+];
+
+export default function ServicesPage() {
+  return (
+    <>
+      <section className="bg-cosmos-900 py-16 sm:py-20">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-3xl font-bold tracking-tight text-nieve sm:text-5xl">
+              Services de consulting
+            </h1>
+            <p className="mt-6 text-lg text-cosmos-300">
+              Des mandats ciblés pour sécuriser vos identités et vos accès,
+              de l&apos;audit stratégique à l&apos;implémentation technique.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-20">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="space-y-16">
+            {services.map((service, index) => {
+              const Icon = service.icon;
+              const isEven = index % 2 === 0;
+              return (
+                <div
+                  key={service.id}
+                  id={service.id}
+                  className={`flex flex-col lg:flex-row gap-8 lg:gap-16 items-start ${
+                    isEven ? "" : "lg:flex-row-reverse"
+                  }`}
+                >
+                  <div className="flex-1">
+                    <div className="flex items-center gap-4 mb-4">
+                      <div className="w-12 h-12 rounded-lg bg-cosmos-900 flex items-center justify-center">
+                        <Icon className="w-6 h-6 text-araucaria-400" />
+                      </div>
+                      <h2 className="text-2xl font-bold text-cosmos-900">
+                        {service.title}
+                      </h2>
+                    </div>
+                    <p className="text-muted leading-relaxed">
+                      {service.description}
+                    </p>
+                  </div>
+                  <div className="flex-1 w-full lg:max-w-sm">
+                    <div className="rounded-xl border border-border bg-pewma p-6">
+                      <h3 className="text-sm font-semibold text-cosmos-700 uppercase tracking-wider mb-4">
+                        Livrables
+                      </h3>
+                      <ul className="space-y-3">
+                        {service.deliverables.map((item) => (
+                          <li
+                            key={item}
+                            className="flex items-start gap-3 text-sm text-tierra-700"
+                          >
+                            <ArrowRight className="w-4 h-4 text-kultrun-700 mt-0.5 shrink-0" />
+                            {item}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-pewma py-16 border-t border-border">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8 text-center">
+          <h2 className="text-2xl font-bold text-cosmos-900">
+            Besoin d&apos;un mandat sur mesure ?
+          </h2>
+          <p className="mt-4 text-muted">
+            Chaque organisation est unique. Discutons de vos besoins spécifiques.
+          </p>
+          <Link
+            href="/contact"
+            className="mt-8 inline-flex items-center gap-2 rounded-lg bg-kultrun-700 px-8 py-3 text-sm font-semibold text-nieve hover:bg-kultrun-600 transition-colors"
+          >
+            Discuter de mon projet
+          </Link>
+        </div>
+      </section>
+    </>
+  );
+}