fix: service targetPort 8080

fix: remove staging deploy (landing only exists in prod)
fix: listen on port 8080 for non-root container
2026-05-24 22:55:44 -03:00 · 2026-05-24 22:52:40 -03:00 · 2026-05-24 22:34:17 -03:00 · 2026-05-24 10:13:19 -03:00 · 2026-05-24 10:12:52 -03:00 · 2026-05-24 10:12:52 -03:00
18 changed files with 834 additions and 109 deletions
@@ -0,0 +1,10 @@
+*.local
+.vscode
+.idea
+.DS_Store
+.env
+.env.*
+.git
+.gitignore
+README.md
+.github
@@ -5,8 +5,8 @@ on:
    branches: [trunk]

 jobs:
-  build-and-push-prod:
-    name: Build & Push (Prod)
+  build-and-push:
+    name: Build & Push
    runs-on: heavy
    container: git.batida.io/batida/ci-node:latest
    steps:
@@ -23,24 +23,10 @@ jobs:
          docker push git.batida.io/batida/batida-landing:${{ github.sha }}
          docker push git.batida.io/batida/batida-landing:latest

-  deploy-staging:
-    name: Deploy Staging
-    runs-on: heavy
-    needs: [build-and-push-prod]
-    container: git.batida.io/batida/ci-node:latest
-    steps:
-      - name: Deploy to staging
-        run: |
-          echo "$KUBECONFIG_CONTENT" > /tmp/kubeconfig
-          kubectl --kubeconfig /tmp/kubeconfig set image deployment/batida-landing batida-landing=git.batida.io/batida/batida-landing:${{ github.sha }} -n staging
-          kubectl --kubeconfig /tmp/kubeconfig rollout status deployment/batida-landing -n staging --timeout=120s
-        env:
-          KUBECONFIG_CONTENT: ${{ secrets.KUBECONFIG }}
-
  deploy-prod:
    name: Deploy Prod
    runs-on: heavy
-    needs: [deploy-staging]
+    needs: [build-and-push]
    container: git.batida.io/batida/ci-node:latest
    steps:
      - name: Deploy to prod
@@ -0,0 +1,11 @@
+.DS_Store
+node_modules/
+output.css
+package.json
+package-lock.json
+
+# Environment
+.env
+.env.*
+!.env.*.example
+rust_out
@@ -0,0 +1,50 @@
+# batida-landing — Intent Node (Root)
+
+## Purpose & Scope
+Marketing/landing page for Batida. Static HTML served via Nginx.
+Separate git repository — self-contained.
+
+**Does:** Serve static HTML landing pages (EN + PT-BR), SEO, Nginx hosting.
+**Does NOT:** Handle user data, run application logic, serve the app (→ batida-web).
+
+## Entry Points
+No build step required. Just serve static files via Nginx.
+
+## Dependencies
+| Depends On | Why |
+|------------|-----|
+| batida-infra | K8s deployment manifests, Dockerfile → Nginx container |
+
+## Structure
+```
+index.html           → English landing page
+index.pt-br.html     → Portuguese landing page
+vs.html              → Comparison page (English)
+vs.pt-br.html        → Comparison page (Portuguese)
+Dockerfile           → Nginx static serving
+nginx.conf           → Nginx config (compression, caching)
+robots.txt           → SEO robots
+sitemap.xml          → SEO sitemap
+k8s/                 → Kubernetes deployment manifests
+```
+
+## Key Patterns
+- Fully static — no build step, no JavaScript framework
+- Two languages: English and Portuguese (separate HTML files)
+- Nginx handles gzip compression and static caching
+- SEO configured via robots.txt and sitemap.xml
+
+## Traps & Gotchas
+- Both language versions must be updated in sync — forgetting one leaves stale content
+- No hot reload or dev server — edit HTML, refresh browser
+
+## Anti-Patterns
+- Never add server-side logic or build tools — pure static HTML
+- Never commit secrets or environment-specific values
+- Never add JavaScript frameworks — keep it static
+
+## Boundaries
+
+### Always
+- Keep both language versions in sync when updating content
+- Test HTML renders correctly in browser before committing
@@ -0,0 +1 @@
+AGENTS.md
@@ -1,16 +1,50 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /build
+
+COPY input.css tailwind.config.js ./
+COPY *.html ./
+
+RUN --mount=type=cache,target=/root/.npm \
+    npx tailwindcss@3 -i input.css -o output.css --minify
+
 FROM nginx:alpine

 ARG APP_URL=https://app.batida.io

+RUN addgroup -g 1000 -S nginx-user && \
+    adduser -u 1000 -S nginx-user -G nginx-user
+
+COPY --from=builder /build/output.css /usr/share/nginx/html/output.css
+COPY favicon.png /usr/share/nginx/html/favicon.png
+COPY og-image.png /usr/share/nginx/html/og-image.png
+COPY robots.txt /usr/share/nginx/html/robots.txt
+COPY sitemap.xml /usr/share/nginx/html/sitemap.xml
 COPY index.html /tmp/index.html
 COPY index.pt-br.html /tmp/index.pt-br.html
+COPY vs.html /tmp/vs.html
+COPY vs.pt-br.html /tmp/vs.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 && \
+    sed -i "s|{{APP_URL}}|${APP_URL}|g" /tmp/vs.html && \
+    sed -i "s|{{APP_URL}}|${APP_URL}|g" /tmp/vs.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
+    mv /tmp/index.pt-br.html /usr/share/nginx/html/pt-br/index.html && \
+    mv /tmp/vs.html /usr/share/nginx/html/vs.html && \
+    mv /tmp/vs.pt-br.html /usr/share/nginx/html/pt-br/vs.html && \
+    chown -R nginx-user:nginx-user /usr/share/nginx/html && \
+    chown -R nginx-user:nginx-user /var/cache/nginx && \
+    chown -R nginx-user:nginx-user /var/log/nginx && \
+    chown -R nginx-user:nginx-user /etc/nginx/conf.d && \
+    touch /run/nginx.pid && \
+    chown -R nginx-user:nginx-user /run/nginx.pid

 COPY nginx.conf /etc/nginx/conf.d/default.conf

-EXPOSE 80
+USER nginx-user
+
+EXPOSE 8080
+
+CMD ["nginx", "-g", "daemon off;"]
@@ -0,0 +1,67 @@
+"""Generate OG image and favicon for Batida landing page."""
+from PIL import Image, ImageDraw, ImageFont
+
+# OG Image (1200x630)
+W, H = 1200, 630
+img = Image.new("RGB", (W, H), "#0C0C0F")
+draw = ImageDraw.Draw(img)
+
+# Orange accent bar at top
+draw.rectangle([0, 0, W, 6], fill="#F97316")
+
+# Logo square (orange B)
+logo_size = 120
+logo_x, logo_y = 80, 180
+draw.rounded_rectangle([logo_x, logo_y, logo_x + logo_size, logo_y + logo_size], radius=24, fill="#F97316")
+try:
+    font_bold = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", 72)
+    font_title = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", 64)
+    font_sub = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", 28)
+    font_tag = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", 22)
+except Exception:
+    font_bold = ImageFont.load_default()
+    font_title = ImageFont.load_default()
+    font_sub = ImageFont.load_default()
+    font_tag = ImageFont.load_default()
+
+# B letter in logo
+bbox = draw.textbbox((0, 0), "B", font=font_bold)
+bw, bh = bbox[2] - bbox[0], bbox[3] - bbox[1]
+draw.text((logo_x + (logo_size - bw) / 2, logo_y + (logo_size - bh) / 2 - 8), "B", fill="white", font=font_bold)
+
+# Title
+draw.text((240, 185), "Batida", fill="#FAFAFA", font=font_title)
+
+# Tagline
+draw.text((240, 270), "Manage Incidents. Keep Your Cool.", fill="#6B6B80", font=font_sub)
+
+# Bottom tagline
+draw.text((80, 460), "Intelligent incident management for DevOps teams.", fill="#4A4A5A", font=font_tag)
+draw.text((80, 495), "pagerduty alternative  •  open core  •  self-hosted or cloud", fill="#3A3A4A", font=font_tag)
+
+# CTA button
+btn_x, btn_y, btn_w, btn_h = 80, 550, 200, 44
+draw.rounded_rectangle([btn_x, btn_y, btn_x + btn_w, btn_y + btn_h], radius=8, fill="#F97316")
+bbox = draw.textbbox((0, 0), "Get Started", font=font_tag)
+tw = bbox[2] - bbox[0]
+draw.text((btn_x + (btn_w - tw) / 2, btn_y + 10), "Get Started", fill="white", font=font_tag)
+
+# URL
+draw.text((960, 580), "batida.io", fill="#3A3A4A", font=font_tag)
+
+img.save("/Users/kakarotto/codes/personal/batida/batida-landing/og-image.png", "PNG")
+print("OG image created: og-image.png")
+
+# Favicon PNG (32x32)
+fav = Image.new("RGBA", (32, 32), (0, 0, 0, 0))
+fav_draw = ImageDraw.Draw(fav)
+fav_draw.rounded_rectangle([0, 0, 32, 32], radius=8, fill="#F97316")
+try:
+    fav_font = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", 20)
+except Exception:
+    fav_font = ImageFont.load_default()
+bbox = fav_draw.textbbox((0, 0), "B", font=fav_font)
+bw, bh = bbox[2] - bbox[0], bbox[3] - bbox[1]
+fav_draw.text(((32 - bw) / 2, (32 - bh) / 2 - 2), "B", fill="white", font=fav_font)
+fav.save("/Users/kakarotto/codes/personal/batida/batida-landing/favicon.png", "PNG")
+print("Favicon created: favicon.png")
@@ -8,6 +8,7 @@
    <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.">
    <link rel="canonical" href="https://batida.io/">
+    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
@@ -15,11 +16,15 @@
    <meta property="og:title" content="Batida — Manage Incidents. Keep Your Cool.">
    <meta property="og:description" content="Intelligent alternative to PagerDuty. Incident management platform for DevOps teams. Start free.">
    <meta property="og:site_name" content="Batida">
+    <meta property="og:image" content="https://batida.io/og-image.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Batida — Manage Incidents. Keep Your Cool.">
    <meta name="twitter:description" content="Intelligent alternative to PagerDuty. Incident management platform for DevOps teams.">
+    <meta name="twitter:image" content="https://batida.io/og-image.png">

    <!-- Sitemap -->
    <link rel="sitemap" type="application/xml" href="/sitemap.xml">
@@ -29,47 +34,7 @@
    <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>
+    <link rel="stylesheet" href="/output.css">
    
    <style>
        /* ===== CSS VARIABLES PARA DARK/LIGHT ===== */
@@ -529,6 +494,9 @@
            font-size: clamp(1.5rem, 4vw, 3rem);
        }
    </style>
+    <!-- Analytics: Plausible (privacy-friendly, GDPR compliant) -->
+    <script defer data-domain="batida.io" src="https://plausible.io/js/script.js"></script>
+
 </head>
 <body class="antialiased">

@@ -551,6 +519,7 @@
                    <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>
+                    <a href="/vs" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Compare</a>
                </div>
                
                <!-- Right Side Actions -->
@@ -1237,7 +1206,7 @@
            <!-- 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">14+</div>
+                    <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">3+</div>
                    <div class="text-sm" style="color: var(--text-secondary);">Integrations available</div>
                </div>
                <div class="text-center card-surface rounded-2xl p-6">
@@ -1246,7 +1215,7 @@
                </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">99.9%</div>
-                    <div class="text-sm" style="color: var(--text-secondary);">Uptime Guaranteed</div>
+                    <div class="text-sm" style="color: var(--text-secondary);">Uptime SLA</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>
@@ -1515,6 +1484,33 @@
        </div>
    </section>

+    <!-- TRUST METRICS -->
+    <section class="py-16 lg:py-20" style="background: var(--bg-canvas);">
+        <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-2xl sm:text-3xl font-bold mb-10" style="color: var(--text-primary);">
+                Built for reliability
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-amber mb-1">&lt;15min</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Setup Time</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-amber mb-1">99.9%</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Uptime SLA</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-frost mb-1">&lt;2s</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">P95 API Latency</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-ember mb-1">3+</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Integrations</div>
+                </div>
+            </div>
+        </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>
@@ -1599,6 +1595,18 @@
                        Yes. AES-256 encryption, daily backups. LGPD/GDPR compliant. SOC 2 audit in progress.
                    </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 does Batida compare to PagerDuty?</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);">
+                        See our <a href="/vs" style="color: var(--color-primary);">detailed comparison</a> with PagerDuty and Grafana OnCall.
+                    </div>
+                </details>
            </div>
        </div>
    </section>
@@ -8,6 +8,7 @@
    <title>Batida — Gerencie Incidentes. Mantenha a Calma.</title>
    <meta name="description" content="Plataforma moderna de incident management. Alternativa inteligente ao PagerDuty. Setup em minutos. Comece grátis.">
    <link rel="canonical" href="https://batida.io/pt-br">
+    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
@@ -15,11 +16,15 @@
    <meta property="og:title" content="Batida — Gerencie Incidentes. Mantenha a Calma.">
    <meta property="og:description" content="Plataforma moderna de incident management. Alternativa inteligente ao PagerDuty. Setup em minutos. Comece grátis.">
    <meta property="og:site_name" content="Batida">
+    <meta property="og:image" content="https://batida.io/og-image.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Batida — Gerencie Incidentes. Mantenha a Calma.">
    <meta name="twitter:description" content="Plataforma moderna de incident management. Alternativa inteligente ao PagerDuty.">
+    <meta name="twitter:image" content="https://batida.io/og-image.png">

    <!-- Sitemap -->
    <link rel="sitemap" type="application/xml" href="/sitemap.xml">
@@ -29,47 +34,7 @@
    <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>
+    <link rel="stylesheet" href="/output.css">
    
    <style>
        /* ===== CSS VARIABLES PARA DARK/LIGHT ===== */
@@ -529,6 +494,9 @@
            font-size: clamp(1.5rem, 4vw, 3rem);
        }
    </style>
+    <!-- Analytics: Plausible (privacy-friendly, GDPR compliant) -->
+    <script defer data-domain="batida.io" src="https://plausible.io/js/script.js"></script>
+
 </head>
 <body class="antialiased">

@@ -551,6 +519,7 @@
                    <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="#faq" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">FAQ</a>
+                    <a href="/vs.pt-br" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Comparar</a>
                </div>
                
                <!-- Right Side Actions -->
@@ -1237,7 +1206,7 @@
            <!-- 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">14+</div>
+                    <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">3+</div>
                    <div class="text-sm" style="color: var(--text-secondary);">Integrações disponíveis</div>
                </div>
                <div class="text-center card-surface rounded-2xl p-6">
@@ -1246,7 +1215,7 @@
                </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">99.9%</div>
-                    <div class="text-sm" style="color: var(--text-secondary);">Uptime Garantido</div>
+                    <div class="text-sm" style="color: var(--text-secondary);">SLA de Uptime</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>
@@ -1515,6 +1484,33 @@
        </div>
    </section>

+    <!-- TRUST METRICS -->
+    <section class="py-16 lg:py-20" style="background: var(--bg-canvas);">
+        <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-2xl sm:text-3xl font-bold mb-10" style="color: var(--text-primary);">
+                Construído para confiabilidade
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-amber mb-1">&lt;15min</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Tempo de Setup</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-amber mb-1">99.9%</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">SLA de Uptime</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-frost mb-1">&lt;2s</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Latência P95 da API</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-ember mb-1">3+</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Integrações</div>
+                </div>
+            </div>
+        </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>
@@ -1599,6 +1595,18 @@
                        Sim. Criptografia AES-256, backups diários. LGPD/GDPR compliant. Auditoria SOC 2 em andamento.
                    </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>Como o Batida se compara ao PagerDuty?</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);">
+                        Veja nossa <a href="/vs.pt-br" style="color: var(--color-primary);">comparação detalhada</a> com PagerDuty e Grafana OnCall.
+                    </div>
+                </details>
            </div>
        </div>
    </section>
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -24,11 +24,11 @@ spec:
        - name: batida-landing
          image: git.batida.io/batida/batida-landing:latest
          ports:
-            - containerPort: 80
+            - containerPort: 8080
          livenessProbe:
            httpGet:
              path: /
-              port: 80
+              port: 8080
            initialDelaySeconds: 5
            periodSeconds: 30
          resources:
@@ -49,4 +49,4 @@ spec:
    app: batida-landing
  ports:
    - port: 80
-      targetPort: 80
+      targetPort: 8080
@@ -1,5 +1,5 @@
 server {
-    listen 80;
+    listen 8080;
    server_name _;
    root /usr/share/nginx/html;

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#F97316"/>
+  <text x="16" y="23" font-family="Arial,sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">B</text>
+</svg>
@@ -0,0 +1,39 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./*.html'],
+  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',
+        },
+      },
+    },
+  },
+  plugins: [],
+};
@@ -0,0 +1,252 @@
+<!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/vs">
+    <link rel="alternate" hreflang="pt-BR" href="https://batida.io/vs/pt-br">
+    <title>Batida vs PagerDuty vs Grafana OnCall — Feature Comparison</title>
+    <meta name="description" content="Compare Batida with PagerDuty and Grafana OnCall. See pricing, features, LGPD compliance, and why Brazilian teams choose Batida.">
+    <link rel="canonical" href="https://batida.io/vs">
+    <link rel="icon" type="image/png" href="/favicon.png">
+
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://batida.io/vs">
+    <meta property="og:title" content="Batida vs PagerDuty vs Grafana OnCall — Feature Comparison">
+    <meta property="og:description" content="Compare incident management platforms. See why Batida is the best choice for Brazilian DevOps teams.">
+    <meta property="og:site_name" content="Batida">
+    <meta property="og:image" content="https://batida.io/og-image.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Batida vs PagerDuty vs Grafana OnCall">
+    <meta name="twitter:description" content="Compare incident management platforms for Brazilian teams.">
+    <meta name="twitter:image" content="https://batida.io/og-image.png">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="/output.css">
+
+    <style>
+        :root, [data-theme="dark"] {
+            --bg-primary: #0C0C0F; --bg-secondary: #141419; --bg-raised: #1A1A22;
+            --bg-overlay: rgba(26, 26, 34, 0.8); --border-color: #2A2A35;
+            --border-hover: rgba(249, 115, 22, 0.3); --text-primary: #FAFAFA;
+            --text-secondary: #6B6B80; --text-muted: #4A4A5A;
+            --shadow-color: rgba(0, 0, 0, 0.4); --glow-ember: rgba(249, 115, 22, 0.15);
+            --card-bg: linear-gradient(145deg, rgba(20, 20, 25, 0.8), rgba(12, 12, 15, 0.9));
+        }
+        [data-theme="light"] {
+            --bg-primary: #FAFAF9; --bg-secondary: #F5F5F0; --bg-raised: #FFFFFF;
+            --bg-overlay: rgba(255, 255, 255, 0.9); --border-color: #E5E5E0;
+            --border-hover: rgba(249, 115, 22, 0.4); --text-primary: #1A1A1A;
+            --text-secondary: #52525B; --text-muted: #71717A;
+            --shadow-color: rgba(0, 0, 0, 0.08); --glow-ember: rgba(249, 115, 22, 0.08);
+            --card-bg: linear-gradient(145deg, #FFFFFF, #F8F8F5);
+        }
+        body { background-color: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', system-ui, sans-serif; }
+        html { scroll-behavior: smooth; }
+        a, button { font-family: 'Inter', system-ui, sans-serif; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease; }
+        .gradient-ember { background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FDBA74 100%); }
+        .gradient-text-ember { background: linear-gradient(135deg, #F97316 0%, #FDBA74 50%, #FBBF24 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .btn-ember { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); color: white; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+        .btn-ember:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(249, 115, 22, 0.35); }
+        .card-surface { background: var(--card-bg); border: 1px solid var(--border-color); backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+        .theme-toggle { width: 56px; height: 28px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--border-color); position: relative; cursor: pointer; transition: all 0.3s ease; }
+        .theme-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #F97316, #FB923C); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
+        [data-theme="light"] .theme-toggle::after { transform: translateX(28px); background: linear-gradient(135deg, #06B6D4, #22D3EE); }
+        .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; transition: opacity 0.3s ease; }
+        .theme-toggle .icon-sun { left: 6px; opacity: 1; }
+        .theme-toggle .icon-moon { right: 6px; opacity: 0.3; }
+        [data-theme="light"] .theme-toggle .icon-sun { opacity: 0.3; }
+        [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; }
+        ::selection { background: rgba(249, 115, 22, 0.25); color: inherit; }
+
+        .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
+        .compare-table th, .compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
+        .compare-table thead th { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
+        .compare-table tbody tr:hover { background: var(--bg-raised); }
+        .compare-table .feature-col { color: var(--text-primary); font-weight: 500; white-space: nowrap; }
+        .compare-table .check { color: #22C55E; }
+        .compare-table .cross { color: #EF4444; }
+        .compare-table .partial { color: #F59E0B; }
+        .compare-table .batida-col { color: #F97316; font-weight: 600; }
+    </style>
+    <!-- Analytics: Plausible (privacy-friendly, GDPR compliant) -->
+    <script defer data-domain="batida.io" src="https://plausible.io/js/script.js"></script>
+
+</head>
+<body class="antialiased">
+
+    <!-- NAVIGATION -->
+    <nav class="fixed w-full z-50 top-0 left-0 right-0 backdrop-blur-xl border-b" style="background: var(--bg-overlay); border-color: var(--border-color);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <a href="/" class="flex items-center gap-2 group">
+                    <div class="relative w-9 h-9 rounded-lg gradient-ember flex items-center justify-center font-bold text-lg text-white shadow-lg group-hover:scale-105 transition-transform">B</div>
+                    <span class="text-xl font-bold tracking-tight">Batida</span>
+                </a>
+                <div class="hidden md:flex items-center gap-8">
+                    <a href="/#features" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Features</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>
+                    <a href="/vs" class="text-sm text-ember-500 font-medium">Compare</a>
+                </div>
+                <div class="flex items-center gap-3">
+                    <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="/vs.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}}/signup" class="hidden sm:inline-flex px-4 py-2 rounded-lg text-sm font-semibold text-white btn-ember">Start Free</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="pt-24 pb-20">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+
+            <!-- HEADER -->
+            <div class="text-center mb-12">
+                <h1 class="text-3xl sm:text-4xl font-bold mb-4">
+                    Batida vs <span class="gradient-text-ember">PagerDuty</span> vs Grafana OnCall
+                </h1>
+                <p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
+                    A feature-by-feature comparison for teams evaluating incident management tools — especially those in Brazil.
+                </p>
+            </div>
+
+            <!-- COMPARISON TABLE -->
+            <div class="card-surface rounded-2xl overflow-hidden mb-12">
+                <div class="overflow-x-auto">
+                    <table class="compare-table">
+                        <thead>
+                            <tr>
+                                <th class="feature-col">Feature</th>
+                                <th class="batida-col">Batida</th>
+                                <th>PagerDuty</th>
+                                <th>Grafana OnCall</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="feature-col">Price (Pro)</td>
+                                <td class="batida-col">R$59/seat/mo</td>
+                                <td>~R$300+/seat/mo</td>
+                                <td>Free (self-hosted)</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Language</td>
+                                <td class="batida-col">PT-BR native</td>
+                                <td>EN only</td>
+                                <td>EN only</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">LGPD</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Native</td>
+                                <td><span class="partial">&#9679;</span> Extra add-on</td>
+                                <td><span class="cross">&#10007;</span> Manual</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">On-call Scheduling</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Add-on</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Escalation Policies</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">AI Postmortem</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="cross">&#10007;</span> Not available</td>
+                                <td><span class="cross">&#10007;</span> Not available</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Status Pages</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="partial">&#9679;</span> Extra (StatusPage.io)</td>
+                                <td><span class="partial">&#9679;</span> Plugin</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Incident Comments</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Audit Logs</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Enterprise only</td>
+                                <td><span class="partial">&#9679;</span> Limited</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Open Source</td>
+                                <td class="batida-col"><span class="partial">&#9679;</span> Core modules</td>
+                                <td><span class="cross">&#10007;</span> No</td>
+                                <td><span class="check">&#10003;</span> Yes (AGPL)</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">PIX / Boleto</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Yes</td>
+                                <td><span class="cross">&#10007;</span> No</td>
+                                <td><span class="cross">&#10007;</span> No</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Brazilian Support</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Native</td>
+                                <td><span class="cross">&#10007;</span> No</td>
+                                <td><span class="cross">&#10007;</span> Community</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- BOTTOM CTA -->
+            <div class="text-center">
+                <a href="{{APP_URL}}/signup" class="inline-flex px-8 py-3 rounded-xl text-lg font-semibold text-white btn-ember">
+                    Start Free — No Credit Card
+                </a>
+                <p class="mt-4 text-sm" style="color: var(--text-muted);">
+                    Free plan includes 5 seats, 50 incidents/month. Upgrade when you're ready.
+                </p>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- FOOTER -->
+    <footer class="border-t py-12" style="border-color: var(--border-color); background: var(--bg-secondary);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="flex items-center justify-center gap-2 mb-4">
+                <div class="w-8 h-8 rounded-lg gradient-ember flex items-center justify-center font-bold text-white text-sm">B</div>
+                <span class="text-lg font-bold" style="color: var(--text-primary);">Batida</span>
+            </div>
+            <p class="text-xs" style="color: var(--text-muted);">&copy; 2026 Batida IO Ltda.</p>
+        </div>
+    </footer>
+
+    <script>
+        function toggleTheme() {
+            const html = document.documentElement;
+            const currentTheme = html.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            html.setAttribute('data-theme', newTheme);
+            localStorage.setItem('batida-theme', newTheme);
+        }
+        (function() {
+            const saved = localStorage.getItem('batida-theme');
+            if (saved) { document.documentElement.setAttribute('data-theme', saved); }
+            else if (window.matchMedia('(prefers-color-scheme: light)').matches) { document.documentElement.setAttribute('data-theme', 'light'); }
+        })();
+    </script>
+</body>
+</html>
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="pt-BR" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="alternate" hreflang="en" href="https://batida.io/vs">
+    <link rel="alternate" hreflang="pt-BR" href="https://batida.io/vs/pt-br">
+    <title>Batida vs PagerDuty vs Grafana OnCall — Comparação de Recursos</title>
+    <meta name="description" content="Compare o Batida com PagerDuty e Grafana OnCall. Veja preços, recursos, conformidade LGPD e por que equipes brasileiras escolhem o Batida.">
+    <link rel="canonical" href="https://batida.io/vs/pt-br">
+    <link rel="icon" type="image/png" href="/favicon.png">
+
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://batida.io/vs/pt-br">
+    <meta property="og:title" content="Batida vs PagerDuty vs Grafana OnCall — Comparação">
+    <meta property="og:description" content="Compare plataformas de gerenciamento de incidentes. Veja por que o Batida é a melhor escolha para equipes DevOps brasileiras.">
+    <meta property="og:site_name" content="Batida">
+    <meta property="og:image" content="https://batida.io/og-image.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Batida vs PagerDuty vs Grafana OnCall">
+    <meta name="twitter:description" content="Compare plataformas de gerenciamento de incidentes para equipes brasileiras.">
+    <meta name="twitter:image" content="https://batida.io/og-image.png">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="/output.css">
+
+    <style>
+        :root, [data-theme="dark"] {
+            --bg-primary: #0C0C0F; --bg-secondary: #141419; --bg-raised: #1A1A22;
+            --bg-overlay: rgba(26, 26, 34, 0.8); --border-color: #2A2A35;
+            --border-hover: rgba(249, 115, 22, 0.3); --text-primary: #FAFAFA;
+            --text-secondary: #6B6B80; --text-muted: #4A4A5A;
+            --shadow-color: rgba(0, 0, 0, 0.4); --glow-ember: rgba(249, 115, 22, 0.15);
+            --card-bg: linear-gradient(145deg, rgba(20, 20, 25, 0.8), rgba(12, 12, 15, 0.9));
+        }
+        [data-theme="light"] {
+            --bg-primary: #FAFAF9; --bg-secondary: #F5F5F0; --bg-raised: #FFFFFF;
+            --bg-overlay: rgba(255, 255, 255, 0.9); --border-color: #E5E5E0;
+            --border-hover: rgba(249, 115, 22, 0.4); --text-primary: #1A1A1A;
+            --text-secondary: #52525B; --text-muted: #71717A;
+            --shadow-color: rgba(0, 0, 0, 0.08); --glow-ember: rgba(249, 115, 22, 0.08);
+            --card-bg: linear-gradient(145deg, #FFFFFF, #F8F8F5);
+        }
+        body { background-color: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', system-ui, sans-serif; }
+        html { scroll-behavior: smooth; }
+        a, button { font-family: 'Inter', system-ui, sans-serif; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease; }
+        .gradient-ember { background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FDBA74 100%); }
+        .gradient-text-ember { background: linear-gradient(135deg, #F97316 0%, #FDBA74 50%, #FBBF24 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .btn-ember { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); color: white; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+        .btn-ember:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(249, 115, 22, 0.35); }
+        .card-surface { background: var(--card-bg); border: 1px solid var(--border-color); backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+        .theme-toggle { width: 56px; height: 28px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--border-color); position: relative; cursor: pointer; transition: all 0.3s ease; }
+        .theme-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #F97316, #FB923C); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
+        [data-theme="light"] .theme-toggle::after { transform: translateX(28px); background: linear-gradient(135deg, #06B6D4, #22D3EE); }
+        .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; transition: opacity 0.3s ease; }
+        .theme-toggle .icon-sun { left: 6px; opacity: 1; }
+        .theme-toggle .icon-moon { right: 6px; opacity: 0.3; }
+        [data-theme="light"] .theme-toggle .icon-sun { opacity: 0.3; }
+        [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; }
+        ::selection { background: rgba(249, 115, 22, 0.25); color: inherit; }
+
+        .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
+        .compare-table th, .compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
+        .compare-table thead th { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
+        .compare-table tbody tr:hover { background: var(--bg-raised); }
+        .compare-table .feature-col { color: var(--text-primary); font-weight: 500; white-space: nowrap; }
+        .compare-table .check { color: #22C55E; }
+        .compare-table .cross { color: #EF4444; }
+        .compare-table .partial { color: #F59E0B; }
+        .compare-table .batida-col { color: #F97316; font-weight: 600; }
+    </style>
+    <!-- Analytics: Plausible (privacy-friendly, GDPR compliant) -->
+    <script defer data-domain="batida.io" src="https://plausible.io/js/script.js"></script>
+
+</head>
+<body class="antialiased">
+
+    <!-- NAVIGATION -->
+    <nav class="fixed w-full z-50 top-0 left-0 right-0 backdrop-blur-xl border-b" style="background: var(--bg-overlay); border-color: var(--border-color);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <a href="/pt-br" class="flex items-center gap-2 group">
+                    <div class="relative w-9 h-9 rounded-lg gradient-ember flex items-center justify-center font-bold text-lg text-white shadow-lg group-hover:scale-105 transition-transform">B</div>
+                    <span class="text-xl font-bold tracking-tight">Batida</span>
+                </a>
+                <div class="hidden md:flex items-center gap-8">
+                    <a href="/pt-br#features" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Recursos</a>
+                    <a href="/pt-br#pricing" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Preços</a>
+                    <a href="/pt-br#faq" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">FAQ</a>
+                    <a href="/vs.pt-br" class="text-sm text-ember-500 font-medium">Comparar</a>
+                </div>
+                <div class="flex items-center gap-3">
+                    <button class="theme-toggle" onclick="toggleTheme()" aria-label="Alternar tema">
+                        <svg class="icon-sun" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/></svg>
+                        <svg class="icon-moon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
+                    </button>
+                    <a href="/vs" class="hidden sm:inline-flex items-center gap-1.5 text-xs font-medium hover:text-ember-500 transition-colors" style="color: var(--text-secondary);"><span>🌐</span> EN</a>
+                    <a href="{{APP_URL}}/signup" class="hidden sm:inline-flex px-4 py-2 rounded-lg text-sm font-semibold text-white btn-ember">Comece Grátis</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="pt-24 pb-20">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+
+            <!-- HEADER -->
+            <div class="text-center mb-12">
+                <h1 class="text-3xl sm:text-4xl font-bold mb-4">
+                    Batida vs <span class="gradient-text-ember">PagerDuty</span> vs Grafana OnCall
+                </h1>
+                <p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
+                    Comparação detalhada de recursos para equipes avaliando ferramentas de gerenciamento de incidentes — especialmente no Brasil.
+                </p>
+            </div>
+
+            <!-- COMPARISON TABLE -->
+            <div class="card-surface rounded-2xl overflow-hidden mb-12">
+                <div class="overflow-x-auto">
+                    <table class="compare-table">
+                        <thead>
+                            <tr>
+                                <th class="feature-col">Recurso</th>
+                                <th class="batida-col">Batida</th>
+                                <th>PagerDuty</th>
+                                <th>Grafana OnCall</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="feature-col">Preço (Pro)</td>
+                                <td class="batida-col">R$59/seat/mês</td>
+                                <td>~R$300+/seat/mês</td>
+                                <td>Grátis (self-hosted)</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Idioma</td>
+                                <td class="batida-col">PT-BR nativo</td>
+                                <td>Apenas EN</td>
+                                <td>Apenas EN</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">LGPD</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Nativo</td>
+                                <td><span class="partial">&#9679;</span> Add-on extra</td>
+                                <td><span class="cross">&#10007;</span> Manual</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Escala de Plantão</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Add-on</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Políticas de Escalação</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Postmortem com IA</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="cross">&#10007;</span> Não disponível</td>
+                                <td><span class="cross">&#10007;</span> Não disponível</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Status Pages</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="partial">&#9679;</span> Extra (StatusPage.io)</td>
+                                <td><span class="partial">&#9679;</span> Plugin</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Comentários em Incidentes</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Logs de Auditoria</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Apenas Enterprise</td>
+                                <td><span class="partial">&#9679;</span> Limitado</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Open Source</td>
+                                <td class="batida-col"><span class="partial">&#9679;</span> Módulos core</td>
+                                <td><span class="cross">&#10007;</span> Não</td>
+                                <td><span class="check">&#10003;</span> Sim (AGPL)</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">PIX / Boleto</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Sim</td>
+                                <td><span class="cross">&#10007;</span> Não</td>
+                                <td><span class="cross">&#10007;</span> Não</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Suporte Brasileiro</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Nativo</td>
+                                <td><span class="cross">&#10007;</span> Não</td>
+                                <td><span class="cross">&#10007;</span> Comunidade</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- BOTTOM CTA -->
+            <div class="text-center">
+                <a href="{{APP_URL}}/signup" class="inline-flex px-8 py-3 rounded-xl text-lg font-semibold text-white btn-ember">
+                    Comece Grátis — Sem Cartão de Crédito
+                </a>
+                <p class="mt-4 text-sm" style="color: var(--text-muted);">
+                    Plano gratuito inclui 5 seats, 50 incidentes/mês. Faça upgrade quando quiser.
+                </p>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- FOOTER -->
+    <footer class="border-t py-12" style="border-color: var(--border-color); background: var(--bg-secondary);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="flex items-center justify-center gap-2 mb-4">
+                <div class="w-8 h-8 rounded-lg gradient-ember flex items-center justify-center font-bold text-white text-sm">B</div>
+                <span class="text-lg font-bold" style="color: var(--text-primary);">Batida</span>
+            </div>
+            <p class="text-xs" style="color: var(--text-muted);">&copy; 2026 Batida IO Ltda.</p>
+        </div>
+    </footer>
+
+    <script>
+        function toggleTheme() {
+            const html = document.documentElement;
+            const currentTheme = html.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            html.setAttribute('data-theme', newTheme);
+            localStorage.setItem('batida-theme', newTheme);
+        }
+        (function() {
+            const saved = localStorage.getItem('batida-theme');
+            if (saved) { document.documentElement.setAttribute('data-theme', saved); }
+            else if (window.matchMedia('(prefers-color-scheme: light)').matches) { document.documentElement.setAttribute('data-theme', 'light'); }
+        })();
+    </script>
+</body>
+</html>
Author	SHA1	Message	Date
mario	3cbc7dd529	fix: service targetPort 8080 Deploy / Build & Push (push) Successful in 9s Details Deploy / Deploy Prod (push) Successful in 4s Details	2026-05-24 22:55:44 -03:00
mario	2eeff8adc5	fix: remove staging deploy (landing only exists in prod) Deploy / Build & Push (push) Successful in 9s Details Deploy / Deploy Prod (push) Successful in 5s Details	2026-05-24 22:52:40 -03:00
mario	f3c1d76ae5	fix: listen on port 8080 for non-root container Deploy / Build & Push (Prod) (push) Successful in 11s Details Deploy / Deploy Staging (push) Failing after 2s Details Deploy / Deploy Prod (push) Has been skipped Details	2026-05-24 22:34:17 -03:00
mario	c4b8f19d6a	chore: ignore rust_out binary Deploy / Build & Push (Prod) (push) Successful in 6s Details Deploy / Deploy Staging (push) Failing after 2m3s Details Deploy / Deploy Prod (push) Has been skipped Details	2026-05-24 10:13:19 -03:00
mario	555773e2e9	chore: add public assets (OG images, favicon)	2026-05-24 10:12:52 -03:00
mario	f38d7885f2	chore: add OG image generation script	2026-05-24 10:12:52 -03:00
mario	dbddcc40a2	feat: add favicon, OG images, social cards, and analytics Deploy / Build & Push (Prod) (push) Successful in 18s Details Deploy / Deploy Staging (push) Successful in 5s Details Deploy / Deploy Prod (push) Successful in 6s Details - Add favicon.png (orange B logo) - Add og-image.png (1200x630 social card) - Add og:image and twitter:image meta tags to all pages - Add Plausible analytics script (privacy-friendly) - Update Dockerfile to copy static assets Co-Authored-By: Paperclip <noreply@paperclip.ing>	2026-05-23 13:31:53 -03:00
mario	22df131b57	chore: add .env patterns to .gitignore	2026-05-23 10:57:53 -03:00
mario	de85066688	feat: refactor Dockerfile to multi-stage build with security improvements - Refactored from single-stage to proper multi-stage build - Added cache mount for npm (npx tailwindcss) - Added non-root nginx user (nginx-user:1000) - Added .dockerignore to exclude dev files - Configured proper permissions for nginx directories and pid file - Major improvements: smaller image, faster builds, better security Co-Authored-By: Paperclip <noreply@paperclip.ing>	2026-05-22 21:54:37 -03:00
mario	1ebfc0e310	docs: update AGENTS.md to Intent Layer spec Add Purpose & Scope, Entry Points, Dependencies, Traps & Gotchas, Anti-Patterns sections.	2026-05-08 21:20:35 -03:00
mario	f00bd1055d	feat: replace Tailwind CDN with static CSS build (item 20) Deploy / Build & Push (Prod) (push) Successful in 59s Details Deploy / Deploy Staging (push) Successful in 51s Details Deploy / Deploy Prod (push) Successful in 51s Details Multi-stage Dockerfile builds ~22KB minified CSS from Tailwind instead of loading ~300KB JS from CDN on every request.	2026-05-04 23:09:07 -03:00
mario	7f51e23029	docs: add Intent Layer AGENTS.md for landing page	2026-04-24 23:01:05 -03:00
mario	1f97c3b0ac	feat(landing): add vs/pagerduty comparison page with FAQ and nav links Deploy / Build & Push (Prod) (push) Successful in 6s Details Deploy / Deploy Staging (push) Successful in 3s Details Deploy / Deploy Prod (push) Successful in 3s Details - Create /vs comparison page (EN) with Batida vs PagerDuty vs Grafana OnCall - Create /vs.pt-br comparison page (PT-BR) - Add FAQ item linking to comparison in both versions - Add "Compare" nav link in desktop navigation	2026-04-21 16:29:53 -03:00
mario	382b8d5d25	feat(landing): add trust metrics section and fix integrations count - Add "Built for reliability" section after pricing with P95 latency metric - Fix integrations count from 14+ to 3+ (honest count after false claims removal)	2026-04-21 16:26:54 -03:00