<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeGuard AI - Executive Brief (BB/CAIXA)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.glass-panel {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(to right, #10b981, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-[#0f172a] text-slate-200 antialiased selection:bg-emerald-500/30">
<!-- Hero Section -->
<header
class="relative w-full h-[600px] flex items-center justify-center overflow-hidden border-b border-slate-800">
<!-- Background Image -->
<div class="absolute inset-0 z-0 opacity-40">
<img src="presentation_cover_banks.png" alt="Banking Security Background"
class="w-full h-full object-cover">
</div>
<div class="absolute inset-0 bg-gradient-to-t from-[#0f172a] via-[#0f172a]/80 to-transparent z-10"></div>
<div class="relative z-20 text-center px-4 max-w-5xl mx-auto">
<div
class="inline-flex items-center gap-2 bg-slate-800/50 border border-slate-700 rounded-full px-4 py-1.5 mb-8 backdrop-blur-md">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
<span class="text-xs font-bold uppercase tracking-widest text-emerald-400">Banco do Brasil / CAIXA •
Executive Brief</span>
</div>
<h1 class="text-5xl md:text-7xl font-black text-white mb-6 leading-tight tracking-tight">
Inovação com <br>
<span class="gradient-text">Segurança Soberana</span>
</h1>
<p class="text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto font-light leading-relaxed">
A segurança não pode esperar pelo deploy. <br>
<strong class="text-white font-semibold">CodeGuard AI Enterprise</strong> blinda o desenvolvimento
bancário contra vulnerabilidades críticas antes do primeiro commit.
</p>
<div class="mt-12 flex flex-col sm:flex-row gap-4 justify-center items-center">
<img src="codeguard_logo_clean.png" alt="CodeGuard Logo"
class="w-16 h-16 rounded-2xl shadow-2xl ring-1 ring-white/10">
<div class="text-left">
<p class="text-xs text-slate-500 uppercase tracking-wider font-bold">Apresentado por</p>
<p class="text-white font-bold text-lg">Denio Negrão</p>
<p class="text-slate-400 text-sm">CIO / Senior Compliance Analyst</p>
</div>
</div>
</div>
</header>
<!-- The Pain (Scenario) -->
<section class="py-24 px-4 bg-slate-900">
<div class="max-w-5xl mx-auto">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<h2 class="text-emerald-500 font-bold uppercase tracking-widest text-sm mb-2">O Cenário Atual</h2>
<h3 class="text-3xl md:text-4xl font-bold text-white mb-6">A Inovação do Banco vs. <br>O Gargalo da
Segurança</h3>
<p class="text-slate-400 text-lg leading-relaxed mb-6">
Bancos Públicos operam sob pressão dupla: a necessidade urgente de modernização (Drex, Open
Finance, AI) e a regulação extrema do BACEN.
</p>
<div class="space-y-4">
<div class="flex items-start gap-4">
<div class="bg-red-500/10 p-2 rounded-lg text-red-500 mt-1">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
</path>
</svg>
</div>
<div>
<h4 class="text-white font-bold">O Custo do Retrabalho</h4>
<p class="text-slate-400 text-sm">Corrigir uma falha detectada pela esteira de AppSec
custa <strong>100x mais</strong> do que na IDE.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-red-500/10 p-2 rounded-lg text-red-500 mt-1">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<div>
<h4 class="text-white font-bold">Falso-Positivos Travam Deploys</h4>
<p class="text-slate-400 text-sm">Milhares de alertas irrelevantes nos scanners
tradicionais bloqueiam a inovação.</p>
</div>
</div>
</div>
</div>
<div class="relative">
<div
class="absolute -inset-4 bg-gradient-to-r from-emerald-500 to-blue-600 rounded-2xl opacity-20 blur-xl">
</div>
<div class="relative bg-slate-800 border border-slate-700 rounded-xl p-8 shadow-2xl">
<div class="flex justify-between items-center mb-6 border-b border-slate-700 pb-4">
<span class="text-white font-mono text-sm">Regulação BACEN 4.893</span>
<span class="bg-red-500/20 text-red-400 text-xs px-2 py-1 rounded font-bold">RISCO
ALTO</span>
</div>
<div class="space-y-3 font-mono text-xs">
<div class="flex gap-2">
<span class="text-slate-500">1</span>
<span class="text-blue-400">const</span> <span class="text-slate-200">pixKey</span> =
<span class="text-red-400">"b4c3n-s3cr3t-k3y-123"</span>;
</div>
<div class="flex gap-2">
<span class="text-slate-500">2</span>
<span class="text-slate-500">// ⚠️ CRITICAL: Hardcoded credential detected</span>
</div>
<div class="flex gap-2">
<span class="text-slate-500">3</span>
<span class="text-slate-500">// Violates BACEN Res. 4.658 + LGPD Art 46</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- The Solution (Shift-Left) -->
<section class="py-24 px-4 bg-[#0f172a]">
<div class="max-w-5xl mx-auto text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-white mb-6">Shift-Left Real</h2>
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
O CodeGuard AI não é um auditor. É um <span class="text-emerald-400 font-bold">Coach de Segurança</span>
que vive dentro do VS Code do seu time, impedindo o erro antes que ele exista.
</p>
</div>
<div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="glass-panel p-8 rounded-2xl hover:bg-slate-800/50 transition-colors">
<div
class="w-12 h-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-400 mb-6">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
</path>
</svg>
</div>
<h3 class="text-xl font-bold text-white mb-3">BACEN & LGPD Nativo</h3>
<p class="text-slate-400 text-sm leading-relaxed">
Mapeamos a Resolução 4.893 e o Art. 46 da LGPD em regras de linting em tempo real. O dev é alertado
se expor um CPF ou dado sensível.
</p>
</div>
<!-- Card 2 -->
<div class="glass-panel p-8 rounded-2xl hover:bg-slate-800/50 transition-colors">
<div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center text-blue-400 mb-6">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
</path>
</svg>
</div>
<h3 class="text-xl font-bold text-white mb-3">Zero Data Egress</h3>
<p class="text-slate-400 text-sm leading-relaxed">
<strong>Soberania de Dados.</strong> O CodeGuard roda 100% offline ou dentro da VNet do Banco.
Nenhum trecho de código sai do perímetro.
</p>
</div>
<!-- Card 3 -->
<div class="glass-panel p-8 rounded-2xl hover:bg-slate-800/50 transition-colors">
<div
class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center text-purple-400 mb-6">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-white mb-3">Auto-Fix Inteligente</h3>
<p class="text-slate-400 text-sm leading-relaxed">
Não apenas apontamos o erro. Nossa IA sugere a correção segura instantaneamente. Menos tempo
revisando, mais tempo inovando.
</p>
</div>
</div>
</section>
<!-- Pilot Proposal -->
<section class="py-24 px-4 bg-slate-900 border-y border-slate-800">
<div
class="max-w-4xl mx-auto bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700 rounded-3xl p-10 md:p-16 text-center shadow-2xl relative overflow-hidden">
<div
class="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2">
</div>
<h2 class="text-3xl font-bold text-white mb-2">Proposta: Operação Code Shield</h2>
<p class="text-slate-400 mb-10">Validação de Risco em 30 Dias para uma Squad Crítica (Pix/App)</p>
<div class="grid grid-cols-3 gap-8 mb-12">
<div>
<div class="text-4xl font-black text-emerald-400 mb-1">-40%</div>
<div class="text-xs uppercase font-bold text-slate-500">Vulns. Críticas</div>
</div>
<div>
<div class="text-4xl font-black text-emerald-400 mb-1">ZERO</div>
<div class="text-xs uppercase font-bold text-slate-500">Credenciais Vazadas</div>
</div>
<div>
<div class="text-4xl font-black text-emerald-400 mb-1">90%</div>
<div class="text-xs uppercase font-bold text-slate-500">Adoção do Time</div>
</div>
</div>
<div class="flex flex-col items-center gap-6">
<p class="text-lg text-slate-300 font-medium">
"Diretor, vamos rodar um piloto na squad Pix e provar que segurança pode acelerar o desenvolvimento,
não frear."
</p>
<a href="mailto:denio@codeguard.ai"
class="inline-flex items-center gap-3 bg-emerald-500 hover:bg-emerald-400 text-slate-900 font-bold px-8 py-4 rounded-xl transition-all transform hover:scale-105 shadow-[0_0_20px_rgba(16,185,129,0.3)]">
<span>Agendar Kick-off do Piloto</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 bg-[#0f172a] text-center border-t border-slate-800">
<img src="codeguard_verified_badge.png" alt="Verified Badge"
class="w-24 h-24 mx-auto mb-6 opacity-80 hover:opacity-100 transition-opacity">
<p class="text-slate-500 text-sm">© 2024 CodeGuard AI Enterprise. All rights reserved.</p>
<p class="text-slate-600 text-xs mt-2">Confidential & Proprietary - Prepared for Banco do Brasil / CAIXA
Executives</p>
</footer>
</body>
</html>
