feat: implement lazy loading for product images to enhance performance

- Added CSS styles for lazy loading images, improving initial load times and user experience.
- Updated ProductManager class to initialize lazy loading functionality, utilizing Intersection Observer for efficient image loading as they come into view.
- Modified image elements in product catalog to support lazy loading with appropriate data attributes.

product-catalog.html

@@ -15,6 +15,16 @@
           display: flex !important;
         }
       }
+      
+      /* Lazy loading styles */
+      .lazy-load {
+        opacity: 0.7;
+        transition: opacity 0.3s ease-in-out;
+      }
+      
+      .lazy-load.loaded {
+        opacity: 1;
+      }
     </style>
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"