1 files changed, 94 insertions, 0 deletions
diff --git a/src/app/(public)/demos/page.tsx b/src/app/(public)/demos/page.tsx
new file mode 100644
index 0000000..7afee2a
--- /dev/null
+++ b/src/app/(public)/demos/page.tsx
@@ -0,0 +1,94 @@
+import Link from "next/link";
+import { Workflow, Terminal, KeyRound, ShieldCheck } from "lucide-react";
+
+const demos = [
+  {
+    icon: Workflow,
+    title: "Visualiseur OIDC",
+    description:
+      "Animation pas-à-pas des flux OIDC : Authorization Code, PKCE, Client Credentials. Comprenez chaque échange entre le client, l'IdP et le resource server.",
+    href: "/demos/oidc-flow",
+    status: "Bientôt disponible",
+  },
+  {
+    icon: Terminal,
+    title: "Playground OAuth2",
+    description:
+      "Testez interactivement les requêtes OAuth2. Explorez les scopes, tokens, refresh tokens. Connecté à un vrai serveur Keycloak.",
+    href: "/demos/oauth-playground",
+    status: "Bientôt disponible",
+  },
+  {
+    icon: KeyRound,
+    title: "Décodeur JWT",
+    description:
+      "Décodez et inspectez vos tokens JWT en temps réel. Visualisez le header, le payload et validez la signature.",
+    href: "/demos/token-decoder",
+    status: "Bientôt disponible",
+  },
+  {
+    icon: ShieldCheck,
+    title: "Simulateur Zero Trust",
+    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",
+  },
+];
+
+export default function DemosPage() {
+  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">
+              Démos interactives
+            </h1>
+            <p className="mt-6 text-lg text-cosmos-300">
+              Explorez les concepts de sécurité et d&apos;IAM à travers des
+              outils interactifs. Apprenez en pratiquant.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-20">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {demos.map((demo) => {
+              const Icon = demo.icon;
+              return (
+                <div
+                  key={demo.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="flex items-start justify-between mb-6">
+                    <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>
+                  </div>
+                  <h3 className="text-xl font-semibold text-cosmos-900">
+                    {demo.title}
+                  </h3>
+                  <p className="mt-3 text-sm text-muted leading-relaxed">
+                    {demo.description}
+                  </p>
+                  <Link
+                    href={demo.href}
+                    className="mt-6 inline-flex items-center text-sm font-semibold text-cosmos-700 hover:text-kultrun-700 transition-colors"
+                  >
+                    Explorer la démo &rarr;
+                  </Link>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}