feat: add i18n with English (default) and PT-BR (/pt-br)
All checks were successful
Deploy / Build & Push (Prod) (push) Successful in 8s
Deploy / Deploy Staging (push) Successful in 4s
Deploy / Deploy Prod (push) Successful in 5s

- Translate index.html to English as default language
- Copy PT-BR version to index.pt-br.html
- Add hreflang tags for SEO in both versions
- Add language selector in navbar (EN ↔ PT-BR)
- Add nginx.conf with Content-Language headers and /pt-br routing
- Update Dockerfile to process and serve both HTML files
This commit is contained in:
2026-04-17 16:11:55 -03:00
parent 361a6721c0
commit ed885aebef
4 changed files with 2020 additions and 189 deletions

View File

@@ -3,7 +3,14 @@ FROM nginx:alpine
ARG APP_URL=https://app.batida.io
COPY index.html /tmp/index.html
RUN sed -i "s|{{APP_URL}}|${APP_URL}|g" /tmp/index.html
RUN mv /tmp/index.html /usr/share/nginx/html/index.html
COPY index.pt-br.html /tmp/index.pt-br.html
RUN sed -i "s|{{APP_URL}}|${APP_URL}|g" /tmp/index.html && \
sed -i "s|{{APP_URL}}|${APP_URL}|g" /tmp/index.pt-br.html && \
mkdir -p /usr/share/nginx/html/pt-br && \
mv /tmp/index.html /usr/share/nginx/html/index.html && \
mv /tmp/index.pt-br.html /usr/share/nginx/html/pt-br/index.html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

View File

@@ -1,10 +1,12 @@
<!DOCTYPE html>
<html lang="pt-BR" data-theme="dark">
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Batida — Gerencie Incidentes. Mantenha a Calma.</title>
<meta name="description" content="Plataforma brasileira de incident management. Alternativa inteligente ao PagerDuty. Setup em minutos. Comece grátis.">
<link rel="alternate" hreflang="en" href="https://batida.io/">
<link rel="alternate" hreflang="pt-BR" href="https://batida.io/pt-br">
<title>Batida — Manage Incidents. Keep Your Cool.</title>
<meta name="description" content="Intelligent alternative to PagerDuty. Incident management platform for DevOps teams that need to respond fast, coordinate without chaos, and learn from every problem.">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -529,9 +531,9 @@
<!-- Desktop Nav Links -->
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Features</a>
<a href="#how-it-works" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Como Funciona</a>
<a href="#integrations" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Integrações</a>
<a href="#pricing" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Preços</a>
<a href="#how-it-works" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">How It Works</a>
<a href="#integrations" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Integrations</a>
<a href="#pricing" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Pricing</a>
<a href="#faq" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">FAQ</a>
</div>
@@ -546,11 +548,15 @@
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
</svg>
</button>
<a href="/pt-br" 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> PT
</a>
<a href="{{APP_URL}}/login" class="hidden sm:inline-flex text-sm hover:text-white transition-colors" style="color: var(--text-secondary);">Login</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">
Começar Grátis
Start Free
</a>
<!-- Mobile Hamburger -->
@@ -573,7 +579,7 @@
<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">Batida</span>
</div>
<button class="w-10 h-10 rounded-lg flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" onclick="toggleMobileMenu()" aria-label="Fechar menu">
<button class="w-10 h-10 rounded-lg flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" onclick="toggleMobileMenu()" aria-label="Close menu">
<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="M6 18L18 6M6 6l12 12"/>
</svg>
@@ -582,22 +588,22 @@
<nav class="space-y-1">
<a href="#features" class="block px-4 py-3 rounded-lg text-base font-medium hover:bg-ember-500/10 transition-colors" style="color: var(--text-primary);" onclick="toggleMobileMenu()">Features</a>
<a href="#how-it-works" class="block px-4 py-3 rounded-lg text-base font-medium hover:bg-ember-500/10 transition-colors" style="color: var(--text-primary);" onclick="toggleMobileMenu()">Como Funciona</a>
<a href="#integrations" class="block px-4 py-3 rounded-lg text-base font-medium hover:bg-ember-500/10 transition-colors" style="color: var(--text-primary);" onclick="toggleMobileMenu()">Integrações</a>
<a href="#pricing" class="block px-4 py-3 rounded-lg text-base font-medium hover:bg-ember-500/10 transition-colors" style="color: var(--text-primary);" onclick="toggleMobileMenu()">Preços</a>
<a href="#how-it-works" class="block px-4 py-3 rounded-lg text-base font-medium hover:bg-ember-500/10 transition-colors" style="color: var(--text-primary);" onclick="toggleMobileMenu()">How It Works</a>
<a href="#integrations" class="block px-4 py-3 rounded-lg text-base font-medium hover:bg-ember-500/10 transition-colors" style="color: var(--text-primary);" onclick="toggleMobileMenu()">Integrations</a>
<a href="#pricing" class="block px-4 py-3 rounded-lg text-base font-medium hover:bg-ember-500/10 transition-colors" style="color: var(--text-primary);" onclick="toggleMobileMenu()">Pricing</a>
<a href="#faq" class="block px-4 py-3 rounded-lg text-base font-medium hover:bg-ember-500/10 transition-colors" style="color: var(--text-primary);" onclick="toggleMobileMenu()">FAQ</a>
</nav>
<div class="mt-8 pt-8 border-t space-y-3" style="border-color: var(--border-color);">
<a href="{{APP_URL}}/login" class="block w-full px-4 py-3 text-center rounded-lg font-medium btn-ghost" style="color: var(--text-primary);">Login</a>
<a href="{{APP_URL}}/signup" class="w-full px-4 py-3 rounded-lg font-semibold text-white btn-ember block text-center">Começar Grátis</a>
<a href="{{APP_URL}}/signup" class="w-full px-4 py-3 rounded-lg font-semibold text-white btn-ember block text-center">Start Free</a>
</div>
<div class="swipe-hint mt-6 justify-center">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
</svg>
<span>Deslize para fechar</span>
<span>Swipe to close</span>
</div>
</div>
</div>
@@ -621,26 +627,26 @@
<span class="relative inline-flex rounded-full h-2 w-2 bg-ember-500"></span>
</span>
<span class="text-sm font-medium" style="color: var(--text-secondary);">
Alternativa inteligente ao PagerDuty • Feito no 🇧🇷
Smart alternative to PagerDuty • Built in 🇧🇷
</span>
</div>
<!-- Headline -->
<h1 class="responsive-heading text-display mb-6">
Gerencie Incidentes.<br>
<span class="gradient-text-ember">Mantenha a Calma.</span>
Manage Incidents.<br>
<span class="gradient-text-ember">Keep Your Cool.</span>
</h1>
<!-- Subheadline -->
<p class="text-lg lg:text-xl mb-8 leading-relaxed font-light max-w-xl" style="color: var(--text-secondary);">
Plataforma de <strong style="color: var(--text-primary);">incident management</strong> para times DevOps que precisam
<span class="text-ember-500 font-medium">responder rápido</span>, coordenar sem caos e aprender com cada problema.
An <strong style="color: var(--text-primary);">incident management</strong> platform for DevOps teams that need to
<span class="text-ember-500 font-medium">respond fast</span>, coordinate without chaos, and learn from every problem.
</p>
<!-- CTAs -->
<div class="flex flex-col sm:flex-row gap-4 mb-10">
<a href="{{APP_URL}}/signup" class="btn-ember px-8 py-4 rounded-xl text-base font-bold text-white inline-flex items-center justify-center gap-2 group">
<span>Começar Grátis</span>
<span>Start Free</span>
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
@@ -649,19 +655,19 @@
<!-- Social Proof Mini -->
<div class="space-y-3">
<p class="text-xs uppercase tracking-wider font-semibold" style="color: var(--text-muted);">Construído por SREs, para SREs</p>
<p class="text-xs uppercase tracking-wider font-semibold" style="color: var(--text-muted);">Built by SREs, for SREs</p>
<div class="flex flex-wrap items-center gap-4">
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full card-surface text-xs font-medium" style="color: var(--text-secondary);">
<svg class="w-3.5 h-3.5 text-ember-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Feito no Brasil
Built in Brazil
</span>
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full card-surface text-xs font-medium" style="color: var(--text-secondary);">
<svg class="w-3.5 h-3.5 text-frost-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Acesso Antecipado
Early Access
</span>
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full card-surface text-xs font-medium" style="color: var(--text-secondary);">
<svg class="w-3.5 h-3.5 text-ember-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Grátis para Começar
Free to Start
</span>
</div>
</div>
@@ -726,8 +732,8 @@
<!-- Incidents List -->
<div class="card-surface rounded-lg overflow-hidden">
<div class="px-4 py-3 border-b flex items-center justify-between" style="border-color: var(--border-color);">
<span class="font-semibold text-sm" style="color: var(--text-primary);">Recentes</span>
<span class="text-xs text-ember-500 cursor-pointer font-medium">Ver todos</span>
<span class="font-semibold text-sm" style="color: var(--text-primary);">Recent</span>
<span class="text-xs text-ember-500 cursor-pointer font-medium">View all</span>
</div>
<div class="divide-y" style="--tw-divide-opacity: 1; --tw-divide-color: var(--border-color);">
<div class="px-4 py-3 flex items-center justify-between hover:bg-opacity-30 transition-colors cursor-pointer group" style="background: transparent;">
@@ -735,7 +741,7 @@
<div class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0"></div>
<div class="min-w-0">
<div class="font-medium text-sm truncate group-hover:text-ember-500 transition-colors" style="color: var(--text-primary);">#INC-1243 · API Timeout</div>
<div class="text-xs truncate" style="color: var(--text-muted);">12 min · Production</div>
<div class="text-xs truncate" style="color: var(--text-muted);">12 min ago · Production</div>
</div>
</div>
<span class="px-2 py-1 rounded-md bg-red-500/10 text-red-400 text-xs font-mono font-semibold ml-3 flex-shrink-0">P1</span>
@@ -746,7 +752,7 @@
<div class="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0"></div>
<div class="min-w-0">
<div class="font-medium text-sm truncate group-hover:text-ember-500 transition-colors" style="color: var(--text-primary);">#INC-1242 · DB Latency</div>
<div class="text-xs truncate" style="color: var(--text-muted);">45 min · Production</div>
<div class="text-xs truncate" style="color: var(--text-muted);">45 min ago · Production</div>
</div>
</div>
<span class="px-2 py-1 rounded-md bg-orange-500/10 text-orange-400 text-xs font-mono font-semibold ml-3 flex-shrink-0">P2</span>
@@ -757,7 +763,7 @@
<div class="w-2 h-2 rounded-full bg-yellow-500 flex-shrink-0"></div>
<div class="min-w-0">
<div class="font-medium text-sm truncate group-hover:text-ember-500 transition-colors" style="color: var(--text-primary);">#INC-1241 · Memory Warning</div>
<div class="text-xs truncate" style="color: var(--text-muted);">Há 2h · Staging</div>
<div class="text-xs truncate" style="color: var(--text-muted);">2h ago · Staging</div>
</div>
</div>
<span class="px-2 py-1 rounded-md bg-yellow-500/10 text-yellow-400 text-xs font-mono font-semibold ml-3 flex-shrink-0">P3</span>
@@ -775,8 +781,8 @@
</svg>
</div>
<div>
<div class="text-sm font-bold" style="color: var(--text-primary);">Setup Rápido</div>
<div class="text-xs" style="color: var(--text-muted);">&lt; 15 minutos</div>
<div class="text-sm font-bold" style="color: var(--text-primary);">Quick Setup</div>
<div class="text-xs" style="color: var(--text-muted);">&lt; 15 minutes</div>
</div>
</div>
</div>
@@ -792,10 +798,10 @@
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 lg:mb-16">
<h2 class="responsive-subheading text-display mb-4">
O caos do <span class="gradient-text-ember">incident management</span> real
The real chaos of <span class="gradient-text-ember">incident management</span>
</h2>
<p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
Reconhece alguma dessas situações? Você não está sozinho.
Recognize any of these situations? You're not alone.
</p>
</div>
@@ -803,36 +809,36 @@
<!-- Pain Point 1 -->
<div class="card-surface rounded-2xl p-6 sm:p-8 relative overflow-hidden group">
<div class="text-4xl mb-4">🚨</div>
<h3 class="text-xl font-bold mb-3 text-red-400">Alertas Infinitos</h3>
<h3 class="text-xl font-bold mb-3 text-red-400">Infinite Alerts</h3>
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
Sua equipe recebe centenas de alertas por dia. <strong style="color: var(--text-primary);">Noise demais, signal de menos.</strong> Ninguém sabe o que é crítico até ser tarde demais.
Your team receives hundreds of alerts per day. <strong style="color: var(--text-primary);">Too much noise, too little signal.</strong> No one knows what's critical until it's too late.
</p>
<div class="pt-4 border-t text-xs font-mono uppercase tracking-wider" style="border-color: var(--border-color); color: var(--text-muted);">
Resultado: Fadiga de alertas → Incidentes perdidos
Result: Alert Fatigue → Missed Incidents
</div>
</div>
<!-- Pain Point 2 -->
<div class="card-surface rounded-2xl p-6 sm:p-8 relative overflow-hidden group">
<div class="text-4xl mb-4">💬</div>
<h3 class="text-xl font-bold mb-3 text-orange-400">Coordenação Caótica</h3>
<h3 class="text-xl font-bold mb-3 text-orange-400">Chaotic Coordination</h3>
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
Quando um incidente acontece, vira bagunça geral. <strong style="color: var(--text-primary);">Quem está on-call? Quem já foi escalonado?</strong> Informações perdidas em threads infinitas.
When an incident happens, it's pure chaos. <strong style="color: var(--text-primary);">Who's on-call? Who's already been escalated?</strong> Information lost in endless threads.
</p>
<div class="pt-4 border-t text-xs font-mono uppercase tracking-wider" style="border-color: var(--border-color); color: var(--text-muted);">
Resultado: Resposta lenta → Interrupções mais longas
Result: Slow Response → Longer Outages
</div>
</div>
<!-- Pain Point 3 -->
<div class="card-surface rounded-2xl p-6 sm:p-8 relative overflow-hidden group">
<div class="text-4xl mb-4">📝</div>
<h3 class="text-xl font-bold mb-3 text-yellow-400">Postmortems Ignorados</h3>
<h3 class="text-xl font-bold mb-3 text-yellow-400">Ignored Postmortems</h3>
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
Depois do incêndio apagado, ninguém tem tempo para documentar. <strong style="color: var(--text-primary);">Mesmos erros acontecem de novo.</strong> Zero aprendizado estruturado.
After the fire's out, no one has time to document. <strong style="color: var(--text-primary);">Same mistakes happen again.</strong> Zero structured learning.
</p>
<div class="pt-4 border-t text-xs font-mono uppercase tracking-wider" style="border-color: var(--border-color); color: var(--text-muted);">
Resultado: Falhas repetidas → Sem melhoria
Result: Repeated Failures → No Improvement
</div>
</div>
</div>
@@ -840,8 +846,8 @@
<!-- Transition -->
<div class="mt-12 text-center">
<div class="inline-flex items-center gap-3 px-6 py-3 rounded-full card-surface">
<span style="color: var(--text-secondary);">Não precisa ser assim.</span>
<span class="font-semibold text-ember-500">O Batida transforma caos em processo.</span>
<span style="color: var(--text-secondary);">It doesn't have to be this way.</span>
<span class="font-semibold text-ember-500">Batida turns chaos into process.</span>
<span class="text-xl"></span>
</div>
</div>
@@ -859,17 +865,17 @@
<div>
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-frost-500/10 border border-frost-500/20 mb-6">
<span class="w-1.5 h-1.5 rounded-full bg-frost-400"></span>
<span class="text-xs font-semibold text-frost-400 uppercase tracking-wider">Plataforma Tudo-em-Um</span>
<span class="text-xs font-semibold text-frost-400 uppercase tracking-wider">All-in-One Platform</span>
</div>
<h2 class="responsive-subheading text-display mb-6 leading-tight">
Tudo que você precisa para<br>
Everything you need for<br>
<span class="gradient-text-frost">incident management</span>
</h2>
<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary);">
Uma plataforma completa para detectar, responder, coordenar e aprender com incidentes.
<strong style="color: var(--text-primary);">Sem complexidade. Sem preço de grande corporação.</strong>
A complete platform to detect, respond, coordinate, and learn from incidents.
<strong style="color: var(--text-primary);">No complexity. No enterprise pricing.</strong>
</p>
<div class="space-y-4">
@@ -879,7 +885,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">On-call inteligente</strong> com escalonamento automático</span>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Smart on-call</strong> with automatic escalation</span>
</div>
<div class="flex items-start gap-3">
@@ -888,7 +894,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Centralização de alertas</strong> de qualquer ferramenta</span>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Alert centralization</strong> from any tool</span>
</div>
<div class="flex items-start gap-3">
@@ -897,7 +903,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Comunicação integrada</strong> (Slack, Teams, SMS)</span>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Integrated communication</strong> (Slack, Teams, SMS)</span>
</div>
<div class="flex items-start gap-3">
@@ -906,7 +912,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Runbooks automatizados</strong> & postmortems</span>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Automated runbooks</strong> & postmortems</span>
</div>
<div class="flex items-start gap-3">
@@ -915,7 +921,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Analytics avançados</strong> de MTTR e SLAs</span>
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Advanced analytics</strong> for MTTR and SLAs</span>
</div>
</div>
</div>
@@ -950,7 +956,7 @@
</div>
</div>
<div class="card-surface rounded-lg p-3">
<div class="text-xs uppercase tracking-wider font-semibold mb-2" style="color: var(--text-muted);">Incidentes esta semana</div>
<div class="text-xs uppercase tracking-wider font-semibold mb-2" style="color: var(--text-muted);">Incidents this week</div>
<div class="flex gap-1 items-end h-12">
<div class="flex-1 bg-ember-500/60 rounded-sm" style="height: 40%;"></div>
<div class="flex-1 bg-ember-500/60 rounded-sm" style="height: 70%;"></div>
@@ -975,11 +981,11 @@
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 lg:mb-16">
<h2 class="responsive-subheading text-display mb-4">
Recursos poderosos.<br>
<span class="gradient-text-ember">Interface simples.</span>
Powerful features.<br>
<span class="gradient-text-ember">Simple interface.</span>
</h2>
<p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
Tudo que você precisa para gerenciar incidentes como empresa Fortune 500.
Everything you need to manage incidents like a Fortune 500 company.
</p>
</div>
@@ -991,12 +997,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-4" style="color: var(--text-primary);">Gestão de On-call Inteligente</h3>
<h3 class="text-xl font-bold mb-4" style="color: var(--text-primary);">Smart On-call Management</h3>
<ul class="space-y-2.5 text-sm" style="color: var(--text-secondary);">
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Escalações automáticas configuráveis</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Calendários com múltiplas camadas</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Handoffs entre timezones</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Integração Google/Outlook</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Configurable automatic escalations</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Multi-layer schedules</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Handoffs across timezones</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Google/Outlook integration</li>
</ul>
</div>
@@ -1006,12 +1012,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-4" style="color: var(--text-primary);">Alerting & Correlação AI</h3>
<h3 class="text-xl font-bold mb-4" style="color: var(--text-primary);">Alerting & AI Correlation</h3>
<ul class="space-y-2.5 text-sm" style="color: var(--text-secondary);">
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> +200 fontes conectáveis</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Redução automática de noise via ML</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Deduplicação e supressão</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Políticas customizáveis</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> 200+ connectable sources</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Automatic noise reduction via ML</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Deduplication and suppression</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Customizable policies</li>
</ul>
</div>
@@ -1021,12 +1027,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-4" style="color: var(--text-primary);">Resposta Orquestrada</h3>
<h3 class="text-xl font-bold mb-4" style="color: var(--text-primary);">Orchestrated Response</h3>
<ul class="space-y-2.5 text-sm" style="color: var(--text-secondary);">
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Canais automáticos Slack/Teams</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Salas de crise virtuais colaborativas</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Automatic Slack/Teams channels</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Collaborative virtual war rooms</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Runbooks & checklists</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Status pages públicas/privadas</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Public/private status pages</li>
</ul>
</div>
@@ -1036,12 +1042,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-4" style="color: var(--text-primary);">Pós-Incidente & Aprendizado</h3>
<h3 class="text-xl font-bold mb-4" style="color: var(--text-primary);">Post-Incident & Learning</h3>
<ul class="space-y-2.5 text-sm" style="color: var(--text-secondary);">
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Templates de postmortems sem culpados</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Análise automática MTTA/MTTR</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Action items rastreáveis</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Base de conhecimento evolutiva</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Blameless postmortem templates</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Automatic MTTA/MTTR analysis</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Trackable action items</li>
<li class="flex items-start gap-2"><span class="text-frost-400 mt-1"></span> Evolving knowledge base</li>
</ul>
</div>
@@ -1053,10 +1059,10 @@
</div>
<h3 class="text-xl font-bold mb-4" style="color: var(--text-primary);">Analytics & Observability</h3>
<ul class="space-y-2.5 text-sm" style="color: var(--text-secondary);">
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Dashboards tempo real</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Relatórios customizáveis</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Análise de tendências e predição</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Exportação para ferramentas de BI</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Real-time dashboards</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Customizable reports</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Trend analysis and prediction</li>
<li class="flex items-start gap-2"><span class="text-ember-400 mt-1"></span> Export to BI tools</li>
</ul>
</div>
@@ -1072,11 +1078,11 @@
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 lg:mb-16">
<h2 class="responsive-subheading text-display mb-4">
De caos a controle em<br>
<span class="gradient-text-amber">3 passos simples</span>
From chaos to control in<br>
<span class="gradient-text-amber">3 simple steps</span>
</h2>
<p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
Setup em menos de 15 minutos. Sem complexidade.
Setup in less than 15 minutes. No complexity.
</p>
</div>
@@ -1091,11 +1097,11 @@
<div class="absolute inset-0 rounded-2xl bg-ember-500/20 blur-xl"></div>
</div>
<div class="text-5xl mb-4"></div>
<h3 class="text-2xl font-bold mb-3" style="color: var(--text-primary);">Conecte suas ferramentas</h3>
<h3 class="text-2xl font-bold mb-3" style="color: var(--text-primary);">Connect your tools</h3>
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
Integre Datadog, Prometheus, CloudWatch, ou qualquer ferramenta via webhook/API.
Integrate Datadog, Prometheus, CloudWatch, or any tool via webhook/API.
</p>
<div class="inline-block px-3 py-1 rounded-full card-surface text-xs font-mono" style="color: var(--text-muted);">~5 min de setup</div>
<div class="inline-block px-3 py-1 rounded-full card-surface text-xs font-mono" style="color: var(--text-muted);">~5 min setup</div>
</div>
<div class="text-center relative">
@@ -1106,9 +1112,9 @@
<div class="text-5xl mb-4">🎯</div>
<h3 class="text-2xl font-bold mb-3" style="color: var(--text-primary);">Configure workflows</h3>
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
Defina políticas de escalonamento, runbooks, canais de comunicação. Ou use templates prontos.
Define escalation policies, runbooks, communication channels. Or use ready-made templates.
</p>
<div class="inline-block px-3 py-1 rounded-full card-surface text-xs font-mono" style="color: var(--text-muted);">Templates incluídos</div>
<div class="inline-block px-3 py-1 rounded-full card-surface text-xs font-mono" style="color: var(--text-muted);">Templates included</div>
</div>
<div class="text-center relative">
@@ -1117,23 +1123,23 @@
<div class="absolute inset-0 rounded-2xl bg-ember-500/20 blur-xl"></div>
</div>
<div class="text-5xl mb-4">🚀</div>
<h3 class="text-2xl font-bold mb-3" style="color: var(--text-primary);">Responda & aprenda</h3>
<h3 class="text-2xl font-bold mb-3" style="color: var(--text-primary);">Respond & learn</h3>
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
Receba alerts inteligentes, coordene equipe, resolva mais rápido, construa knowledge base.
Receive smart alerts, coordinate your team, resolve faster, build a knowledge base.
</p>
<div class="inline-block px-3 py-1 rounded-full card-surface text-xs font-mono" style="color: var(--text-muted);">Melhoria contínua</div>
<div class="inline-block px-3 py-1 rounded-full card-surface text-xs font-mono" style="color: var(--text-muted);">Continuous improvement</div>
</div>
</div>
<!-- CTA -->
<div class="text-center mt-12 lg:mt-16">
<a href="{{APP_URL}}/signup" class="btn-ember px-10 py-4 rounded-xl text-lg font-bold text-white inline-flex items-center gap-2 group">
<span>Começar Gratuitamente</span>
<span>Start Free</span>
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</a>
<p class="text-sm mt-4" style="color: var(--text-muted);">Setup em &lt; 15 min • Sem cartão • Suporte PT-BR</p>
<p class="text-sm mt-4" style="color: var(--text-muted);">Setup in &lt; 15 min • No credit card • PT-BR Support</p>
</div>
</div>
</section>
@@ -1145,11 +1151,11 @@
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="responsive-subheading text-display mb-4">
Conecte com tudo que você<br>
<span class="gradient-text-frost"> usa</span>
Connect with everything you<br>
<span class="gradient-text-frost">already use</span>
</h2>
<p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
Integrações nativas com o stack moderno. +200 conectores disponíveis.
Native integrations with the modern stack. 200+ connectors available.
</p>
</div>
@@ -1188,7 +1194,7 @@
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">Linear</span>
</div>
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer bg-ember-500/5 border-ember-500/20">
<span class="text-sm font-bold text-ember-400">+190 mais</span>
<span class="text-sm font-bold text-ember-400">+190 more</span>
</div>
</div>
@@ -1207,14 +1213,14 @@
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-ember-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-ember-500"></span>
</span>
<span class="text-sm font-medium" style="color: var(--text-secondary);">Acesso Antecipado Aberto</span>
<span class="text-sm font-medium" style="color: var(--text-secondary);">Early Access Open</span>
</div>
<h2 class="responsive-subheading text-display mb-4">
Construido por SREs,<br>
<span class="gradient-text-ember">para SREs</span>
Built by SREs,<br>
<span class="gradient-text-ember">for SREs</span>
</h2>
<p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
Nascemos da frustração real com ferramentas caras e complexas. O Batida oferece recursos avançados sem preço de grande corporação.
Born from real frustration with expensive, complex tools. Batida delivers advanced features without enterprise pricing.
</p>
</div>
@@ -1222,27 +1228,27 @@
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6 mb-12">
<div class="text-center card-surface rounded-2xl p-6">
<div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">200+</div>
<div class="text-sm" style="color: var(--text-secondary);">Integrações disponíveis</div>
<div class="text-sm" style="color: var(--text-secondary);">Integrations available</div>
</div>
<div class="text-center card-surface rounded-2xl p-6">
<div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-frost mb-2">&lt;15min</div>
<div class="text-sm" style="color: var(--text-secondary);">Tempo de setup</div>
<div class="text-sm" style="color: var(--text-secondary);">Setup time</div>
</div>
<div class="text-center card-surface rounded-2xl p-6">
<div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">🇧🇷</div>
<div class="text-sm" style="color: var(--text-secondary);">Feito no Brasil</div>
<div class="text-sm" style="color: var(--text-secondary);">Built in Brazil</div>
</div>
<div class="text-center card-surface rounded-2xl p-6">
<div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-frost mb-2">$0</div>
<div class="text-sm" style="color: var(--text-secondary);">Para começar</div>
<div class="text-sm" style="color: var(--text-secondary);">To start</div>
</div>
</div>
<div class="card-surface rounded-2xl p-6 sm:p-8 border-ember-500/20">
<p class="text-lg" style="color: var(--text-secondary);">
<strong style="color: var(--text-primary);">Filosofia:</strong> Gerenciamento de incidentes não deveria custar o salário de um engenheiro.
On-call, alertas, IA Scribe e status pages &mdash; tudo incluído por
<span class="text-ember-400 font-semibold">$12/user/mês</span>.
<strong style="color: var(--text-primary);">Philosophy:</strong> Incident management shouldn't cost an engineer's salary.
On-call, alerts, AI Scribe and status pages &mdash; all included for
<span class="text-ember-400 font-semibold">$12/user/month</span>.
</p>
</div>
</div>
@@ -1255,16 +1261,16 @@
<div class="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="responsive-subheading text-display mb-4">
Por que <span class="gradient-text-ember">Batida</span>?
Why <span class="gradient-text-ember">Batida</span>?
</h2>
<p class="text-lg" style="color: var(--text-secondary);">Comparação honesta. Sem marketing enganoso.</p>
<p class="text-lg" style="color: var(--text-secondary);">Honest comparison. No misleading marketing.</p>
</div>
<div class="overflow-x-auto rounded-2xl border card-surface">
<table class="w-full min-w-[700px]">
<thead>
<tr class="border-b" style="border-color: var(--border-color);">
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider" style="color: var(--text-muted);">Recurso</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider" style="color: var(--text-muted);">Feature</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider text-ember-400">Batida ✨</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider" style="color: var(--text-muted);">PagerDuty</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider" style="color: var(--text-muted);">incident.io</th>
@@ -1273,53 +1279,53 @@
</thead>
<tbody class="divide-y" style="--tw-divide-opacity: 1; --tw-divide-color: var(--border-color);">
<tr class="transition-colors hover:bg-ember-500/5">
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">Preço</td>
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">Price</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">$12/user</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">$21/user</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">$25/user (efetivo)</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">$20/user</td>
</tr>
<tr class="transition-colors hover:bg-ember-500/5">
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">Tempo de Setup</td>
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">Setup Time</td>
<td class="px-6 py-4 text-sm font-semibold text-frost-400">&lt; 15 min ⚡</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Dias/Semanas</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Horas</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Horas</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Days/Weeks</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Hours</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Hours</td>
</tr>
<tr class="transition-colors hover:bg-ember-500/5">
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">UI/UX</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">Moderna & Intuitiva</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Complexa</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Boa</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Datada</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">Modern & Intuitive</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Complex</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Good</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Dated</td>
</tr>
<tr class="transition-colors hover:bg-ember-500/5">
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">On-call</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">Incluído</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Incluído</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">Included</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Included</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">+ $10/user</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Incluído</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Included</td>
</tr>
<tr class="transition-colors hover:bg-ember-500/5">
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">IA Scribe</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">Incluído</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Não disponível</td>
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">AI Scribe</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">Included</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Not available</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Pro only ($25)</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Não disponível</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Not available</td>
</tr>
<tr class="transition-colors hover:bg-ember-500/5">
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">Roteamento de Chamadas</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">1 número incluído</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Incluído</td>
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">Call Routing</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">1 number included</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Included</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Pro only</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Não disponível</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Not available</td>
</tr>
<tr class="transition-colors hover:bg-ember-500/5">
<td class="px-6 py-4 font-medium text-sm" style="color: var(--text-primary);">Status Pages</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">5 incluídas</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Não disponível</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">1 incluída</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Não disponível</td>
<td class="px-6 py-4 text-sm font-semibold text-ember-400">5 included</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Not available</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">1 included</td>
<td class="px-6 py-4 text-sm" style="color: var(--text-secondary);">Not available</td>
</tr>
</tbody>
</table>
@@ -1327,8 +1333,8 @@
<div class="mt-8 text-center card-surface rounded-2xl p-6 sm:p-8 border-ember-500/20">
<p class="text-lg" style="color: var(--text-secondary);">
<strong style="color: var(--text-primary);">Nossa Promessa:</strong> On-call, IA Scribe, roteamento de chamadas e status pages &mdash; tudo incluído por
<span class="text-ember-400 font-semibold">$12/user/mês</span>. Sem surpresas.
<strong style="color: var(--text-primary);">Our Promise:</strong> On-call, AI Scribe, call routing and status pages &mdash; all included for
<span class="text-ember-400 font-semibold">$12/user/month</span>. No surprises.
</p>
</div>
</div>
@@ -1342,11 +1348,11 @@
<div class="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="responsive-subheading text-display mb-4">
Preços simples &<br>
<span class="gradient-text-amber">transparentes</span>
Simple &<br>
<span class="gradient-text-amber">transparent pricing</span>
</h2>
<p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
Escolha o plano ideal. Comece grátis, escale quando precisar.
Choose the ideal plan. Start free, scale when needed.
</p>
</div>
@@ -1358,17 +1364,17 @@
<div class="flex items-baseline gap-1">
<span class="text-4xl sm:text-5xl font-bold" style="color: var(--text-primary);">$0</span>
</div>
<div class="text-sm mt-1" style="color: var(--text-muted);">Plano gratuito permanente</div>
<div class="text-sm mt-1" style="color: var(--text-muted);">Permanent free tier</div>
</div>
<ul class="space-y-3 mb-8 text-sm" style="color: var(--text-secondary);">
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Até <strong style="color: var(--text-primary);">5 usuários</strong>
Up to <strong style="color: var(--text-primary);">5 users</strong>
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Incidentes ilimitados
Unlimited incidents
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
@@ -1380,7 +1386,7 @@
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
IA Scribe (5/mês)
AI Scribe (5/month)
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
@@ -1388,11 +1394,11 @@
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Suporte comunitário
Community support
</li>
</ul>
<a href="{{APP_URL}}/signup" class="block w-full btn-ghost px-6 py-3 rounded-xl text-sm font-semibold text-center">Começar Grátis</a>
<a href="{{APP_URL}}/signup" class="block w-full btn-ghost px-6 py-3 rounded-xl text-sm font-semibold text-center">Start Free</a>
</div>
<!-- Pro (Featured) -->
@@ -1405,27 +1411,27 @@
<div class="text-xs font-bold uppercase tracking-widest mb-2 text-ember-400">PRO</div>
<div class="flex items-baseline gap-1">
<span class="text-4xl sm:text-5xl font-bold" style="color: var(--text-primary);">$12</span>
<span class="text-lg" style="color: var(--text-muted);">/user/mês</span>
<span class="text-lg" style="color: var(--text-muted);">/user/month</span>
</div>
<div class="text-sm mt-1" style="color: var(--text-muted);">cobrado anualmente ($15/mês mensal)</div>
<div class="text-sm mt-1" style="color: var(--text-muted);">billed annually ($15/month monthly)</div>
</div>
<ul class="space-y-3 mb-8 text-sm" style="color: var(--text-secondary);">
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<strong style="color: var(--text-primary);">Usuários ilimitados</strong>
<strong style="color: var(--text-primary);">Unlimited users</strong>
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<strong style="color: var(--text-primary);">On-call completo</strong> (schedules + escalations)
<strong style="color: var(--text-primary);">Full on-call</strong> (schedules + escalations)
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<strong style="color: var(--text-primary);">Roteamento de chamadas</strong> (1 número/tenant)
<strong style="color: var(--text-primary);">Call routing</strong> (1 number/tenant)
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<strong style="color: var(--text-primary);">IA Scribe ilimitado</strong> + postmortems com IA
<strong style="color: var(--text-primary);">Unlimited AI Scribe</strong> + AI postmortems
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
@@ -1433,7 +1439,7 @@
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Todas as integrações (+200)
All integrations (200+)
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
@@ -1445,7 +1451,7 @@
</li>
</ul>
<a href="{{APP_URL}}/signup?plan=pro" class="block w-full btn-ember px-6 py-3 rounded-xl text-sm font-bold text-white text-center">Começar com Pro</a>
<a href="{{APP_URL}}/signup?plan=pro" class="block w-full btn-ember px-6 py-3 rounded-xl text-sm font-bold text-white text-center">Start with Pro</a>
</div>
<!-- Enterprise -->
@@ -1455,13 +1461,13 @@
<div class="flex items-baseline gap-1">
<span class="text-4xl sm:text-5xl font-bold" style="color: var(--text-primary);">Custom</span>
</div>
<div class="text-sm mt-1" style="color: var(--text-muted);">Sob medida</div>
<div class="text-sm mt-1" style="color: var(--text-muted);">Custom</div>
</div>
<ul class="space-y-3 mb-8 text-sm" style="color: var(--text-secondary);">
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Tudo do Pro +
Everything in Pro +
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
@@ -1469,7 +1475,7 @@
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
RBAC personalizado + logs de auditoria
Custom RBAC + audit logs
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
@@ -1477,11 +1483,11 @@
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Gerente de sucesso dedicado
Dedicated success manager
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Residência de dados personalizada
Custom data residency
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
@@ -1489,12 +1495,12 @@
</li>
</ul>
<a href="mailto:contato@batida.io" class="block w-full btn-ghost px-6 py-3 rounded-xl text-sm font-semibold text-center">Falar com Vendas</a>
<a href="mailto:contato@batida.io" class="block w-full btn-ghost px-6 py-3 rounded-xl text-sm font-semibold text-center">Contact Sales</a>
</div>
</div>
<p class="text-center text-sm mt-8" style="color: var(--text-muted);">
Plano gratuito permanente. Sem cartão de crédito. Upgrade quando quiser.
Permanent free tier. No credit card. Upgrade anytime.
</p>
</div>
</section>
@@ -1506,81 +1512,81 @@
<div class="relative z-10 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="responsive-subheading text-display mb-4">
Perguntas <span class="gradient-text-ember">frequentes</span>
Frequently Asked <span class="gradient-text-ember">Questions</span>
</h2>
<p class="text-lg" style="color: var(--text-secondary);">Tire suas dúvidas antes de começar</p>
<p class="text-lg" style="color: var(--text-secondary);">Get your questions answered before you start</p>
</div>
<div class="space-y-4">
<details class="group card-surface rounded-xl overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-semibold hover:text-ember-500 transition-colors" style="color: var(--text-primary);">
<span>O Batida substitui completamente o PagerDuty/OpsGenie?</span>
<span>Does Batida fully replace PagerDuty/OpsGenie?</span>
<svg class="w-5 h-5 flex-shrink-0 ml-4 transition-transform duration-200" style="color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</summary>
<div class="px-6 pb-5 leading-relaxed" style="color: var(--text-secondary);">
Sim! Cobrimos 100% dos casos de uso core: alerting, on-call, escalation, incident coordination, postmortems, e analytics. Migração guiada disponível.
Yes! We cover 100% of core use cases: alerting, on-call, escalation, incident coordination, postmortems, and analytics. Guided migration available.
</div>
</details>
<details class="group card-surface rounded-xl overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-semibold hover:text-ember-500 transition-colors" style="color: var(--text-primary);">
<span>Quanto tempo leva para configurar?</span>
<span>How long does setup take?</span>
<svg class="w-5 h-5 flex-shrink-0 ml-4 transition-transform duration-200" style="color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</summary>
<div class="px-6 pb-5 leading-relaxed" style="color: var(--text-secondary);">
A maioria começa a receber alertas em menos de 15 minutos. Integrações complexas podem levar algumas horas. Temos templates prontos.
Most teams start receiving alerts in under 15 minutes. Complex integrations may take a few hours. Ready-made templates are available.
</div>
</details>
<details class="group card-surface rounded-xl overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-semibold hover:text-ember-500 transition-colors" style="color: var(--text-primary);">
<span>Meus dados ficam onde?</span>
<span>Where is my data stored?</span>
<svg class="w-5 h-5 flex-shrink-0 ml-4 transition-transform duration-200" style="color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</summary>
<div class="px-6 pb-5 leading-relaxed" style="color: var(--text-secondary);">
Oferecemos opcao de servidores em US-East para compliance GDPR e baixa latencia global. Mais regioes em breve.
We offer US-East servers for GDPR compliance and low global latency. More regions coming soon.
</div>
</details>
<details class="group card-surface rounded-xl overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-semibold hover:text-ember-500 transition-colors" style="color: var(--text-primary);">
<span>Em qual moeda sao cobrados os planos?</span>
<span>What currency are plans billed in?</span>
<svg class="w-5 h-5 flex-shrink-0 ml-4 transition-transform duration-200" style="color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</summary>
<div class="px-6 pb-5 leading-relaxed" style="color: var(--text-secondary);">
Todos os planos são cobrados em USD ($12/user/mês no plano Pro anual). Aceitamos cartão de crédito via Stripe.
All plans are billed in USD ($12/user/month on the annual Pro plan). We accept credit cards via Stripe.
</div>
</details>
<details class="group card-surface rounded-xl overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-semibold hover:text-ember-500 transition-colors" style="color: var(--text-primary);">
<span>Posso cancelar a qualquer momento?</span>
<span>Can I cancel anytime?</span>
<svg class="w-5 h-5 flex-shrink-0 ml-4 transition-transform duration-200" style="color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</summary>
<div class="px-6 pb-5 leading-relaxed" style="color: var(--text-secondary);">
Claro. Sem contratos anuais forçados (exceto plano Corporativo). Cancele com um clique. Dados disponíveis por 30 dias pós-cancelamento.
Absolutely. No forced annual contracts (except Enterprise plan). Cancel with one click. Data available for 30 days after cancellation.
</div>
</details>
<details class="group card-surface rounded-xl overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-semibold hover:text-ember-500 transition-colors" style="color: var(--text-primary);">
<span>É seguro? LGPD/GDPR compliant?</span>
<span>Is it secure? LGPD/GDPR compliant?</span>
<svg class="w-5 h-5 flex-shrink-0 ml-4 transition-transform duration-200" style="color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</summary>
<div class="px-6 pb-5 leading-relaxed" style="color: var(--text-secondary);">
Sim. Criptografia AES-256, backups diários. LGPD/GDPR compliant. Auditoria SOC 2 em andamento.
Yes. AES-256 encryption, daily backups. LGPD/GDPR compliant. SOC 2 audit in progress.
</div>
</details>
</div>
@@ -1595,17 +1601,17 @@
<div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="responsive-heading text-display mb-6 leading-tight">
Pronto para acabar com o<br>
<span class="gradient-text-ember">caos de incidentes?</span>
Ready to end the<br>
<span class="gradient-text-ember">chaos of incidents?</span>
</h2>
<p class="text-xl mb-10 max-w-2xl mx-auto" style="color: var(--text-secondary);">
Junte-se aos times que estão <strong style="color: var(--text-primary);">transformando sua resposta a incidentes</strong>.
Join the teams that are <strong style="color: var(--text-primary);">transforming their incident response</strong>.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
<a href="{{APP_URL}}/signup" class="btn-ember px-10 py-5 rounded-xl text-lg font-bold text-white inline-flex items-center justify-center gap-2 group">
<span>Criar Conta Grátis</span>
<span>Create Free Account</span>
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
@@ -1613,11 +1619,11 @@
</div>
<p class="text-sm mb-12" style="color: var(--text-muted);">
Setup em &lt; 15 min • Sem cartão • Suporte PT-BR nativo
Setup in &lt; 15 min • No credit card • Native PT-BR Support
</p>
<div class="pt-8 border-t inline-block w-full" style="border-color: var(--border-color);">
<p class="text-sm mb-4" style="color: var(--text-secondary);">Ainda tem dúvidas? Fale conosco:</p>
<p class="text-sm mb-4" style="color: var(--text-secondary);">Still have questions? Contact us:</p>
<div class="flex flex-wrap justify-center gap-6 text-sm" style="color: var(--text-muted);">
<a href="mailto:contato@batida.io" class="hover:text-ember-500 transition-colors flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
@@ -1639,7 +1645,7 @@
<span class="text-lg font-bold" style="color: var(--text-primary);">Batida</span>
</div>
<p class="text-xs leading-relaxed mb-4" style="color: var(--text-muted);">
Plataforma brasileira de gerenciamento de incidentes. Construída com ❤️ no Brasil.
Brazilian incident management platform. Built with ❤️ in Brazil.
</p>
<div class="flex gap-3">
<a href="mailto:contato@batida.io" class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors card-surface hover:text-ember-500" style="color: var(--text-muted);">
@@ -1650,16 +1656,16 @@
<!-- Links -->
<div>
<h4 class="text-xs font-bold uppercase tracking-wider mb-4" style="color: var(--text-muted);">Produto</h4>
<h4 class="text-xs font-bold uppercase tracking-wider mb-4" style="color: var(--text-muted);">Product</h4>
<ul class="space-y-2.5 text-sm">
<li><a href="#features" class="hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Features</a></li>
<li><a href="#integrations" class="hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Integrações</a></li>
<li><a href="#pricing" class="hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Preços</a></li>
<li><a href="#integrations" class="hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Integrations</a></li>
<li><a href="#pricing" class="hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Pricing</a></li>
</ul>
</div>
<div>
<h4 class="text-xs font-bold uppercase tracking-wider mb-4" style="color: var(--text-muted);">Contato</h4>
<h4 class="text-xs font-bold uppercase tracking-wider mb-4" style="color: var(--text-muted);">Contact</h4>
<ul class="space-y-2.5 text-sm">
<li><a href="mailto:contato@batida.io" class="hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">contato@batida.io</a></li>
</ul>

1794
index.pt-br.html Normal file

File diff suppressed because it is too large Load Diff

24
nginx.conf Normal file
View File

@@ -0,0 +1,24 @@
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ =404;
default_type text/html;
add_header Content-Language "en" always;
}
location /pt-br {
try_files $uri $uri/ /pt-br/index.html =404;
default_type text/html;
add_header Content-Language "pt-BR" always;
}
location = /pt-br {
return 301 /pt-br/;
}
gzip on;
gzip_types text/html text/css application/javascript;
}