<!DOCTYPE html>
<html class="dark" lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>CodeGuard AI v1.2.1 | From Code to Compliance</title>
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet" />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#1337ec",
"accent-cyan": "#00f2ff",
"accent-purple": "#7c3aed",
"accent-green": "#10b981",
"background-dark": "#0a0a0a",
"surface-dark": "#111111",
"border-dark": "#232948",
},
fontFamily: {
"display": ["Inter", "sans-serif"],
"mono": ["JetBrains Mono", "monospace"],
},
backgroundImage: {
'grid-pattern': "linear-gradient(to right, #232948 1px, transparent 1px), linear-gradient(to bottom, #232948 1px, transparent 1px)",
}
},
},
}
</script>
<style>
.glowing-text {
background: linear-gradient(to right, #ffffff, #a5b4fc);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.code-glow {
box-shadow: 0 0 50px -12px rgba(19, 55, 236, 0.25);
}
.glass-panel {
background: rgba(17, 17, 17, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(35, 41, 72, 0.5);
}
html {
scroll-behavior: smooth;
}
.flag-icon {
font-size: 1.5rem;
margin-right: 0.5rem;
}
</style>
</head>
<body class="bg-background-dark text-white font-display overflow-x-hidden antialiased">
<!-- Header -->
<header class="sticky top-0 z-50 w-full border-b border-border-dark bg-background-dark/80 backdrop-blur-md">
<div class="flex h-16 items-center justify-between px-6 lg:px-12 max-w-7xl mx-auto">
<div class="flex items-center gap-3 cursor-pointer" onclick="window.scrollTo(0,0)">
<div class="flex items-center justify-center size-8 rounded bg-primary/20 text-primary">
<span class="material-symbols-outlined text-2xl">shield_lock</span>
</div>
<div class="flex flex-col">
<span class="text-lg font-bold tracking-tight text-white leading-none">CodeGuard AI</span>
<span class="text-[10px] text-accent-cyan font-mono">v1.2.1 - Global Compliance Update</span>
</div>
</div>
<nav class="hidden md:flex items-center gap-8">
<a href="#frameworks"
class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Frameworks</a>
<a href="#dashboard"
class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Dashboard</a>
<a href="#evidence"
class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Reports</a>
<a href="#pricing"
class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Pricing</a>
</nav>
<div class="flex items-center gap-3">
<button onclick="document.getElementById('pricing').scrollIntoView()"
class="flex items-center justify-center h-9 px-4 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-blue-600 transition-colors shadow-[0_0_15px_rgba(19,55,236,0.5)]">
Get Started
</button>
</div>
</div>
</header>
<!-- Hero: Bridge between Dev and Compliance -->
<section class="relative pt-20 pb-24 lg:pt-32 lg:pb-32 overflow-hidden">
<div class="absolute inset-0 z-0 opacity-[0.07]"
style="background-image: linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px); background-size: 40px 40px;">
</div>
<div
class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-primary/20 blur-[120px] rounded-full opacity-30 pointer-events-none">
</div>
<div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-12 flex flex-col items-center text-center">
<div
class="inline-flex items-center gap-2 rounded-full border border-border-dark bg-surface-dark/50 px-4 py-1.5 mb-8 backdrop-blur-sm">
<span class="flex h-2 w-2 rounded-full bg-accent-green animate-pulse"></span>
<span class="text-xs font-medium text-gray-300">Now Supporting 9 Global Frameworks + Enterprise
Dashboard</span>
</div>
<h1 class="max-w-5xl text-5xl md:text-6xl lg:text-7xl font-black tracking-tight leading-[1.1] mb-6">
<span class="glowing-text">From Code to Compliance</span><br />
In One Command
</h1>
<p class="max-w-2xl text-lg text-gray-400 mb-6 leading-relaxed">
Developers hate audits. DPOs hate reading git logs. <br />
<span class="text-white font-semibold">CodeGuard v1.2.0</span> bridges the gap with automated Technical
Evidence Reports.
</p>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<button onclick="document.getElementById('dashboard').scrollIntoView()"
class="flex items-center justify-center h-12 px-8 rounded-lg bg-primary text-white text-base font-bold hover:bg-blue-600 transition-all shadow-[0_0_20px_rgba(19,55,236,0.4)]">
See Enterprise Dashboard
</button>
<button onclick="document.getElementById('frameworks').scrollIntoView()"
class="flex items-center justify-center h-12 px-8 rounded-lg bg-surface-dark border border-border-dark text-white text-base font-bold hover:bg-[#1a1f36] transition-all">
View Frameworks
</button>
</div>
<!-- Three Column Value Prop -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-5xl mt-8">
<div class="p-6 rounded-xl bg-surface-dark border border-border-dark text-left">
<div
class="w-10 h-10 rounded-lg bg-accent-cyan/10 flex items-center justify-center text-accent-cyan mb-4">
<span class="material-symbols-outlined">code</span>
</div>
<h3 class="text-white font-bold mb-2">1. Scan</h3>
<p class="text-gray-400 text-sm">CLI, VS Code, or MCP Server detects violations in real-time across
9+ frameworks.</p>
</div>
<div class="p-6 rounded-xl bg-surface-dark border border-border-dark text-left">
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-4">
<span class="material-symbols-outlined">auto_fix</span>
</div>
<h3 class="text-white font-bold mb-2">2. Fix</h3>
<p class="text-gray-400 text-sm">AI auto-fixes applied directly in IDE. Block non-compliant PRs in
CI/CD.</p>
</div>
<div
class="p-6 rounded-xl bg-surface-dark border border-border-dark text-left relative overflow-hidden">
<div
class="absolute top-0 right-0 bg-accent-green text-black text-[10px] font-bold px-2 py-0.5 rounded-bl">
NEW</div>
<div
class="w-10 h-10 rounded-lg bg-accent-green/10 flex items-center justify-center text-accent-green mb-4">
<span class="material-symbols-outlined">description</span>
</div>
<h3 class="text-white font-bold mb-2">3. Report</h3>
<p class="text-gray-400 text-sm">Generate audit-ready PDFs with one command. Evidence that satisfies
DPOs.</p>
</div>
</div>
</div>
</section>
<!-- Global Frameworks Coverage -->
<section id="frameworks" class="py-24 bg-surface-dark border-y border-border-dark relative">
<div class="absolute inset-0 bg-grid-pattern opacity-5 pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-6 lg:px-12 relative z-10">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Global Regulatory Coverage</h2>
<p class="text-gray-400 max-w-2xl mx-auto">One engine, 9+ frameworks. From EU AI Act to BACEN 4.893.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Europe -->
<div
class="glass-panel p-6 rounded-xl border border-border-dark hover:border-primary/50 transition-all group">
<div class="flex items-center gap-3 mb-4">
<span class="text-2xl">🇪🇺</span>
<div>
<h3 class="text-lg font-bold text-white">Europe (EMEA)</h3>
<p class="text-xs text-gray-500">AI & Privacy Leadership</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-accent-purple/10 text-accent-purple text-xs font-mono border border-accent-purple/20">EU
AI Act</span>
<p class="text-xs text-gray-400">High-Risk AI governance, data lineage, bias detection</p>
</div>
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-accent-cyan/10 text-accent-cyan text-xs font-mono border border-accent-cyan/20">GDPR</span>
<p class="text-xs text-gray-400">Privacy by Design, PII detection, Art. 30 Records</p>
</div>
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-400 text-xs font-mono border border-blue-500/20">DORA</span>
<p class="text-xs text-gray-400">Operational resilience for Banking/Fintech</p>
</div>
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-teal-500/10 text-teal-400 text-xs font-mono border border-teal-500/20">MDR</span>
<p class="text-xs text-gray-400">Medical Device Regulation (EU 2017/745)</p>
</div>
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-indigo-500/10 text-indigo-400 text-xs font-mono border border-indigo-500/20">NIS2</span>
<p class="text-xs text-gray-400">Essential entities cybersecurity (Energy, Transport)</p>
</div>
</div>
</div>
<!-- Brazil/LATAM -->
<div
class="glass-panel p-6 rounded-xl border border-border-dark hover:border-accent-green/50 transition-all group">
<div class="flex items-center gap-3 mb-4">
<span class="text-2xl">🇧🇷</span>
<div>
<h3 class="text-lg font-bold text-white">Brazil (LATAM)</h3>
<p class="text-xs text-gray-500">Local Compliance</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-accent-green/10 text-accent-green text-xs font-mono border border-accent-green/20">LGPD</span>
<p class="text-xs text-gray-400">Data Minimization, Privacy Controls, ANPD-ready</p>
</div>
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-400 text-xs font-mono border border-yellow-500/20">BACEN
4.893</span>
<p class="text-xs text-gray-400">Cybersecurity for Financial Institutions</p>
</div>
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-teal-500/10 text-teal-400 text-xs font-mono border border-teal-500/20">ANVISA
RDC 665</span>
<p class="text-xs text-gray-400">Software as Medical Device (SaMD) Validation</p>
</div>
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-orange-500/10 text-orange-400 text-xs font-mono border border-orange-500/20">Pix
Security</span>
<p class="text-xs text-gray-400">Transaction Signing & Key Protection</p>
</div>
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-blue-600/10 text-blue-500 text-xs font-mono border border-blue-600/20">Open
Finance</span>
<p class="text-xs text-gray-400">FAPI 1 Advanced / DCR Compliance</p>
</div>
</div>
</div>
<!-- USA -->
<div
class="glass-panel p-6 rounded-xl border border-border-dark hover:border-red-500/50 transition-all group">
<div class="flex items-center gap-3 mb-4">
<span class="text-2xl">🇺🇸</span>
<div>
<h3 class="text-lg font-bold text-white">United States</h3>
<p class="text-xs text-gray-500">Sector-Specific</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-red-500/10 text-red-400 text-xs font-mono border border-red-500/20">CCPA/CPRA</span>
<p class="text-xs text-gray-400">Consumer rights, "Do Not Sell" tech enforcement</p>
</div>
<div class="flex items-start gap-3">
<span
class="px-2 py-0.5 rounded bg-blue-400/10 text-blue-300 text-xs font-mono border border-blue-400/20">HIPAA</span>
<p class="text-xs text-gray-400">PHI protection validation for HealthTech</p>
</div>
</div>
</div>
<!-- Global Standards -->
<div
class="glass-panel p-6 rounded-xl border border-border-dark hover:border-primary/50 transition-all group md:col-span-2 lg:col-span-3">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-2xl text-primary">public</span>
<div>
<h3 class="text-lg font-bold text-white">Global Standards</h3>
<p class="text-xs text-gray-500">Cross-Border Security</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-start gap-3 p-3 rounded-lg bg-background-dark/50">
<span
class="px-2 py-0.5 rounded bg-primary/10 text-primary text-xs font-mono border border-primary/20 whitespace-nowrap">SOC
2 Type II</span>
<p class="text-xs text-gray-400">SaaS Security, Availability & Confidentiality controls
(Trust Services Criteria)</p>
</div>
<div class="flex items-start gap-3 p-3 rounded-lg bg-background-dark/50">
<span
class="px-2 py-0.5 rounded bg-orange-500/10 text-orange-400 text-xs font-mono border border-orange-500/20 whitespace-nowrap">OWASP
Top 10</span>
<p class="text-xs text-gray-400">Automated detection of critical web vulnerabilities (SQLi,
XSS, Broken Access)</p>
</div>
<div class="flex items-start gap-3 p-3 rounded-lg bg-background-dark/50">
<span
class="px-2 py-0.5 rounded bg-gray-500/10 text-gray-300 text-xs font-mono border border-gray-500/20 whitespace-nowrap">ISO
27001</span>
<p class="text-xs text-gray-400">Technical evidence generation for Information Security
Management audits</p>
</div>
<div class="flex items-start gap-3 p-3 rounded-lg bg-background-dark/50">
<span
class="px-2 py-0.5 rounded bg-white/10 text-white text-xs font-mono border border-white/20 whitespace-nowrap">PCI-DSS
v4.0</span>
<p class="text-xs text-gray-400">Payment data protection & PAN scanning for Fintechs</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Enterprise Dashboard Preview -->
<section id="dashboard" class="py-24 bg-background-dark relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-6 lg:px-12 relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<div
class="inline-flex items-center gap-2 rounded-full border border-border-dark bg-surface-dark/50 px-3 py-1 mb-6">
<span class="material-symbols-outlined text-accent-green text-sm">monitoring</span>
<span class="text-xs font-medium text-gray-300">Enterprise Preview</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Compliance Control Center</h2>
<p class="text-gray-400 mb-6 leading-relaxed">
Stop guessing if you're getting safer. Our new Enterprise Dashboard gives CTOs and DPOs <span
class="text-white font-semibold">real-time visibility</span> into code-level compliance
posture.
</p>
<div class="space-y-4 mb-8">
<div class="flex items-start gap-4">
<div
class="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary flex-shrink-0">
<span class="material-symbols-outlined text-sm">score</span>
</div>
<div>
<h4 class="text-white font-semibold text-sm">Real-Time Compliance Scores</h4>
<p class="text-gray-500 text-xs">Aggregate scores across repositories. Track LGPD, GDPR,
and ISO 27001 readiness at a glance.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="w-8 h-8 rounded-lg bg-accent-purple/20 flex items-center justify-center text-accent-purple flex-shrink-0">
<span class="material-symbols-outlined text-sm">emoji_events</span>
</div>
<div>
<h4 class="text-white font-semibold text-sm">Team Leaderboards</h4>
<p class="text-gray-500 text-xs">Gamify compliance. See which teams fix violations
fastest. Drive secure coding culture.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="w-8 h-8 rounded-lg bg-accent-cyan/20 flex items-center justify-center text-accent-cyan flex-shrink-0">
<span class="material-symbols-outlined text-sm">trending_down</span>
</div>
<div>
<h4 class="text-white font-semibold text-sm">Trend Analysis</h4>
<p class="text-gray-500 text-xs">Prove improvement to auditors. Show violation reduction
over time with immutable git-based evidence.</p>
</div>
</div>
</div>
<div class="p-4 rounded-lg bg-accent-green/10 border border-accent-green/20">
<p class="text-accent-green text-sm font-medium flex items-center gap-2">
<span class="material-symbols-outlined text-sm">check_circle</span>
Available for Enterprise tier
</p>
<p class="text-gray-400 text-xs mt-1">Includes air-gapped deployment options for regulated
industries.</p>
</div>
</div>
<!-- Dashboard Mockup -->
<div class="relative">
<div
class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-accent-purple/20 rounded-xl blur-xl opacity-30">
</div>
<div class="relative bg-[#0d0f18] border border-border-dark rounded-xl overflow-hidden shadow-2xl">
<div
class="bg-[#161b2e] border-b border-border-dark px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-sm">dashboard</span>
<span class="text-xs text-white font-medium">Compliance Control Center</span>
</div>
<div class="flex gap-2">
<span class="w-2 h-2 rounded-full bg-red-500/50"></span>
<span class="w-2 h-2 rounded-full bg-yellow-500/50"></span>
<span class="w-2 h-2 rounded-full bg-green-500"></span>
</div>
</div>
<div class="p-6 space-y-4">
<!-- Score Cards -->
<div class="grid grid-cols-3 gap-3">
<div class="p-3 rounded-lg bg-surface-dark border border-border-dark text-center">
<div class="text-2xl font-bold text-accent-green">94%</div>
<div class="text-[10px] text-gray-500 uppercase">GDPR Score</div>
</div>
<div class="p-3 rounded-lg bg-surface-dark border border-border-dark text-center">
<div class="text-2xl font-bold text-primary">87%</div>
<div class="text-[10px] text-gray-500 uppercase">LGPD Score</div>
</div>
<div class="p-3 rounded-lg bg-surface-dark border border-border-dark text-center">
<div class="text-2xl font-bold text-accent-cyan">91%</div>
<div class="text-[10px] text-gray-500 uppercase">ISO 27001</div>
</div>
</div>
<!-- Chart Placeholder -->
<div class="p-4 rounded-lg bg-surface-dark border border-border-dark">
<div class="flex items-center justify-between mb-3">
<span class="text-xs text-gray-400">Violation Trends (30 days)</span>
<span class="text-xs text-accent-green flex items-center gap-1">
<span class="material-symbols-outlined text-[10px]">trending_down</span>
-42%
</span>
</div>
<div class="flex items-end gap-1 h-20">
<div class="flex-1 bg-red-500/30 rounded-t h-full"></div>
<div class="flex-1 bg-red-500/30 rounded-t h-[80%]"></div>
<div class="flex-1 bg-red-500/30 rounded-t h-[60%]"></div>
<div class="flex-1 bg-yellow-500/30 rounded-t h-[50%]"></div>
<div class="flex-1 bg-yellow-500/30 rounded-t h-[40%]"></div>
<div class="flex-1 bg-accent-green/30 rounded-t h-[30%]"></div>
<div class="flex-1 bg-accent-green/30 rounded-t h-[20%]"></div>
</div>
</div>
<!-- Team Leaderboard -->
<div class="p-3 rounded-lg bg-surface-dark border border-border-dark">
<div class="text-xs text-gray-400 mb-2">Top Performers</div>
<div class="space-y-2">
<div class="flex items-center justify-between text-xs">
<span class="text-white">Platform Team</span>
<span class="text-accent-green">98% fixed</span>
</div>
<div class="w-full bg-border-dark rounded-full h-1.5">
<div class="bg-accent-green h-1.5 rounded-full" style="width: 98%"></div>
</div>
<div class="flex items-center justify-between text-xs">
<span class="text-white">Mobile Team</span>
<span class="text-primary">85% fixed</span>
</div>
<div class="w-full bg-border-dark rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 85%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Technical Evidence Reports -->
<section id="evidence" class="py-24 bg-surface-dark border-y border-border-dark">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">The "Paperwork" Automation</h2>
<p class="text-gray-400 max-w-2xl mx-auto">
From git commit to audit-ready PDF. One command generates the evidence your DPO needs.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- For Devs -->
<div class="p-6 rounded-xl bg-background-dark border border-border-dark">
<div
class="w-12 h-12 rounded-lg bg-accent-cyan/10 flex items-center justify-center text-accent-cyan mb-4">
<span class="material-symbols-outlined text-2xl">code</span>
</div>
<h3 class="text-xl font-bold text-white mb-2">For Developers</h3>
<p class="text-gray-400 text-sm mb-4">Clear violation list with fix suggestions.</p>
<div class="bg-[#0d0f18] p-3 rounded-lg font-mono text-xs text-gray-300 border border-border-dark">
<span class="text-red-400">⚠️</span> PII leak detected<br />
<span class="text-gray-500">→</span> <span
class="text-accent-cyan">console.log(user.id)</span><br />
<span class="text-gray-500">Fixed in commit a3f9d2e</span>
</div>
</div>
<!-- For Executives -->
<div class="p-6 rounded-xl bg-background-dark border border-border-dark">
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-4">
<span class="material-symbols-outlined text-2xl">business</span>
</div>
<h3 class="text-xl font-bold text-white mb-2">For Executives</h3>
<p class="text-gray-400 text-sm mb-4">Risk Matrix showing Financial & Reputational Impact.</p>
<div class="space-y-2">
<div
class="flex justify-between items-center p-2 bg-red-500/10 rounded border border-red-500/20">
<span class="text-xs text-red-400">Critical</span>
<span class="text-xs text-white">€500k potential fine</span>
</div>
<div
class="flex justify-between items-center p-2 bg-yellow-500/10 rounded border border-yellow-500/20">
<span class="text-xs text-yellow-400">Warning</span>
<span class="text-xs text-white">Reputation risk</span>
</div>
</div>
</div>
<!-- For DPOs -->
<div class="p-6 rounded-xl bg-background-dark border border-border-dark relative overflow-hidden">
<div
class="absolute top-0 right-0 bg-accent-green text-black text-[10px] font-bold px-2 py-0.5 rounded-bl">
AUDIT READY</div>
<div
class="w-12 h-12 rounded-lg bg-accent-green/10 flex items-center justify-center text-accent-green mb-4">
<span class="material-symbols-outlined text-2xl">verified</span>
</div>
<h3 class="text-xl font-bold text-white mb-2">For DPOs</h3>
<p class="text-gray-400 text-sm mb-4">Signature-ready documents for compliance files.</p>
<ul class="space-y-2 text-sm text-gray-300">
<li class="flex items-center gap-2"><span class="text-accent-green">✓</span> GDPR Art. 30
Records</li>
<li class="flex items-center gap-2"><span class="text-accent-green">✓</span> Data Processing
Inventory</li>
<li class="flex items-center gap-2"><span class="text-accent-green">✓</span> Git SHA Evidence
</li>
<li class="flex items-center gap-2"><span class="text-accent-green">✓</span> Remediation
Timeline</li>
</ul>
</div>
</div>
<!-- Command Example -->
<div class="mt-12 max-w-3xl mx-auto">
<div class="bg-[#0d0f18] border border-border-dark rounded-xl overflow-hidden">
<div class="bg-[#161b2e] border-b border-border-dark px-4 py-2 flex items-center gap-2">
<span class="material-symbols-outlined text-gray-500 text-sm">terminal</span>
<span class="text-xs text-gray-400 font-mono">Generate Evidence</span>
</div>
<div class="p-6 font-mono text-sm">
<div class="text-gray-500">$ codeguard report --framework GDPR --format PDF</div>
<div class="mt-4 text-accent-green">✓ Scanning codebase...</div>
<div class="text-accent-green">✓ Analyzing 847 files</div>
<div class="text-accent-green">✓ Found 12 violations (3 auto-fixed)</div>
<div class="text-primary mt-2">📄 Generated: compliance-report-GDPR-2026-02-05.pdf</div>
<div class="text-gray-500 text-xs mt-2">Ready for ANPD/audit submission</div>
</div>
</div>
</div>
</div>
</section>
<!-- MCP Server Section -->
<section class="py-24 bg-background-dark border-b border-border-dark">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="glass-panel p-8 md:p-12 rounded-2xl border border-border-dark relative overflow-hidden">
<div
class="absolute top-0 right-0 w-64 h-64 bg-accent-purple/20 blur-[100px] rounded-full -mr-32 -mt-32">
</div>
<div class="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div>
<div
class="inline-flex items-center gap-2 rounded-full border border-accent-purple/30 bg-accent-purple/10 px-3 py-1 mb-4">
<span class="material-symbols-outlined text-accent-purple text-sm">smart_toy</span>
<span class="text-xs font-medium text-accent-purple">Universal MCP Server</span>
</div>
<h2 class="text-3xl font-bold text-white mb-4">Give Your AI Agents a Compliance Brain</h2>
<p class="text-gray-400 mb-6">
Connect Claude, Cursor AI, or WindSurf to your codebase via Model Context Protocol. Ask
natural language questions about compliance.
</p>
<div class="space-y-3">
<div class="flex items-center gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-accent-purple text-sm">check</span>
"Find all GDPR violations in the auth module"
</div>
<div class="flex items-center gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-accent-purple text-sm">check</span>
"Generate a compliance report for the last sprint"
</div>
<div class="flex items-center gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-accent-purple text-sm">check</span>
"Which files handle PCI-DSS data?"
</div>
</div>
</div>
<div class="bg-[#0d0f18] border border-border-dark rounded-xl p-6 font-mono text-sm">
<div class="text-gray-500 mb-2"># Claude Desktop Config</div>
<div class="text-purple-400">{</div>
<div class="pl-4 text-white">
<span class="text-blue-400">"mcpServers"</span>: {<br />
<span class="pl-4 text-blue-400">"codeguard"</span>: {<br />
<span class="pl-8 text-blue-400">"command"</span>: <span
class="text-green-400">"npx"</span>,<br />
<span class="pl-8 text-blue-400">"args"</span>: [<span
class="text-green-400">"codeguard-ai"</span>, <span
class="text-green-400">"mcp"</span>]<br />
<span class="pl-4">}</span><br />
}
</div>
<div class="text-purple-400">}</div>
</div>
</div>
</div>
</div>
</section>
<!-- Updated Pricing -->
<section id="pricing" class="py-24 bg-surface-dark">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Choose Your Compliance Level</h2>
<p class="text-gray-400">From local scanning to enterprise governance.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Developer -->
<div class="rounded-2xl border border-border-dark bg-background-dark p-8 flex flex-col">
<h3 class="text-xl font-bold text-white mb-2">Developer</h3>
<p class="text-gray-400 text-sm mb-6">For individual developers.</p>
<div class="text-3xl font-bold text-white mb-6">$0 <span
class="text-sm font-normal text-gray-500">/mo</span></div>
<ul class="space-y-4 mb-8 flex-1 text-sm text-gray-300">
<li class="flex items-start gap-2"><span class="text-accent-cyan">✓</span> Unlimited local scans
</li>
<li class="flex items-start gap-2"><span class="text-accent-cyan">✓</span> VS Code Extension
</li>
<li class="flex items-start gap-2"><span class="text-accent-cyan">✓</span> All 9 frameworks</li>
<li class="flex items-start gap-2 opacity-50"><span class="text-gray-600">✗</span> PDF Reports
</li>
<li class="flex items-start gap-2 opacity-50"><span class="text-gray-600">✗</span> CI/CD
Blocking</li>
</ul>
<button
class="w-full py-2 rounded-lg border border-border-dark text-white font-semibold hover:bg-[#1a1f36] transition-colors">npm
install -g</button>
</div>
<!-- Pro -->
<div
class="rounded-2xl border border-primary bg-background-dark p-8 flex flex-col relative overflow-hidden shadow-[0_0_40px_-10px_rgba(19,55,236,0.3)]">
<div class="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
POPULAR</div>
<h3 class="text-xl font-bold text-white mb-2">Pro</h3>
<p class="text-gray-400 text-sm mb-6">For tech leads and teams.</p>
<div class="text-3xl font-bold text-white mb-6">€79 <span
class="text-sm font-normal text-gray-500">/mo</span></div>
<ul class="space-y-4 mb-8 flex-1 text-sm text-gray-300">
<li class="flex items-start gap-2"><span class="text-primary">✓</span> Everything in Developer
</li>
<li class="flex items-start gap-2"><span class="text-primary">✓</span> CI/CD Blocking (exit 1)
</li>
<li class="flex items-start gap-2"><span class="text-primary">✓</span> AI Auto-fixes</li>
<li class="flex items-start gap-2"><span class="text-primary">✓</span> <span
class="text-white font-semibold">1 Audit Report/month</span></li>
<li class="flex items-start gap-2 opacity-50"><span class="text-gray-600">✗</span> Dashboard
</li>
</ul>
<button
class="w-full py-2 rounded-lg bg-white text-black font-bold hover:bg-gray-200 transition-colors">Start
Pro Trial</button>
</div>
<!-- Enterprise -->
<div
class="rounded-2xl border border-accent-green/50 bg-background-dark p-8 flex flex-col relative overflow-hidden">
<div
class="absolute top-0 right-0 bg-accent-green text-black text-xs font-bold px-3 py-1 rounded-bl-lg">
ENTERPRISE</div>
<h3 class="text-xl font-bold text-white mb-2">Enterprise</h3>
<p class="text-gray-400 text-sm mb-6">For regulated industries.</p>
<div class="text-3xl font-bold text-white mb-6">Custom</div>
<ul class="space-y-4 mb-8 flex-1 text-sm text-gray-300">
<li class="flex items-start gap-2"><span class="text-accent-green">✓</span> Everything in Pro
</li>
<li class="flex items-start gap-2"><span class="text-accent-green">✓</span> <span
class="text-white font-semibold">Unlimited Reports</span></li>
<li class="flex items-start gap-2"><span class="text-accent-green">✓</span> Compliance Control
Center</li>
<li class="flex items-start gap-2"><span class="text-accent-green">✓</span> Air-gapped
deployment</li>
<li class="flex items-start gap-2"><span class="text-accent-green">✓</span> SSO & Audit Trail
</li>
</ul>
<button onclick="document.getElementById('contact').scrollIntoView()"
class="w-full py-2 rounded-lg bg-accent-green/20 text-accent-green border border-accent-green/50 font-bold hover:bg-accent-green/30 transition-colors">Contact
Sales</button>
</div>
</div>
</div>
</section>
<!-- Contact Form -->
<section id="contact" class="py-20 bg-background-dark border-t border-border-dark">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-3xl font-bold text-white mb-4">Ready to Automate Compliance?</h2>
<p class="text-gray-400 mb-10">Get a technical audit or discuss Enterprise deployment.</p>
<form class="glass-panel p-8 rounded-2xl text-left" action="https://formspree.io/f/xgooljwn" method="POST">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">Work Email *</label>
<input
class="w-full px-4 py-2.5 rounded-lg bg-background-dark border border-border-dark text-white focus:outline-none focus:border-primary transition-all"
name="email" type="email" required placeholder="you@company.com" />
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">Company</label>
<input
class="w-full px-4 py-2.5 rounded-lg bg-background-dark border border-border-dark text-white focus:outline-none focus:border-primary transition-all"
name="company" type="text" />
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">Frameworks Needed</label>
<select
class="w-full px-4 py-2.5 rounded-lg bg-background-dark border border-border-dark text-white focus:outline-none focus:border-primary transition-all"
name="framework">
<option>GDPR / LGPD</option>
<option>PCI-DSS / Financial</option>
<option>HIPAA / Healthcare</option>
<option>EU AI Act</option>
<option>Multiple</option>
</select>
</div>
</div>
<button
class="w-full mt-2 h-12 rounded-lg bg-primary text-white font-bold hover:bg-blue-600 transition-colors shadow-lg"
type="submit">
Request Technical Demo
</button>
</div>
</form>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-border-dark bg-surface-dark py-12">
<div class="max-w-7xl mx-auto px-6 lg:px-12 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-xl">shield_lock</span>
<span class="text-sm font-bold text-white">CodeGuard AI v1.2.1</span>
</div>
<div class="text-sm text-gray-500">
Bridging DevSecOps and Legal Compliance
</div>
<div class="flex gap-6">
<a href="#" class="text-gray-500 hover:text-white transition-colors text-sm">Docs</a>
<a href="#" class="text-gray-500 hover:text-white transition-colors text-sm">GitHub</a>
<a href="#" class="text-gray-500 hover:text-white transition-colors text-sm">Status</a>
</div>
</div>
</footer>
</body>
</html>
