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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
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'accompagne
les organisations dans leur stratégie de sécurité des identités,
de l'audit à l'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'expertise
</h2>
<p className="mt-4 text-lg text-muted">
Une expertise transversale, du développement à
l'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>
</>
);
}
|
