diff -ru '--exclude=*.woff2' '--exclude=favicon.ico' app.orig/Components/Gallery.tsx app/Components/Gallery.tsx
--- app.orig/Components/Gallery.tsx	2026-08-07 16:30:01.939154013 +0200
+++ app/Components/Gallery.tsx	2026-08-07 16:33:54.080740628 +0200
@@ -36,7 +36,7 @@
         title: 'O Projeto Atlas',
         location: '',
     },
-    url: '/gallery1.PNG',
+    url: '/gallery1.webp',
     year: '2025'
   },
   {
@@ -52,7 +52,7 @@
         title: 'O estudo de ecos',
         location: '',
     },
-    url: '/gallery2.PNG',
+    url: '/gallery2.webp',
     year: '2024'
   },
   {
@@ -68,7 +68,7 @@
         title: 'O Projeto Linha Brilhante',
         location: '',
     },
-    url: '/gallery3.PNG',
+    url: '/gallery3.webp',
     year: '2026'
   },
   {
@@ -84,7 +84,7 @@
         title: 'Vida Moderna Volume II',
         location: '',
     },
-    url: '/gallery4.PNG',
+    url: '/gallery4.webp',
     year: '2025'
   },
   {
@@ -100,7 +100,7 @@
         title: 'O Refúgio das Dunas',
         location: '',
     },
-    url: '/gallery5.PNG',
+    url: '/gallery5.webp',
     year: '2025'
   }
 ];
diff -ru '--exclude=*.woff2' '--exclude=favicon.ico' app.orig/layout.tsx app/layout.tsx
--- app.orig/layout.tsx	2026-08-07 16:30:01.939154013 +0200
+++ app/layout.tsx	2026-08-07 16:32:19.879252000 +0200
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import {  Roboto } from "next/font/google";
 import localFont  from "next/font/local";
+import Script from "next/script";
 import "./globals.css";
 
 const robotoSans = Roboto({
@@ -14,8 +15,17 @@
   variable: '--font-headers',
 })
 
+// Google Tag Manager container ID
+const GTM_ID = "GTM-NMK3LZ7B";
+
 export const metadata: Metadata = {
-  title: "Viron Portugal"
+  title: "Viron Portugal",
+  description:
+    "Premium window solutions in Portugal. Cut energy bills, reduce noise and transform your home with expert installation. Free quote.",
+  other: {
+    // Meta / Facebook Business domain verification
+    "facebook-domain-verification": "e7pl6xc5y2witlthvexd1lzm7ny5w0",
+  },
 };
 
 export default function RootLayout({
@@ -29,7 +39,27 @@
       //className={` ${robotoSans.variable}  h-full antialiased`}
       className={` h-full antialiased`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+        {/* Google Tag Manager */}
+        <Script id="gtm-base" strategy="afterInteractive">
+          {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','${GTM_ID}');`}
+        </Script>
+        {/* Google Tag Manager (noscript) */}
+        <noscript>
+          <iframe
+            src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+            height="0"
+            width="0"
+            style={{ display: "none", visibility: "hidden" }}
+          />
+        </noscript>
+        {/* End Google Tag Manager */}
+        {children}
+      </body>
     </html>
   );
 }
diff -ru '--exclude=*.woff2' '--exclude=favicon.ico' app.orig/page.tsx app/page.tsx
--- app.orig/page.tsx	2026-08-07 16:30:01.939154013 +0200
+++ app/page.tsx	2026-08-07 16:33:28.535252521 +0200
@@ -13,6 +13,22 @@
 import IconInstagram from "@/public/icon-instagram.png";
 import Image from 'next/image';
 
+// --- Google Tag Manager dataLayer ---
+// This site is a single page with no thank-you page: the form is submitted
+// through a Next.js server action, so the URL never changes. Conversions must
+// therefore be pushed to the dataLayer instead of tracked by destination URL.
+declare global {
+  interface Window {
+    dataLayer?: Record<string, unknown>[];
+  }
+}
+
+const track = (event: string, params: Record<string, unknown> = {}) => {
+  if (typeof window === 'undefined') return;
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({ event, ...params });
+};
+
 // Custom Styles for Animations & Smooth Scrolling with Inter + Helvetica Fonts
 const globalStyles = `
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@@ -430,6 +446,16 @@
     
     setBtnStatus(btnStatuses.success);
 
+    // Conversion: fires only after the server action confirms the email was sent.
+    track('generate_lead', {
+      form_id: 'contact_main',
+      form_language: lang,
+      user_data: {
+        email: data.email || undefined,
+        phone: data.phone || undefined,
+      },
+    });
+
     refFormName.current.value = "";
     refFormPhone.current.value = "";
     refFormEmail.current.value = "";
@@ -515,9 +541,11 @@
         {/* Background Image with Overlay */}
         <div className="absolute inset-0 z-0">
           <img 
-            src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" 
-            alt="Modern bright living room with large windows" 
+            src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=75"
+            alt="Modern bright living room with large windows"
             className="absolute inset-0 w-full h-full object-cover object-center"
+            fetchPriority="high"
+            decoding="async"
           />
           <div className="absolute inset-0 bg-gradient-to-r from-[#121212]/95 via-[#121212]/75 to-transparent"></div>
         </div>
@@ -691,12 +719,12 @@
 
           <div className="grid md:grid-cols-3 gap-6">
             {[
-              { img: "/photo1.PNG", text: t.showcase.items[0], offset: false },
-              { img: "/photo2.PNG", text: t.showcase.items[1], offset: true },
-              { img: "/photo3.PNG", text: t.showcase.items[2], offset: false }
+              { img: "/photo1.webp", text: t.showcase.items[0], offset: false },
+              { img: "/photo2.webp", text: t.showcase.items[1], offset: true },
+              { img: "/photo3.webp", text: t.showcase.items[2], offset: false }
             ].map((imgBlock, i) => (
               <div key={i} className={`group relative rounded-3xl overflow-hidden aspect-[4/5] shadow-lg ${imgBlock.offset ? 'md:translate-y-8' : ''}`}>
-                <img src={imgBlock.img} alt={imgBlock.text} className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
+                <img src={imgBlock.img} alt={imgBlock.text} loading="lazy" decoding="async" className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                 <div className="absolute inset-0 bg-gradient-to-t from-[#121212]/90 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-8">
                   <p className="text-white font-bold text-xl relative z-10">{imgBlock.text}</p>
                 </div>
@@ -721,7 +749,7 @@
               <div className="absolute top-4 left-4 bg-white/90 backdrop-blur text-[#1C1C1C] px-4 py-1.5 rounded-full text-sm font-bold tracking-wider z-10 shadow-sm border border-[#EBE8E2]">
                 {t.beforeAfter.before}
               </div>
-              <img src="before1.jpg" alt="Old window" className="w-full aspect-[4/3] object-cover grayscale-[30%] opacity-90" />
+              <img src="/before1.webp" alt="Old window" loading="lazy" decoding="async" className="w-full aspect-[4/3] object-cover grayscale-[30%] opacity-90" />
             </div>
             
             {/* Arrow */}
@@ -734,7 +762,7 @@
                <div className="absolute top-4 right-4 bg-[#A3947B] text-white px-4 py-1.5 rounded-full text-sm font-bold tracking-wider z-10 shadow-lg">
                 {t.beforeAfter.after}
               </div>
-              <img src="after1.jpg" alt="New modern window" className="w-full aspect-[4/3] object-cover" />
+              <img src="/after1.webp" alt="New modern window" loading="lazy" decoding="async" className="w-full aspect-[4/3] object-cover" />
             </div>
           </div>
         </div>
@@ -956,7 +984,10 @@
                     </div>
                 </a>
 
-                <a href="https://wa.me/351932146367" target="_blank">
+                <a
+                    href="https://wa.me/351932146367"
+                    target="_blank"
+                    onClick={() => track('whatsapp_click', { link_location: 'footer' })}>
                     <div className="w-8 h-8">
                         <Image
                             src={IconWhatsapp}
