1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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'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 →
</Link>
</div>
);
})}
</div>
</div>
</section>
</>
);
}
|
