mario
dbddcc40a2
- Add favicon.png (orange B logo) - Add og-image.png (1200x630 social card) - Add og:image and twitter:image meta tags to all pages - Add Plausible analytics script (privacy-friendly) - Update Dockerfile to copy static assets Co-Authored-By: Paperclip <noreply@paperclip.ing>
253 lines
17 KiB
HTML
253 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="alternate" hreflang="en" href="https://batida.io/vs">
|
|
<link rel="alternate" hreflang="pt-BR" href="https://batida.io/vs/pt-br">
|
|
<title>Batida vs PagerDuty vs Grafana OnCall — Comparação de Recursos</title>
|
|
<meta name="description" content="Compare o Batida com PagerDuty e Grafana OnCall. Veja preços, recursos, conformidade LGPD e por que equipes brasileiras escolhem o Batida.">
|
|
<link rel="canonical" href="https://batida.io/vs/pt-br">
|
|
<link rel="icon" type="image/png" href="/favicon.png">
|
|
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://batida.io/vs/pt-br">
|
|
<meta property="og:title" content="Batida vs PagerDuty vs Grafana OnCall — Comparação">
|
|
<meta property="og:description" content="Compare plataformas de gerenciamento de incidentes. Veja por que o Batida é a melhor escolha para equipes DevOps brasileiras.">
|
|
<meta property="og:site_name" content="Batida">
|
|
<meta property="og:image" content="https://batida.io/og-image.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Batida vs PagerDuty vs Grafana OnCall">
|
|
<meta name="twitter:description" content="Compare plataformas de gerenciamento de incidentes para equipes brasileiras.">
|
|
<meta name="twitter:image" content="https://batida.io/og-image.png">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="/output.css">
|
|
|
|
<style>
|
|
:root, [data-theme="dark"] {
|
|
--bg-primary: #0C0C0F; --bg-secondary: #141419; --bg-raised: #1A1A22;
|
|
--bg-overlay: rgba(26, 26, 34, 0.8); --border-color: #2A2A35;
|
|
--border-hover: rgba(249, 115, 22, 0.3); --text-primary: #FAFAFA;
|
|
--text-secondary: #6B6B80; --text-muted: #4A4A5A;
|
|
--shadow-color: rgba(0, 0, 0, 0.4); --glow-ember: rgba(249, 115, 22, 0.15);
|
|
--card-bg: linear-gradient(145deg, rgba(20, 20, 25, 0.8), rgba(12, 12, 15, 0.9));
|
|
}
|
|
[data-theme="light"] {
|
|
--bg-primary: #FAFAF9; --bg-secondary: #F5F5F0; --bg-raised: #FFFFFF;
|
|
--bg-overlay: rgba(255, 255, 255, 0.9); --border-color: #E5E5E0;
|
|
--border-hover: rgba(249, 115, 22, 0.4); --text-primary: #1A1A1A;
|
|
--text-secondary: #52525B; --text-muted: #71717A;
|
|
--shadow-color: rgba(0, 0, 0, 0.08); --glow-ember: rgba(249, 115, 22, 0.08);
|
|
--card-bg: linear-gradient(145deg, #FFFFFF, #F8F8F5);
|
|
}
|
|
body { background-color: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', system-ui, sans-serif; }
|
|
html { scroll-behavior: smooth; }
|
|
a, button { font-family: 'Inter', system-ui, sans-serif; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease; }
|
|
.gradient-ember { background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FDBA74 100%); }
|
|
.gradient-text-ember { background: linear-gradient(135deg, #F97316 0%, #FDBA74 50%, #FBBF24 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
|
.btn-ember { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); color: white; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.btn-ember:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(249, 115, 22, 0.35); }
|
|
.card-surface { background: var(--card-bg); border: 1px solid var(--border-color); backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.theme-toggle { width: 56px; height: 28px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--border-color); position: relative; cursor: pointer; transition: all 0.3s ease; }
|
|
.theme-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #F97316, #FB923C); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
|
|
[data-theme="light"] .theme-toggle::after { transform: translateX(28px); background: linear-gradient(135deg, #06B6D4, #22D3EE); }
|
|
.theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; transition: opacity 0.3s ease; }
|
|
.theme-toggle .icon-sun { left: 6px; opacity: 1; }
|
|
.theme-toggle .icon-moon { right: 6px; opacity: 0.3; }
|
|
[data-theme="light"] .theme-toggle .icon-sun { opacity: 0.3; }
|
|
[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; }
|
|
::selection { background: rgba(249, 115, 22, 0.25); color: inherit; }
|
|
|
|
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
|
|
.compare-table th, .compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
|
|
.compare-table thead th { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
|
|
.compare-table tbody tr:hover { background: var(--bg-raised); }
|
|
.compare-table .feature-col { color: var(--text-primary); font-weight: 500; white-space: nowrap; }
|
|
.compare-table .check { color: #22C55E; }
|
|
.compare-table .cross { color: #EF4444; }
|
|
.compare-table .partial { color: #F59E0B; }
|
|
.compare-table .batida-col { color: #F97316; font-weight: 600; }
|
|
</style>
|
|
<!-- Analytics: Plausible (privacy-friendly, GDPR compliant) -->
|
|
<script defer data-domain="batida.io" src="https://plausible.io/js/script.js"></script>
|
|
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<!-- NAVIGATION -->
|
|
<nav class="fixed w-full z-50 top-0 left-0 right-0 backdrop-blur-xl border-b" style="background: var(--bg-overlay); border-color: var(--border-color);">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<a href="/pt-br" class="flex items-center gap-2 group">
|
|
<div class="relative w-9 h-9 rounded-lg gradient-ember flex items-center justify-center font-bold text-lg text-white shadow-lg group-hover:scale-105 transition-transform">B</div>
|
|
<span class="text-xl font-bold tracking-tight">Batida</span>
|
|
</a>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a href="/pt-br#features" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Recursos</a>
|
|
<a href="/pt-br#pricing" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Preços</a>
|
|
<a href="/pt-br#faq" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">FAQ</a>
|
|
<a href="/vs.pt-br" class="text-sm text-ember-500 font-medium">Comparar</a>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Alternar tema">
|
|
<svg class="icon-sun" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/></svg>
|
|
<svg class="icon-moon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
|
|
</button>
|
|
<a href="/vs" class="hidden sm:inline-flex items-center gap-1.5 text-xs font-medium hover:text-ember-500 transition-colors" style="color: var(--text-secondary);"><span>🌐</span> EN</a>
|
|
<a href="{{APP_URL}}/signup" class="hidden sm:inline-flex px-4 py-2 rounded-lg text-sm font-semibold text-white btn-ember">Comece Grátis</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="pt-24 pb-20">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
<!-- HEADER -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-3xl sm:text-4xl font-bold mb-4">
|
|
Batida vs <span class="gradient-text-ember">PagerDuty</span> vs Grafana OnCall
|
|
</h1>
|
|
<p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
|
|
Comparação detalhada de recursos para equipes avaliando ferramentas de gerenciamento de incidentes — especialmente no Brasil.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- COMPARISON TABLE -->
|
|
<div class="card-surface rounded-2xl overflow-hidden mb-12">
|
|
<div class="overflow-x-auto">
|
|
<table class="compare-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="feature-col">Recurso</th>
|
|
<th class="batida-col">Batida</th>
|
|
<th>PagerDuty</th>
|
|
<th>Grafana OnCall</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="feature-col">Preço (Pro)</td>
|
|
<td class="batida-col">R$59/seat/mês</td>
|
|
<td>~R$300+/seat/mês</td>
|
|
<td>Grátis (self-hosted)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">Idioma</td>
|
|
<td class="batida-col">PT-BR nativo</td>
|
|
<td>Apenas EN</td>
|
|
<td>Apenas EN</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">LGPD</td>
|
|
<td class="batida-col"><span class="check">✓</span> Nativo</td>
|
|
<td><span class="partial">●</span> Add-on extra</td>
|
|
<td><span class="cross">✗</span> Manual</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">Escala de Plantão</td>
|
|
<td class="batida-col"><span class="check">✓</span> Incluído</td>
|
|
<td><span class="check">✓</span> Incluído</td>
|
|
<td><span class="check">✓</span> Add-on</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">Políticas de Escalação</td>
|
|
<td class="batida-col"><span class="check">✓</span> Incluído</td>
|
|
<td><span class="check">✓</span> Incluído</td>
|
|
<td><span class="check">✓</span> Incluído</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">Postmortem com IA</td>
|
|
<td class="batida-col"><span class="check">✓</span> Incluído</td>
|
|
<td><span class="cross">✗</span> Não disponível</td>
|
|
<td><span class="cross">✗</span> Não disponível</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">Status Pages</td>
|
|
<td class="batida-col"><span class="check">✓</span> Incluído</td>
|
|
<td><span class="partial">●</span> Extra (StatusPage.io)</td>
|
|
<td><span class="partial">●</span> Plugin</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">Comentários em Incidentes</td>
|
|
<td class="batida-col"><span class="check">✓</span> Incluído</td>
|
|
<td><span class="check">✓</span> Incluído</td>
|
|
<td><span class="check">✓</span> Incluído</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">Logs de Auditoria</td>
|
|
<td class="batida-col"><span class="check">✓</span> Incluído</td>
|
|
<td><span class="check">✓</span> Apenas Enterprise</td>
|
|
<td><span class="partial">●</span> Limitado</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">Open Source</td>
|
|
<td class="batida-col"><span class="partial">●</span> Módulos core</td>
|
|
<td><span class="cross">✗</span> Não</td>
|
|
<td><span class="check">✓</span> Sim (AGPL)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">PIX / Boleto</td>
|
|
<td class="batida-col"><span class="check">✓</span> Sim</td>
|
|
<td><span class="cross">✗</span> Não</td>
|
|
<td><span class="cross">✗</span> Não</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feature-col">Suporte Brasileiro</td>
|
|
<td class="batida-col"><span class="check">✓</span> Nativo</td>
|
|
<td><span class="cross">✗</span> Não</td>
|
|
<td><span class="cross">✗</span> Comunidade</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOTTOM CTA -->
|
|
<div class="text-center">
|
|
<a href="{{APP_URL}}/signup" class="inline-flex px-8 py-3 rounded-xl text-lg font-semibold text-white btn-ember">
|
|
Comece Grátis — Sem Cartão de Crédito
|
|
</a>
|
|
<p class="mt-4 text-sm" style="color: var(--text-muted);">
|
|
Plano gratuito inclui 5 seats, 50 incidentes/mês. Faça upgrade quando quiser.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="border-t py-12" style="border-color: var(--border-color); background: var(--bg-secondary);">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="flex items-center justify-center gap-2 mb-4">
|
|
<div class="w-8 h-8 rounded-lg gradient-ember flex items-center justify-center font-bold text-white text-sm">B</div>
|
|
<span class="text-lg font-bold" style="color: var(--text-primary);">Batida</span>
|
|
</div>
|
|
<p class="text-xs" style="color: var(--text-muted);">© 2026 Batida IO Ltda.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const currentTheme = html.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
html.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('batida-theme', newTheme);
|
|
}
|
|
(function() {
|
|
const saved = localStorage.getItem('batida-theme');
|
|
if (saved) { document.documentElement.setAttribute('data-theme', saved); }
|
|
else if (window.matchMedia('(prefers-color-scheme: light)').matches) { document.documentElement.setAttribute('data-theme', 'light'); }
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|