Add performance optimizations with lazy loading and intersection observer

Author: josuejjv85

public/contact/index.html

@@ -407,6 +407,40 @@ <h2 class="text-3xl font-roboto font-bold text-center mb-12">
               });
           })();
         </script>
+
+        
+        <script type="text/javascript">
+          document.addEventListener("DOMContentLoaded", () => {
+            
+            const images = document.querySelectorAll("img");
+            images.forEach((img) => {
+              img.setAttribute("loading", "lazy");
+              img.setAttribute("decoding", "async");
+            });
+
+            
+            const animationObserver = new IntersectionObserver(
+              (entries) => {
+                entries.forEach((entry) => {
+                  if (entry.isIntersecting) {
+                    entry.target.classList.add("animate");
+                    animationObserver.unobserve(entry.target);
+                  }
+                });
+              },
+              {
+                threshold: 0.1,
+                rootMargin: "50px",
+              }
+            );
+
+            
+            const animatedElements = document.querySelectorAll(
+              ".animate-fadeIn, .hero-title, .hero-subtitle"
+            );
+            animatedElements.forEach((el) => animationObserver.observe(el));
+          });
+        </script>
       </div>
     </div>
   </div>

themes/pepewebtech/layouts/_default/contact.html

@@ -313,6 +313,40 @@ <h2 class="text-3xl font-roboto font-bold text-center mb-12">
               });
           })();
         </script>
+
+        <!-- Performance Optimizations -->
+        <script type="text/javascript">
+          document.addEventListener("DOMContentLoaded", () => {
+            // Lazy load images
+            const images = document.querySelectorAll("img");
+            images.forEach((img) => {
+              img.setAttribute("loading", "lazy");
+              img.setAttribute("decoding", "async");
+            });
+
+            // Optimize animations
+            const animationObserver = new IntersectionObserver(
+              (entries) => {
+                entries.forEach((entry) => {
+                  if (entry.isIntersecting) {
+                    entry.target.classList.add("animate");
+                    animationObserver.unobserve(entry.target);
+                  }
+                });
+              },
+              {
+                threshold: 0.1,
+                rootMargin: "50px",
+              }
+            );
+
+            // Apply animation observer to animated elements
+            const animatedElements = document.querySelectorAll(
+              ".animate-fadeIn, .hero-title, .hero-subtitle"
+            );
+            animatedElements.forEach((el) => animationObserver.observe(el));
+          });
+        </script>
       </div>
     </div>
   </div>