Mário Idival
ed885aebef
- 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
1795 lines
107 KiB
HTML
1795 lines
107 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" 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/">
|
|
<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">
|
|
<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">
|
|
|
|
<!-- Tailwind -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
'sans': ['Inter', 'system-ui', 'sans-serif'],
|
|
'mono': ['JetBrains Mono', 'monospace'],
|
|
},
|
|
colors: {
|
|
'ember': {
|
|
50: '#FFF7ED',
|
|
100: '#FFEDD5',
|
|
200: '#FED7AA',
|
|
300: '#FDBA74',
|
|
400: '#FB923C',
|
|
500: '#F97316',
|
|
600: '#EA580C',
|
|
700: '#C2410C',
|
|
800: '#9A3412',
|
|
900: '#7C2D12',
|
|
},
|
|
'frost': {
|
|
50: '#ECFEFF',
|
|
100: '#CFFAFE',
|
|
200: '#A5F3FC',
|
|
300: '#67E8F9',
|
|
400: '#22D3EE',
|
|
500: '#06B6D4',
|
|
600: '#0891B2',
|
|
700: '#0E7490',
|
|
800: '#155E75',
|
|
900: '#164E63',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* ===== CSS VARIABLES PARA DARK/LIGHT ===== */
|
|
: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);
|
|
--glow-frost: rgba(34, 211, 238, 0.15);
|
|
--card-bg: linear-gradient(145deg, rgba(20, 20, 25, 0.8), rgba(12, 12, 15, 0.9));
|
|
--noise-opacity: 0.03;
|
|
--grid-opacity: 0.3;
|
|
}
|
|
|
|
[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);
|
|
--glow-frost: rgba(34, 211, 238, 0.08);
|
|
--card-bg: linear-gradient(145deg, #FFFFFF, #F8F8F5);
|
|
--noise-opacity: 0.015;
|
|
--grid-opacity: 0.15;
|
|
}
|
|
|
|
body, a, button, input, .card-surface {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ===== TEXTURAS DE FUNDO ===== */
|
|
.bg-texture {
|
|
background-image:
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, var(--glow-ember), transparent);
|
|
background-color: var(--bg-primary);
|
|
}
|
|
|
|
.grid-pattern {
|
|
background-image:
|
|
linear-gradient(var(--border-color) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
/* ===== GRADIENTES ===== */
|
|
.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;
|
|
}
|
|
|
|
.gradient-text-frost {
|
|
background: linear-gradient(135deg, #22D3EE 0%, #67E8F9 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.gradient-text-amber {
|
|
background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.gradient-frost {
|
|
background: linear-gradient(135deg, #22D3EE 0%, #67E8F9 100%);
|
|
}
|
|
|
|
.glow-ember {
|
|
box-shadow: 0 0 30px var(--glow-ember);
|
|
}
|
|
|
|
/* ===== BOTÕES ===== */
|
|
.btn-ember {
|
|
background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 4px 20px rgba(249, 115, 22, 0.25);
|
|
color: white;
|
|
}
|
|
|
|
.btn-ember::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn-ember:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-ember:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 30px rgba(249, 115, 22, 0.35);
|
|
}
|
|
|
|
.btn-ghost {
|
|
border: 1px solid var(--border-color);
|
|
background: rgba(249, 115, 22, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
color: var(--text-primary);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
border-color: #F97316;
|
|
background: rgba(249, 115, 22, 0.1);
|
|
box-shadow: 0 0 30px var(--glow-ember);
|
|
}
|
|
|
|
/* ===== CARDS ===== */
|
|
.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);
|
|
position: relative;
|
|
}
|
|
|
|
.card-surface::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), transparent 50%, rgba(34, 211, 238, 0.1));
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-surface:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--border-hover);
|
|
box-shadow:
|
|
0 20px 40px var(--shadow-color),
|
|
0 0 40px var(--glow-ember);
|
|
}
|
|
|
|
/* ===== BADGE PULSE ===== */
|
|
.badge-pulse {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 10px currentColor; }
|
|
50% { opacity: 0.7; box-shadow: 0 0 20px currentColor; }
|
|
}
|
|
|
|
/* ===== FLOAT SUBTLE ===== */
|
|
@keyframes float-subtle {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|
|
|
|
.float-subtle {
|
|
animation: float-subtle 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* ===== TIPOGRAFIA ===== */
|
|
.text-display {
|
|
font-weight: 800;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/* ===== TOGGLE THEME ===== */
|
|
.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;
|
|
}
|
|
|
|
/* ===== MOBILE MENU ===== */
|
|
.mobile-menu {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.mobile-menu.active {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
}
|
|
|
|
.mobile-menu-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.mobile-menu-panel {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: min(320px, 85vw);
|
|
height: 100%;
|
|
background: var(--bg-primary);
|
|
border-left: 1px solid var(--border-color);
|
|
padding: 2rem;
|
|
transform: translateX(100%);
|
|
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mobile-menu.active .mobile-menu-panel {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Hamburger Animation */
|
|
.hamburger {
|
|
width: 28px;
|
|
height: 20px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hamburger span {
|
|
display: block;
|
|
position: absolute;
|
|
height: 2px;
|
|
width: 100%;
|
|
background: var(--text-primary);
|
|
border-radius: 2px;
|
|
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
|
left: 0;
|
|
}
|
|
|
|
.hamburger span:nth-child(1) { top: 0; }
|
|
.hamburger span:nth-child(2) { top: 9px; width: 70%; }
|
|
.hamburger span:nth-child(3) { top: 18px; width: 85%; }
|
|
|
|
.hamburger.active span:nth-child(1) {
|
|
top: 9px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.hamburger.active span:nth-child(2) {
|
|
opacity: 0;
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
.hamburger.active span:nth-child(3) {
|
|
top: 9px;
|
|
width: 100%;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
/* ===== PRICING FEATURED ===== */
|
|
.pricing-featured {
|
|
position: relative;
|
|
border: 2px solid #F97316;
|
|
background: linear-gradient(180deg, rgba(249, 115, 22, 0.05) 0%, var(--bg-primary) 30%);
|
|
}
|
|
|
|
.pricing-featured::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
background: linear-gradient(135deg, #F97316, #22D3EE, #F97316);
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
opacity: 0.2;
|
|
filter: blur(20px);
|
|
}
|
|
|
|
/* ===== FAQ ACCORDION ===== */
|
|
details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
details[open] summary svg:last-child {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
details summary svg:last-child {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
/* ===== SCROLLBAR ===== */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #F97316;
|
|
}
|
|
|
|
/* ===== SELECTION ===== */
|
|
::selection {
|
|
background: rgba(249, 115, 22, 0.25);
|
|
color: inherit;
|
|
}
|
|
|
|
/* ===== ASYMMETRIC LAYOUT HELPERS ===== */
|
|
.layout-asymmetric {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.layout-asymmetric > *:first-child {
|
|
grid-column: 1 / 2;
|
|
}
|
|
|
|
.layout-asymmetric > *:last-child {
|
|
grid-column: 2 / 3;
|
|
grid-row: 1 / 3;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.layout-asymmetric {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.layout-asymmetric > *,
|
|
.layout-asymmetric > *:first-child,
|
|
.layout-asymmetric > *:last-child {
|
|
grid-column: 1 / -1;
|
|
grid-row: auto;
|
|
}
|
|
}
|
|
|
|
/* ===== SWIPE GESTURE HINT ===== */
|
|
.swipe-hint {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.swipe-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-top: 1rem;
|
|
animation: swipe-hint-anim 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes swipe-hint-anim {
|
|
0%, 100% { transform: translateX(0); opacity: 0.5; }
|
|
50% { transform: translateX(10px); opacity: 1; }
|
|
}
|
|
}
|
|
|
|
/* ===== RESPONSIVE TYPOGRAPHY ===== */
|
|
.responsive-heading {
|
|
font-size: clamp(2rem, 6vw, 4.5rem);
|
|
}
|
|
|
|
.responsive-subheading {
|
|
font-size: clamp(1.5rem, 4vw, 3rem);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<!-- NAVIGATION -->
|
|
<nav class="fixed w-full z-50 top-0 left-0 right-0 backdrop-blur-xl border-b transition-all duration-300" 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">
|
|
<!-- Logo -->
|
|
<a href="#" 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>
|
|
|
|
<!-- 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);">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>
|
|
|
|
<!-- Right Side Actions -->
|
|
<div class="flex items-center gap-3">
|
|
<!-- Theme Toggle -->
|
|
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
|
|
<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="/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">
|
|
Start Free
|
|
</a>
|
|
|
|
<!-- Mobile Hamburger -->
|
|
<button class="hamburger md:hidden" onclick="toggleMobileMenu()" aria-label="Menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- MOBILE MENU -->
|
|
<div class="mobile-menu md:hidden" id="mobileMenu">
|
|
<div class="mobile-menu-backdrop" onclick="toggleMobileMenu()"></div>
|
|
<div class="mobile-menu-panel">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div class="flex items-center gap-2">
|
|
<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="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>
|
|
</button>
|
|
</div>
|
|
|
|
<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()">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">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>Swipe to close →</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HERO SECTION - LAYOUT ASSIMÉTRICO -->
|
|
<section class="relative min-h-screen flex items-center bg-texture overflow-hidden pt-16">
|
|
<div class="absolute inset-0 grid-pattern" style="opacity: var(--grid-opacity);"></div>
|
|
|
|
<!-- Gradient Orbs -->
|
|
<div class="absolute top-1/4 -left-32 w-[500px] h-[500px] rounded-full bg-ember-500/10 blur-[120px] pointer-events-none"></div>
|
|
<div class="absolute bottom-1/4 -right-32 w-[400px] h-[400px] rounded-full bg-frost-400/8 blur-[100px] pointer-events-none"></div>
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20 w-full">
|
|
<div class="layout-asymmetric lg:gap-20">
|
|
<!-- Left Content (60%) -->
|
|
<div class="lg:pr-8">
|
|
<!-- Badge -->
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6 card-surface">
|
|
<span class="relative flex h-2 w-2">
|
|
<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);">
|
|
Smart alternative to PagerDuty • Built in 🇧🇷
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Headline -->
|
|
<h1 class="responsive-heading text-display mb-6">
|
|
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);">
|
|
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>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>
|
|
</div>
|
|
|
|
<!-- Social Proof Mini -->
|
|
<div class="space-y-3">
|
|
<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>
|
|
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>
|
|
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>
|
|
Free to Start
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Dashboard Preview (40%) -->
|
|
<div class="float-subtle order-first lg:order-last mb-10 lg:mb-0">
|
|
<div class="relative">
|
|
<!-- Glow behind dashboard -->
|
|
<div class="absolute -inset-4 bg-gradient-to-r from-ember-500/10 via-transparent to-frost-400/10 blur-3xl rounded-3xl"></div>
|
|
|
|
<!-- Dashboard Window -->
|
|
<div class="relative card-surface rounded-2xl overflow-hidden shadow-2xl">
|
|
<!-- Window Chrome -->
|
|
<div class="px-4 py-3 flex items-center gap-3 border-b" style="background: var(--bg-raised); border-color: var(--border-color);">
|
|
<div class="flex gap-2">
|
|
<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>
|
|
<div class="flex-1 flex justify-center">
|
|
<div class="px-4 py-1 rounded-md text-xs font-mono" style="background: var(--bg-primary); color: var(--text-muted);">
|
|
app.batida.io/dashboard
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Content -->
|
|
<div class="p-4 sm:p-6 space-y-4">
|
|
<!-- Stats Row -->
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="card-surface rounded-lg p-3 sm:p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs uppercase tracking-wider font-semibold" style="color: var(--text-muted);">Ativos</span>
|
|
<div class="w-2 h-2 rounded-full bg-red-500 badge-pulse" style="color: #EF4444;"></div>
|
|
</div>
|
|
<div class="text-2xl sm:text-3xl font-bold text-red-400">3</div>
|
|
<div class="text-xs" style="color: var(--text-muted);">2 críticos</div>
|
|
</div>
|
|
|
|
<div class="card-surface rounded-lg p-3 sm:p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs uppercase tracking-wider font-semibold" style="color: var(--text-muted);">MTTR</span>
|
|
<svg class="w-4 h-4 text-frost-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-2xl sm:text-3xl font-bold text-frost-400">23<span class="text-base">min</span></div>
|
|
<div class="text-xs text-emerald-400">↓ 40%</div>
|
|
</div>
|
|
|
|
<div class="card-surface rounded-lg p-3 sm:p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs uppercase tracking-wider font-semibold" style="color: var(--text-muted);">On-Call</span>
|
|
<div class="w-2 h-2 rounded-full bg-ember-500 badge-pulse" style="color: #F97316;"></div>
|
|
</div>
|
|
<div class="text-xl sm:text-2xl font-bold truncate" style="color: var(--text-primary);">João S.</div>
|
|
<div class="text-xs truncate" style="color: var(--text-muted);">Platform Team</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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);">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;">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<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 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>
|
|
</div>
|
|
|
|
<div class="px-4 py-3 flex items-center justify-between hover:bg-opacity-30 transition-colors cursor-pointer group" style="background: transparent;">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<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 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>
|
|
</div>
|
|
|
|
<div class="px-4 py-3 flex items-center justify-between hover:bg-opacity-30 transition-colors cursor-pointer group" style="background: transparent;">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<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);">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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Badge (Desktop only) -->
|
|
<div class="absolute -bottom-4 -left-4 card-surface rounded-xl px-4 py-3 hidden lg:flex items-center gap-3 glow-ember">
|
|
<div class="w-10 h-10 rounded-lg gradient-ember flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-5 h-5 text-white" 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"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-bold" style="color: var(--text-primary);">Quick Setup</div>
|
|
<div class="text-xs" style="color: var(--text-muted);">< 15 minutes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PAIN POINTS SECTION -->
|
|
<section class="py-20 lg:py-28 relative" style="background: var(--bg-primary);">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
|
|
<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">
|
|
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);">
|
|
Recognize any of these situations? You're not alone.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- 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">Infinite Alerts</h3>
|
|
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
|
|
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);">
|
|
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">Chaotic Coordination</h3>
|
|
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
|
|
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);">
|
|
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">Ignored Postmortems</h3>
|
|
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
|
|
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);">
|
|
Result: Repeated Failures → No Improvement
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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);">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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES OVERVIEW - ASSIMÉTRICO -->
|
|
<section id="features" class="py-20 lg:py-28 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-ember-500/5 blur-[150px] pointer-events-none"></div>
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="layout-asymmetric">
|
|
<!-- Left: Copy -->
|
|
<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">All-in-One Platform</span>
|
|
</div>
|
|
|
|
<h2 class="responsive-subheading text-display mb-6 leading-tight">
|
|
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);">
|
|
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">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-ember-500/10 border border-ember-500/30 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<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="3" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
<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">
|
|
<div class="w-6 h-6 rounded-full bg-ember-500/10 border border-ember-500/30 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<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="3" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
<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">
|
|
<div class="w-6 h-6 rounded-full bg-ember-500/10 border border-ember-500/30 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<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="3" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
<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">
|
|
<div class="w-6 h-6 rounded-full bg-ember-500/10 border border-ember-500/30 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<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="3" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
<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">
|
|
<div class="w-6 h-6 rounded-full bg-ember-500/10 border border-ember-500/30 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<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="3" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
<span style="color: var(--text-secondary);"><strong style="color: var(--text-primary);">Advanced analytics</strong> for MTTR and SLAs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Dashboard Mockup -->
|
|
<div class="relative order-first lg:order-last">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-ember-500/20 via-transparent to-frost-500/20 rounded-3xl blur-3xl opacity-40"></div>
|
|
<div class="relative card-surface rounded-2xl overflow-hidden shadow-2xl" style="border-color: var(--border-color);">
|
|
<div class="px-4 py-3 flex items-center gap-3 border-b" style="background: var(--bg-raised); border-color: var(--border-color);">
|
|
<div class="flex gap-2">
|
|
<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>
|
|
<div class="flex-1 flex justify-center">
|
|
<div class="px-4 py-1 rounded-md text-xs font-mono" style="background: var(--bg-primary); color: var(--text-muted);">
|
|
app.batida.io/analytics
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 sm:p-6 space-y-4">
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="card-surface rounded-lg p-3">
|
|
<div class="text-xs uppercase tracking-wider font-semibold mb-1" style="color: var(--text-muted);">MTTA</div>
|
|
<div class="text-2xl font-bold text-frost-400">2<span class="text-base">min</span></div>
|
|
<div class="text-xs text-emerald-400">↓ 60%</div>
|
|
</div>
|
|
<div class="card-surface rounded-lg p-3">
|
|
<div class="text-xs uppercase tracking-wider font-semibold mb-1" style="color: var(--text-muted);">MTTR</div>
|
|
<div class="text-2xl font-bold text-ember-400">23<span class="text-base">min</span></div>
|
|
<div class="text-xs text-emerald-400">↓ 40%</div>
|
|
</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);">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>
|
|
<div class="flex-1 bg-ember-500/60 rounded-sm" style="height: 30%;"></div>
|
|
<div class="flex-1 bg-ember-500/60 rounded-sm" style="height: 55%;"></div>
|
|
<div class="flex-1 bg-ember-500/60 rounded-sm" style="height: 90%;"></div>
|
|
<div class="flex-1 bg-frost-500/60 rounded-sm" style="height: 45%;"></div>
|
|
<div class="flex-1 bg-frost-500/60 rounded-sm" style="height: 25%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DETAILED FEATURES GRID -->
|
|
<section class="py-20 lg:py-28 relative" style="background: var(--bg-primary);">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
|
|
<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">
|
|
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);">
|
|
Everything you need to manage incidents like a Fortune 500 company.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Feature Cards -->
|
|
<div class="card-surface rounded-2xl p-6 sm:p-8 group">
|
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-ember-500/20 to-ember-600/10 border border-ember-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7 text-ember-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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);">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> 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>
|
|
|
|
<div class="card-surface rounded-2xl p-6 sm:p-8 group">
|
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-frost-500/20 to-frost-600/10 border border-frost-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7 text-frost-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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 & 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+ 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>
|
|
|
|
<div class="card-surface rounded-2xl p-6 sm:p-8 group">
|
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-ember-500/20 to-ember-600/10 border border-ember-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7 text-ember-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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);">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> 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> Public/private status pages</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-surface rounded-2xl p-6 sm:p-8 group">
|
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-frost-500/20 to-frost-600/10 border border-frost-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7 text-frost-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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);">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> 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>
|
|
|
|
<div class="card-surface rounded-2xl p-6 sm:p-8 group">
|
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-ember-500/20 to-ember-600/10 border border-ember-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7 text-ember-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
</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> 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>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- HOW IT WORKS -->
|
|
<section id="how-it-works" class="py-20 lg:py-28 relative overflow-hidden" style="background: var(--bg-primary);">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
<div class="absolute bottom-0 left-0 right-0 h-96 bg-gradient-to-t from-ember-500/5 to-transparent pointer-events-none"></div>
|
|
|
|
<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">
|
|
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 in less than 15 minutes. No complexity.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 relative">
|
|
<!-- Connection Line (desktop only) -->
|
|
<div class="hidden md:block absolute top-24 left-[calc(16.67%+2rem)] right-[calc(16.67%+2rem)] h-px bg-gradient-to-r from-ember-500/50 via-frost-400/50 to-ember-500/50"></div>
|
|
|
|
<!-- Steps -->
|
|
<div class="text-center relative">
|
|
<div class="relative inline-flex mb-6">
|
|
<div class="w-20 h-20 rounded-2xl gradient-ember flex items-center justify-center text-3xl font-bold text-white shadow-lg relative z-10">1</div>
|
|
<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);">Connect your tools</h3>
|
|
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
|
|
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 setup</div>
|
|
</div>
|
|
|
|
<div class="text-center relative">
|
|
<div class="relative inline-flex mb-6">
|
|
<div class="w-20 h-20 rounded-2xl gradient-ember flex items-center justify-center text-3xl font-bold text-white shadow-lg relative z-10">2</div>
|
|
<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);">Configure workflows</h3>
|
|
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
|
|
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 included</div>
|
|
</div>
|
|
|
|
<div class="text-center relative">
|
|
<div class="relative inline-flex mb-6">
|
|
<div class="w-20 h-20 rounded-2xl gradient-ember flex items-center justify-center text-3xl font-bold text-white shadow-lg relative z-10">3</div>
|
|
<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);">Respond & learn</h3>
|
|
<p class="leading-relaxed mb-4" style="color: var(--text-secondary);">
|
|
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);">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>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 in < 15 min • No credit card • PT-BR Support</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- INTEGRATIONS -->
|
|
<section id="integrations" class="py-20 lg:py-28 relative" style="background: var(--bg-primary);">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
|
|
<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">
|
|
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);">
|
|
Native integrations with the modern stack. 200+ connectors available.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4 mb-8">
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">Datadog</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">Slack</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">Prometheus</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">Jira</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">Grafana</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">Teams</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">Sentry</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">CloudWatch</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">New Relic</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<span class="text-sm font-bold group-hover:text-ember-500 transition-colors" style="color: var(--text-muted);">GitHub</span>
|
|
</div>
|
|
<div class="card-surface rounded-xl p-4 flex items-center justify-center h-20 group cursor-pointer">
|
|
<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 more</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- EARLY ACCESS -->
|
|
<section class="py-20 lg:py-28 relative overflow-hidden" style="background: var(--bg-primary);">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-frost-400/5 blur-[150px] pointer-events-none"></div>
|
|
|
|
<div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="text-center mb-12">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6 card-surface">
|
|
<span class="relative flex h-2 w-2">
|
|
<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);">Early Access Open</span>
|
|
</div>
|
|
<h2 class="responsive-subheading text-display mb-4">
|
|
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);">
|
|
Born from real frustration with expensive, complex tools. Batida delivers advanced features without enterprise pricing.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Platform Highlights -->
|
|
<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);">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"><15min</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);">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);">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);">Philosophy:</strong> Incident management shouldn't cost an engineer's salary.
|
|
On-call, alerts, AI Scribe and status pages — all included for
|
|
<span class="text-ember-400 font-semibold">$12/user/month</span>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- COMPARISON TABLE -->
|
|
<section class="py-20 lg:py-28 relative" style="background: var(--bg-primary);">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
|
|
<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">
|
|
Why <span class="gradient-text-ember">Batida</span>?
|
|
</h2>
|
|
<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);">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>
|
|
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider" style="color: var(--text-muted);">OpsGenie</th>
|
|
</tr>
|
|
</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);">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);">Setup Time</td>
|
|
<td class="px-6 py-4 text-sm font-semibold text-frost-400">< 15 min ⚡</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">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">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);">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);">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);">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);">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);">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 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>
|
|
</div>
|
|
|
|
<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);">Our Promise:</strong> On-call, AI Scribe, call routing and status pages — all included for
|
|
<span class="text-ember-400 font-semibold">$12/user/month</span>. No surprises.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRICING -->
|
|
<section id="pricing" class="py-20 lg:py-28 relative overflow-hidden" style="background: var(--bg-primary);">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] rounded-full bg-ember-500/5 blur-[150px] pointer-events-none"></div>
|
|
|
|
<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">
|
|
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);">
|
|
Choose the ideal plan. Start free, scale when needed.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
|
|
<!-- Free -->
|
|
<div class="card-surface rounded-2xl p-6 sm:p-8">
|
|
<div class="mb-6">
|
|
<div class="text-xs font-bold uppercase tracking-widest mb-2" style="color: var(--text-muted);">FREE</div>
|
|
<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);">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>
|
|
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>
|
|
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>
|
|
1 schedule + 1 escalation policy
|
|
</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>
|
|
1 status page
|
|
</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>
|
|
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>
|
|
Slack + 3 webhooks
|
|
</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>
|
|
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">Start Free</a>
|
|
</div>
|
|
|
|
<!-- Pro (Featured) -->
|
|
<div class="pricing-featured rounded-2xl p-6 sm:p-8 relative">
|
|
<div class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 gradient-ember rounded-full text-xs font-bold text-white shadow-lg">
|
|
POPULAR
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<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/month</span>
|
|
</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);">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);">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);">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);">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>
|
|
5 status pages
|
|
</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>
|
|
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>
|
|
SLA tracking + analytics
|
|
</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>
|
|
Email support (48h SLA)
|
|
</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">Start with Pro</a>
|
|
</div>
|
|
|
|
<!-- Enterprise -->
|
|
<div class="card-surface rounded-2xl p-6 sm:p-8">
|
|
<div class="mb-6">
|
|
<div class="text-xs font-bold uppercase tracking-widest mb-2" style="color: var(--text-muted);">ENTERPRISE</div>
|
|
<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);">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>
|
|
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>
|
|
SSO/SAML/SCIM (Okta, Azure AD)
|
|
</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>
|
|
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>
|
|
SLA garantido 99.99%
|
|
</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>
|
|
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>
|
|
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>
|
|
SOC 2 + compliance
|
|
</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">Contact Sales</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-center text-sm mt-8" style="color: var(--text-muted);">
|
|
Permanent free tier. No credit card. Upgrade anytime.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq" class="py-20 lg:py-28 relative" style="background: var(--bg-primary);">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
|
|
<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">
|
|
Frequently Asked <span class="gradient-text-ember">Questions</span>
|
|
</h2>
|
|
<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>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);">
|
|
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>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);">
|
|
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>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);">
|
|
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>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);">
|
|
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>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);">
|
|
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>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);">
|
|
Yes. AES-256 encryption, daily backups. LGPD/GDPR compliant. SOC 2 audit in progress.
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FINAL CTA -->
|
|
<section class="py-20 lg:py-28 relative overflow-hidden" style="background: var(--bg-primary);">
|
|
<div class="absolute inset-0 bg-texture"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-b from-ember-500/5 via-transparent to-frost-400/5 pointer-events-none"></div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] rounded-full bg-ember-500/10 blur-[150px] pointer-events-none"></div>
|
|
|
|
<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">
|
|
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);">
|
|
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>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>
|
|
</a>
|
|
</div>
|
|
|
|
<p class="text-sm mb-12" style="color: var(--text-muted);">
|
|
Setup in < 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);">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>
|
|
contato@batida.io
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="border-t py-12 lg:py-16" style="background: var(--bg-primary); border-color: var(--border-color);">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-8 mb-12">
|
|
<!-- Brand -->
|
|
<div class="col-span-2 md:col-span-1">
|
|
<div class="flex items-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 leading-relaxed mb-4" style="color: var(--text-muted);">
|
|
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);">
|
|
<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>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Links -->
|
|
<div>
|
|
<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);">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);">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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Copyright -->
|
|
<div class="border-t pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs" style="border-color: var(--border-color); color: var(--text-muted);">
|
|
<p>© 2026 Batida IO Ltda.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<script>
|
|
// ===== THEME TOGGLE =====
|
|
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);
|
|
}
|
|
|
|
// Load saved theme
|
|
(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');
|
|
}
|
|
})();
|
|
|
|
// ===== MOBILE MENU =====
|
|
function toggleMobileMenu() {
|
|
const menu = document.getElementById('mobileMenu');
|
|
const hamburger = document.querySelector('.hamburger');
|
|
const body = document.body;
|
|
|
|
menu.classList.toggle('active');
|
|
hamburger.classList.toggle('active');
|
|
body.style.overflow = menu.classList.contains('active') ? 'hidden' : '';
|
|
}
|
|
|
|
// Close menu on escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
const menu = document.getElementById('mobileMenu');
|
|
if (menu && menu.classList.contains('active')) {
|
|
toggleMobileMenu();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Close menu when clicking links inside it
|
|
document.querySelectorAll('#mobileMenu a').forEach(function(link) {
|
|
link.addEventListener('click', function() {
|
|
// Small delay to allow navigation first
|
|
setTimeout(toggleMobileMenu, 100);
|
|
});
|
|
});
|
|
|
|
// ===== SWIPE GESTURE FOR MOBILE MENU (Touch Devices) =====
|
|
let touchStartX = 0;
|
|
let touchEndX = 0;
|
|
|
|
const mobilePanel = document.querySelector('.mobile-menu-panel');
|
|
|
|
if (mobilePanel) {
|
|
mobilePanel.addEventListener('touchstart', function(e) {
|
|
touchStartX = e.changedTouches[0].screenX;
|
|
}, false);
|
|
|
|
mobilePanel.addEventListener('touchend', function(e) {
|
|
touchEndX = e.changedTouches[0].screenX;
|
|
handleSwipe();
|
|
}, false);
|
|
}
|
|
|
|
function handleSwipe() {
|
|
// Swipe right to close (positive difference means finger moved right)
|
|
if (touchEndX - touchStartX > 100) {
|
|
const menu = document.getElementById('mobileMenu');
|
|
if (menu && menu.classList.contains('active')) {
|
|
toggleMobileMenu();
|
|
}
|
|
}
|
|
}
|
|
|
|
// ===== SMOOTH SCROLL FOR ANCHOR LINKS =====
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId === '#') return;
|
|
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
e.preventDefault();
|
|
targetElement.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// ===== NAVBAR BACKGROUND ON SCROLL =====
|
|
let lastScroll = 0;
|
|
const nav = document.querySelector('nav');
|
|
|
|
window.addEventListener('scroll', function() {
|
|
const currentScroll = window.pageYOffset;
|
|
|
|
if (currentScroll > 50) {
|
|
nav.style.boxShadow = '0 4px 20px var(--shadow-color)';
|
|
} else {
|
|
nav.style.boxShadow = 'none';
|
|
}
|
|
|
|
lastScroll = currentScroll;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|