feat: replace Tailwind CDN with static CSS build (item 20)

Multi-stage Dockerfile builds ~22KB minified CSS from Tailwind
instead of loading ~300KB JS from CDN on every request.

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+output.css
+package.json
+package-lock.json

AGENTS.md

@@ -0,0 +1,39 @@
+# batida-landing
+
+Marketing/landing page for Batida. Static HTML served via Nginx.
+Separate git repository — self-contained.
+
+## 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
+```
+
+## Deployment
+
+Deployed to Kubernetes via `batida-infra`. The Dockerfile copies static HTML into an Nginx container. Manifests in `k8s/` define the deployment.
+
+## Key Facts
+
+- 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
+
+## Boundaries
+
+### Always
+- Keep both language versions in sync when updating content
+- Test HTML renders correctly in browser before committing
+
+### Never
+- Never add server-side logic or build tools — pure static HTML
+- Never commit secrets or environment-specific values

CLAUDE.md

@@ -0,0 +1 @@
+AGENTS.md

Dockerfile

@@ -1,15 +1,28 @@
+FROM node:20-alpine AS build
+WORKDIR /build
+COPY input.css tailwind.config.js ./
+COPY *.html ./
+RUN npx tailwindcss@3 -i input.css -o output.css --minify
+
 FROM nginx:alpine
 
 ARG APP_URL=https://app.batida.io
 
+COPY --from=build /build/output.css /usr/share/nginx/html/output.css
 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
 
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 

index.html

@@ -29,47 +29,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 -->
+    <link rel="stylesheet" href="/output.css">
-    <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 ===== */

index.pt-br.html

@@ -29,47 +29,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 -->
+    <link rel="stylesheet" href="/output.css">
-    <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 ===== */

input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -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: [],
+};

vs.html

@@ -23,32 +23,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">
 
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/output.css">
-
-    <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>
         :root, [data-theme="dark"] {

vs.pt-br.html

@@ -23,32 +23,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">
 
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/output.css">
-
-    <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>
         :root, [data-theme="dark"] {