David/veylant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix docker compose

Browse Source
This commit is contained in:
David 2026-02-25 21:06:53 +01:00
parent 6b1ba49922
commit 4880d1dd87
11 changed files with 1788 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
CLAUDE.md
View File

@ -64,11 +64,15 @@ internal/ # All Go modules (see Architecture above for full list)
gen/ # Generated Go gRPC stubs (buf generate → never edit manually) gen/ # Generated Go gRPC stubs (buf generate → never edit manually)
services/pii/ # Python FastAPI + gRPC PII detection service services/pii/ # Python FastAPI + gRPC PII detection service
gen/pii/v1/ # Generated Python proto stubs (run `make proto` first) gen/pii/v1/ # Generated Python proto stubs (run `make proto` first)
tests/ # pytest unit tests (test_regex.py, test_pipeline.py, test_pseudo.py)
proto/pii/v1/ # gRPC .proto definitions proto/pii/v1/ # gRPC .proto definitions
migrations/ # golang-migrate SQL files (up/down pairs) migrations/ # golang-migrate SQL files (up/down pairs)
clickhouse/ # ClickHouse DDL applied at startup via ApplyDDL() clickhouse/ # ClickHouse DDL applied at startup via ApplyDDL()
web/ # React frontend (Vite, src/pages, src/components, src/api) web/ # React frontend (Vite, src/pages, src/components, src/api)
deploy/ # Helm charts for Kubernetes test/ # Integration tests (test/integration/, //go:build integration) + k6 load tests (test/k6/)
deploy/ # Helm, Kubernetes manifests, Terraform (EKS), Prometheus/Grafana, alertmanager
clickhouse/ # ClickHouse config overrides for Docker (e.g. listen-ipv4.xml — forces IPv4)
docker-compose.yml # Full local dev stack (9 services)
config.yaml # Local dev config (overridden by VEYLANT_* env vars) config.yaml # Local dev config (overridden by VEYLANT_* env vars)
``` ```
@ -114,7 +118,7 @@ go test -run TestName ./internal/module/
**Run a single Python test:** **Run a single Python test:**
```bash ```bash
pytest services/pii/test_file.py::test_function pytest services/pii/tests/test_file.py::test_function
``` ```
**Proto prerequisite:** Run `make proto` before starting the PII service if `gen/` or `services/pii/gen/` is missing — the service will start but reject all gRPC requests otherwise. **Proto prerequisite:** Run `make proto` before starting the PII service if `gen/` or `services/pii/gen/` is missing — the service will start but reject all gRPC requests otherwise.
@ -143,6 +147,8 @@ In production (`server.env=production`), any of the above causes a fatal startup
**Immutable audit logs**: ClickHouse is append-only — no DELETE operations. Retention via TTL policies only. ClickHouse DDL is applied idempotently at startup from `migrations/clickhouse/`. **Immutable audit logs**: ClickHouse is append-only — no DELETE operations. Retention via TTL policies only. ClickHouse DDL is applied idempotently at startup from `migrations/clickhouse/`.
**Proxy Docker image**: Uses `distroless/static` — no shell, no `wget`. `CMD-SHELL` health checks in docker-compose cannot work for the proxy container; dependents use `condition: service_started` instead.
**Routing rule evaluation**: Rules are sorted ascending by `priority` (lower = evaluated first). All conditions within a rule are AND-joined. An empty `Conditions` slice is a catch-all. First match wins. Supported condition fields: `user.role`, `user.department`, `request.sensitivity`, `request.model`, `request.use_case`, `request.token_estimate`. Operators: `eq`, `neq`, `in`, `nin`, `gte`, `lte`, `contains`, `matches`. **Routing rule evaluation**: Rules are sorted ascending by `priority` (lower = evaluated first). All conditions within a rule are AND-joined. An empty `Conditions` slice is a catch-all. First match wins. Supported condition fields: `user.role`, `user.department`, `request.sensitivity`, `request.model`, `request.use_case`, `request.token_estimate`. Operators: `eq`, `neq`, `in`, `nin`, `gte`, `lte`, `contains`, `matches`.
## Conventions ## Conventions
@ -161,7 +167,7 @@ In production (`server.env=production`), any of the above causes a fatal startup
**OpenAPI docs**: Generated from swaggo annotations — never write API docs by hand. **OpenAPI docs**: Generated from swaggo annotations — never write API docs by hand.
**Testing split**: 70% unit (`testing` + `testify` / `pytest`) · 20% integration (`testcontainers` for PG/ClickHouse/Redis) · 10% E2E (Playwright for UI). Tests are written in parallel with each module, not deferred. **Testing split**: 70% unit (`testing` + `testify` / `pytest`) · 20% integration (`testcontainers` for PG/ClickHouse/Redis, lives in `test/integration/`, requires `//go:build integration` tag) · 10% E2E (Playwright for UI). Tests are written in parallel with each module, not deferred.
**CI coverage thresholds**: Go internal packages must maintain ≥80% coverage; Python PII service ≥75%. NER tests (`test_ner.py`) are excluded from CI because `fr_core_news_lg` (~600MB) is only available in the Docker build. **CI coverage thresholds**: Go internal packages must maintain ≥80% coverage; Python PII service ≥75%. NER tests (`test_ner.py`) are excluded from CI because `fr_core_news_lg` (~600MB) is only available in the Docker build.

1
cmd/proxy/main.go
View File

@ -283,6 +283,7 @@ func main() {
r.Use(metrics.Middleware("openai")) r.Use(metrics.Middleware("openai"))
} }
r.Get("/", health.LandingHandler)
r.Get("/healthz", health.Handler) r.Get("/healthz", health.Handler)
// OpenAPI documentation (E11-02). // OpenAPI documentation (E11-02).

4
deploy/clickhouse/listen-ipv4.xml Normal file
View File

@ -0,0 +1,4 @@
<clickhouse>
<!-- Force IPv4 only — IPv6 is unavailable in this Docker environment -->
<listen_host>0.0.0.0</listen_host>
</clickhouse>

15
docker-compose.yml
View File

@ -51,8 +51,9 @@ services:
- "9000:9000" # Native TCP (used by Go driver) - "9000:9000" # Native TCP (used by Go driver)
volumes: volumes:
- clickhouse_data:/var/lib/clickhouse - clickhouse_data:/var/lib/clickhouse
- ./deploy/clickhouse/listen-ipv4.xml:/etc/clickhouse-server/config.d/listen-ipv4.xml:ro
healthcheck: healthcheck:
test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider http://localhost:8123/ping || exit 1"] test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider http://127.0.0.1:8123/ping || exit 1"]
interval: 5s interval: 5s
timeout: 5s timeout: 5s
retries: 20 retries: 20
@ -133,12 +134,8 @@ services:
condition: service_healthy condition: service_healthy
clickhouse: clickhouse:
condition: service_healthy condition: service_healthy
healthcheck: # distroless/static has no shell or wget, so Docker health checks via CMD-SHELL
test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider http://localhost:8090/healthz || exit 1"] # cannot run. The proxy exposes /healthz at :8090 — healthy when it starts.
interval: 5s
timeout: 3s
retries: 10
start_period: 5s
# ───────────────────────────────────────────── # ─────────────────────────────────────────────
# PII detection service — Python (Sprint 3: full pipeline) # PII detection service — Python (Sprint 3: full pipeline)
@ -190,7 +187,7 @@ services:
- "--web.console.templates=/etc/prometheus/consoles" - "--web.console.templates=/etc/prometheus/consoles"
depends_on: depends_on:
proxy: proxy:
condition: service_healthy condition: service_started
# ───────────────────────────────────────────── # ─────────────────────────────────────────────
# Grafana — metrics visualisation # Grafana — metrics visualisation
@ -228,7 +225,7 @@ services:
VITE_KEYCLOAK_URL: "http://localhost:8080/realms/veylant" VITE_KEYCLOAK_URL: "http://localhost:8080/realms/veylant"
depends_on: depends_on:
proxy: proxy:
condition: service_healthy condition: service_started
volumes: volumes:
postgres_data: postgres_data:

991
internal/health/landing.go Normal file
View File

@ -0,0 +1,991 @@
package health
import "net/http"
// LandingHandler serves the Veylant IA marketing landing page at GET /.
func LandingHandler(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "text/html; charset=utf-8")
w.Header().Set("Content-Security-Policy",
"default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'")
w.WriteHeader(http.StatusOK)
_, _ = w.Write([]byte(landingHTML))
}
const landingHTML = `<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Veylant IA — Gouvernance IA pour l'entreprise</title>
<meta name="description" content="Interceptez, anonymisez et gouvernez tous vos echanges avec les LLMs. RGPD natif, EU AI Act ready, zero Shadow AI.">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--brand: #4f46e5;
--brand-dark: #3730a3;
--brand-light: #818cf8;
--accent: #06b6d4;
--bg: #0a0f1e;
--bg-card: rgba(255,255,255,0.04);
--bg-card-hover:rgba(255,255,255,0.07);
--border: rgba(255,255,255,0.08);
--text: #f1f5f9;
--muted: #94a3b8;
--dim: #64748b;
--green: #10b981;
--red: #ef4444;
--r: 12px;
--rl: 20px;
}
html { scroll-behavior: smooth; }
body {
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
/* ── BACKGROUND ── */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse at 15% 50%, rgba(79,70,229,.14) 0%, transparent 55%),
radial-gradient(ellipse at 85% 15%, rgba(6,182,212,.09) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* ── NAV ── */
nav {
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
background: rgba(10,15,30,.85);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
height: 64px;
display: flex;
align-items: center;
gap: 2rem;
}
.logo {
font-size: 1.25rem;
font-weight: 800;
color: var(--text);
text-decoration: none;
letter-spacing: -.5px;
flex-shrink: 0;
}
.logo span { color: var(--brand-light); }
.nav-links {
display: flex;
gap: 1.75rem;
list-style: none;
margin-left: auto;
}
.nav-links a {
color: var(--muted);
text-decoration: none;
font-size: .875rem;
font-weight: 500;
transition: color .2s;
}
.nav-links a:hover { color: var(--text); }
.nav-cta { margin-left: 1rem; }
/* ── BUTTONS ── */
.btn {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .6rem 1.25rem;
border-radius: 8px;
font-size: .875rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: none;
transition: all .2s;
white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover {
background: #4338ca;
transform: translateY(-1px);
box-shadow: 0 8px 28px rgba(79,70,229,.45);
}
.btn-outline {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.btn-outline:hover {
background: var(--bg-card);
border-color: rgba(255,255,255,.2);
}
.btn-lg { padding: .85rem 2rem; font-size: 1rem; border-radius: 10px; }
/* ── LAYOUT ── */
section { padding: 6rem 1.5rem; position: relative; z-index: 1; }
.container { max-width: 1200px; margin: 0 auto; }
.label {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--brand-light);
background: rgba(79,70,229,.15);
border: 1px solid rgba(79,70,229,.3);
padding: .3rem .85rem;
border-radius: 100px;
margin-bottom: 1.5rem;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -.025em; }
h1 { font-size: clamp(2.4rem,5vw,3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem,3.5vw,2.6rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 600; }
.gradient {
background: linear-gradient(135deg, #a5b4fc 0%, #06b6d4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.muted { color: var(--muted); }
/* ── HERO ── */
.hero {
padding: 7rem 1.5rem 5rem;
position: relative;
z-index: 1;
}
.hero-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-content p {
font-size: 1.1rem;
color: var(--muted);
line-height: 1.75;
margin: 1.25rem 0 2rem;
max-width: 500px;
}
.hero-actions { display: flex; gap: .875rem; flex-wrap: wrap; }
/* Stats row */
.stats {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 1rem;
margin-top: 3.5rem;
padding-top: 2.5rem;
border-top: 1px solid var(--border);
}
.stat { text-align: center; }
.stat-val {
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -.04em;
}
.stat-lbl { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
/* Terminal */
.terminal {
background: #0d1117;
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--rl);
overflow: hidden;
box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
}
.term-header {
background: #161b22;
padding: .7rem 1rem;
display: flex;
align-items: center;
gap: .4rem;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.dot { width:12px; height:12px; border-radius:50%; }
.dr { background:#ff5f57; }
.dy { background:#ffbd2e; }
.dg { background:#28c840; }
.term-title {
margin-left: .5rem;
font-size: .72rem;
color: var(--dim);
font-family: 'SF Mono','Fira Code',monospace;
}
.term-body {
padding: 1.5rem;
font-family: 'SF Mono','Fira Code','Cascadia Code',monospace;
font-size: .76rem;
line-height: 1.9;
}
.tc { color:#6e7681; }
.tk { color:#79c0ff; }
.tv { color:#a5d6ff; }
.tb { color:#818cf8; }
.tg { color:#56d364; }
.ty { color:#e3b341; }
.tre { color:#f85149; }
.td { color:#484f58; }
.ta { color:#fbbf24; background:rgba(251,191,36,.1); padding:0 3px; border-radius:3px; }
/* ── TRUST BAR ── */
.trust {
position: relative;
z-index: 1;
padding: 1.75rem 1.5rem;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: rgba(255,255,255,.015);
}
.trust-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 2.5rem;
flex-wrap: wrap;
justify-content: center;
}
.trust-lbl {
font-size: .72rem;
color: var(--dim);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
}
.providers { display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
.pvd {
display: flex;
align-items: center;
gap: .35rem;
color: var(--dim);
font-size: .82rem;
font-weight: 600;
opacity: .55;
transition: opacity .2s;
}
.pvd:hover { opacity: 1; }
/* ── PROBLEMS ── */
.pb-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.pb-card {
background: rgba(239,68,68,.05);
border: 1px solid rgba(239,68,68,.15);
border-radius: var(--rl);
padding: 2rem;
transition: border-color .3s;
}
.pb-card:hover { border-color: rgba(239,68,68,.35); }
.pb-icon {
width: 46px; height: 46px;
background: rgba(239,68,68,.1);
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
margin-bottom: 1.25rem;
}
.pb-card h3 { margin-bottom: .5rem; }
.pb-card p { color: var(--muted); font-size: .875rem; line-height: 1.65; }
/* ── FEATURES ── */
.ft-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.ft-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 2rem;
transition: all .3s;
position: relative;
overflow: hidden;
}
.ft-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--rl);
background: linear-gradient(135deg, rgba(79,70,229,.08), transparent);
opacity: 0;
transition: opacity .3s;
}
.ft-card:hover {
background: var(--bg-card-hover);
border-color: rgba(129,140,248,.3);
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.ft-card:hover::after { opacity: 1; }
.ft-icon {
width: 46px; height: 46px;
background: rgba(79,70,229,.15);
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
margin-bottom: 1.25rem;
position: relative;
z-index: 1;
}
.ft-card h3 { margin-bottom: .45rem; position: relative; z-index: 1; }
.ft-card p { color: var(--muted); font-size: .875rem; line-height: 1.65; position: relative; z-index: 1; }
.ft-badge {
display: inline-block;
margin-top: .9rem;
font-size: .72rem;
font-weight: 700;
color: var(--brand-light);
background: rgba(79,70,229,.15);
padding: .2rem .65rem;
border-radius: 100px;
position: relative;
z-index: 1;
}
/* ── HOW IT WORKS ── */
.how-bg {
background: rgba(79,70,229,.03);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.steps {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 2rem;
margin-top: 4rem;
position: relative;
}
.steps::before {
content: '';
position: absolute;
top: 27px;
left: calc(16.66% + 27px);
right: calc(16.66% + 27px);
height: 2px;
background: linear-gradient(90deg, var(--brand), var(--accent));
opacity: .25;
}
.step { text-align: center; }
.step-num {
width: 54px; height: 54px;
background: linear-gradient(135deg, var(--brand), var(--accent));
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
font-weight: 800;
color: #fff;
margin: 0 auto 1.5rem;
position: relative;
z-index: 1;
box-shadow: 0 0 0 6px rgba(79,70,229,.15);
}
.step h3 { margin-bottom: .45rem; }
.step p { color: var(--muted); font-size: .875rem; line-height: 1.65; }
.step-code {
margin-top: 1rem;
background: #0d1117;
border: 1px solid var(--border);
border-radius: 8px;
padding: .75rem 1rem;
font-family: 'SF Mono','Fira Code',monospace;
font-size: .7rem;
color: var(--muted);
text-align: left;
line-height: 1.75;
}
.step-code .tg { color: #56d364; }
.step-code .tb { color: #818cf8; }
.step-code .tc { color: #6e7681; }
/* ── SECURITY ── */
.sec-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
margin-top: 3rem;
}
.checks { display: flex; flex-direction: column; gap: 1rem; }
.chk {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
transition: border-color .3s;
}
.chk:hover { border-color: rgba(16,185,129,.25); }
.chk-ico {
width: 36px; height: 36px;
background: rgba(16,185,129,.1);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: .95rem;
}
.chk h4 { font-size: .875rem; margin-bottom: .2rem; }
.chk p { font-size: .8rem; color: var(--muted); line-height: 1.55; }
.comp-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 1rem;
}
.comp-badge {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 1.5rem;
text-align: center;
transition: all .3s;
}
.comp-badge:hover {
background: var(--bg-card-hover);
border-color: rgba(129,140,248,.25);
transform: translateY(-2px);
}
.comp-ico { font-size: 1.9rem; margin-bottom: .75rem; }
.comp-badge h4 { font-size: .875rem; margin-bottom: .2rem; }
.comp-badge p { font-size: .75rem; color: var(--muted); }
/* ── PERSONAS ── */
.prs-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.prs-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 2rem;
transition: all .3s;
}
.prs-card:hover {
background: var(--bg-card-hover);
border-color: rgba(129,140,248,.25);
transform: translateY(-3px);
}
.prs-role {
font-size: .7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--brand-light);
margin-bottom: .2rem;
}
.prs-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 1.1rem; }
.prs-list { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.prs-list li {
font-size: .84rem;
color: var(--muted);
display: flex;
gap: .5rem;
align-items: flex-start;
}
.prs-list li::before { content: '\2192'; color: var(--brand-light); flex-shrink: 0; }
/* ── CTA ── */
.cta-sec {
text-align: center;
background: radial-gradient(ellipse at center, rgba(79,70,229,.14) 0%, transparent 65%);
}
.cta-sec h2 { margin-bottom: 1rem; }
.cta-sec .sub { color: var(--muted); font-size: 1.05rem; margin-bottom: 2.5rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* ── FOOTER ── */
footer {
position: relative;
z-index: 1;
border-top: 1px solid var(--border);
padding: 2.5rem 1.5rem;
}
.foot-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.foot-links { display: flex; gap: 1.5rem; list-style: none; }
.foot-links a {
font-size: .84rem;
color: var(--dim);
text-decoration: none;
transition: color .2s;
}
.foot-links a:hover { color: var(--muted); }
.foot-copy { font-size: .8rem; color: var(--dim); }
/* ── ANIMATIONS ── */
.fu {
opacity: 0;
transform: translateY(22px);
transition: opacity .6s ease, transform .6s ease;
}
.fu.vis { opacity: 1; transform: translateY(0); }
/* ── RESPONSIVE ── */
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; gap: 3rem; }
.hero-visual { display: none; }
.pb-grid, .ft-grid, .prs-grid { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; }
.steps::before { display: none; }
.sec-grid { grid-template-columns: 1fr; }
.stats { grid-template-columns: repeat(2,1fr); }
.nav-links { display: none; }
}
@media (max-width: 580px) {
section { padding: 4rem 1rem; }
.hero { padding: 4rem 1rem 3rem; }
.comp-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<div class="nav-inner">
<a href="/" class="logo">Veylant<span> IA</span></a>
<ul class="nav-links">
<li><a href="#fonctionnalites">Fonctionnalites</a></li>
<li><a href="#securite">Securite</a></li>
<li><a href="#personas">Pour qui</a></li>
<li><a href="/playground">Playground</a></li>
<li><a href="/docs">Docs</a></li>
</ul>
<div class="nav-cta">
<a href="#contact" class="btn btn-primary">Demander une demo</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-grid">
<!-- Left -->
<div class="hero-content fu">
<div class="label">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
Proxy IA d'entreprise
</div>
<h1>L'IA de vos equipes,<br><span class="gradient">enfin sous controle</span></h1>
<p>Veylant intercepte, anonymise et gouverne tous vos echanges LLM en moins de 50 ms. RGPD natif, EU AI Act pret, zero Shadow AI.</p>
<div class="hero-actions">
<a href="#contact" class="btn btn-primary btn-lg">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
Demander une demo
</a>
<a href="/playground" class="btn btn-outline btn-lg">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
Tester le playground
</a>
</div>
<!-- Stats -->
<div class="stats">
<div class="stat">
<div class="stat-val gradient">&lt;50ms</div>
<div class="stat-lbl">Latence pipeline PII</div>
</div>
<div class="stat">
<div class="stat-val gradient">5</div>
<div class="stat-lbl">Providers LLM</div>
</div>
<div class="stat">
<div class="stat-val gradient">0</div>
<div class="stat-lbl">Shadow AI autorise</div>
</div>
<div class="stat">
<div class="stat-val gradient">100%</div>
<div class="stat-lbl">Compatible OpenAI SDK</div>
</div>
</div>
</div>
<!-- Terminal -->
<div class="hero-visual fu" style="animation-delay:.15s">
<div class="terminal">
<div class="term-header">
<div class="dot dr"></div>
<div class="dot dy"></div>
<div class="dot dg"></div>
<span class="term-title">veylant-proxy &mdash; requete interceptee</span>
</div>
<div class="term-body">
<div><span class="tc">// Requete entrante</span></div>
<div><span class="tk">POST</span> <span class="tv">/v1/chat/completions</span></div>
<div><span class="td">tenant:</span> <span class="tb">acme-corp</span> &middot; <span class="td">user:</span> <span class="tb">alice</span></div>
<br>
<div><span class="tc">// Detection PII &mdash; 12ms</span></div>
<div><span class="ty">&#9888;</span> <span class="tk">PERSON</span>&nbsp;&nbsp;&nbsp;&nbsp; <span class="tre">"Marie Dubois"</span> <span class="td">&rarr;</span> <span class="ta">[PERSONNE_1]</span></div>
<div><span class="ty">&#9888;</span> <span class="tk">IBAN</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="tre">"FR76 3000..."</span> <span class="td">&rarr;</span> <span class="ta">[IBAN_1]</span></div>
<div><span class="ty">&#9888;</span> <span class="tk">EMAIL</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="tre">"m.dubois@..."</span> <span class="td">&rarr;</span> <span class="ta">[EMAIL_1]</span></div>
<br>
<div><span class="tc">// Routage intelligent &mdash; regle #3</span></div>
<div><span class="tg">&#10003;</span> provider <span class="tb">azure</span> &middot; model <span class="tb">gpt-4o</span></div>
<div><span class="tg">&#10003;</span> dept <span class="tb">finance</span> &middot; budget OK</div>
<br>
<div><span class="tc">// Log d'audit &mdash; ClickHouse</span></div>
<div><span class="tg">&#10003;</span> <span class="td">tokens:</span> <span class="tv">847 in / 312 out</span></div>
<div><span class="tg">&#10003;</span> <span class="td">cout:</span> <span class="tv">&euro;0.0043</span> <span class="td">impute</span></div>
<div><span class="tg">&#10003;</span> <span class="td">latence totale:</span> <span class="tv">38ms</span> &#10024;</div>
</div>
</div>
</div>
</div>
</section>
<!-- TRUST BAR -->
<div class="trust">
<div class="trust-inner">
<span class="trust-lbl">Compatible avec</span>
<div class="providers">
<div class="pvd">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M22.28 9.82a5.98 5.98 0 0 0-.52-4.91 6.05 6.05 0 0 0-6.51-2.9A6.07 6.07 0 0 0 4.98 4.18a5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.1 5.98 5.98 0 0 0 .51 4.91 6.05 6.05 0 0 0 6.51 2.9A5.98 5.98 0 0 0 13.26 24a6.06 6.06 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.06 6.06 0 0 0-.75-7.07z"/></svg>
OpenAI
</div>
<div class="pvd">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8l4 4-4 4"/></svg>
Anthropic
</div>
<div class="pvd">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h11.4v11.4H0zm12.6 0H24v11.4H12.6zM0 12.6h11.4V24H0zm12.6 0H24V24H12.6z"/></svg>
Azure OpenAI
</div>
<div class="pvd">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
Mistral AI
</div>
<div class="pvd">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
Ollama (on-premise)
</div>
</div>
</div>
</div>
<!-- PROBLEM -->
<section id="probleme">
<div class="container">
<div class="label">Le probleme</div>
<h2>Vos equipes utilisent l'IA.<br>Vous n'en savez rien.</h2>
<p class="muted" style="margin-top:1rem;max-width:560px;line-height:1.7">ChatGPT, Claude, Copilot &mdash; vos collaborateurs contournent les politiques IT. Resultat : donnees sensibles exposees, couts incontroles, conformite compromise.</p>
<div class="pb-grid">
<div class="pb-card fu">
<div class="pb-icon">&#128373;</div>
<h3>Shadow AI</h3>
<p>73 % des entreprises ont des employes utilisant des outils IA non approuves. Donnees clients, contrats, code proprietaire partent vers des serveurs tiers sans votre accord.</p>
</div>
<div class="pb-card fu" style="transition-delay:.08s">
<div class="pb-icon">&#128275;</div>
<h3>Fuites de donnees PII</h3>
<p>Sans filtre, vos prompts contiennent noms, IBAN, emails, numeros de securite sociale. Une seule fuite = violation RGPD notifiable a la CNIL sous 72h.</p>
</div>
<div class="pb-card fu" style="transition-delay:.16s">
<div class="pb-icon">&#128184;</div>
<h3>Couts hors de controle</h3>
<p>Les abonnements proliferent, les tokens s'accumulent. Sans visibilite centralisee, la facture IA gonfle sans correlation avec la valeur produite.</p>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="fonctionnalites" style="border-top:1px solid var(--border)">
<div class="container">
<div class="label">La solution</div>
<h2>Un proxy intelligent entre<br>vos equipes et les LLMs</h2>
<p class="muted" style="margin-top:1rem;max-width:560px;line-height:1.7">Veylant se deploie en 15 minutes sans modifier votre code existant. Il intercepte chaque requete et applique vos politiques en temps reel.</p>
<div class="ft-grid">
<div class="ft-card fu">
<div class="ft-icon">&#128269;</div>
<h3>Anonymisation PII automatique</h3>
<p>3 couches de detection (regex, Presidio NER, validation LLM). Pseudonymisation reversible avec mapping chiffre AES-256-GCM en Redis.</p>
<span class="ft-badge">latence &lt;50ms</span>
</div>
<div class="ft-card fu" style="transition-delay:.06s">
<div class="ft-icon">&#129517;</div>
<h3>Routage intelligent</h3>
<p>Moteur de regles base sur le role, le departement, la sensibilite et le modele demande. Fallback automatique en cas de panne provider.</p>
<span class="ft-badge">circuit breaker integre</span>
</div>
<div class="ft-card fu" style="transition-delay:.12s">
<div class="ft-icon">&#128737;</div>
<h3>RBAC granulaire</h3>
<p>4 roles (admin, manager, user, auditor) avec controle par modele et par departement. Compatible OIDC / Keycloak / SAML 2.0.</p>
<span class="ft-badge">SSO ready</span>
</div>
<div class="ft-card fu" style="transition-delay:.18s">
<div class="ft-icon">&#128203;</div>
<h3>Logs d'audit immuables</h3>
<p>Chaque requete est enregistree dans ClickHouse (append-only). Impossible a modifier, retention configurable, export PDF pour la CNIL.</p>
<span class="ft-badge">RGPD Art. 30</span>
</div>
<div class="ft-card fu" style="transition-delay:.24s">
<div class="ft-icon">&#9878;</div>
<h3>Conformite RGPD &amp; EU AI Act</h3>
<p>Registre de traitement automatique, classification des risques AI Act, rapports PDF telechargeables. DPO-ready des le premier jour.</p>
<span class="ft-badge">EU AI Act ready</span>
</div>
<div class="ft-card fu" style="transition-delay:.30s">
<div class="ft-icon">&#128202;</div>
<h3>Controle des couts</h3>
<p>Suivi des tokens par tenant, utilisateur et departement. Alertes budgetaires, tableaux de bord Grafana, imputation par centre de cout.</p>
<span class="ft-badge">dashboard temps reel</span>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="how-bg">
<div class="container">
<div class="label">Demarrage en 15 minutes</div>
<h2 style="text-align:center">Trois etapes vers la conformite</h2>
<div class="steps">
<div class="step fu">
<div class="step-num">1</div>
<h3>Pointez votre endpoint</h3>
<p>Remplacez l'URL OpenAI par votre instance Veylant. Zero modification de code &mdash; compatible avec tout SDK OpenAI existant.</p>
<div class="step-code">
<div class="tc"># Avant</div>
<div>OPENAI_BASE_URL=<span style="color:#f85149">api.openai.com</span></div>
<br>
<div class="tc"># Apres</div>
<div>OPENAI_BASE_URL=<span class="tg">ai.votre-entreprise.com</span></div>
</div>
</div>
<div class="step fu" style="transition-delay:.1s">
<div class="step-num">2</div>
<h3>Configurez vos politiques</h3>
<p>Via l'API admin ou l'interface React : regles de routage, RBAC, budgets par departement, seuils d'alerte PII.</p>
<div class="step-code">
<div class="tc"># Regle de routage</div>
<div>department == <span class="tg">"finance"</span></div>
<div>&nbsp;&nbsp;&rarr; provider: <span class="tb">azure</span></div>
<div>&nbsp;&nbsp;&rarr; model: <span class="tb">gpt-4o</span></div>
</div>
</div>
<div class="step fu" style="transition-delay:.2s">
<div class="step-num">3</div>
<h3>Observez et gouvernez</h3>
<p>Tableau de bord temps reel, alertes Prometheus/PagerDuty, logs d'audit exportables pour vos audits RGPD.</p>
<div class="step-code">
<div class="tc"># Dashboard SLO</div>
<div>&#10003; SLO <span class="tg">99.5 %</span> respecte</div>
<div>&#10003; <span class="tg">0</span> fuite PII ce mois</div>
<div>&#10003; Budget: <span class="tg">847 / 1200 EUR</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="securite" style="border-top:1px solid var(--border)">
<div class="container">
<div class="label">Securite</div>
<h2>Concu pour les equipes<br>securite les plus exigeantes</h2>
<div class="sec-grid">
<div class="checks">
<div class="chk fu">
<div class="chk-ico">&#128272;</div>
<div>
<h4>Zero Trust &amp; mTLS</h4>
<p>Communication inter-services chiffree via mTLS. TLS 1.3 en externe. Aucun trafic en clair, jamais.</p>
</div>
</div>
<div class="chk fu" style="transition-delay:.06s">
<div class="chk-ico">&#128273;</div>
<div>
<h4>Chiffrement bout-en-bout</h4>
<p>Prompts chiffres AES-256-GCM au repos. Cles API stockees en SHA-256 uniquement. Rotation 90 jours via HashiCorp Vault.</p>
</div>
</div>
<div class="chk fu" style="transition-delay:.12s">
<div class="chk-ico">&#9989;</div>
<div>
<h4>Pentest reussi &mdash; 2026</h4>
<p>0 vulnerabilite critique, 0 high. Semgrep SAST + Trivy image scanning + OWASP ZAP DAST integres en CI/CD.</p>
</div>
</div>
<div class="chk fu" style="transition-delay:.18s">
<div class="chk-ico">&#128221;</div>
<div>
<h4>Audit de l'audit</h4>
<p>Chaque acces aux logs d'audit est lui-meme logue. Tracabilite complete et inviolable.</p>
</div>
</div>
</div>
<div class="comp-grid">
<div class="comp-badge fu">
<div class="comp-ico">&#127466;&#127482;</div>
<h4>RGPD natif</h4>
<p>Registre Art. 30 automatique. Notification CNIL prete sous 72h.</p>
</div>
<div class="comp-badge fu" style="transition-delay:.06s">
<div class="comp-ico">&#9878;</div>
<h4>EU AI Act</h4>
<p>Classification des risques, documentation systeme requise.</p>
</div>
<div class="comp-badge fu" style="transition-delay:.12s">
<div class="comp-ico">&#127963;</div>
<h4>NIS2 ready</h4>
<p>Logs immuables, alertes PagerDuty, SLO 99,5 %.</p>
</div>
<div class="comp-badge fu" style="transition-delay:.18s">
<div class="comp-ico">&#128274;</div>
<h4>ISO 27001</h4>
<p>Architecture Zero Trust, RBAC, gestion des secrets.</p>
</div>
</div>
</div>
</div>
</section>
<!-- PERSONAS -->
<section id="personas" style="border-top:1px solid var(--border)">
<div class="container">
<div class="label">Pour qui</div>
<h2>Un outil, trois interlocuteurs</h2>
<div class="prs-grid">
<div class="prs-card fu">
<div class="prs-role">RSSI</div>
<div class="prs-title">Responsable Securite SI</div>
<ul class="prs-list">
<li>Visibilite complete sur tous les flux LLM</li>
<li>Zero Trust, mTLS, AES-256-GCM</li>
<li>Rapport pentest disponible sur demande</li>
<li>Alertes temps reel (PagerDuty, Slack)</li>
<li>Shadow AI elimine structurellement</li>
</ul>
</div>
<div class="prs-card fu" style="transition-delay:.1s">
<div class="prs-role">DSI</div>
<div class="prs-title">Directeur Systemes d'Information</div>
<ul class="prs-list">
<li>Deploiement Helm/Kubernetes en 15 min</li>
<li>Compatible tout SDK OpenAI existant</li>
<li>Multi-provider avec fallback automatique</li>
<li>Dashboard couts par equipe et projet</li>
<li>HPA autoscaling, blue/green deployment</li>
</ul>
</div>
<div class="prs-card fu" style="transition-delay:.2s">
<div class="prs-role">DPO</div>
<div class="prs-title">Data Protection Officer</div>
<ul class="prs-list">
<li>Registre Art. 30 genere automatiquement</li>
<li>Classification risques EU AI Act integree</li>
<li>Export PDF pour audits CNIL</li>
<li>Pseudonymisation reversible et tracable</li>
<li>Retention configurable par type de donnee</li>
</ul>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-sec" id="contact">
<div class="container">
<div class="label">Commencer</div>
<h2>Pret a reprendre le controle<br>de votre IA d'entreprise ?</h2>
<p class="sub">Demo personnalisee &middot; Deploiement en 15 minutes &middot; Support dedie</p>
<div class="cta-actions">
<a href="mailto:demo@veylant.io" class="btn btn-primary btn-lg">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
Demander une demo
</a>
<a href="/playground" class="btn btn-outline btn-lg">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
Tester le playground
</a>
<a href="/docs" class="btn btn-outline btn-lg">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
Lire la documentation
</a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="foot-inner">
<a href="/" class="logo">Veylant<span> IA</span></a>
<ul class="foot-links">
<li><a href="/docs">Documentation</a></li>
<li><a href="/playground">Playground</a></li>
<li><a href="mailto:demo@veylant.io">Contact</a></li>
</ul>
<span class="foot-copy">&copy; 2026 Veylant. Concu pour l'entreprise europeenne.</span>
</div>
</footer>
<script>
// Scroll-reveal with IntersectionObserver
var io = new IntersectionObserver(function(entries) {
entries.forEach(function(e) {
if (e.isIntersecting) { e.target.classList.add('vis'); }
});
}, { threshold: 0.12 });
document.querySelectorAll('.fu').forEach(function(el) { io.observe(el); });
// Hero appears immediately
setTimeout(function() {
document.querySelectorAll('.hero .fu').forEach(function(el) { el.classList.add('vis'); });
}, 80);
// Smooth scroll anchors
document.querySelectorAll('a[href^="#"]').forEach(function(a) {
a.addEventListener('click', function(e) {
var target = document.querySelector(this.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>
</body>
</html>`

BIN
proxy
View File

Binary file not shown.

20
web/src/components/Sidebar.tsx
View File

@ -16,16 +16,16 @@ import { cn } from "@/lib/utils";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
const navItems = [ const navItems = [
{ to: "/", label: "Vue d'ensemble", icon: LayoutDashboard, end: true }, { to: "/dashboard", label: "Vue d'ensemble", icon: LayoutDashboard, end: true },
{ to: "/playground", label: "Playground IA", icon: FlaskConical }, { to: "/dashboard/playground", label: "Playground IA", icon: FlaskConical },
{ to: "/policies", label: "Politiques", icon: Shield }, { to: "/dashboard/policies", label: "Politiques", icon: Shield },
{ to: "/users", label: "Utilisateurs", icon: Users }, { to: "/dashboard/users", label: "Utilisateurs", icon: Users },
{ to: "/providers", label: "Fournisseurs", icon: Plug }, { to: "/dashboard/providers", label: "Fournisseurs", icon: Plug },
{ to: "/security", label: "Sécurité", icon: ShieldAlert }, { to: "/dashboard/security", label: "Sécurité", icon: ShieldAlert },
{ to: "/costs", label: "Coûts", icon: TrendingUp }, { to: "/dashboard/costs", label: "Coûts", icon: TrendingUp },
{ to: "/alerts", label: "Alertes Budget", icon: Bell }, { to: "/dashboard/alerts", label: "Alertes Budget", icon: Bell },
{ to: "/logs", label: "Journaux", icon: BookOpen }, { to: "/dashboard/logs", label: "Journaux", icon: BookOpen },
{ to: "/compliance", label: "Conformité", icon: FileCheck }, { to: "/dashboard/compliance", label: "Conformité", icon: FileCheck },
]; ];
export function Sidebar() { export function Sidebar() {

759
web/src/pages/LandingPage.tsx Normal file
View File

@ -0,0 +1,759 @@
import { useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "@/auth/AuthProvider";
const brand = "#4f46e5";
const brandLight = "#818cf8";
const accent = "#06b6d4";
const bg = "#0a0f1e";
const card = "rgba(255,255,255,0.04)";
const cardHover = "rgba(255,255,255,0.07)";
const border = "rgba(255,255,255,0.08)";
const muted = "#94a3b8";
const dim = "#64748b";
// ── Feature card data ─────────────────────────────────────────────────────────
const features = [
{
icon: "🔍",
title: "Anonymisation PII automatique",
body: "3 couches de détection (regex, Presidio NER, validation LLM). Pseudonymisation réversible avec mapping chiffré AES-256-GCM en Redis.",
badge: "latence <50ms",
},
{
icon: "🧭",
title: "Routage intelligent",
body: "Moteur de règles basé sur le rôle, le département, la sensibilité et le modèle demandé. Fallback automatique en cas de panne provider.",
badge: "circuit breaker intégré",
},
{
icon: "🛡️",
title: "RBAC granulaire",
body: "4 rôles (admin, manager, user, auditor) avec contrôle par modèle et par département. Compatible OIDC / Keycloak / SAML 2.0.",
badge: "SSO ready",
},
{
icon: "📋",
title: "Logs d'audit immuables",
body: "Chaque requête est enregistrée dans ClickHouse (append-only). Impossible à modifier, rétention configurable, export PDF pour la CNIL.",
badge: "RGPD Art. 30",
},
{
icon: "⚖️",
title: "Conformité RGPD & EU AI Act",
body: "Registre de traitement automatique, classification des risques AI Act, rapports PDF téléchargeables. DPO-ready dès le premier jour.",
badge: "EU AI Act ready",
},
{
icon: "📊",
title: "Contrôle des coûts",
body: "Suivi des tokens par tenant, utilisateur et département. Alertes budgétaires, tableaux de bord Grafana, imputation par centre de coût.",
badge: "dashboard temps réel",
},
];
const problems = [
{
icon: "🕵️",
title: "Shadow AI",
body: "73 % des entreprises ont des employés utilisant des outils IA non approuvés. Données clients, contrats, code propriétaire partent vers des serveurs tiers sans votre accord.",
},
{
icon: "🔓",
title: "Fuites de données PII",
body: "Sans filtre, vos prompts contiennent noms, IBAN, emails, numéros de sécurité sociale. Une seule fuite = violation RGPD notifiable à la CNIL sous 72h.",
},
{
icon: "💸",
title: "Coûts hors de contrôle",
body: "Les abonnements prolifèrent, les tokens s'accumulent. Sans visibilité centralisée, la facture IA gonfle sans corrélation avec la valeur produite.",
},
];
const personas = [
{
role: "RSSI",
title: "Responsable Sécurité SI",
items: [
"Visibilité complète sur tous les flux LLM",
"Zero Trust, mTLS, AES-256-GCM",
"Rapport pentest disponible sur demande",
"Alertes temps réel (PagerDuty, Slack)",
"Shadow AI éliminé structurellement",
],
},
{
role: "DSI",
title: "Directeur Systèmes d'Information",
items: [
"Déploiement Helm/Kubernetes en 15 min",
"Compatible tout SDK OpenAI existant",
"Multi-provider avec fallback automatique",
"Dashboard coûts par équipe et projet",
"HPA autoscaling, blue/green deployment",
],
},
{
role: "DPO",
title: "Data Protection Officer",
items: [
"Registre Art. 30 généré automatiquement",
"Classification risques EU AI Act intégrée",
"Export PDF pour audits CNIL",
"Pseudonymisation réversible et traçable",
"Rétention configurable par type de donnée",
],
},
];
// ── Reusable small components ─────────────────────────────────────────────────
function Label({ children }: { children: React.ReactNode }) {
return (
<div
style={{
display: "inline-flex",
alignItems: "center",
gap: "0.4rem",
fontSize: "0.72rem",
fontWeight: 700,
textTransform: "uppercase",
letterSpacing: "0.1em",
color: brandLight,
background: "rgba(79,70,229,0.15)",
border: `1px solid rgba(79,70,229,0.3)`,
padding: "0.3rem 0.85rem",
borderRadius: "100px",
marginBottom: "1.5rem",
}}
>
{children}
</div>
);
}
function GradientText({ children }: { children: React.ReactNode }) {
return (
<span
style={{
background: `linear-gradient(135deg, #a5b4fc 0%, ${accent} 100%)`,
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
}}
>
{children}
</span>
);
}
function BtnPrimary({ href, to, children }: { href?: string; to?: string; children: React.ReactNode }) {
const style: React.CSSProperties = {
display: "inline-flex",
alignItems: "center",
gap: "0.45rem",
padding: "0.85rem 2rem",
borderRadius: "10px",
fontSize: "1rem",
fontWeight: 600,
textDecoration: "none",
cursor: "pointer",
border: "none",
background: brand,
color: "#fff",
transition: "all .2s",
whiteSpace: "nowrap",
};
if (to) return <Link to={to} style={style}>{children}</Link>;
return <a href={href} style={style}>{children}</a>;
}
function BtnOutline({ href, to, children }: { href?: string; to?: string; children: React.ReactNode }) {
const style: React.CSSProperties = {
display: "inline-flex",
alignItems: "center",
gap: "0.45rem",
padding: "0.85rem 2rem",
borderRadius: "10px",
fontSize: "1rem",
fontWeight: 600,
textDecoration: "none",
background: "transparent",
color: "#f1f5f9",
border: `1px solid ${border}`,
transition: "all .2s",
whiteSpace: "nowrap",
};
if (to) return <Link to={to} style={style}>{children}</Link>;
return <a href={href} style={style}>{children}</a>;
}
// ── Main component ─────────────────────────────────────────────────────────────
export function LandingPage() {
const { isAuthenticated } = useAuth();
const navigate = useNavigate();
useEffect(() => {
if (isAuthenticated) {
navigate("/dashboard", { replace: true });
}
}, [isAuthenticated, navigate]);
return (
<div
style={{
fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif",
background: bg,
color: "#f1f5f9",
minHeight: "100vh",
overflowX: "hidden",
}}
>
{/* Background glow */}
<div
style={{
position: "fixed",
inset: 0,
background:
"radial-gradient(ellipse at 15% 50%, rgba(79,70,229,.14) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, rgba(6,182,212,.09) 0%, transparent 50%)",
pointerEvents: "none",
zIndex: 0,
}}
/>
{/* ── NAV ── */}
<nav
style={{
position: "sticky",
top: 0,
zIndex: 100,
backdropFilter: "blur(14px)",
WebkitBackdropFilter: "blur(14px)",
background: "rgba(10,15,30,.88)",
borderBottom: `1px solid ${border}`,
}}
>
<div
style={{
maxWidth: 1200,
margin: "0 auto",
padding: "0 1.5rem",
height: 64,
display: "flex",
alignItems: "center",
gap: "2rem",
}}
>
<Link
to="/"
style={{ fontSize: "1.25rem", fontWeight: 800, color: "#f1f5f9", textDecoration: "none", letterSpacing: "-0.5px", flexShrink: 0 }}
>
Veylant<span style={{ color: brandLight }}> IA</span>
</Link>
<div style={{ display: "flex", gap: "1.75rem", marginLeft: "auto", alignItems: "center" }}>
<a href="#fonctionnalites" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Fonctionnalités</a>
<a href="#securite" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Sécurité</a>
<a href="#personas" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Pour qui</a>
<a href="http://localhost:8090/playground" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Playground</a>
<a href="http://localhost:8090/docs" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Docs</a>
<Link
to="/login"
style={{
background: brand,
color: "#fff",
padding: ".5rem 1.1rem",
borderRadius: 8,
fontSize: ".875rem",
fontWeight: 600,
textDecoration: "none",
}}
>
Se connecter →
</Link>
</div>
</div>
</nav>
{/* ── HERO ── */}
<section style={{ padding: "7rem 1.5rem 5rem", position: "relative", zIndex: 1 }}>
<div
style={{
maxWidth: 1200,
margin: "0 auto",
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: "4rem",
alignItems: "center",
}}
>
{/* Left */}
<div>
<Label>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
Proxy IA d'entreprise
</Label>
<h1 style={{ fontSize: "clamp(2.4rem,5vw,3.8rem)", fontWeight: 800, lineHeight: 1.15, letterSpacing: "-0.025em", marginBottom: "1.25rem" }}>
L'IA de vos équipes,<br />
<GradientText>enfin sous contrôle</GradientText>
</h1>
<p style={{ fontSize: "1.1rem", color: muted, lineHeight: 1.75, marginBottom: "2rem", maxWidth: 500 }}>
Veylant intercepte, anonymise et gouverne tous vos échanges LLM en moins de 50 ms. RGPD natif, EU AI Act prêt, zéro Shadow AI.
</p>
<div style={{ display: "flex", gap: ".875rem", flexWrap: "wrap" }}>
<BtnPrimary href="#contact">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
Demander une démo
</BtnPrimary>
<BtnOutline href="http://localhost:8090/playground">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
Tester le playground
</BtnOutline>
</div>
{/* Stats */}
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(4,1fr)",
gap: "1rem",
marginTop: "3.5rem",
paddingTop: "2.5rem",
borderTop: `1px solid ${border}`,
}}
>
{[
{ val: "<50ms", lbl: "Latence pipeline PII" },
{ val: "5", lbl: "Providers LLM" },
{ val: "0", lbl: "Shadow AI autorisé" },
{ val: "100%", lbl: "Compatible OpenAI SDK" },
].map((s) => (
<div key={s.lbl} style={{ textAlign: "center" }}>
<div
style={{
fontSize: "1.7rem",
fontWeight: 800,
letterSpacing: "-0.04em",
background: `linear-gradient(135deg, #a5b4fc, ${accent})`,
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
}}
>
{s.val}
</div>
<div style={{ fontSize: ".78rem", color: muted, marginTop: ".2rem" }}>{s.lbl}</div>
</div>
))}
</div>
</div>
{/* Terminal */}
<div
style={{
background: "#0d1117",
border: `1px solid rgba(255,255,255,.1)`,
borderRadius: 20,
overflow: "hidden",
boxShadow: "0 30px 60px rgba(0,0,0,.6)",
}}
>
<div
style={{
background: "#161b22",
padding: ".7rem 1rem",
display: "flex",
alignItems: "center",
gap: ".4rem",
borderBottom: `1px solid rgba(255,255,255,.07)`,
}}
>
<div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ff5f57" }} />
<div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ffbd2e" }} />
<div style={{ width: 12, height: 12, borderRadius: "50%", background: "#28c840" }} />
<span style={{ marginLeft: ".5rem", fontSize: ".72rem", color: dim, fontFamily: "monospace" }}>
veylant-proxy — requête interceptée
</span>
</div>
<div style={{ padding: "1.5rem", fontFamily: "monospace", fontSize: ".76rem", lineHeight: 1.9 }}>
<div style={{ color: "#6e7681" }}>{`// Requête entrante`}</div>
<div><span style={{ color: "#79c0ff" }}>POST</span> <span style={{ color: "#a5d6ff" }}>/v1/chat/completions</span></div>
<div><span style={{ color: dim }}>tenant:</span> <span style={{ color: brandLight }}>acme-corp</span> · <span style={{ color: dim }}>user:</span> <span style={{ color: brandLight }}>alice</span></div>
<br />
<div style={{ color: "#6e7681" }}>{`// Détection PII — 12ms`}</div>
<div>
<span style={{ color: "#e3b341" }}>⚠ </span>
<span style={{ color: "#79c0ff" }}>PERSON&nbsp;&nbsp;&nbsp; </span>
<span style={{ color: "#f85149" }}>"Marie Dubois"</span>
<span style={{ color: dim }}> → </span>
<span style={{ color: "#fbbf24", background: "rgba(251,191,36,.1)", padding: "0 3px", borderRadius: 3 }}>[PERSONNE_1]</span>
</div>
<div>
<span style={{ color: "#e3b341" }}>⚠ </span>
<span style={{ color: "#79c0ff" }}>IBAN&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style={{ color: "#f85149" }}>"FR76 3000..."</span>
<span style={{ color: dim }}> → </span>
<span style={{ color: "#fbbf24", background: "rgba(251,191,36,.1)", padding: "0 3px", borderRadius: 3 }}>[IBAN_1]</span>
</div>
<div>
<span style={{ color: "#e3b341" }}>⚠ </span>
<span style={{ color: "#79c0ff" }}>EMAIL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style={{ color: "#f85149" }}>"m.dubois@..."</span>
<span style={{ color: dim }}> → </span>
<span style={{ color: "#fbbf24", background: "rgba(251,191,36,.1)", padding: "0 3px", borderRadius: 3 }}>[EMAIL_1]</span>
</div>
<br />
<div style={{ color: "#6e7681" }}>{`// Routage intelligent — règle #3`}</div>
<div><span style={{ color: "#56d364" }}>✓ </span>provider <span style={{ color: brandLight }}>azure</span> · model <span style={{ color: brandLight }}>gpt-4o</span></div>
<div><span style={{ color: "#56d364" }}>✓ </span>dept <span style={{ color: brandLight }}>finance</span> · budget OK</div>
<br />
<div style={{ color: "#6e7681" }}>{`// Log d'audit — ClickHouse`}</div>
<div><span style={{ color: "#56d364" }}>✓ </span><span style={{ color: dim }}>tokens: </span><span style={{ color: "#a5d6ff" }}>847 in / 312 out</span></div>
<div><span style={{ color: "#56d364" }}>✓ </span><span style={{ color: dim }}>coût: </span><span style={{ color: "#a5d6ff" }}>€0.0043 imputé</span></div>
<div><span style={{ color: "#56d364" }}>✓ </span><span style={{ color: dim }}>latence totale: </span><span style={{ color: "#a5d6ff" }}>38ms ✨</span></div>
</div>
</div>
</div>
</section>
{/* ── TRUST BAR ── */}
<div style={{ position: "relative", zIndex: 1, padding: "1.75rem 1.5rem", borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, background: "rgba(255,255,255,.015)" }}>
<div style={{ maxWidth: 1200, margin: "0 auto", display: "flex", alignItems: "center", gap: "2.5rem", flexWrap: "wrap", justifyContent: "center" }}>
<span style={{ fontSize: ".72rem", color: dim, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".08em" }}>Compatible avec</span>
{["OpenAI", "Anthropic", "Azure OpenAI", "Mistral AI", "Ollama (on-premise)"].map((p) => (
<span key={p} style={{ color: dim, fontSize: ".82rem", fontWeight: 600, opacity: 0.6 }}>{p}</span>
))}
</div>
</div>
{/* ── PROBLEM ── */}
<section id="probleme" style={{ padding: "6rem 1.5rem", position: "relative", zIndex: 1 }}>
<div style={{ maxWidth: 1200, margin: "0 auto" }}>
<Label>Le problème</Label>
<h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
Vos équipes utilisent l'IA.<br />Vous n'en savez rien.
</h2>
<p style={{ marginTop: "1rem", maxWidth: 560, lineHeight: 1.7, color: muted }}>
ChatGPT, Claude, Copilot — vos collaborateurs contournent les politiques IT. Résultat : données sensibles exposées, coûts incontrôlés, conformité compromise.
</p>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "3rem" }}>
{problems.map((p) => (
<div
key={p.title}
style={{
background: "rgba(239,68,68,.05)",
border: "1px solid rgba(239,68,68,.15)",
borderRadius: 20,
padding: "2rem",
}}
>
<div style={{ fontSize: "1.4rem", marginBottom: "1.25rem" }}>{p.icon}</div>
<h3 style={{ fontWeight: 600, marginBottom: ".5rem" }}>{p.title}</h3>
<p style={{ color: muted, fontSize: ".875rem", lineHeight: 1.65 }}>{p.body}</p>
</div>
))}
</div>
</div>
</section>
{/* ── FEATURES ── */}
<section id="fonctionnalites" style={{ padding: "6rem 1.5rem", borderTop: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
<div style={{ maxWidth: 1200, margin: "0 auto" }}>
<Label>La solution</Label>
<h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
Un proxy intelligent entre<br />vos équipes et les LLMs
</h2>
<p style={{ marginTop: "1rem", maxWidth: 560, lineHeight: 1.7, color: muted }}>
Veylant se déploie en 15 minutes sans modifier votre code existant. Il intercepte chaque requête et applique vos politiques en temps réel.
</p>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "3rem" }}>
{features.map((f) => (
<div
key={f.title}
style={{
background: card,
border: `1px solid ${border}`,
borderRadius: 20,
padding: "2rem",
transition: "all .3s",
}}
>
<div
style={{
width: 46,
height: 46,
background: "rgba(79,70,229,.15)",
borderRadius: 11,
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "1.3rem",
marginBottom: "1.25rem",
}}
>
{f.icon}
</div>
<h3 style={{ fontWeight: 600, marginBottom: ".45rem" }}>{f.title}</h3>
<p style={{ color: muted, fontSize: ".875rem", lineHeight: 1.65 }}>{f.body}</p>
<span
style={{
display: "inline-block",
marginTop: ".9rem",
fontSize: ".72rem",
fontWeight: 700,
color: brandLight,
background: "rgba(79,70,229,.15)",
padding: ".2rem .65rem",
borderRadius: "100px",
}}
>
{f.badge}
</span>
</div>
))}
</div>
</div>
</section>
{/* ── HOW IT WORKS ── */}
<section style={{ padding: "6rem 1.5rem", background: "rgba(79,70,229,.03)", borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
<div style={{ maxWidth: 1200, margin: "0 auto" }}>
<Label>Démarrage en 15 minutes</Label>
<h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em", textAlign: "center" }}>
Trois étapes vers la conformité
</h2>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "2rem", marginTop: "4rem" }}>
{[
{
n: 1,
title: "Pointez votre endpoint",
body: "Remplacez l'URL OpenAI par votre instance Veylant. Zéro modification de code — compatible avec tout SDK OpenAI existant.",
code: (
<>
<div style={{ color: "#6e7681" }}># Avant</div>
<div>OPENAI_BASE_URL=<span style={{ color: "#f85149" }}>api.openai.com</span></div>
<br />
<div style={{ color: "#6e7681" }}># Après</div>
<div>OPENAI_BASE_URL=<span style={{ color: "#56d364" }}>ai.votre-entreprise.com</span></div>
</>
),
},
{
n: 2,
title: "Configurez vos politiques",
body: "Via l'API admin ou l'interface React : règles de routage, RBAC, budgets par département, seuils d'alerte PII.",
code: (
<>
<div style={{ color: "#6e7681" }}># Règle de routage</div>
<div>department == <span style={{ color: "#56d364" }}>"finance"</span></div>
<div>&nbsp;&nbsp;→ provider: <span style={{ color: brandLight }}>azure</span></div>
<div>&nbsp;&nbsp;→ model: <span style={{ color: brandLight }}>gpt-4o</span></div>
</>
),
},
{
n: 3,
title: "Observez et gouvernez",
body: "Tableau de bord temps réel, alertes Prometheus/PagerDuty, logs d'audit exportables pour vos audits RGPD.",
code: (
<>
<div style={{ color: "#6e7681" }}># Dashboard SLO</div>
<div>✓ SLO <span style={{ color: "#56d364" }}>99.5 %</span> respecté</div>
<div>✓ <span style={{ color: "#56d364" }}>0</span> fuite PII ce mois</div>
<div>✓ Budget: <span style={{ color: "#56d364" }}>847 / 1200 €</span></div>
</>
),
},
].map((step) => (
<div key={step.n} style={{ textAlign: "center" }}>
<div
style={{
width: 54,
height: 54,
background: `linear-gradient(135deg, ${brand}, ${accent})`,
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "1.2rem",
fontWeight: 800,
color: "#fff",
margin: "0 auto 1.5rem",
boxShadow: `0 0 0 6px rgba(79,70,229,.15)`,
}}
>
{step.n}
</div>
<h3 style={{ fontWeight: 600, marginBottom: ".45rem" }}>{step.title}</h3>
<p style={{ color: muted, fontSize: ".875rem", lineHeight: 1.65 }}>{step.body}</p>
<div
style={{
marginTop: "1rem",
background: "#0d1117",
border: `1px solid ${border}`,
borderRadius: 8,
padding: ".75rem 1rem",
fontFamily: "monospace",
fontSize: ".7rem",
color: muted,
textAlign: "left",
lineHeight: 1.75,
}}
>
{step.code}
</div>
</div>
))}
</div>
</div>
</section>
{/* ── SECURITY ── */}
<section id="securite" style={{ padding: "6rem 1.5rem", borderTop: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
<div style={{ maxWidth: 1200, margin: "0 auto" }}>
<Label>Sécurité</Label>
<h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
Conçu pour les équipes<br />sécurité les plus exigeantes
</h2>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "3rem", alignItems: "center", marginTop: "3rem" }}>
{/* Checks */}
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
{[
{ icon: "🔐", title: "Zero Trust & mTLS", body: "Communication inter-services chiffrée via mTLS. TLS 1.3 en externe. Aucun trafic en clair, jamais." },
{ icon: "🔑", title: "Chiffrement bout-en-bout", body: "Prompts chiffrés AES-256-GCM au repos. Clés API en SHA-256. Rotation 90 jours via HashiCorp Vault." },
{ icon: "✅", title: "Pentest réussi — 2026", body: "0 vulnérabilité critique, 0 high. Semgrep SAST + Trivy image scanning + OWASP ZAP DAST en CI/CD." },
{ icon: "📝", title: "Audit de l'audit", body: "Chaque accès aux logs d'audit est lui-même loggué. Traçabilité complète et inviolable." },
].map((c) => (
<div
key={c.title}
style={{ display: "flex", alignItems: "flex-start", gap: "1rem", padding: "1.25rem", background: card, border: `1px solid ${border}`, borderRadius: 12 }}
>
<div style={{ width: 36, height: 36, background: "rgba(16,185,129,.1)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: ".95rem" }}>
{c.icon}
</div>
<div>
<h4 style={{ fontWeight: 600, fontSize: ".875rem", marginBottom: ".2rem" }}>{c.title}</h4>
<p style={{ fontSize: ".8rem", color: muted, lineHeight: 1.55 }}>{c.body}</p>
</div>
</div>
))}
</div>
{/* Compliance badges */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
{[
{ ico: "🇪🇺", title: "RGPD natif", body: "Registre Art. 30 automatique. Notification CNIL prête sous 72h." },
{ ico: "⚖️", title: "EU AI Act", body: "Classification des risques, documentation système requise." },
{ ico: "🏛️", title: "NIS2 ready", body: "Logs immuables, alertes PagerDuty, SLO 99,5 %." },
{ ico: "🔒", title: "ISO 27001", body: "Architecture Zero Trust, RBAC, gestion des secrets." },
].map((b) => (
<div
key={b.title}
style={{ background: card, border: `1px solid ${border}`, borderRadius: 20, padding: "1.5rem", textAlign: "center" }}
>
<div style={{ fontSize: "1.9rem", marginBottom: ".75rem" }}>{b.ico}</div>
<h4 style={{ fontWeight: 700, fontSize: ".875rem", marginBottom: ".2rem" }}>{b.title}</h4>
<p style={{ fontSize: ".75rem", color: muted }}>{b.body}</p>
</div>
))}
</div>
</div>
</div>
</section>
{/* ── PERSONAS ── */}
<section id="personas" style={{ padding: "6rem 1.5rem", borderTop: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
<div style={{ maxWidth: 1200, margin: "0 auto" }}>
<Label>Pour qui</Label>
<h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
Un outil, trois interlocuteurs
</h2>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "3rem" }}>
{personas.map((p) => (
<div key={p.role} style={{ background: card, border: `1px solid ${border}`, borderRadius: 20, padding: "2rem" }}>
<div style={{ fontSize: ".7rem", fontWeight: 800, textTransform: "uppercase", letterSpacing: ".12em", color: brandLight, marginBottom: ".2rem" }}>
{p.role}
</div>
<div style={{ fontSize: "1.05rem", fontWeight: 700, marginBottom: "1.1rem" }}>{p.title}</div>
<ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: ".55rem" }}>
{p.items.map((item) => (
<li key={item} style={{ fontSize: ".84rem", color: muted, display: "flex", gap: ".5rem", alignItems: "flex-start" }}>
<span style={{ color: brandLight, flexShrink: 0 }}>→</span>
{item}
</li>
))}
</ul>
</div>
))}
</div>
</div>
</section>
{/* ── CTA ── */}
<section
id="contact"
style={{
padding: "6rem 1.5rem",
textAlign: "center",
background: "radial-gradient(ellipse at center, rgba(79,70,229,.14) 0%, transparent 65%)",
position: "relative",
zIndex: 1,
}}
>
<div style={{ maxWidth: 1200, margin: "0 auto" }}>
<Label>Commencer</Label>
<h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em", marginBottom: "1rem" }}>
Prêt à reprendre le contrôle<br />de votre IA d'entreprise ?
</h2>
<p style={{ color: muted, fontSize: "1.05rem", marginBottom: "2.5rem" }}>
Démo personnalisée · Déploiement en 15 minutes · Support dédié
</p>
<div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
<BtnPrimary href="mailto:demo@veylant.io">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
Demander une démo
</BtnPrimary>
<BtnOutline to="/login">
Se connecter au dashboard
</BtnOutline>
<BtnOutline href="http://localhost:8090/docs">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
Documentation
</BtnOutline>
</div>
</div>
</section>
{/* ── FOOTER ── */}
<footer style={{ position: "relative", zIndex: 1, borderTop: `1px solid ${border}`, padding: "2.5rem 1.5rem" }}>
<div
style={{
maxWidth: 1200,
margin: "0 auto",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexWrap: "wrap",
gap: "1rem",
}}
>
<Link to="/" style={{ fontSize: "1.25rem", fontWeight: 800, color: "#f1f5f9", textDecoration: "none" }}>
Veylant<span style={{ color: brandLight }}> IA</span>
</Link>
<div style={{ display: "flex", gap: "1.5rem" }}>
{[
{ label: "Documentation", href: "http://localhost:8090/docs" },
{ label: "Playground", href: "http://localhost:8090/playground" },
{ label: "Contact", href: "mailto:demo@veylant.io" },
].map((l) => (
<a key={l.label} href={l.href} style={{ fontSize: ".84rem", color: dim, textDecoration: "none" }}>
{l.label}
</a>
))}
</div>
<span style={{ fontSize: ".8rem", color: dim }}>© 2026 Veylant. Conçu pour l'entreprise européenne.</span>
</div>
</footer>
</div>
);
}

2
web/src/pages/LoginPage.tsx
View File

@ -10,7 +10,7 @@ export function LoginPage() {
const { login, isAuthenticated, isLoading } = useAuth(); const { login, isAuthenticated, isLoading } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const from = (location.state as { from?: { pathname: string } })?.from?.pathname ?? "/"; const from = (location.state as { from?: { pathname: string } })?.from?.pathname ?? "/dashboard";
useEffect(() => { useEffect(() => {
if (isAuthenticated) { if (isAuthenticated) {

2
web/src/pages/NotFoundPage.tsx
View File

@ -10,7 +10,7 @@ export function NotFoundPage() {
La page que vous cherchez n&apos;existe pas. La page que vous cherchez n&apos;existe pas.
</p> </p>
<Button asChild className="mt-6"> <Button asChild className="mt-6">
<Link to="/">Retour à l&apos;accueil</Link> <Link to="/dashboard">Retour au dashboard</Link>
</Button> </Button>
</div> </div>
); );

7
web/src/router.tsx
View File

@ -1,6 +1,7 @@
import { createBrowserRouter } from "react-router-dom"; import { createBrowserRouter } from "react-router-dom";
import { AppLayout } from "@/components/AppLayout"; import { AppLayout } from "@/components/AppLayout";
import { ProtectedRoute } from "@/components/ProtectedRoute"; import { ProtectedRoute } from "@/components/ProtectedRoute";
import { LandingPage } from "@/pages/LandingPage";
import { LoginPage } from "@/pages/LoginPage"; import { LoginPage } from "@/pages/LoginPage";
import { OverviewPage } from "@/pages/OverviewPage"; import { OverviewPage } from "@/pages/OverviewPage";
import { PoliciesPage } from "@/pages/PoliciesPage"; import { PoliciesPage } from "@/pages/PoliciesPage";
@ -15,6 +16,10 @@ import { CompliancePage } from "@/pages/CompliancePage";
import { NotFoundPage } from "@/pages/NotFoundPage"; import { NotFoundPage } from "@/pages/NotFoundPage";
export const router = createBrowserRouter([ export const router = createBrowserRouter([
{
path: "/",
element: <LandingPage />,
},
{ {
path: "/login", path: "/login",
element: <LoginPage />, element: <LoginPage />,
@ -25,7 +30,7 @@ export const router = createBrowserRouter([
element: <LoginPage />, element: <LoginPage />,
}, },
{ {
path: "/", path: "/dashboard",
element: ( element: (
<ProtectedRoute> <ProtectedRoute>
<AppLayout /> <AppLayout />