feat: complete NutriScan redesign

app/components/landing/TrustBadges.tsx

@@ -1,51 +1,41 @@
-import { Database, Globe, Zap, Code } from "lucide-react";
+
+const stats = [
+  {
+    value: "2 M+",
+    label: "Produtos no Open Food Facts",
+  },
+  {
+    value: "100+",
+    label: "Países cobertos",
+  },
+  {
+    value: "99.9%",
+    label: "Uptime garantido",
+  },
+  {
+    value: "100%",
+    label: "Open Source",
+  },
+];
 
 export function TrustBadges() {
   return (
-    <section className="py-12 bg-gray-50 dark:bg-gray-800 border-t border-b">
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
-          <div className="animate-fadeIn">
-            <div className="w-16 h-16 mx-auto mb-3 bg-blue-100 dark:bg-blue-900/40 rounded-full flex items-center justify-center">
-              <Database className="w-8 h-8 text-blue-600" />
+    <section className="bg-[var(--bg-surface)] border-y border-[var(--border-subtle)]">
+      <div className="container-editorial">
+        <div className="grid grid-cols-2 md:grid-cols-4 md:divide-x divide-[var(--border-subtle)]">
+          {stats.map(({ value, label }, i) => (
+            <div
+              key={i}
+              className="flex flex-col items-center gap-2 px-6 py-8"
+              >
+              <span className="font-display text-2xl text-[var(--fg-primary)] leading-none">
+                {value}
+              </span>
+              <span className="label text-center text-[var(--fg-muted)]">
+                {label}
+              </span>
             </div>
-            <div className="text-2xl font-bold text-blue-600">
-              2M+
-            </div>
-            <div className="text-sm text-gray-600 dark:text-gray-400">
-              Produtos no Open Food Facts
-            </div>
-          </div>
-          
-          <div className="animate-fadeIn" style={{animationDelay: '0.1s'}}>
-            <div className="w-16 h-16 mx-auto mb-3 bg-green-100 dark:bg-green-900/40 rounded-full flex items-center justify-center">
-              <Globe className="w-8 h-8 text-green-600" />
-            </div>
-            <div className="text-2xl font-bold text-green-600">100+</div>
-            <div className="text-sm text-gray-600 dark:text-gray-400">
-              Países cobertos
-            </div>
-          </div>
-          
-          <div className="animate-fadeIn" style={{animationDelay: '0.2s'}}>
-            <div className="w-16 h-16 mx-auto mb-3 bg-purple-100 dark:bg-purple-900/40 rounded-full flex items-center justify-center">
-              <Zap className="w-8 h-8 text-purple-600" />
-            </div>
-            <div className="text-2xl font-bold text-purple-600">99.9%</div>
-            <div className="text-sm text-gray-600 dark:text-gray-400">
-              Uptime garantido
-            </div>
-          </div>
-          
-          <div className="animate-fadeIn" style={{animationDelay: '0.3s'}}>
-            <div className="w-16 h-16 mx-auto mb-3 bg-orange-100 dark:bg-orange-900/40 rounded-full flex items-center justify-center animate-pulse-slow">
-              <Code className="w-8 h-8 text-orange-600" />
-            </div>
-            <div className="text-xl font-bold text-orange-600">100%</div>
-            <div className="text-sm text-gray-600 dark:text-gray-400">
-              Open Source
-            </div>
-          </div>
+          ))}
         </div>
       </div>
     </section>