c2aaebd6c1
- Aggiunta docs/commercial/landing-nis2-agile.html (landing page 7 sezioni) Hero con mockup dashboard, trust bar compliance, problema/soluzione, 5-step come funziona, 4 metriche, CTA finale. Palette cyan dark, responsive. - AgentAI Hub (agentai.certisource.it): products.json NIS2 corretto (Vanilla JS, releaseDate Q1 2026, 8 features, links completi) - Presentazione aggiornata: Tailwind→CSS3, slide Pricing aggiunta (ora 9 slide) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1018 lines
38 KiB
HTML
1018 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>NIS2 Agile — Compliance NIS2 in ore, non mesi | Agile Technology SRL</title>
|
||
<meta name="description" content="Piattaforma SaaS multi-tenant per la compliance alla Direttiva NIS2. Gap analysis, risk management, incident response Art.23, policy AI-generate con Claude.">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
:root {
|
||
--brand-primary: #0F172A;
|
||
--surface-darker: #0F172A;
|
||
--surface-dark: #1E293B;
|
||
--surface-card: rgba(30, 41, 59, 0.8);
|
||
--brand-accent: #06B6D4;
|
||
--brand-accent2: #3B82F6;
|
||
--brand-gradient: linear-gradient(135deg, #06B6D4, #3B82F6);
|
||
--text-white: #F8FAFC;
|
||
--text-light: #CBD5E1;
|
||
--text-muted: #94A3B8;
|
||
--border-color: rgba(6, 182, 212, 0.12);
|
||
--green: #10B981;
|
||
--yellow: #EAB308;
|
||
--orange: #F59E0B;
|
||
--red: #EF4444;
|
||
--cyan: #06B6D4;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--brand-primary);
|
||
color: var(--text-light);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ── NAV ── */
|
||
nav {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0;
|
||
z-index: 100;
|
||
background: rgba(15, 23, 42, 0.92);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding: 0 40px;
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.nav-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
text-decoration: none;
|
||
}
|
||
.nav-icon {
|
||
width: 36px; height: 36px;
|
||
background: var(--brand-gradient);
|
||
border-radius: 10px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px;
|
||
color: white;
|
||
}
|
||
.nav-name {
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
color: var(--text-white);
|
||
}
|
||
.nav-name span { color: var(--cyan); }
|
||
.nav-actions { display: flex; gap: 12px; align-items: center; }
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 24px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
transition: all 0.25s ease;
|
||
border: none;
|
||
}
|
||
.btn-primary {
|
||
background: var(--brand-gradient);
|
||
color: white;
|
||
box-shadow: 0 4px 16px rgba(6,182,212,0.25);
|
||
}
|
||
.btn-primary:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 8px 24px rgba(6,182,212,0.35);
|
||
}
|
||
.btn-ghost {
|
||
background: transparent;
|
||
color: var(--text-light);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
.btn-ghost:hover {
|
||
border-color: var(--cyan);
|
||
color: var(--cyan);
|
||
}
|
||
|
||
/* ── SECTIONS ── */
|
||
section { padding: 100px 40px; max-width: 1200px; margin: 0 auto; }
|
||
.section-full { max-width: 100%; padding-left: 0; padding-right: 0; }
|
||
|
||
/* ── HERO ── */
|
||
#hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 64px;
|
||
max-width: 1200px;
|
||
}
|
||
.hero-wrap {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: rgba(6,182,212,0.1);
|
||
border: 1px solid rgba(6,182,212,0.25);
|
||
border-radius: 20px;
|
||
padding: 6px 16px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--cyan);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero-title {
|
||
font-size: 52px;
|
||
font-weight: 900;
|
||
line-height: 1.08;
|
||
color: var(--text-white);
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero-title .gradient {
|
||
background: var(--brand-gradient);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.hero-subtitle {
|
||
font-size: 18px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 36px;
|
||
line-height: 1.7;
|
||
}
|
||
.hero-ctas {
|
||
display: flex;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 48px;
|
||
}
|
||
.hero-stats {
|
||
display: flex;
|
||
gap: 32px;
|
||
}
|
||
.hero-stat { text-align: center; }
|
||
.hero-stat-num {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
color: var(--cyan);
|
||
}
|
||
.hero-stat-label {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
.hero-visual {
|
||
background: var(--surface-dark);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 24px 80px rgba(6,182,212,0.1);
|
||
}
|
||
.hero-visual-bar {
|
||
background: var(--surface-darker);
|
||
padding: 12px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
.dot { width: 10px; height: 10px; border-radius: 50%; }
|
||
.dot-red { background: #EF4444; }
|
||
.dot-yellow { background: #EAB308; }
|
||
.dot-green { background: #10B981; }
|
||
.hero-url {
|
||
margin-left: 12px;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
font-family: monospace;
|
||
}
|
||
.hero-mock {
|
||
padding: 28px;
|
||
}
|
||
.mock-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
.mock-title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: var(--text-white);
|
||
}
|
||
.mock-score {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
color: var(--cyan);
|
||
}
|
||
.mock-gauge {
|
||
height: 8px;
|
||
background: rgba(6,182,212,0.1);
|
||
border-radius: 4px;
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
}
|
||
.mock-gauge-fill {
|
||
height: 100%;
|
||
width: 73%;
|
||
background: var(--brand-gradient);
|
||
border-radius: 4px;
|
||
}
|
||
.mock-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
.mock-card {
|
||
background: rgba(6,182,212,0.05);
|
||
border: 1px solid rgba(6,182,212,0.1);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
}
|
||
.mock-card-label {
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.mock-card-value {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--text-white);
|
||
}
|
||
.status-dot {
|
||
display: inline-block;
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
margin-right: 4px;
|
||
}
|
||
.status-ok { background: var(--green); }
|
||
.status-warn { background: var(--orange); }
|
||
.status-err { background: var(--red); }
|
||
|
||
/* ── TRUST BAR ── */
|
||
#trust {
|
||
padding: 0 40px 0;
|
||
max-width: 1200px;
|
||
}
|
||
.trust-wrap {
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
padding: 28px 40px;
|
||
background: var(--surface-dark);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 40px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.trust-label {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
.trust-divider {
|
||
width: 1px;
|
||
height: 32px;
|
||
background: var(--border-color);
|
||
}
|
||
.trust-badges {
|
||
display: flex;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
}
|
||
.trust-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text-light);
|
||
}
|
||
.trust-badge i { color: var(--cyan); font-size: 16px; }
|
||
|
||
/* ── SECTION HEADERS ── */
|
||
.section-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
color: var(--cyan);
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-title {
|
||
font-size: 38px;
|
||
font-weight: 800;
|
||
color: var(--text-white);
|
||
margin-bottom: 16px;
|
||
line-height: 1.15;
|
||
}
|
||
.section-sub {
|
||
font-size: 17px;
|
||
color: var(--text-muted);
|
||
max-width: 600px;
|
||
margin-bottom: 56px;
|
||
}
|
||
|
||
/* ── PROBLEMA ── */
|
||
#problema { background: linear-gradient(180deg, var(--brand-primary) 0%, #0d1520 100%); }
|
||
.problema-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
.problema-card {
|
||
background: var(--surface-dark);
|
||
border: 1px solid rgba(239,68,68,0.15);
|
||
border-radius: 16px;
|
||
padding: 32px 28px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.problema-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--red), var(--orange));
|
||
}
|
||
.problema-icon {
|
||
width: 52px; height: 52px;
|
||
background: rgba(239,68,68,0.1);
|
||
border: 1px solid rgba(239,68,68,0.2);
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 22px;
|
||
color: var(--red);
|
||
margin-bottom: 20px;
|
||
}
|
||
.problema-card h3 {
|
||
font-size: 19px;
|
||
font-weight: 700;
|
||
color: var(--text-white);
|
||
margin-bottom: 12px;
|
||
}
|
||
.problema-card p {
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
line-height: 1.7;
|
||
}
|
||
.problema-stat {
|
||
margin-top: 20px;
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
color: var(--red);
|
||
}
|
||
.problema-stat span {
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* ── SOLUZIONE ── */
|
||
#soluzione {}
|
||
.soluzione-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
.feature-card {
|
||
background: var(--surface-dark);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 14px;
|
||
padding: 28px;
|
||
transition: all 0.25s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.feature-card:hover {
|
||
border-color: var(--cyan);
|
||
box-shadow: 0 8px 32px rgba(6,182,212,0.12);
|
||
transform: translateY(-2px);
|
||
}
|
||
.feature-icon {
|
||
width: 48px; height: 48px;
|
||
background: rgba(6,182,212,0.1);
|
||
border: 1px solid rgba(6,182,212,0.2);
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px;
|
||
color: var(--cyan);
|
||
margin-bottom: 18px;
|
||
}
|
||
.feature-card h3 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: var(--text-white);
|
||
margin-bottom: 10px;
|
||
}
|
||
.feature-card p {
|
||
font-size: 13.5px;
|
||
color: var(--text-muted);
|
||
line-height: 1.7;
|
||
}
|
||
.feature-tag {
|
||
margin-top: 16px;
|
||
display: inline-block;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
padding: 3px 10px;
|
||
border-radius: 10px;
|
||
background: rgba(6,182,212,0.1);
|
||
color: var(--cyan);
|
||
}
|
||
|
||
/* ── COME FUNZIONA ── */
|
||
#come-funziona { background: var(--surface-darker); }
|
||
.steps-wrap { position: relative; }
|
||
.steps-line {
|
||
position: absolute;
|
||
top: 40px; left: 0; right: 0;
|
||
height: 2px;
|
||
background: var(--border-color);
|
||
z-index: 0;
|
||
}
|
||
.steps-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 24px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.step {
|
||
text-align: center;
|
||
}
|
||
.step-num {
|
||
width: 56px; height: 56px;
|
||
background: var(--brand-gradient);
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: white;
|
||
margin: 0 auto 16px;
|
||
box-shadow: 0 4px 20px rgba(6,182,212,0.3);
|
||
}
|
||
.step h4 {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--text-white);
|
||
margin-bottom: 8px;
|
||
}
|
||
.step p {
|
||
font-size: 12.5px;
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ── METRICHE ── */
|
||
#metriche {}
|
||
.metriche-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.metrica-card {
|
||
background: var(--surface-dark);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 14px;
|
||
padding: 32px 24px;
|
||
text-align: center;
|
||
transition: all 0.25s ease;
|
||
}
|
||
.metrica-card:hover {
|
||
border-color: var(--cyan);
|
||
box-shadow: 0 8px 32px rgba(6,182,212,0.1);
|
||
}
|
||
.metrica-num {
|
||
font-size: 46px;
|
||
font-weight: 900;
|
||
background: var(--brand-gradient);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
line-height: 1;
|
||
margin-bottom: 10px;
|
||
}
|
||
.metrica-label {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-light);
|
||
margin-bottom: 6px;
|
||
}
|
||
.metrica-sub {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
.compliance-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.compliance-badge {
|
||
background: var(--surface-dark);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 10px;
|
||
padding: 14px 16px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--text-light);
|
||
}
|
||
.compliance-badge i {
|
||
display: block;
|
||
font-size: 18px;
|
||
color: var(--cyan);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* ── CTA FINALE ── */
|
||
#cta-finale {
|
||
background: linear-gradient(135deg, rgba(6,182,212,0.06) 0%, rgba(59,130,246,0.06) 100%);
|
||
border-top: 1px solid var(--border-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding: 80px 40px;
|
||
text-align: center;
|
||
}
|
||
#cta-finale .section-full { max-width: 700px; margin: 0 auto; }
|
||
.cta-title {
|
||
font-size: 44px;
|
||
font-weight: 900;
|
||
color: var(--text-white);
|
||
margin-bottom: 20px;
|
||
line-height: 1.15;
|
||
}
|
||
.cta-title .gradient {
|
||
background: var(--brand-gradient);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.cta-sub {
|
||
font-size: 17px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 40px;
|
||
}
|
||
.cta-buttons {
|
||
display: flex;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 32px;
|
||
}
|
||
.cta-contact {
|
||
display: flex;
|
||
gap: 32px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
}
|
||
.cta-contact a {
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: color 0.2s;
|
||
}
|
||
.cta-contact a:hover { color: var(--cyan); }
|
||
|
||
/* ── FOOTER ── */
|
||
footer {
|
||
padding: 32px 40px;
|
||
border-top: 1px solid var(--border-color);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
.footer-brand {
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
}
|
||
.footer-brand strong { color: var(--text-light); }
|
||
.footer-links {
|
||
display: flex;
|
||
gap: 24px;
|
||
}
|
||
.footer-links a {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
.footer-links a:hover { color: var(--cyan); }
|
||
|
||
/* ── RESPONSIVE ── */
|
||
@media (max-width: 768px) {
|
||
nav { padding: 0 20px; }
|
||
section { padding: 60px 20px; }
|
||
.hero-wrap { grid-template-columns: 1fr; }
|
||
.hero-visual { display: none; }
|
||
.hero-title { font-size: 36px; }
|
||
.problema-grid { grid-template-columns: 1fr; }
|
||
.soluzione-grid { grid-template-columns: 1fr 1fr; }
|
||
.steps-grid { grid-template-columns: 1fr 1fr; }
|
||
.steps-line { display: none; }
|
||
.metriche-grid { grid-template-columns: 1fr 1fr; }
|
||
.compliance-row { grid-template-columns: 1fr 1fr; }
|
||
.trust-wrap { gap: 20px; }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.soluzione-grid { grid-template-columns: 1fr; }
|
||
.steps-grid { grid-template-columns: 1fr; }
|
||
.nav-actions .btn-ghost { display: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<a class="nav-brand" href="https://agentai.certisource.it/">
|
||
<div class="nav-icon"><i class="fa-solid fa-shield-halved"></i></div>
|
||
<span class="nav-name">NIS2 <span>Agile</span></span>
|
||
</a>
|
||
<div class="nav-actions">
|
||
<a class="btn btn-ghost" href="https://agentai.certisource.it/">
|
||
<i class="fa-solid fa-arrow-left"></i> Catalogo
|
||
</a>
|
||
<a class="btn btn-primary" href="https://nis2.certisource.it/">
|
||
<i class="fa-solid fa-arrow-right-to-bracket"></i> Accedi alla piattaforma
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section id="hero" style="padding-top: 100px;">
|
||
<div class="hero-wrap">
|
||
<div>
|
||
<div class="hero-badge">
|
||
<i class="fa-solid fa-circle" style="font-size:7px;"></i>
|
||
Live — Compliance NIS2 EU 2022/2555
|
||
</div>
|
||
<h1 class="hero-title">
|
||
Compliance NIS2<br>
|
||
<span class="gradient">in ore, non mesi.</span>
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
Piattaforma SaaS multi-tenant per la compliance alla Direttiva NIS2 e D.Lgs. 138/2024. Gap analysis con 80 domande Art.21, risk management ISO 27005, incident response Art.23 e policy generate con Claude AI.
|
||
</p>
|
||
<div class="hero-ctas">
|
||
<a class="btn btn-primary" href="https://nis2.certisource.it/" style="padding: 14px 32px; font-size: 16px;">
|
||
<i class="fa-solid fa-arrow-right-to-bracket"></i> Accedi alla piattaforma
|
||
</a>
|
||
<a class="btn btn-ghost" href="mailto:presidenza@agile.software?subject=Demo%20NIS2%20Agile" style="padding: 14px 28px; font-size: 16px;">
|
||
<i class="fa-solid fa-calendar-check"></i> Richiedi demo
|
||
</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">80</div>
|
||
<div class="hero-stat-label">domande gap</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">10</div>
|
||
<div class="hero-stat-label">domini Art.21</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">15</div>
|
||
<div class="hero-stat-label">moduli operativi</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">100%</div>
|
||
<div class="hero-stat-label">EU hosted</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="hero-visual-bar">
|
||
<div class="dot dot-red"></div>
|
||
<div class="dot dot-yellow"></div>
|
||
<div class="dot dot-green"></div>
|
||
<span class="hero-url">nis2.certisource.it — Dashboard</span>
|
||
</div>
|
||
<div class="hero-mock">
|
||
<div class="mock-header">
|
||
<div class="mock-title">Compliance Score</div>
|
||
<div class="mock-score">73%</div>
|
||
</div>
|
||
<div class="mock-gauge"><div class="mock-gauge-fill"></div></div>
|
||
<div class="mock-grid">
|
||
<div class="mock-card">
|
||
<div class="mock-card-label">Rischi aperti</div>
|
||
<div class="mock-card-value">
|
||
<span class="status-dot status-warn"></span>12 attivi
|
||
</div>
|
||
</div>
|
||
<div class="mock-card">
|
||
<div class="mock-card-label">Incident Art.23</div>
|
||
<div class="mock-card-value">
|
||
<span class="status-dot status-ok"></span>Tutti notificati
|
||
</div>
|
||
</div>
|
||
<div class="mock-card">
|
||
<div class="mock-card-label">Policy AI</div>
|
||
<div class="mock-card-value">
|
||
<span class="status-dot status-ok"></span>8 approvate
|
||
</div>
|
||
</div>
|
||
<div class="mock-card">
|
||
<div class="mock-card-label">Audit log</div>
|
||
<div class="mock-card-value">
|
||
<span class="status-dot status-ok"></span>Immutabile
|
||
</div>
|
||
</div>
|
||
<div class="mock-card">
|
||
<div class="mock-card-label">Fornitori</div>
|
||
<div class="mock-card-value">
|
||
<span class="status-dot status-warn"></span>3 da valutare
|
||
</div>
|
||
</div>
|
||
<div class="mock-card">
|
||
<div class="mock-card-label">Formazione</div>
|
||
<div class="mock-card-value">
|
||
<span class="status-dot status-ok"></span>87% completata
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TRUST BAR -->
|
||
<section id="trust" style="padding: 0 40px 80px; max-width: 1200px;">
|
||
<div class="trust-wrap">
|
||
<span class="trust-label">Conforme a</span>
|
||
<div class="trust-divider"></div>
|
||
<div class="trust-badges">
|
||
<div class="trust-badge">
|
||
<i class="fa-solid fa-shield-halved"></i>
|
||
NIS2 EU 2022/2555
|
||
</div>
|
||
<div class="trust-badge">
|
||
<i class="fa-solid fa-gavel"></i>
|
||
D.Lgs. 138/2024
|
||
</div>
|
||
<div class="trust-badge">
|
||
<i class="fa-solid fa-certificate"></i>
|
||
ISO 27001 / 27005
|
||
</div>
|
||
<div class="trust-badge">
|
||
<i class="fa-solid fa-lock"></i>
|
||
GDPR Art. 44+
|
||
</div>
|
||
<div class="trust-badge">
|
||
<i class="fa-solid fa-brain"></i>
|
||
Claude AI (Anthropic)
|
||
</div>
|
||
<div class="trust-badge">
|
||
<i class="fa-solid fa-server"></i>
|
||
EU Data Residency
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PROBLEMA -->
|
||
<section id="problema" style="padding: 80px 40px; max-width: 100%; background: linear-gradient(180deg, #0F172A 0%, #0d1520 100%);">
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div class="section-label"><i class="fa-solid fa-triangle-exclamation"></i> Il problema</div>
|
||
<h2 class="section-title">La compliance NIS2 non è opzionale.<br>Le sanzioni sì.</h2>
|
||
<p class="section-sub">Le organizzazioni soggette alla NIS2 devono dimostrare conformità continua. Farlo manualmente è lento, costoso e incompleto.</p>
|
||
<div class="problema-grid">
|
||
<div class="problema-card">
|
||
<div class="problema-icon"><i class="fa-solid fa-euro-sign"></i></div>
|
||
<h3>Sanzioni fino a €10 milioni</h3>
|
||
<p>La NIS2 prevede sanzioni fino a €10M o il 2% del fatturato globale per mancata conformità. Il D.Lgs. 138/2024 aggiunge responsabilità personale per i vertici aziendali.</p>
|
||
<div class="problema-stat">€10M <span>o 2% fatturato globale</span></div>
|
||
</div>
|
||
<div class="problema-card">
|
||
<div class="problema-icon"><i class="fa-solid fa-hourglass-half"></i></div>
|
||
<h3>Gap analysis mesi di lavoro</h3>
|
||
<p>Un'analisi di conformità NIS2 manuale richiede settimane di audit interni, fogli Excel e consulenze costose. Il risultato è già obsoleto quando viene completato.</p>
|
||
<div class="problema-stat">10–20 gg <span>per gap analysis tradizionale</span></div>
|
||
</div>
|
||
<div class="problema-card">
|
||
<div class="problema-icon"><i class="fa-solid fa-bell-slash"></i></div>
|
||
<h3>Incident response improvvisato</h3>
|
||
<p>L'Art. 23 NIS2 impone notifica all'ACN/CSIRT entro 24h (early warning), 72h (notifica formale) e 30 giorni (report finale). Senza workflow automatizzato è impossibile rispettare i termini.</p>
|
||
<div class="problema-stat">24 ore <span>per l'early warning all'ACN</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SOLUZIONE -->
|
||
<section id="soluzione">
|
||
<div class="section-label"><i class="fa-solid fa-shield-halved"></i> La soluzione</div>
|
||
<h2 class="section-title">Una piattaforma,<br><span style="background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">compliance completa.</span></h2>
|
||
<p class="section-sub">Tutti i requisiti NIS2 in un'unica piattaforma integrata. Dall'assessment iniziale al monitoraggio continuo, con AI che automatizza il lavoro ripetitivo.</p>
|
||
<div class="soluzione-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-magnifying-glass-chart"></i></div>
|
||
<h3>Gap Analysis Art. 21</h3>
|
||
<p>80 domande strutturate su 10 domini di sicurezza (governance, risk, supply chain, crittografia, BCP…). Scoring automatico per area con priorità di intervento.</p>
|
||
<span class="feature-tag">Assessment</span>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
||
<h3>Risk Management ISO 27005</h3>
|
||
<p>Registro rischi con matrice 5×5 impatto/probabilità. AI suggerisce rischi per settore e asset. Trattamenti documentati e storico completo.</p>
|
||
<span class="feature-tag">Risk</span>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-bell"></i></div>
|
||
<h3>Incident Response Art. 23</h3>
|
||
<p>Workflow guidato con decision tree per classificare la significatività. Alert automatici 24h/72h/30d con email template per ACN/CSIRT e log immutabile.</p>
|
||
<span class="feature-tag">Incident</span>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-file-shield"></i></div>
|
||
<h3>Policy AI-Generate</h3>
|
||
<p>Claude AI genera bozze policy di sicurezza personalizzate sul contesto aziendale. Workflow di approvazione con versioning e banner warning su bozze.</p>
|
||
<span class="feature-tag">AI Policy</span>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-link"></i></div>
|
||
<h3>Supply Chain Security</h3>
|
||
<p>Assessment sicurezza fornitori con scoring. Overview rischio terze parti, mapping dipendenze critiche e storico valutazioni per audit.</p>
|
||
<span class="feature-tag">Supply Chain</span>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-circle-check"></i></div>
|
||
<h3>NCR/CAPA & Audit</h3>
|
||
<p>Non conformità e azioni correttive (CAPA) tracciate end-to-end. Audit log immutabile via trigger MySQL. Export report executive per board e autorità.</p>
|
||
<span class="feature-tag">Audit</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COME FUNZIONA -->
|
||
<section id="come-funziona" style="padding: 80px 40px; max-width: 100%; background: var(--surface-darker);">
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div class="section-label"><i class="fa-solid fa-route"></i> Come funziona</div>
|
||
<h2 class="section-title">Da zero a conforme in 5 passi</h2>
|
||
<p class="section-sub" style="margin-bottom: 60px;">Onboarding guidato, nessuna configurazione complessa.</p>
|
||
<div class="steps-wrap">
|
||
<div class="steps-line"></div>
|
||
<div class="steps-grid">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<h4>Registrazione</h4>
|
||
<p>Wizard 5 step. Auto-fill dati aziendali da P.IVA via CertiSource API. Classificazione NIS2 automatica (essenziale/importante).</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<h4>Gap Analysis</h4>
|
||
<p>80 domande Art. 21 su 10 domini. Progress bar in tempo reale. AI analizza i gap e genera raccomandazioni prioritizzate.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<h4>Risk Register</h4>
|
||
<p>AI suggerisce rischi specifici per settore e asset. Matrice 5×5 live. Piani di trattamento documentati e assegnati.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<h4>Operatività continua</h4>
|
||
<p>Incidenti, policy, formazione, supply chain: ogni modulo operativo integrato con audit log immutabile e notifiche automatiche.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">5</div>
|
||
<h4>Report & Audit</h4>
|
||
<p>Report executive HTML/PDF stampabile, export CSV, mapping ISO 27001. Pronto per ispezione ACN e board di direzione.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- METRICHE -->
|
||
<section id="metriche">
|
||
<div class="section-label"><i class="fa-solid fa-chart-bar"></i> Numeri</div>
|
||
<h2 class="section-title">Progettato per essere completo</h2>
|
||
<p class="section-sub">Una piattaforma production-ready con 24.000+ righe di codice, 50+ file sorgente, deployata su Hetzner EU.</p>
|
||
<div class="metriche-grid">
|
||
<div class="metrica-card">
|
||
<div class="metrica-num">80</div>
|
||
<div class="metrica-label">Domande gap analysis</div>
|
||
<div class="metrica-sub">10 domini Art. 21 NIS2</div>
|
||
</div>
|
||
<div class="metrica-card">
|
||
<div class="metrica-num">15</div>
|
||
<div class="metrica-label">Moduli operativi</div>
|
||
<div class="metrica-sub">Assessment, Risk, Incident, Policy, Supply Chain, CAPA…</div>
|
||
</div>
|
||
<div class="metrica-card">
|
||
<div class="metrica-num">22</div>
|
||
<div class="metrica-label">Tabelle database</div>
|
||
<div class="metrica-sub">Schema multi-tenant con audit log immutabile</div>
|
||
</div>
|
||
<div class="metrica-card">
|
||
<div class="metrica-num">4</div>
|
||
<div class="metrica-label">Funzioni AI</div>
|
||
<div class="metrica-sub">Gap analysis, risk suggest, policy gen, incident classify</div>
|
||
</div>
|
||
</div>
|
||
<div class="compliance-row">
|
||
<div class="compliance-badge">
|
||
<i class="fa-solid fa-shield-halved"></i>
|
||
NIS2<br>EU 2022/2555
|
||
</div>
|
||
<div class="compliance-badge">
|
||
<i class="fa-solid fa-gavel"></i>
|
||
D.Lgs.<br>138/2024
|
||
</div>
|
||
<div class="compliance-badge">
|
||
<i class="fa-solid fa-certificate"></i>
|
||
ISO 27001<br>/ 27005
|
||
</div>
|
||
<div class="compliance-badge">
|
||
<i class="fa-solid fa-lock"></i>
|
||
GDPR<br>Art. 44+
|
||
</div>
|
||
<div class="compliance-badge">
|
||
<i class="fa-brands fa-docker"></i>
|
||
Docker<br>Compose
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA FINALE -->
|
||
<div id="cta-finale">
|
||
<div style="max-width: 700px; margin: 0 auto; text-align: center;">
|
||
<div class="section-label" style="justify-content: center;"><i class="fa-solid fa-rocket"></i> Inizia ora</div>
|
||
<h2 class="cta-title">
|
||
Pronto per la<br>
|
||
<span class="gradient">compliance NIS2?</span>
|
||
</h2>
|
||
<p class="cta-sub">
|
||
Accedi alla piattaforma o richiedi una demo guidata con il nostro team.
|
||
</p>
|
||
<div class="cta-buttons">
|
||
<a class="btn btn-primary" href="https://nis2.certisource.it/" style="padding: 16px 36px; font-size: 16px;">
|
||
<i class="fa-solid fa-arrow-right-to-bracket"></i> Accedi alla piattaforma
|
||
</a>
|
||
<a class="btn btn-ghost" href="mailto:presidenza@agile.software?subject=Demo%20NIS2%20Agile" style="padding: 16px 28px; font-size: 16px;">
|
||
<i class="fa-solid fa-envelope"></i> Richiedi demo
|
||
</a>
|
||
</div>
|
||
<div class="cta-contact">
|
||
<a href="https://agentai.certisource.it/"><i class="fa-solid fa-grid-2"></i> Tutti i prodotti</a>
|
||
<a href="mailto:presidenza@agile.software"><i class="fa-solid fa-envelope"></i> presidenza@agile.software</a>
|
||
<a href="https://agile.software"><i class="fa-solid fa-globe"></i> agile.software</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="footer-brand">
|
||
<strong>Agile Technology SRL</strong> — P.IVA 07776161213 —
|
||
<a href="https://agile.software" style="color: var(--cyan); text-decoration: none;">agile.software</a>
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="https://agentai.certisource.it/presentations/nis2-agile.html">Presentazione</a>
|
||
<a href="https://agentai.certisource.it/scheda.html?id=nis2-agile&type=funzionale">Scheda funzionale</a>
|
||
<a href="https://agentai.certisource.it/scheda.html?id=nis2-agile&type=tecnica">Scheda tecnica</a>
|
||
<a href="mailto:presidenza@agile.software?subject=Richiesta%20Info%20-%20NIS2%20Agile">Contatti</a>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|