diff --git a/.gitignore b/.gitignore
index e43b0f9..852db04 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,5 @@
 .DS_Store
+node_modules/
+output.css
+package.json
+package-lock.json
diff --git a/Dockerfile b/Dockerfile
index 1724689..8ae866d 100644
--- a/Dockerfile
+++ b/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
 
diff --git a/index.html b/index.html
index 347df6d..9449897 100644
--- a/index.html
+++ b/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 -->
-    <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 ===== */
diff --git a/index.pt-br.html b/index.pt-br.html
index a4c0182..58d4060 100644
--- a/index.pt-br.html
+++ b/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 -->
-    <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 ===== */
diff --git a/input.css b/input.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..2c6723d
--- /dev/null
+++ b/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: [],
+};
diff --git a/vs.html b/vs.html
index 3f5f498..ec8c840 100644
--- a/vs.html
+++ b/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>
-
-    <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"] {
diff --git a/vs.pt-br.html b/vs.pt-br.html
index 4e65c6a..a741000 100644
--- a/vs.pt-br.html
+++ b/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>
-
-    <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"] {