Aplicativos de Atrair Leads

src/sections/Services.tsx

@@ -121,6 +121,9 @@ const ServiceCard = ({ service }: { service: Service }) => {
     setMousePos({ x, y });
   };
 
+  // Gerar caminho WebP com fallback PNG/JPG
+  const webpImage = service.image.replace(/\.(png|jpg|jpeg)$/, '.webp');
+
   return (
     <div
       ref={cardRef}
@@ -138,13 +141,19 @@ const ServiceCard = ({ service }: { service: Service }) => {
         setMousePos({ x: 0, y: 0 });
       }}
     >
-      {/* Image container */}
+      {/* Image container com WebP + lazy loading */}
       <div className="relative h-48 bg-gradient-to-br from-[#2a2a2a] to-[#1a1a1a] overflow-hidden">
-        <img
-          src={service.image}
-          alt={service.title}
-          className="w-full h-full object-contain p-6 transition-transform duration-500 group-hover:scale-110"
-        />
+        <picture>
+          <source srcSet={webpImage} type="image/webp" />
+          <img
+            src={service.image}
+            alt={service.title}
+            loading="lazy"
+            width="300"
+            height="300"
+            className="w-full h-full object-contain p-6 transition-transform duration-500 group-hover:scale-110"
+          />
+        </picture>
         
         {/* Icon badge */}
         <div className="absolute top-4 left-4 w-12 h-12 rounded-xl bg-[#0e0e0e] shadow-lg flex items-center justify-center text-[#cbf400] border border-[#cbf400]/20">