b1dcd4cbd7
MktgLeadController.php: - Endpoint POST /api/mktg-lead/submit (standard condiviso TRPG/NIS2) - Proxy a mktg.agile.software/api/webhook/leads con X-Webhook-Key server-side - Payload standard: name, email, phone, company, product_interest, source, notes - source: "nis2-landing" per tracciamento CRM - Fallback email a info@agile.software se webhook non raggiungibile - Rate limit 3/10min per IP, supporto campi IT e EN index.html — form allineato a TRPG: - Aggiunto: telefono (opzionale) - Aggiunto: tipo utilizzo (select 6 opzioni) - N° dipendenti: fasce standardizzate (<50/50-249/250-999/1000+) - Aggiunto: interesse (info/demo/accesso/integrazione B2B) - Endpoint aggiornato a /api/mktg-lead/submit - Payload mappato su campi standard EN + source: "nis2-landing" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1128 lines
51 KiB
HTML
1128 lines
51 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 semplificata per aziende e consulenti</title>
|
||
<meta name="description" content="Piattaforma SaaS multi-tenant per la compliance alla Direttiva NIS2 (EU 2022/2555) e D.Lgs. 138/2024. Gap analysis AI, risk management, incident response Art.23, policy, formazione.">
|
||
<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: #EF4444;
|
||
--brand-accent2: #3B82F6;
|
||
--brand-gradient: linear-gradient(135deg, #EF4444, #DC2626);
|
||
--text-white: #F8FAFC;
|
||
--text-light: #CBD5E1;
|
||
--text-muted: #94A3B8;
|
||
--border-color: rgba(239, 68, 68, 0.12);
|
||
--green: #10B981;
|
||
--yellow: #EAB308;
|
||
--orange: #F59E0B;
|
||
--red: #EF4444;
|
||
--cyan: #EF4444;
|
||
}
|
||
|
||
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-invite {
|
||
background: var(--brand-gradient);
|
||
color: white;
|
||
box-shadow: 0 4px 16px rgba(239,68,68,0.25);
|
||
}
|
||
.btn-invite:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 8px 24px rgba(239,68,68,0.35);
|
||
}
|
||
.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-sm { padding: 8px 18px; font-size: 13px; }
|
||
.btn-primary {
|
||
background: var(--brand-gradient);
|
||
color: white;
|
||
box-shadow: 0 4px 16px rgba(239,68,68,0.25);
|
||
}
|
||
.btn-primary:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 8px 24px rgba(239,68,68,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);
|
||
}
|
||
.btn-lg { padding: 14px 32px; font-size: 16px; }
|
||
|
||
/* ── LAYOUT ── */
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
|
||
section { padding: 100px 0; }
|
||
|
||
/* ── HERO ── */
|
||
#hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 64px;
|
||
}
|
||
.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(239,68,68,0.1);
|
||
border: 1px solid rgba(239,68,68,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);
|
||
}
|
||
/* Mock dashboard visual */
|
||
.hero-visual {
|
||
background: var(--surface-dark);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 24px 80px rgba(239,68,68,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(239,68,68,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; margin-bottom: 16px; }
|
||
.mock-card { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,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); }
|
||
.mock-incident { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15); border-radius: 8px; padding: 12px; display: flex; align-items: center; gap: 10px; }
|
||
.mock-incident-icon { color: var(--red); font-size: 14px; }
|
||
.mock-incident-text { font-size: 12px; color: var(--text-light); }
|
||
.mock-incident-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
|
||
|
||
/* ── PROBLEMA ── */
|
||
#problema { background: var(--surface-dark); }
|
||
#problema .container-full { max-width: 100%; }
|
||
.problema-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
.problema-card {
|
||
background: var(--brand-primary);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
}
|
||
.problema-card.highlight {
|
||
border-color: rgba(239,68,68,0.3);
|
||
background: rgba(239,68,68,0.04);
|
||
}
|
||
.problema-icon {
|
||
width: 48px; height: 48px;
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.icon-red { background: rgba(239,68,68,0.12); color: var(--red); }
|
||
.icon-orange { background: rgba(245,158,11,0.12); color: var(--orange); }
|
||
.icon-cyan { background: rgba(239,68,68,0.12); color: var(--cyan); }
|
||
.icon-blue { background: rgba(59,130,246,0.12); color: var(--brand-accent2); }
|
||
.icon-green { background: rgba(16,185,129,0.12); color: var(--green); }
|
||
.icon-purple { background: rgba(168,85,247,0.12); color: #A855F7; }
|
||
.problema-card h3 { font-size: 18px; font-weight: 700; color: var(--text-white); margin-bottom: 12px; }
|
||
.problema-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
|
||
.tag-badge {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 3px 10px;
|
||
border-radius: 20px;
|
||
margin-top: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.tag-red { background: rgba(239,68,68,0.12); color: var(--red); }
|
||
.tag-orange { background: rgba(245,158,11,0.12); color: var(--orange); }
|
||
.tag-cyan { background: rgba(239,68,68,0.12); color: var(--cyan); }
|
||
|
||
/* ── SECTION HEADERS ── */
|
||
.section-header { text-align: center; margin-bottom: 64px; }
|
||
.section-eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
color: var(--cyan);
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-title {
|
||
font-size: 40px;
|
||
font-weight: 800;
|
||
color: var(--text-white);
|
||
line-height: 1.15;
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-title .gradient {
|
||
background: var(--brand-gradient);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.section-desc { font-size: 17px; color: var(--text-muted); max-width: 600px; margin: 0 auto; line-height: 1.7; }
|
||
|
||
/* ── PER CHI E' ── */
|
||
#target { }
|
||
.target-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 32px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.target-card {
|
||
background: var(--surface-dark);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.target-card.card-blue {
|
||
border-color: rgba(59,130,246,0.3);
|
||
}
|
||
.target-card.card-blue::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; right: 0;
|
||
width: 200px; height: 200px;
|
||
background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.target-card.card-cyan {
|
||
border-color: rgba(239,68,68,0.3);
|
||
}
|
||
.target-card.card-cyan::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; right: 0;
|
||
width: 200px; height: 200px;
|
||
background: radial-gradient(circle, rgba(239,68,68,0.08) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.target-card-icon {
|
||
width: 56px; height: 56px;
|
||
border-radius: 14px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.tc-blue { background: rgba(59,130,246,0.12); color: var(--brand-accent2); }
|
||
.tc-cyan { background: rgba(239,68,68,0.12); color: var(--cyan); }
|
||
.target-card h3 { font-size: 22px; font-weight: 800; color: var(--text-white); margin-bottom: 8px; }
|
||
.target-card .subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; font-weight: 500; }
|
||
.target-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||
.target-list li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
font-size: 14px;
|
||
color: var(--text-light);
|
||
}
|
||
.target-list li i { color: var(--cyan); margin-top: 2px; flex-shrink: 0; font-size: 12px; }
|
||
.target-card.card-blue .target-list li i { color: var(--brand-accent2); }
|
||
.target-infobar {
|
||
background: var(--surface-dark);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
padding: 20px 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
font-size: 14px;
|
||
color: var(--text-light);
|
||
}
|
||
.target-infobar i { color: var(--cyan); font-size: 18px; flex-shrink: 0; }
|
||
|
||
/* ── FEATURES ── */
|
||
#soluzione { background: var(--surface-dark); }
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
.feature-card {
|
||
background: var(--brand-primary);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 16px;
|
||
padding: 28px;
|
||
transition: border-color 0.25s ease, transform 0.25s ease;
|
||
}
|
||
.feature-card:hover {
|
||
border-color: rgba(239,68,68,0.3);
|
||
transform: translateY(-2px);
|
||
}
|
||
.feature-icon {
|
||
width: 48px; height: 48px;
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.feature-card h3 { font-size: 17px; font-weight: 700; color: var(--text-white); margin-bottom: 10px; }
|
||
.feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
|
||
|
||
/* ── 231 BANNER ── */
|
||
#lg231-banner { padding: 60px 0; }
|
||
.lg231-card {
|
||
background: rgba(249,115,22,0.05);
|
||
border: 1px solid rgba(249,115,22,0.2);
|
||
border-radius: 20px;
|
||
padding: 40px 48px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 28px;
|
||
}
|
||
.lg231-icon {
|
||
width: 60px; height: 60px;
|
||
background: rgba(249,115,22,0.12);
|
||
border-radius: 14px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 26px;
|
||
color: #F97316;
|
||
flex-shrink: 0;
|
||
}
|
||
.lg231-content h3 { font-size: 20px; font-weight: 800; color: var(--text-white); margin-bottom: 10px; }
|
||
.lg231-content p { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
|
||
.lg231-points { display: flex; gap: 32px; flex-wrap: wrap; }
|
||
.lg231-point { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-light); }
|
||
.lg231-point i { color: #F97316; font-size: 12px; }
|
||
.btn-orange {
|
||
background: rgba(249,115,22,0.12);
|
||
color: #F97316;
|
||
border: 1px solid rgba(249,115,22,0.3);
|
||
}
|
||
.btn-orange:hover {
|
||
background: rgba(249,115,22,0.2);
|
||
border-color: #F97316;
|
||
}
|
||
|
||
/* ── HOW IT WORKS ── */
|
||
#come-funziona { }
|
||
.steps-wrap {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 24px;
|
||
position: relative;
|
||
}
|
||
.steps-wrap::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 36px; left: 10%; right: 10%;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
|
||
}
|
||
.step {
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.step-num {
|
||
width: 72px; height: 72px;
|
||
background: var(--surface-dark);
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 22px;
|
||
color: var(--cyan);
|
||
margin: 0 auto 20px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.step h4 { font-size: 15px; font-weight: 700; color: var(--text-white); margin-bottom: 8px; }
|
||
.step p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
|
||
|
||
/* ── CTA FINALE ── */
|
||
#cta-finale { background: var(--surface-dark); }
|
||
.cta-box {
|
||
text-align: center;
|
||
background: var(--brand-primary);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 24px;
|
||
padding: 72px 48px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.cta-box::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -60px; left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 400px; height: 400px;
|
||
background: radial-gradient(circle, rgba(239,68,68,0.08) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.cta-box h2 { font-size: 40px; font-weight: 800; color: var(--text-white); margin-bottom: 16px; line-height: 1.2; }
|
||
.cta-box p { font-size: 17px; color: var(--text-muted); margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto; }
|
||
.cta-box .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||
.cta-note { font-size: 13px; color: var(--text-muted); margin-top: 20px; }
|
||
|
||
/* ── FOOTER ── */
|
||
footer {
|
||
background: var(--surface-darker);
|
||
border-top: 1px solid var(--border-color);
|
||
padding: 40px;
|
||
}
|
||
.footer-inner {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
.footer-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.footer-brand-name { font-size: 15px; font-weight: 700; color: var(--text-white); }
|
||
.footer-brand-name span { color: var(--cyan); }
|
||
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
|
||
.footer-links a { font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
|
||
.footer-links a:hover { color: var(--cyan); }
|
||
.footer-copy { font-size: 12px; color: var(--text-muted); }
|
||
|
||
/* ── NORMATIVA HIGHLIGHT ── */
|
||
.norma-strip {
|
||
background: rgba(239,68,68,0.05);
|
||
border: 1px solid rgba(239,68,68,0.15);
|
||
border-radius: 10px;
|
||
padding: 14px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 16px;
|
||
font-size: 13px;
|
||
color: var(--text-light);
|
||
}
|
||
.norma-strip i { color: var(--cyan); }
|
||
|
||
/* ── BADGE INVITO ── */
|
||
.invite-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: rgba(245,158,11,0.1);
|
||
border: 1px solid rgba(245,158,11,0.25);
|
||
border-radius: 8px;
|
||
padding: 8px 16px;
|
||
font-size: 13px;
|
||
color: var(--orange);
|
||
margin-bottom: 20px;
|
||
}
|
||
.invite-badge i { font-size: 12px; }
|
||
|
||
/* ── FORM LEAD ── */
|
||
#richiedi-accesso { background: var(--surface-dark); }
|
||
.form-box {
|
||
background: var(--brand-primary);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 20px;
|
||
padding: 48px;
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
}
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.form-group { display: flex; flex-direction: column; gap: 8px; }
|
||
.form-group.full { grid-column: 1 / -1; }
|
||
.form-group label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text-light);
|
||
}
|
||
.form-group label span { color: var(--red); margin-left: 2px; }
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
background: var(--surface-dark);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
padding: 12px 16px;
|
||
font-size: 14px;
|
||
color: var(--text-white);
|
||
font-family: inherit;
|
||
transition: border-color 0.2s;
|
||
width: 100%;
|
||
}
|
||
.form-group input:focus,
|
||
.form-group select:focus,
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: var(--cyan);
|
||
}
|
||
.form-group input::placeholder,
|
||
.form-group textarea::placeholder { color: var(--text-muted); }
|
||
.form-group select option { background: #1E293B; }
|
||
.form-group textarea { resize: vertical; min-height: 90px; }
|
||
.form-submit { width: 100%; padding: 14px; font-size: 16px; margin-top: 8px; }
|
||
.form-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 12px; }
|
||
.form-success {
|
||
display: none;
|
||
text-align: center;
|
||
padding: 32px;
|
||
}
|
||
.form-success i { font-size: 48px; color: var(--green); margin-bottom: 16px; display: block; }
|
||
.form-success h3 { font-size: 22px; font-weight: 700; color: var(--text-white); margin-bottom: 8px; }
|
||
.form-success p { color: var(--text-muted); font-size: 15px; }
|
||
.form-error-msg {
|
||
display: none;
|
||
background: rgba(239,68,68,0.08);
|
||
border: 1px solid rgba(239,68,68,0.2);
|
||
border-radius: 8px;
|
||
padding: 12px 16px;
|
||
font-size: 13px;
|
||
color: var(--red);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* ── RESPONSIVE ── */
|
||
@media (max-width: 900px) {
|
||
nav { padding: 0 20px; }
|
||
.container { padding: 0 20px; }
|
||
section { padding: 60px 0; }
|
||
.hero-wrap, .target-grid, .features-grid { grid-template-columns: 1fr; }
|
||
.hero-visual { display: none; }
|
||
.hero-title { font-size: 36px; }
|
||
.section-title { font-size: 28px; }
|
||
.problema-grid { grid-template-columns: 1fr; }
|
||
.steps-wrap { grid-template-columns: 1fr 1fr; }
|
||
.steps-wrap::before { display: none; }
|
||
.lg231-card { flex-direction: column; padding: 28px; }
|
||
.footer-inner { flex-direction: column; align-items: flex-start; }
|
||
.nav-actions .btn-ghost { display: none; }
|
||
.form-grid { grid-template-columns: 1fr; }
|
||
.form-box { padding: 28px 20px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<a href="/" class="nav-brand">
|
||
<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 href="/login.html" class="btn btn-ghost btn-sm">
|
||
<i class="fa-solid fa-right-to-bracket"></i> Accedi
|
||
</a>
|
||
<a href="#richiedi-accesso" class="btn btn-primary btn-sm">
|
||
<i class="fa-solid fa-envelope"></i> Richiedi accesso
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section id="hero">
|
||
<div class="container">
|
||
<div class="hero-wrap">
|
||
<div class="hero-left">
|
||
<div class="hero-badge">
|
||
<i class="fa-solid fa-circle-check"></i>
|
||
D.Lgs. 138/2024 — In vigore dal 16 ottobre 2024
|
||
</div>
|
||
<h1 class="hero-title">
|
||
Compliance <span class="gradient">NIS2</span><br>
|
||
semplificata
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
Piattaforma SaaS multi-tenant per guidare la tua azienda alla conformità con la Direttiva NIS2 (EU 2022/2555). Gap analysis AI, risk management, incident response Art.23, policy e formazione — tutto integrato.
|
||
</p>
|
||
<div class="invite-badge">
|
||
<i class="fa-solid fa-lock"></i>
|
||
Accesso su invito — Richiedi il tuo codice per iniziare
|
||
</div>
|
||
<div class="hero-ctas">
|
||
<a href="#richiedi-accesso" class="btn btn-primary btn-lg">
|
||
<i class="fa-solid fa-envelope"></i> Richiedi accesso
|
||
</a>
|
||
<a href="/login.html" class="btn btn-ghost btn-lg">
|
||
<i class="fa-solid fa-right-to-bracket"></i> Ho un codice — Accedi
|
||
</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">18</div>
|
||
<div class="hero-stat-label">Settori regolati</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">80</div>
|
||
<div class="hero-stat-label">Domande gap analysis</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">Art.23</div>
|
||
<div class="hero-stat-label">Incident response 72h</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">AI</div>
|
||
<div class="hero-stat-label">Powered by Claude</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-right">
|
||
<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.agile.software/dashboard</span>
|
||
</div>
|
||
<div class="hero-mock">
|
||
<div class="mock-header">
|
||
<span class="mock-title">Compliance Score Art.21</span>
|
||
<span class="mock-score">73%</span>
|
||
</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 attivi</div>
|
||
<div class="mock-card-value"><span class="status-dot status-warn"></span>3 HIGH</div>
|
||
</div>
|
||
<div class="mock-card">
|
||
<div class="mock-card-label">Incidenti aperti</div>
|
||
<div class="mock-card-value"><span class="status-dot status-err"></span>1 Art.23</div>
|
||
</div>
|
||
<div class="mock-card">
|
||
<div class="mock-card-label">Policy approvate</div>
|
||
<div class="mock-card-value"><span class="status-dot status-ok"></span>8/12</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>85%</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-incident">
|
||
<div class="mock-incident-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
||
<div>
|
||
<div class="mock-incident-text">Ransomware rilevato — Notifica ACN richiesta</div>
|
||
<div class="mock-incident-time">Scadenza 72h: 14h rimanenti · Art. 23 NIS2</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- IL PROBLEMA -->
|
||
<section id="problema">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-eyebrow"><i class="fa-solid fa-circle-exclamation"></i> La sfida normativa</div>
|
||
<h2 class="section-title">L'obbligo NIS2 è già <span class="gradient">in vigore</span></h2>
|
||
<p class="section-desc">Il D.Lgs. 138/2024 è operativo dal 16 ottobre 2024. Le organizzazioni nei settori regolati devono aver avviato la registrazione ACN e l'adeguamento alle misure Art.21.</p>
|
||
</div>
|
||
<div class="problema-grid">
|
||
<div class="problema-card highlight">
|
||
<div class="problema-icon icon-red"><i class="fa-solid fa-gavel"></i></div>
|
||
<h3>Sanzioni fino a €10M</h3>
|
||
<p>Entità essenziali: fino a <strong style="color:var(--text-white)">€10M o 2%</strong> del fatturato globale annuo. Entità importanti: fino a <strong style="color:var(--text-white)">€7M o 1,4%</strong>. L'ACN ha già avviato le prime verifiche.</p>
|
||
<span class="tag-badge tag-red">Art. 34 NIS2</span>
|
||
</div>
|
||
<div class="problema-card">
|
||
<div class="problema-icon icon-orange"><i class="fa-solid fa-building"></i></div>
|
||
<h3>18 Settori regolati</h3>
|
||
<p>11 settori ad alta criticità (energia, trasporti, bancario, infrastrutture digitali…) + 7 settori critici (gestione rifiuti, chimica, alimentare…). Oltre 10.000 aziende italiane interessate.</p>
|
||
<span class="tag-badge tag-orange">D.Lgs. 138/2024</span>
|
||
</div>
|
||
<div class="problema-card">
|
||
<div class="problema-icon icon-cyan"><i class="fa-solid fa-clock"></i></div>
|
||
<h3>Scadenze stringenti</h3>
|
||
<p>Notifica incidenti significativi: early warning in <strong style="color:var(--text-white)">24h</strong>, notifica formale in <strong style="color:var(--text-white)">72h</strong>, report finale in <strong style="color:var(--text-white)">30 giorni</strong>. Nessuna possibilità di deroga.</p>
|
||
<span class="tag-badge tag-cyan">Art. 23 NIS2</span>
|
||
</div>
|
||
</div>
|
||
<div class="norma-strip">
|
||
<i class="fa-solid fa-circle-info"></i>
|
||
<span>La piattaforma NIS2 Agile è allineata al <strong>D.Lgs. 138/2024</strong> (recepimento italiano della Direttiva UE 2022/2555), alle linee guida <strong>ACN</strong> e all'approccio risk-based <strong>ISO/IEC 27001</strong>.</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PER CHI E' -->
|
||
<section id="target">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-eyebrow"><i class="fa-solid fa-users"></i> Per chi è</div>
|
||
<h2 class="section-title">Due target, <span class="gradient">un'unica piattaforma</span></h2>
|
||
<p class="section-desc">NIS2 Agile serve sia l'azienda che gestisce la propria compliance, sia il consulente che segue un portfolio di clienti.</p>
|
||
</div>
|
||
<div class="target-grid">
|
||
<div class="target-card card-blue">
|
||
<div class="target-card-icon tc-blue"><i class="fa-solid fa-building-shield"></i></div>
|
||
<h3>Azienda PMI / Enterprise</h3>
|
||
<p class="subtitle">Settori essenziali e importanti — D.Lgs. 138/2024</p>
|
||
<ul class="target-list">
|
||
<li><i class="fa-solid fa-check"></i> Valuta il livello di compliance con gap analysis guidata da AI</li>
|
||
<li><i class="fa-solid fa-check"></i> Gestisce rischi e misure di sicurezza Art.21 in un unico registro</li>
|
||
<li><i class="fa-solid fa-check"></i> Notifica gli incidenti entro le scadenze Art.23 senza errori</li>
|
||
<li><i class="fa-solid fa-check"></i> Genera policy di sicurezza personalizzate con AI in pochi minuti</li>
|
||
<li><i class="fa-solid fa-check"></i> Monitora la supply chain e la formazione del personale</li>
|
||
<li><i class="fa-solid fa-check"></i> Mantiene audit trail immutabile per le verifiche ACN</li>
|
||
</ul>
|
||
</div>
|
||
<div class="target-card card-cyan">
|
||
<div class="target-card-icon tc-cyan"><i class="fa-solid fa-user-tie"></i></div>
|
||
<h3>Consulente / CISO-as-a-Service</h3>
|
||
<p class="subtitle">MSSP · Consulenti cybersecurity · CISO esterno</p>
|
||
<ul class="target-list">
|
||
<li><i class="fa-solid fa-check"></i> Gestisce un portfolio di clienti da un unico pannello di controllo</li>
|
||
<li><i class="fa-solid fa-check"></i> Ogni cliente ha la propria dashboard dedicata e isolata</li>
|
||
<li><i class="fa-solid fa-check"></i> Attiva licenze per i clienti tramite invite token B2B</li>
|
||
<li><i class="fa-solid fa-check"></i> Monitora compliance score, rischi e incidenti di tutti i clienti</li>
|
||
<li><i class="fa-solid fa-check"></i> Produce report esecutivi personalizzati per ogni azienda</li>
|
||
<li><i class="fa-solid fa-check"></i> Accesso API e webhook per integrazioni con i propri sistemi SIEM</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="target-infobar">
|
||
<i class="fa-solid fa-circle-info"></i>
|
||
<span>Il consulente attiva la licenza per il cliente tramite invite token — il cliente accede direttamente alla propria dashboard dedicata con visibilità completa sulla propria compliance.</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LA SOLUZIONE -->
|
||
<section id="soluzione">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-eyebrow"><i class="fa-solid fa-puzzle-piece"></i> I moduli</div>
|
||
<h2 class="section-title">Tutto ciò che serve per la <span class="gradient">compliance NIS2</span></h2>
|
||
<p class="section-desc">Otto moduli integrati coprono l'intero perimetro dell'Art.21, con AI integrata (Claude) per analisi, suggerimenti e generazione documenti.</p>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-cyan"><i class="fa-solid fa-clipboard-list"></i></div>
|
||
<h3>Gap Analysis AI</h3>
|
||
<p>Questionario di 80 domande sui 10 ambiti dell'Art.21. AI analizza le risposte e produce raccomandazioni prioritizzate per colmare le lacune.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-orange"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
||
<h3>Risk Management</h3>
|
||
<p>Registro rischi con matrice 5×5 ISO 27005, piani di trattamento, monitoraggio e suggerimenti AI contestuali al settore dell'azienda.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-red"><i class="fa-solid fa-bell"></i></div>
|
||
<h3>Incident Response Art.23</h3>
|
||
<p>Workflow completo: early warning 24h, notifica 72h, report finale 30g. Timeline automatica, scadenze calcolate, email CSIRT integrate.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-blue"><i class="fa-solid fa-file-shield"></i></div>
|
||
<h3>Policy Management</h3>
|
||
<p>Generazione AI di policy di sicurezza personalizzate, workflow di approvazione, versioning e revisioni programmate con reminder automatici.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-purple"><i class="fa-solid fa-link"></i></div>
|
||
<h3>Supply Chain</h3>
|
||
<p>Registro fornitori critici, valutazione sicurezza, scoring rischio, monitoraggio requisiti contrattuali e clausole NIS2 nei contratti.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-green"><i class="fa-solid fa-graduation-cap"></i></div>
|
||
<h3>Formazione Art.20</h3>
|
||
<p>Corsi obbligatori per ruolo, assegnazioni automatiche, tracking completamento e compliance formativa documentata per audit.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-cyan"><i class="fa-solid fa-server"></i></div>
|
||
<h3>Asset & Dipendenze</h3>
|
||
<p>Inventario asset critici con mappa delle dipendenze, classificazione per impatto NIS2 e integrazione con la valutazione dei rischi.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-orange"><i class="fa-solid fa-magnifying-glass-chart"></i></div>
|
||
<h3>Audit & Report</h3>
|
||
<p>Controlli ISO/IEC 27001, evidenze, audit trail immutabile (hash chain SHA-256), report esecutivo HTML e export CSV per organi di vigilanza.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-blue"><i class="fa-solid fa-whistle"></i></div>
|
||
<h3>Whistleblowing Art.32</h3>
|
||
<p>Canale segnalazioni anomalie di sicurezza anonime o firmate. Assegnazione a team CISO, stati open/investigating/closed, storico completo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 231 INTEGRATION BANNER -->
|
||
<section id="lg231-banner">
|
||
<div class="container">
|
||
<div class="lg231-card">
|
||
<div class="lg231-icon"><i class="fa-solid fa-scale-balanced"></i></div>
|
||
<div class="lg231-content">
|
||
<h3>Soggetto NIS2? Molto probabilmente sei soggetto anche al D.Lgs. 231/2001</h3>
|
||
<p>Le aziende nei settori essenziali e importanti adottano quasi sempre anche il Modello Organizzativo ex 231. NIS2 Agile e 231 Agile si integrano nativamente: i dati di compliance NIS2 (rischi, incidenti, controlli, score) alimentano automaticamente le evidenze per l'OdV 231, eliminando la duplicazione di lavoro.</p>
|
||
<div class="lg231-points">
|
||
<div class="lg231-point"><i class="fa-solid fa-check"></i> Rischi NIS2 → evidenze MOG 231</div>
|
||
<div class="lg231-point"><i class="fa-solid fa-check"></i> Audit trail condiviso</div>
|
||
<div class="lg231-point"><i class="fa-solid fa-check"></i> OdV ha visibilità diretta sui controlli cyber</div>
|
||
<div class="lg231-point"><i class="fa-solid fa-check"></i> Un'unica piattaforma Agile per entrambe le compliance</div>
|
||
</div>
|
||
</div>
|
||
<div style="flex-shrink:0;align-self:center;">
|
||
<a href="https://lg231.agile.software/" target="_blank" class="btn btn-orange">
|
||
<i class="fa-solid fa-arrow-up-right-from-square"></i> Scopri 231 Agile
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COME FUNZIONA -->
|
||
<section id="come-funziona">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-eyebrow"><i class="fa-solid fa-map"></i> Come funziona</div>
|
||
<h2 class="section-title">Operativo in <span class="gradient">pochi minuti</span></h2>
|
||
<p class="section-desc">Dall'onboarding al primo report di compliance, NIS2 Agile guida l'utente passo dopo passo.</p>
|
||
</div>
|
||
<div class="steps-wrap">
|
||
<div class="step">
|
||
<div class="step-num"><i class="fa-solid fa-user-plus"></i></div>
|
||
<h4>Registrati</h4>
|
||
<p>Crea il tuo account in 2 minuti. Scegli il ruolo (azienda o consulente) e configura la tua organizzazione.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num"><i class="fa-solid fa-building"></i></div>
|
||
<h4>Classifica l'azienda</h4>
|
||
<p>Inserisci P.IVA e NIS2 Agile rileva automaticamente settore, dimensioni e classificazione (essenziale / importante).</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num"><i class="fa-solid fa-clipboard-check"></i></div>
|
||
<h4>Gap Analysis AI</h4>
|
||
<p>Compila il questionario di 80 domande. L'AI analizza le risposte e produce il tuo piano di rientro prioritizzato.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num"><i class="fa-solid fa-chart-line"></i></div>
|
||
<h4>Monitora e mantieni</h4>
|
||
<p>Dashboard in tempo reale, gestisci rischi, incidenti, policy e formazione con alert e scadenze automatiche.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FORM RICHIESTA ACCESSO -->
|
||
<section id="richiedi-accesso">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-eyebrow"><i class="fa-solid fa-envelope"></i> Richiedi accesso</div>
|
||
<h2 class="section-title">Ottieni il tuo <span class="gradient">codice invito</span></h2>
|
||
<p class="section-desc">La piattaforma è ad accesso controllato. Compila il form e ti invieremo il codice invito entro 24 ore.</p>
|
||
</div>
|
||
<div class="form-box">
|
||
<div class="form-error-msg" id="formError"></div>
|
||
<form id="inviteForm">
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label>Nome e Cognome <span>*</span></label>
|
||
<input type="text" name="nome" placeholder="Mario Rossi" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Email aziendale <span>*</span></label>
|
||
<input type="email" name="email" placeholder="mario@azienda.it" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Azienda / Studio <span>*</span></label>
|
||
<input type="text" name="azienda" placeholder="Nome azienda o studio" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Telefono</label>
|
||
<input type="tel" name="telefono" placeholder="+39 02 123456">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Tipo di utilizzo <span>*</span></label>
|
||
<select name="tipo" required>
|
||
<option value="">Seleziona...</option>
|
||
<option value="Azienda soggetta NIS2">Azienda soggetta NIS2</option>
|
||
<option value="Consulente / CISO esterno">Consulente / CISO esterno</option>
|
||
<option value="MSSP / Managed Security Provider">MSSP / Managed Security Provider</option>
|
||
<option value="IT Manager / Responsabile sicurezza">IT Manager / Responsabile sicurezza</option>
|
||
<option value="DPO / Legale / Compliance">DPO / Legale / Compliance</option>
|
||
<option value="Direzione / CEO / CTO">Direzione / CEO / CTO</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>N° dipendenti</label>
|
||
<select name="n_dipendenti">
|
||
<option value="">Seleziona...</option>
|
||
<option value="<50"><50</option>
|
||
<option value="50-249">50–249</option>
|
||
<option value="250-999">250–999</option>
|
||
<option value="1000+">1000+</option>
|
||
<option value="Studio multi-cliente">Studio multi-cliente</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group full">
|
||
<label>Cosa ti interessa? <span>*</span></label>
|
||
<select name="interesse" required>
|
||
<option value="">Seleziona...</option>
|
||
<option value="Informazioni generali">Informazioni generali sul prodotto</option>
|
||
<option value="Demo guidata">Demo guidata con un consulente</option>
|
||
<option value="Accesso immediato">Accesso immediato alla piattaforma</option>
|
||
<option value="Integrazione B2B">Integrazione B2B / API per il mio sistema</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group full">
|
||
<label>Messaggio (opzionale)</label>
|
||
<textarea name="messaggio" placeholder="Descrivi brevemente la tua esigenza o il settore di appartenenza NIS2..."></textarea>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary form-submit" id="submitBtn">
|
||
<i class="fa-solid fa-paper-plane"></i> Invia richiesta
|
||
</button>
|
||
<p class="form-note">
|
||
<i class="fa-solid fa-lock" style="color:var(--cyan);margin-right:4px;font-size:11px;"></i>
|
||
I tuoi dati sono trattati nel rispetto del GDPR. Nessuna cessione a terzi.
|
||
</p>
|
||
</form>
|
||
<div class="form-success" id="formSuccess">
|
||
<i class="fa-solid fa-circle-check"></i>
|
||
<h3>Richiesta inviata!</h3>
|
||
<p>Ti contatteremo entro 24 ore all'indirizzo fornito con il tuo codice di accesso personalizzato.<br><br>
|
||
<strong style="color:var(--text-white);">Hai già ricevuto un codice?</strong><br>
|
||
<a href="/register.html" style="color:var(--cyan);text-decoration:none;">Registrati ora con il tuo codice invito →</a></p>
|
||
</div>
|
||
</div>
|
||
<p style="text-align:center;font-size:13px;color:var(--text-muted);margin-top:24px;">
|
||
Hai già un account? <a href="/login.html" style="color:var(--cyan);text-decoration:none;">Accedi alla dashboard →</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA FINALE -->
|
||
<section id="cta-finale">
|
||
<div class="container">
|
||
<div class="cta-box">
|
||
<h2>La tua compliance NIS2<br><span style="background: var(--brand-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;">inizia con un codice</span></h2>
|
||
<p>Richiedi l'accesso oggi. Nessuna carta di credito richiesta. Operativo in 5 minuti dal ricevimento del codice.</p>
|
||
<div class="cta-actions">
|
||
<a href="#richiedi-accesso" class="btn btn-primary btn-lg">
|
||
<i class="fa-solid fa-envelope"></i> Richiedi il codice invito
|
||
</a>
|
||
<a href="/login.html" class="btn btn-ghost btn-lg">
|
||
<i class="fa-solid fa-right-to-bracket"></i> Accedi
|
||
</a>
|
||
</div>
|
||
<p class="cta-note">Sei un consulente o MSSP? Il form di richiesta ti permette di attivare accesso per il tuo intero portfolio clienti.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="footer-inner">
|
||
<div class="footer-brand">
|
||
<div class="nav-icon" style="width:32px;height:32px;font-size:14px;"><i class="fa-solid fa-shield-halved"></i></div>
|
||
<span class="footer-brand-name">NIS2 <span>Agile</span></span>
|
||
<span style="color:var(--text-muted);font-size:12px;margin-left:8px;">by Agile Technology SRL</span>
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="#richiedi-accesso">Richiedi accesso</a>
|
||
<a href="/login.html">Accedi</a>
|
||
<a href="https://lg231.agile.software/" target="_blank">231 Agile</a>
|
||
<a href="mailto:info@agile.software">info@agile.software</a>
|
||
</div>
|
||
<div class="footer-copy">
|
||
© 2026 Agile Technology SRL — Direttiva UE 2022/2555 · D.Lgs. 138/2024
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
document.getElementById('inviteForm').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
const btn = document.getElementById('submitBtn');
|
||
const errEl = document.getElementById('formError');
|
||
const successEl = document.getElementById('formSuccess');
|
||
const form = e.target;
|
||
|
||
errEl.style.display = 'none';
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Invio in corso...';
|
||
|
||
const data = {
|
||
name: form.nome.value.trim(),
|
||
email: form.email.value.trim(),
|
||
phone: form.telefono.value.trim(),
|
||
company: form.azienda.value.trim(),
|
||
tipo: form.tipo.value,
|
||
size: form.n_dipendenti.value,
|
||
product_interest: form.interesse.value,
|
||
source: 'nis2-landing',
|
||
notes: form.messaggio.value.trim()
|
||
};
|
||
|
||
try {
|
||
const res = await fetch('/api/mktg-lead/submit', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
const json = await res.json();
|
||
|
||
if (res.ok && json.success) {
|
||
form.style.display = 'none';
|
||
successEl.style.display = 'block';
|
||
} else {
|
||
errEl.textContent = json.message || 'Errore nell\'invio. Riprova o scrivici a info@agile.software.';
|
||
errEl.style.display = 'block';
|
||
btn.disabled = false;
|
||
btn.innerHTML = '<i class="fa-solid fa-paper-plane"></i> Invia richiesta';
|
||
}
|
||
} catch {
|
||
errEl.textContent = 'Errore di rete. Riprova o scrivici a info@agile.software.';
|
||
errEl.style.display = 'block';
|
||
btn.disabled = false;
|
||
btn.innerHTML = '<i class="fa-solid fa-paper-plane"></i> Invia richiesta';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|