Add browser compatibility indicators (Chrome, Edge, Brave, Opera)

.gitignore

@@ -1,6 +1,8 @@
 # Next.js
 .next/
 out/
+next-env.d.ts
+tsconfig.tsbuildinfo
 
 # Dependencies
 node_modules/

components/AnimatedHero.tsx

@@ -4,6 +4,38 @@ import PopupMockup from './PopupMockup'
 import { useLang } from '@/contexts/LanguageContext'
 import t from '@/lib/translations'
 
+const ChromeIcon = () => (
+  <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true">
+    <path d="M10,0 A10,10 0 0,1 18.66,15 L15.77,13.33 A6.67,6.67 0 0,0 10,3.33 Z" fill="#EA4335"/>
+    <path d="M18.66,15 A10,10 0 0,1 1.34,15 L4.23,13.33 A6.67,6.67 0 0,0 15.77,13.33 Z" fill="#FBBC05"/>
+    <path d="M1.34,15 A10,10 0 0,1 10,0 L10,3.33 A6.67,6.67 0 0,0 4.23,13.33 Z" fill="#34A853"/>
+    <circle cx="10" cy="10" r="6.67" fill="white"/>
+    <circle cx="10" cy="10" r="4.5" fill="#4285F4"/>
+  </svg>
+)
+
+const EdgeIcon = () => (
+  <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true">
+    <circle cx="10" cy="10" r="10" fill="#0078D4"/>
+    <path d="M5,11 C5,8 7.5,5.5 10.5,5.5 C11.5,5.5 12.5,5.8 13.3,6.5 C12.5,6.2 11.7,6 11,6 C8.8,6 7,7.8 7,10 C7,10.6 7.1,11.2 7.4,11.7 L14.5,11.7 C14.2,13.3 12.5,15 10.5,15 C7.5,15 5,13 5,11 Z" fill="white"/>
+  </svg>
+)
+
+const BraveIcon = () => (
+  <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true">
+    <path d="M10,1.5 L17,4.5 L17.5,10.5 C17.5,14.5 14,17.5 10,18.5 C6,17.5 2.5,14.5 2.5,10.5 L3,4.5 Z" fill="#FB542B"/>
+    <path d="M10,5 L13.5,7.5 L13,11 C13,12 11.5,13.5 10,14 C8.5,13.5 7,12 7,11 L6.5,7.5 Z" fill="white"/>
+    <circle cx="10" cy="10" r="1.8" fill="#FB542B"/>
+  </svg>
+)
+
+const OperaIcon = () => (
+  <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true">
+    <circle cx="10" cy="10" r="10" fill="#FF1B2D"/>
+    <ellipse cx="10" cy="10" rx="4.5" ry="7.5" fill="none" stroke="white" strokeWidth="2"/>
+  </svg>
+)
+
 const easeOut: [number, number, number, number] = [0.25, 0.46, 0.45, 0.94]
 const easeInOut: [number, number, number, number] = [0.65, 0, 0.35, 1]
 
@@ -152,6 +184,28 @@ export default function AnimatedHero() {
                 {tx.secondary}
               </a>
             </motion.div>
+
+            {/* Browser compatibility */}
+            <motion.div
+              className="flex items-center gap-3 mt-5 flex-wrap"
+              custom={6}
+              variants={fadeUp}
+              initial="hidden"
+              animate="show"
+            >
+              <span className="text-[0.75rem] text-gray-brand-500">{tx.browsersLabel}:</span>
+              {([
+                { Icon: ChromeIcon, name: 'Chrome' },
+                { Icon: EdgeIcon, name: 'Edge' },
+                { Icon: BraveIcon, name: 'Brave' },
+                { Icon: OperaIcon, name: 'Opera' },
+              ] as const).map(({ Icon, name }) => (
+                <div key={name} className="flex items-center gap-1">
+                  <Icon />
+                  <span className="text-[0.72rem] text-gray-brand-400">{name}</span>
+                </div>
+              ))}
+            </motion.div>
           </div>
 
           {/* Mockup */}

components/ProofStrip.tsx

@@ -23,6 +23,11 @@ export default function ProofStrip() {
           <div className="flex items-center gap-2 text-[0.85rem] text-gray-brand-500">
             <strong className="text-text-dark font-semibold">{tx.free.split(' · ')[0]}</strong> · {tx.free.split(' · ')[1]}
           </div>
+          <div className="hidden md:block w-px h-5 bg-gray-brand-300" />
+          <div className="flex items-center gap-2 text-[0.85rem] text-gray-brand-500">
+            <span className="text-teal-light text-xs">✦</span>
+            <span>{tx.browsers}</span>
+          </div>
         </div>
       </div>
     </div>

lib/translations.ts

@@ -14,11 +14,13 @@ const t = {
       audience: 'Perfecto para <b>desarrolladores</b>, <b>gamers</b>, <b>trabajadores remotos</b> y cualquiera que quiera conocer su conexión a internet.',
       cta: 'Instalar gratis en Chrome',
       secondary: 'Ver cómo funciona →',
+      browsersLabel: 'Compatible con',
     },
     proof: {
       rating: 'de calificación',
       store: 'Publicado en Chrome Web Store',
       free: '100% gratuito · Sin registro',
+      browsers: 'Compatible con Chrome · Edge · Brave · Opera',
     },
     features: {
       label: 'Características',
@@ -104,11 +106,13 @@ const t = {
       audience: 'Perfect for <b>developers</b>, <b>gamers</b>, <b>remote workers</b> and anyone who wants to know their internet connection.',
       cta: 'Install free on Chrome',
       secondary: 'See how it works →',
+      browsersLabel: 'Works with',
     },
     proof: {
       rating: 'rating',
       store: 'Published on Chrome Web Store',
       free: '100% free · No sign-up',
+      browsers: 'Works on Chrome · Edge · Brave · Opera',
     },
     features: {
       label: 'Features',