Bootstrap 5
Ai
Landing Page
Bento Grid
Glassmorphism
Aurora
Gradient
Saas
Responsive
Template
Landing page SaaS IA tendance 2026 : aurora animée, bento grid glassmorphism, texte gradient shimmer, stats et CTA responsive Bootstrap 5.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template AI Landing Bento Bootstrap 5 202605020001 | AngularForAll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background: #04040f;
color: #e2e8f0;
overflow-x: hidden;
min-height: 100vh;
}
/* ─── Aurora Background ─── */
.aurora-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.aurora-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.35;
animation: floatBlob 12s ease-in-out infinite alternate;
}
.aurora-blob:nth-child(1) {
width: 600px; height: 600px;
background: radial-gradient(circle, #7c3aed, #4f46e5);
top: -150px; left: -100px;
animation-delay: 0s;
}
.aurora-blob:nth-child(2) {
width: 500px; height: 500px;
background: radial-gradient(circle, #06b6d4, #0ea5e9);
top: 10%; right: -80px;
animation-delay: -4s;
}
.aurora-blob:nth-child(3) {
width: 400px; height: 400px;
background: radial-gradient(circle, #ec4899, #a855f7);
bottom: 5%; left: 30%;
animation-delay: -8s;
}
.aurora-blob:nth-child(4) {
width: 350px; height: 350px;
background: radial-gradient(circle, #10b981, #059669);
bottom: 20%; right: 10%;
animation-delay: -2s;
}
@keyframes floatBlob {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, -40px) scale(1.05); }
100% { transform: translate(-20px, 20px) scale(0.95); }
}
/* ─── Layout ─── */
.page-wrapper {
position: relative;
z-index: 1;
padding: 0 1rem;
}
/* ─── Navbar ─── */
.ai-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
background: rgba(255,255,255,0.04);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.07);
position: sticky;
top: 0;
z-index: 100;
flex-wrap: wrap;
gap: 0.75rem;
}
.ai-nav-logo {
font-size: 1.2rem;
font-weight: 700;
background: linear-gradient(135deg, #a78bfa, #38bdf8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
white-space: nowrap;
}
.ai-nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.ai-nav-links a {
color: rgba(255,255,255,0.65);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s;
}
.ai-nav-links a:hover { color: #fff; }
.ai-nav-cta {
background: linear-gradient(135deg, #7c3aed, #4f46e5);
color: #fff !important;
padding: 0.45rem 1.1rem;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s;
}
.ai-nav-cta:hover { opacity: 0.85; }
/* ─── Hero ─── */
.hero-section {
text-align: center;
padding: 5rem 1rem 3.5rem;
max-width: 760px;
margin: 0 auto;
}
.ai-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(124, 58, 237, 0.15);
border: 1px solid rgba(124, 58, 237, 0.4);
color: #c4b5fd;
font-size: 0.78rem;
font-weight: 600;
padding: 0.3rem 0.85rem;
border-radius: 50px;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.ai-badge .dot {
width: 6px; height: 6px;
background: #a78bfa;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
.hero-title {
font-size: clamp(2rem, 5vw, 3.75rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
}
.gradient-text {
background: linear-gradient(135deg, #a78bfa 0%, #38bdf8 50%, #34d399 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.hero-sub {
font-size: clamp(1rem, 2.5vw, 1.15rem);
color: rgba(255,255,255,0.55);
max-width: 520px;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
.hero-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-ai-primary {
background: linear-gradient(135deg, #7c3aed, #4f46e5);
color: #fff;
border: none;
padding: 0.75rem 1.75rem;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 0 20px rgba(124,58,237,0.4);
}
.btn-ai-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 32px rgba(124,58,237,0.6);
color: #fff;
}
.btn-ai-ghost {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.75);
border: 1px solid rgba(255,255,255,0.12);
padding: 0.75rem 1.75rem;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
backdrop-filter: blur(8px);
transition: background 0.2s, color 0.2s;
}
.btn-ai-ghost:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
/* ─── Stats Strip ─── */
.stats-strip {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2.5rem;
padding: 2.5rem 1rem;
max-width: 700px;
margin: 0 auto;
border-top: 1px solid rgba(255,255,255,0.07);
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.stat-item { text-align: center; }
.stat-value {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #a78bfa, #38bdf8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
}
.stat-label {
font-size: 0.78rem;
color: rgba(255,255,255,0.45);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 0.2rem;
}
/* ─── Bento Grid ─── */
.bento-section {
max-width: 1100px;
margin: 4rem auto;
padding: 0 1rem;
}
.bento-label {
text-align: center;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #a78bfa;
margin-bottom: 0.75rem;
}
.bento-title {
text-align: center;
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-weight: 700;
color: #f1f5f9;
margin-bottom: 2.5rem;
}
/* Bento Grid — layout asymétrique */
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1rem;
}
.bento-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 1.75rem;
backdrop-filter: blur(12px);
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
.bento-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(124,58,237,0.06), transparent 60%);
pointer-events: none;
}
.bento-card:hover {
border-color: rgba(167,139,250,0.3);
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
/* Spanning cards */
.bento-card.span-2-col { grid-column: span 2; }
.bento-card.span-2-row { grid-row: span 2; }
.bento-icon {
width: 44px; height: 44px;
background: rgba(124,58,237,0.15);
border: 1px solid rgba(124,58,237,0.25);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
flex-shrink: 0;
}
.bento-icon svg { width: 22px; height: 22px; }
.bento-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 0.5rem;
}
.bento-card p {
font-size: 0.875rem;
color: rgba(255,255,255,0.5);
line-height: 1.65;
margin: 0;
}
/* ─── Big Feature Card (span 2) ─── */
.bento-card.feature-big .bento-card-inner {
display: flex;
gap: 1.5rem;
align-items: flex-start;
flex-wrap: wrap;
}
.feature-visual {
flex: 1;
min-width: 160px;
}
.code-mockup {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
padding: 1rem 1.25rem;
font-family: 'Courier New', monospace;
font-size: 0.78rem;
line-height: 1.8;
color: #94a3b8;
}
.code-mockup .kw { color: #a78bfa; }
.code-mockup .str { color: #34d399; }
.code-mockup .fn { color: #38bdf8; }
.code-mockup .cm { color: rgba(255,255,255,0.25); }
/* ─── Pill Tags ─── */
.pill-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 1rem;
}
.pill {
font-size: 0.72rem;
padding: 0.2rem 0.65rem;
border-radius: 50px;
font-weight: 600;
letter-spacing: 0.03em;
}
.pill-purple { background: rgba(124,58,237,0.15); color: #c4b5fd; border: 1px solid rgba(124,58,237,0.25); }
.pill-blue { background: rgba(14,165,233,0.15); color: #7dd3fc; border: 1px solid rgba(14,165,233,0.25); }
.pill-green { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.25); }
.pill-pink { background: rgba(236,72,153,0.15); color: #f9a8d4; border: 1px solid rgba(236,72,153,0.25); }
/* ─── Progress Bars ─── */
.ai-progress-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ai-progress-item {}
.ai-progress-label {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: rgba(255,255,255,0.55);
margin-bottom: 0.3rem;
}
.ai-progress-bar {
height: 5px;
background: rgba(255,255,255,0.07);
border-radius: 50px;
overflow: hidden;
}
.ai-progress-fill {
height: 100%;
border-radius: 50px;
background: linear-gradient(90deg, #7c3aed, #38bdf8);
animation: fillBar 1.4s ease-out both;
}
@keyframes fillBar {
from { width: 0%; }
}
/* ─── Avatars Stack ─── */
.avatar-stack {
display: flex;
margin-top: 1.25rem;
}
.avatar {
width: 36px; height: 36px;
border-radius: 50%;
border: 2px solid #04040f;
margin-left: -10px;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.avatar:first-child { margin-left: 0; }
.av1 { background: linear-gradient(135deg,#7c3aed,#4f46e5); color:#fff; }
.av2 { background: linear-gradient(135deg,#0ea5e9,#06b6d4); color:#fff; }
.av3 { background: linear-gradient(135deg,#ec4899,#a855f7); color:#fff; }
.av4 { background: linear-gradient(135deg,#10b981,#059669); color:#fff; }
.av5 { background: rgba(255,255,255,0.1); color:rgba(255,255,255,0.6); font-size:0.65rem; }
.avatar-count {
margin-left: 0.65rem;
font-size: 0.78rem;
color: rgba(255,255,255,0.45);
align-self: center;
}
/* ─── CTA Section ─── */
.cta-section {
max-width: 640px;
margin: 5rem auto 4rem;
text-align: center;
padding: 0 1rem;
}
.cta-card {
background: rgba(124,58,237,0.08);
border: 1px solid rgba(124,58,237,0.2);
border-radius: 20px;
padding: 3rem 2rem;
backdrop-filter: blur(16px);
position: relative;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
top: -80px; left: 50%;
transform: translateX(-50%);
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(124,58,237,0.25), transparent 70%);
pointer-events: none;
}
.cta-card h2 {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800;
color: #f1f5f9;
margin-bottom: 0.75rem;
position: relative;
}
.cta-card p {
color: rgba(255,255,255,0.5);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.75rem;
position: relative;
}
.cta-input-row {
display: flex;
gap: 0.5rem;
max-width: 400px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.cta-input {
flex: 1;
min-width: 180px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
padding: 0.7rem 1rem;
border-radius: 8px;
font-size: 0.875rem;
outline: none;
transition: border-color 0.2s;
}
.cta-input::placeholder { color: rgba(255,255,255,0.3); }
.cta-input:focus { border-color: rgba(167,139,250,0.5); }
/* ─── Footer ─── */
.ai-footer {
text-align: center;
padding: 2rem 1rem;
border-top: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.25);
font-size: 0.78rem;
}
.ai-footer a { color: rgba(167,139,250,0.7); text-decoration: none; }
.ai-footer a:hover { color: #a78bfa; }
/* ─── Responsive ─── */
@media (max-width: 991.98px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
.bento-card.span-2-col { grid-column: span 2; }
.bento-card.span-2-row { grid-row: span 1; }
}
@media (max-width: 767.98px) {
.bento-grid {
grid-template-columns: 1fr;
}
.bento-card.span-2-col,
.bento-card.span-2-row { grid-column: span 1; grid-row: span 1; }
.ai-nav-links { display: none; }
.bento-card.feature-big .bento-card-inner {
flex-direction: column;
}
.stats-strip { gap: 1.5rem; }
}
@media (max-width: 479.98px) {
.hero-section { padding: 3rem 0.5rem 2rem; }
.hero-actions { flex-direction: column; align-items: center; }
.btn-ai-primary, .btn-ai-ghost { width: 100%; justify-content: center; }
}
</style>
</head>
<body>
<!-- Aurora Background -->
<div class="aurora-bg" aria-hidden="true">
<div class="aurora-blob"></div>
<div class="aurora-blob"></div>
<div class="aurora-blob"></div>
<div class="aurora-blob"></div>
</div>
<div class="page-wrapper">
<!-- Navbar -->
<nav class="ai-nav" role="navigation" aria-label="Navigation principale">
<span class="ai-nav-logo">✦ NexusAI</span>
<ul class="ai-nav-links">
<li><a href="#">Fonctionnalités</a></li>
<li><a href="#">Tarifs</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Blog</a></li>
</ul>
<a href="#" class="ai-nav-cta">Démarrer →</a>
</nav>
<!-- Hero -->
<section class="hero-section" aria-labelledby="hero-title">
<div class="ai-badge">
<span class="dot"></span>
Nouveau — API v3.0 disponible
</div>
<h1 class="hero-title" id="hero-title">
L'IA qui<br>
<span class="gradient-text">transforme vos idées</span><br>
en réalité
</h1>
<p class="hero-sub">
Plateforme SaaS IA nouvelle génération. Déployez des agents intelligents,
automatisez vos workflows et analysez vos données en temps réel.
</p>
<div class="hero-actions">
<a href="#" class="btn-ai-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polygon points="5,3 19,12 5,21"/></svg>
Commencer gratuitement
</a>
<a href="#" class="btn-ai-ghost">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polygon points="10,8 16,12 10,16"/></svg>
Voir la démo
</a>
</div>
</section>
<!-- Stats Strip -->
<div class="stats-strip" role="region" aria-label="Statistiques clés">
<div class="stat-item">
<span class="stat-value">2.4M+</span>
<span class="stat-label">Utilisateurs actifs</span>
</div>
<div class="stat-item">
<span class="stat-value">98.9%</span>
<span class="stat-label">Uptime garanti</span>
</div>
<div class="stat-item">
<span class="stat-value">50ms</span>
<span class="stat-label">Latence moyenne</span>
</div>
</div>
<!-- Bento Grid -->
<section class="bento-section" aria-labelledby="features-title">
<p class="bento-label">Fonctionnalités</p>
<h2 class="bento-title" id="features-title">Tout ce dont vous avez besoin</h2>
<div class="bento-grid">
<!-- Card 1 — Big (span 2 col) -->
<div class="bento-card span-2-col feature-big">
<div class="bento-card-inner">
<div style="flex:1; min-width:180px;">
<div class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" aria-hidden="true"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-5 0v-15A2.5 2.5 0 0 1 9.5 2z"/><path d="M14.5 2A2.5 2.5 0 0 1 17 4.5v15a2.5 2.5 0 0 1-5 0v-15A2.5 2.5 0 0 1 14.5 2z" opacity=".4"/></svg>
</div>
<h3>Modèles IA de pointe</h3>
<p>Accédez aux derniers LLM et modèles multimodaux via une API unifiée. Basculez entre les modèles en un paramètre.</p>
<div class="pill-tags">
<span class="pill pill-purple">GPT-4o</span>
<span class="pill pill-blue">Claude 4</span>
<span class="pill pill-green">Gemini Pro</span>
<span class="pill pill-pink">Mistral</span>
</div>
</div>
<div class="feature-visual">
<div class="code-mockup" aria-label="Exemple de code API">
<span class="cm">// Appel unifié multi-modèles</span><br>
<span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">nexus</span>.<span class="fn">chat</span>({<br>
model: <span class="str">"claude-4"</span>,<br>
messages: [{<br>
role: <span class="str">"user"</span>,<br>
content: <span class="str">"Analyse ce dataset"</span><br>
}]<br>
});<br>
<span class="cm">// ✓ 42ms · tokens: 1,240</span>
</div>
</div>
</div>
</div>
<!-- Card 2 — Performance -->
<div class="bento-card">
<div class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#38bdf8" stroke-width="1.8" aria-hidden="true"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</div>
<h3>Ultra-rapide</h3>
<p>Infrastructure distribuée sur 12 régions mondiales. Inférence en temps réel avec streaming natif.</p>
<div class="ai-progress-list" aria-label="Métriques de performance">
<div class="ai-progress-item">
<div class="ai-progress-label"><span>Latence P50</span><span>42ms</span></div>
<div class="ai-progress-bar"><div class="ai-progress-fill" style="width:92%"></div></div>
</div>
<div class="ai-progress-item">
<div class="ai-progress-label"><span>Throughput</span><span>12k req/s</span></div>
<div class="ai-progress-bar"><div class="ai-progress-fill" style="width:78%"></div></div>
</div>
<div class="ai-progress-item">
<div class="ai-progress-label"><span>Uptime</span><span>98.9%</span></div>
<div class="ai-progress-bar"><div class="ai-progress-fill" style="width:99%"></div></div>
</div>
</div>
</div>
<!-- Card 3 — Sécurité -->
<div class="bento-card">
<div class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.8" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<h3>Sécurité Enterprise</h3>
<p>Chiffrement end-to-end, SOC 2 Type II, RGPD et conformité ISO 27001. Vos données restent vôtres.</p>
<div class="pill-tags">
<span class="pill pill-green">SOC 2</span>
<span class="pill pill-green">RGPD</span>
<span class="pill pill-green">ISO 27001</span>
</div>
</div>
<!-- Card 4 — Agents (span 2 row) -->
<div class="bento-card span-2-row">
<div class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#ec4899" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M6 20v-2a6 6 0 0 1 12 0v2"/><circle cx="18" cy="8" r="3" opacity=".5"/><circle cx="6" cy="8" r="3" opacity=".5"/></svg>
</div>
<h3>Agents Autonomes</h3>
<p>Créez et orchestrez des agents IA qui exécutent des tâches complexes de façon autonome. Outils intégrés, mémoire persistante et chaînage d'actions.</p>
<div class="avatar-stack" aria-label="Agents actifs">
<div class="avatar av1" title="Agent Analyste">AA</div>
<div class="avatar av2" title="Agent Code">AC</div>
<div class="avatar av3" title="Agent SEO">AS</div>
<div class="avatar av4" title="Agent Data">AD</div>
<div class="avatar av5" aria-label="12 agents supplémentaires">+12</div>
</div>
<p class="avatar-count" style="margin-top:.75rem; font-size:.78rem; color:rgba(255,255,255,.4);">16 agents actifs en ce moment</p>
<div style="margin-top:1.5rem; padding:1rem; background:rgba(236,72,153,0.07); border:1px solid rgba(236,72,153,0.15); border-radius:10px;">
<div style="font-size:.78rem; color:#f9a8d4; font-weight:600; margin-bottom:.4rem;">Agent en cours…</div>
<div style="font-size:.75rem; color:rgba(255,255,255,.4); line-height:1.6;">
✓ Analyse du dataset terminée<br>
✓ Rapport généré (2,400 mots)<br>
<span style="color:#ec4899;">⟳ Envoi des résultats par email…</span>
</div>
</div>
</div>
<!-- Card 5 — Intégrations -->
<div class="bento-card">
<div class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M17.5 17.5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" opacity=".6"/></svg>
</div>
<h3>200+ Intégrations</h3>
<p>Connectez NexusAI à vos outils existants : Slack, GitHub, Notion, Zapier, et bien plus.</p>
<div class="pill-tags">
<span class="pill pill-blue">Slack</span>
<span class="pill pill-purple">GitHub</span>
<span class="pill pill-pink">Notion</span>
</div>
</div>
<!-- Card 6 — Analytics -->
<div class="bento-card">
<div class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#38bdf8" stroke-width="1.8" aria-hidden="true"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg>
</div>
<h3>Analytics Temps Réel</h3>
<p>Dashboard complet : coûts, tokens, latence, erreurs. Optimisez votre usage avec des insights actionnables.</p>
<div style="margin-top:1rem; display:flex; gap:.5rem; align-items:flex-end; height:48px;" aria-hidden="true">
<div style="width:10%; height:30%; background:rgba(56,189,248,0.3); border-radius:3px 3px 0 0;"></div>
<div style="width:10%; height:55%; background:rgba(56,189,248,0.35); border-radius:3px 3px 0 0;"></div>
<div style="width:10%; height:40%; background:rgba(56,189,248,0.3); border-radius:3px 3px 0 0;"></div>
<div style="width:10%; height:75%; background:rgba(56,189,248,0.5); border-radius:3px 3px 0 0;"></div>
<div style="width:10%; height:60%; background:rgba(56,189,248,0.4); border-radius:3px 3px 0 0;"></div>
<div style="width:10%; height:90%; background:linear-gradient(180deg,#38bdf8,#7c3aed); border-radius:3px 3px 0 0;"></div>
<div style="width:10%; height:70%; background:rgba(56,189,248,0.45); border-radius:3px 3px 0 0;"></div>
<div style="width:10%; height:100%; background:linear-gradient(180deg,#a78bfa,#38bdf8); border-radius:3px 3px 0 0;"></div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section" aria-labelledby="cta-title">
<div class="cta-card">
<h2 id="cta-title">Prêt à commencer ?</h2>
<p>Rejoignez plus de 2,4 millions de développeurs et d'entreprises qui font confiance à NexusAI.</p>
<div class="cta-input-row" role="form" aria-label="Formulaire inscription">
<label for="cta-email" class="visually-hidden">Votre adresse email</label>
<input
type="email"
id="cta-email"
class="cta-input"
placeholder="votre@email.com"
autocomplete="email"
>
<a href="#" class="btn-ai-primary">Démarrer gratuit</a>
</div>
<p style="margin-top:1rem; font-size:.75rem; color:rgba(255,255,255,.25);">
Aucune carte requise · Essai 14 jours · Annulation à tout moment
</p>
</div>
</section>
<!-- Footer -->
<footer class="ai-footer">
<p>© 2026 NexusAI · <a href="#">Confidentialité</a> · <a href="#">CGU</a> · <a href="#">Contact</a></p>
</footer>
</div><!-- /page-wrapper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Télécharger le fichier source