2 files changed, 48 insertions, 4 deletions
diff --git a/src/app/(public)/demos/page.tsx b/src/app/(public)/demos/page.tsx
index 7afee2a..3189e2d 100644
--- a/src/app/(public)/demos/page.tsx
+++ b/src/app/(public)/demos/page.tsx
@@ -32,7 +32,6 @@ const demos = [
     description:
       "Visualisation interactive des couches de sécurité Zero Trust. Explorez les différentes stratégies d'implémentation.",
     href: "/demos/zero-trust",
-    status: "Bientôt disponible",
   },
 ];
 
@@ -67,9 +66,11 @@ export default function DemosPage() {
                     <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>
-                    <span className="px-3 py-1 text-xs font-medium bg-araucaria-50 text-araucaria-700 rounded-full border border-araucaria-200">
-                      {demo.status}
-                    </span>
+                    {demo.status ? (
+                      <span className="px-3 py-1 text-xs font-medium bg-araucaria-50 text-araucaria-700 rounded-full border border-araucaria-200">
+                        {demo.status}
+                      </span>
+                    ) : null}
                   </div>
                   <h3 className="text-xl font-semibold text-cosmos-900">
                     {demo.title}
diff --git a/src/app/(public)/demos/zero-trust/page.tsx b/src/app/(public)/demos/zero-trust/page.tsx
new file mode 100644
index 0000000..d99f732
--- /dev/null
+++ b/src/app/(public)/demos/zero-trust/page.tsx
@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import dynamic from "next/dynamic";
+
+const ZeroTrustScenarioViewer = dynamic(
+  () =>
+    import("@/components/demos/zero-trust/ZeroTrustScenarioViewer").then(
+      (m) => m.ZeroTrustScenarioViewer,
+    ),
+  { ssr: false },
+);
+
+export const metadata: Metadata = {
+  title: "Simulateur Zero Trust | Der-topogo",
+  description:
+    "Visualisez des scénarios de sécurité Zero Trust : flux de données, décisions de politique, micro-segmentation et bonnes pratiques.",
+};
+
+export default function ZeroTrustDemoPage() {
+  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-3xl text-center">
+            <h1 className="text-3xl font-bold tracking-tight text-nieve sm:text-5xl">
+              Simulateur Zero Trust
+            </h1>
+            <p className="mt-6 text-lg text-cosmos-300">
+              Comparez un modèle périmétrique et des approches Zero Trust avec
+              des flux visuels entre identités, appareils, passerelles,
+              applications et données.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-12 sm:py-16">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <ZeroTrustScenarioViewer />
+        </div>
+      </section>
+    </>
+  );
+}