<!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 - Enterprise Compliance Platform</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",
"background-light": "#f6f6f8",
"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);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.code-glow {
box-shadow: 0 0 50px -12px rgba(19, 55, 236, 0.25);
}
.squiggle {
text-decoration: underline wavy #ef4444;
text-underline-offset: 4px;
}
.glass-panel {
background: rgba(17, 17, 17, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(35, 41, 72, 0.5);
}
</style>
</head>
<body class="bg-background-dark text-white font-display overflow-x-hidden antialiased">
<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">
<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>
<span class="text-lg font-bold tracking-tight text-white">CodeGuard AI</span>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium text-gray-300 hover:text-white transition-colors" href="#">Product</a>
<a class="text-sm font-medium text-gray-300 hover:text-white transition-colors" href="#">Solutions</a>
<a class="text-sm font-medium text-gray-300 hover:text-white transition-colors" href="#">Pricing</a>
<a class="text-sm font-medium text-gray-300 hover:text-white transition-colors" href="#">Docs</a>
</nav>
<div class="flex items-center gap-3">
<button
class="hidden sm:flex items-center justify-center h-9 px-4 rounded-lg bg-surface-dark border border-border-dark text-sm font-semibold hover:bg-[#1a1f36] transition-colors">
Log In
</button>
<button
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)]">
Start Free Trial
</button>
</div>
</div>
</header>
<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-3 py-1 mb-8 backdrop-blur-sm">
<span class="flex h-2 w-2 rounded-full bg-accent-cyan animate-pulse"></span>
<span class="text-xs font-medium text-gray-300">New: EU AI Act Compliance Engine</span>
</div>
<h1 class="max-w-4xl text-5xl md:text-6xl lg:text-7xl font-black tracking-tight leading-[1.1] mb-6">
<span class="glowing-text">Compliance as Code</span><br />
for Modern Enterprises
</h1>
<p class="max-w-2xl text-lg text-gray-400 mb-10 leading-relaxed">
Automate regulatory intelligence directly in your CI/CD pipeline.
Detect and mitigate GDPR, HIPAA, and SOC2 risks before they merge.
</p>
<div class="flex flex-wrap justify-center gap-4 mb-16">
<button
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)]">
Start Free Trial
</button>
<button
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">
Request Proof of Concept
</button>
</div>
<div
class="relative w-full max-w-4xl mx-auto rounded-xl bg-[#0d0f18] border border-border-dark shadow-2xl code-glow overflow-hidden text-left group">
<div class="flex items-center gap-2 px-4 py-3 bg-[#161b2e] border-b border-border-dark">
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
<div class="ml-4 text-xs text-gray-500 font-mono">user_controller.ts — CodeGuard Scan</div>
</div>
<div class="flex p-6 font-mono text-sm md:text-base leading-relaxed overflow-x-auto">
<div
class="flex flex-col text-gray-600 select-none pr-6 text-right border-r border-border-dark/50 mr-6">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<div class="relative w-full">
<div class="text-gray-300">
<span class="text-purple-400">import</span> { User } <span
class="text-purple-400">from</span> <span
class="text-green-400">'./models'</span>;<br />
<br />
<span class="text-purple-400">async function</span> <span
class="text-blue-400">storeUserData</span>(data: User) {<br />
<span class="text-gray-500">// TODO: Encrypt before saving</span><br />
<span class="text-purple-400">const</span> db_entry = {<br />
id: data.id,<br />
<span
class="squiggle relative cursor-help group-hover:bg-red-500/10 transition-colors rounded px-1 -ml-1">
ssn: data.social_security_number
<div
class="absolute left-1/2 -translate-x-1/2 top-full mt-2 w-80 bg-surface-dark border border-red-500/50 rounded-lg shadow-xl p-3 z-20 hidden group-hover:block animate-in fade-in zoom-in-95 duration-200">
<div class="flex items-start gap-3">
<span
class="material-symbols-outlined text-red-500 text-lg mt-0.5">warning</span>
<div>
<p class="text-white font-bold text-xs mb-1">CRITICAL: GDPR Violation</p>
<p class="text-gray-400 text-xs mb-2">Unencrypted PII detected in storage
object.</p>
<button
class="bg-primary/20 hover:bg-primary/30 text-primary text-xs px-2 py-1 rounded transition-colors w-full text-center font-semibold">
Apply Fix: AES-256 Wrapper
</button>
</div>
</div>
</div>
</span>,<br />
};<br />
</div>
</div>
</div>
</div>
</section>
<section class="border-y border-border-dark bg-[#0e0e10] py-16 relative">
<div class="absolute inset-0 bg-grid-pattern opacity-10 pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-6 lg:px-12 relative z-10">
<div class="text-center mb-12">
<h2 class="text-2xl font-bold text-white mb-4">Global Compliance Frameworks</h2>
<p class="text-gray-400 max-w-2xl mx-auto">Our engine is continuously updated with the latest regulatory
standards across industries and borders.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
<div
class="bg-surface-dark/40 border border-border-dark p-5 rounded-xl hover:bg-surface-dark/80 transition-colors group">
<div class="flex items-center gap-3 mb-4 text-accent-purple">
<span class="material-symbols-outlined">lock_person</span>
<h3 class="font-bold text-sm text-white">Privacy & Data</h3>
</div>
<div class="flex flex-wrap gap-2">
<span
class="px-2 py-1 text-xs font-mono rounded bg-accent-purple/10 text-accent-purple border border-accent-purple/20">GDPR</span>
<span
class="px-2 py-1 text-xs font-mono rounded bg-accent-purple/10 text-accent-purple border border-accent-purple/20">LGPD</span>
<span
class="px-2 py-1 text-xs font-mono rounded bg-accent-purple/10 text-accent-purple border border-accent-purple/20">CCPA</span>
</div>
</div>
<div
class="bg-surface-dark/40 border border-border-dark p-5 rounded-xl hover:bg-surface-dark/80 transition-colors group">
<div class="flex items-center gap-3 mb-4 text-accent-cyan">
<span class="material-symbols-outlined">psychology</span>
<h3 class="font-bold text-sm text-white">AI Regulation</h3>
</div>
<div class="flex flex-wrap gap-2">
<span
class="px-2 py-1 text-xs font-mono rounded bg-accent-cyan/10 text-accent-cyan border border-accent-cyan/20">EU
AI Act</span>
<span
class="px-2 py-1 text-xs font-mono rounded bg-accent-cyan/10 text-accent-cyan border border-accent-cyan/20">NIST
AI RMF</span>
</div>
</div>
<div
class="bg-surface-dark/40 border border-border-dark p-5 rounded-xl hover:bg-surface-dark/80 transition-colors group">
<div class="flex items-center gap-3 mb-4 text-blue-400">
<span class="material-symbols-outlined">verified_user</span>
<h3 class="font-bold text-sm text-white">Security</h3>
</div>
<div class="flex flex-wrap gap-2">
<span
class="px-2 py-1 text-xs font-mono rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">ISO
27001 Ready</span>
<span
class="px-2 py-1 text-xs font-mono rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">NIS2</span>
<span
class="px-2 py-1 text-xs font-mono rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">SOC2</span>
</div>
</div>
<div
class="bg-surface-dark/40 border border-border-dark p-5 rounded-xl hover:bg-surface-dark/80 transition-colors group">
<div class="flex items-center gap-3 mb-4 text-red-400">
<span class="material-symbols-outlined">medical_services</span>
<h3 class="font-bold text-sm text-white">Healthcare</h3>
</div>
<div class="flex flex-wrap gap-2">
<span
class="px-2 py-1 text-xs font-mono rounded bg-red-500/10 text-red-400 border border-red-500/20">HIPAA</span>
<span
class="px-2 py-1 text-xs font-mono rounded bg-red-500/10 text-red-400 border border-red-500/20">ANVISA</span>
</div>
</div>
<div
class="bg-surface-dark/40 border border-border-dark p-5 rounded-xl hover:bg-surface-dark/80 transition-colors group">
<div class="flex items-center gap-3 mb-4 text-yellow-400">
<span class="material-symbols-outlined">account_balance</span>
<h3 class="font-bold text-sm text-white">Financial</h3>
</div>
<div class="flex flex-wrap gap-2">
<span
class="px-2 py-1 text-xs font-mono rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">PSD2</span>
<span
class="px-2 py-1 text-xs font-mono rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">BACEN</span>
<span
class="px-2 py-1 text-xs font-mono rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">PCI
DSS</span>
</div>
</div>
</div>
</div>
</section>
<section class="py-24 bg-background-dark">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="flex flex-col gap-4 mb-16 max-w-2xl">
<h2 class="text-3xl md:text-4xl font-bold text-white tracking-tight">Seamless integration into your
workflow</h2>
<p class="text-gray-400 text-lg">CodeGuard fits silently into your existing developer toolchain without
slowing down deployment velocity.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div
class="group p-6 rounded-xl bg-surface-dark border border-border-dark hover:border-primary/50 transition-colors">
<div
class="w-12 h-12 rounded-lg bg-[#1a1f36] flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">hub</span>
</div>
<h3 class="text-xl font-bold text-white mb-2">1. Connect Repository</h3>
<p class="text-gray-400 text-sm leading-relaxed">
One-click integration with GitHub, GitLab, or Bitbucket. We automatically map your codebase
architecture.
</p>
</div>
<div
class="group p-6 rounded-xl bg-surface-dark border border-border-dark hover:border-accent-cyan/50 transition-colors">
<div
class="w-12 h-12 rounded-lg bg-[#1a1f36] flex items-center justify-center text-accent-cyan mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">radar</span>
</div>
<h3 class="text-xl font-bold text-white mb-2">2. Automated Scan</h3>
<p class="text-gray-400 text-sm leading-relaxed">
Our LLM-powered engine analyzes code semantics for regulatory violations, logic flaws, and PII
leaks.
</p>
</div>
<div
class="group p-6 rounded-xl bg-surface-dark border border-border-dark hover:border-accent-purple/50 transition-colors">
<div
class="w-12 h-12 rounded-lg bg-[#1a1f36] flex items-center justify-center text-accent-purple mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">monitor_heart</span>
</div>
<h3 class="text-xl font-bold text-white mb-2">3. Continuous Monitoring</h3>
<p class="text-gray-400 text-sm leading-relaxed">
Get real-time alerts on PRs. Block non-compliant merges before they reach production.
</p>
</div>
</div>
</div>
</section>
<section 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">From Risk to Remediation</h2>
<p class="text-gray-400">See how CodeGuard automatically suggests architectural fixes.</p>
</div>
<div
class="grid grid-cols-1 lg:grid-cols-2 gap-0 rounded-xl overflow-hidden border border-border-dark shadow-2xl">
<div class="bg-[#1e1414] border-r border-border-dark/50">
<div class="flex items-center justify-between px-4 py-3 border-b border-red-900/30 bg-red-950/20">
<span class="text-red-400 text-sm font-mono font-bold flex items-center gap-2">
<span class="material-symbols-outlined text-sm">cancel</span> Detected Risk
</span>
<span class="text-xs text-red-500/70 font-mono">legacy_storage.js</span>
</div>
<div class="p-6 font-mono text-sm text-gray-400 overflow-x-auto">
<div class="mb-2 opacity-50">// Storing raw connection string</div>
<div class="bg-red-500/10 -mx-6 px-6 py-1 border-l-2 border-red-500 text-red-200">
const db_url = "postgres://admin:pass123@localhost:5432/db";
</div>
<div class="mt-2">connect(db_url);</div>
</div>
</div>
<div class="bg-[#0f1815]">
<div
class="flex items-center justify-between px-4 py-3 border-b border-green-900/30 bg-green-950/20">
<span class="text-green-400 text-sm font-mono font-bold flex items-center gap-2">
<span class="material-symbols-outlined text-sm">check_circle</span> Compliant Fix
</span>
<span class="text-xs text-green-500/70 font-mono">secure_storage.js</span>
</div>
<div class="p-6 font-mono text-sm text-gray-400 overflow-x-auto">
<div class="mb-2 opacity-50">// Environment variable injection</div>
<div class="bg-green-500/10 -mx-6 px-6 py-1 border-l-2 border-green-500 text-green-200">
const db_url = process.env.DB_CONNECTION_STRING;
</div>
<div class="mt-2">connect(db_url);</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-24 bg-background-dark">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-16">Simple, transparent pricing</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="rounded-2xl border border-border-dark bg-surface-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 individuals and open source.</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">
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-green-500 text-lg">check</span> 1 Repository
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-green-500 text-lg">check</span> Basic PII Scan
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-green-500 text-lg">check</span> Community
Support
</li>
</ul>
<button
class="w-full py-2 rounded-lg border border-border-dark text-white font-semibold hover:bg-[#1a1f36] transition-colors">Start
Free</button>
</div>
<div
class="rounded-2xl border border-border-dark bg-surface-dark p-8 flex flex-col relative overflow-hidden">
<div
class="absolute top-0 right-0 bg-primary text-white text-[10px] font-bold px-3 py-1 rounded-bl-lg">
POPULAR</div>
<h3 class="text-xl font-bold text-white mb-2">Team</h3>
<p class="text-gray-400 text-sm mb-6">For startups and growing teams.</p>
<div class="text-3xl font-bold text-white mb-6">$49 <span
class="text-sm font-normal text-gray-500">/ user / mo</span></div>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-green-500 text-lg">check</span> Unlimited
Repositories
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-green-500 text-lg">check</span> Advanced
Regulatory Logic
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-green-500 text-lg">check</span> Jira Integration
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-green-500 text-lg">check</span> Slack Alerts
</li>
</ul>
<button
class="w-full py-2 rounded-lg bg-white text-black font-bold hover:bg-gray-200 transition-colors">Get
Started</button>
</div>
<div
class="rounded-2xl border-2 border-primary bg-surface-dark p-8 flex flex-col shadow-[0_0_40px_-10px_rgba(19,55,236,0.3)]">
<h3 class="text-xl font-bold text-white mb-2">Enterprise</h3>
<p class="text-gray-400 text-sm mb-6">For large scale compliance needs.</p>
<div class="text-3xl font-bold text-white mb-6">Custom</div>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-primary text-lg">check</span> On-premise
Deployment
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-primary text-lg">check</span> Custom SLAs
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-primary text-lg">check</span> Dedicated Success
Manager
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<span class="material-symbols-outlined text-primary text-lg">check</span> Audit-ready
Reports
</li>
</ul>
<button
class="w-full py-2 rounded-lg bg-primary text-white font-bold hover:bg-blue-600 transition-colors">Contact
Sales</button>
</div>
</div>
</div>
</section>
<section class="py-16 bg-surface-dark/50 border-t border-border-dark">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="flex flex-col md:flex-row justify-between items-center gap-8">
<div class="flex items-center gap-4">
<div class="p-3 rounded-full bg-surface-dark border border-border-dark">
<span class="material-symbols-outlined text-white">verified_user</span>
</div>
<div>
<h4 class="text-white font-bold">Audit-Ready Reports</h4>
<p class="text-sm text-gray-500">Download PDFs for your auditors instantly.</p>
</div>
</div>
<div class="h-8 w-px bg-border-dark hidden md:block"></div>
<div class="flex items-center gap-4">
<div class="p-3 rounded-full bg-surface-dark border border-border-dark">
<span class="material-symbols-outlined text-white">lock</span>
</div>
<div>
<h4 class="text-white font-bold">SOC2 Type II Ready</h4>
<p class="text-sm text-gray-500">We practice what we preach.</p>
</div>
</div>
<div class="h-8 w-px bg-border-dark hidden md:block"></div>
<div class="flex items-center gap-4">
<div class="p-3 rounded-full bg-surface-dark border border-border-dark">
<span class="material-symbols-outlined text-white">deployed_code</span>
</div>
<div>
<h4 class="text-white font-bold">Air-gapped Support</h4>
<p class="text-sm text-gray-500">Full functionality without internet access.</p>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-surface-dark border-t border-border-dark">
<div class="max-w-3xl mx-auto px-6 text-center">
<div class="flex justify-center mb-6">
<div class="p-4 rounded-full bg-primary/10 text-primary">
<span class="material-symbols-outlined text-3xl">fact_check</span>
</div>
</div>
<h2 class="text-3xl font-bold text-white mb-4">Schedule a Compliance Audit</h2>
<p class="text-gray-400 mb-10">
Get a comprehensive regulatory assessment of your codebase from our solution architects.
</p>
<form class="glass-panel p-8 rounded-2xl text-left max-w-xl mx-auto"
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" for="work-email">Work Email
*</label>
<input
class="w-full px-4 py-2.5 rounded-lg bg-background-dark border border-border-dark text-white placeholder-gray-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
id="work-email" name="email" placeholder="name@company.com" type="email" required />
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-1" for="framework">Compliance Framework
of Interest</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 focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
id="framework" name="framework">
<option value="" disabled selected>Select a framework...</option>
<option value="gdpr">GDPR & Privacy (EU)</option>
<option value="ai-act">EU AI Act</option>
<option value="iso">ISO 27001 / SOC2</option>
<option value="hipaa">HIPAA (Healthcare)</option>
<option value="financial">Financial (PSD2, PCI DSS)</option>
<option value="other">Other / General Inquiry</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-1" for="message">Additional Details
(Optional)</label>
<textarea
class="w-full px-4 py-2.5 rounded-lg bg-background-dark border border-border-dark text-white placeholder-gray-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all min-h-[100px]"
id="message" name="message" placeholder="Tell us about your compliance needs..."></textarea>
</div>
<input type="hidden" name="_subject" value="New Audit Request - CodeGuard AI">
<input type="text" name="_gotcha" style="display:none">
<button
class="w-full mt-2 h-12 rounded-lg bg-white text-black font-bold hover:bg-gray-200 transition-colors shadow-lg"
type="submit">
Request Audit
</button>
</div>
<p class="text-xs text-center text-gray-500 mt-4">No credit card required. We respect your inbox. You'll
receive a confirmation email.</p>
</form>
</div>
</section>
<section class="py-24 relative overflow-hidden text-center bg-background-dark">
<div class="absolute inset-0 bg-gradient-to-t from-primary/10 to-transparent pointer-events-none"></div>
<div class="relative z-10 max-w-4xl mx-auto px-6">
<h2 class="text-4xl md:text-5xl font-black text-white mb-6 tracking-tight">Secure your software lifecycle
</h2>
<p class="text-xl text-gray-400 mb-10">Join 500+ engineering teams shipping compliant code faster.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button
class="h-14 px-8 rounded-lg bg-primary text-white text-lg font-bold hover:bg-blue-600 transition-colors shadow-lg shadow-blue-900/20">
Start Free Trial
</button>
<button
class="h-14 px-8 rounded-lg bg-surface-dark border border-border-dark text-white text-lg font-bold hover:bg-[#1a1f36] transition-colors">
Request Proof of Concept
</button>
</div>
</div>
</section>
<footer class="border-t border-border-dark bg-background-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</span>
</div>
<div class="text-sm text-gray-500">
© 2023 CodeGuard AI Inc. All rights reserved.
</div>
<div class="flex gap-6">
<a class="text-gray-500 hover:text-white transition-colors" href="#"><span
class="sr-only">Twitter</span>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
<path
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z">
</path>
</svg>
</a>
<a class="text-gray-500 hover:text-white transition-colors" href="#"><span class="sr-only">GitHub</span>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z">
</path>
</svg>
</a>
</div>
</div>
</footer>
</body>
</html>
