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.
docs: add Intent Layer AGENTS.md for landing page
2026-05-04 23:09:07 -03:00 · 2026-04-24 23:01:05 -03:00
10 changed files with 105 additions and 135 deletions
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+output.css
+package.json
+package-lock.json
@@ -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
@@ -0,0 +1 @@
+AGENTS.md
@@ -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

@@ -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 -->
-    <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 ===== */
@@ -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 -->
-    <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 ===== */
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -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: [],
+};
@@ -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>
-
-    <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>
        :root, [data-theme="dark"] {
@@ -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>
-
-    <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>
        :root, [data-theme="dark"] {
Author	SHA1	Message	Date
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