betterbot: update index.html

site/index.html

@@ -17,10 +17,32 @@
             }
         }
     </script>
+    
+    <!-- Preload critical images for faster initial page load -->
+    <link rel="preload" as="image" href="/images/hero-bg.png">
+    <link rel="preload" as="image" href="/images/fresh-grads-bg.png">
+    <link rel="preload" as="image" href="/images/prenatal-bg.jpg">
+    
     <style>
         html {
             scroll-behavior: smooth;
         }
+        
+        /* Loading placeholder styles */
+        .image-placeholder {
+            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+            background-size: 200% 100%;
+            animation: loading 1.5s infinite;
+        }
+        
+        @keyframes loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+        
+        .loaded {
+            transition: opacity 0.3s ease;
+        }
     </style>
 </head>
 
@@ -59,7 +81,7 @@
     </nav>
 
     <!-- Hero -->
-    <section class="relative min-h-[90vh] flex items-center justify-center bg-cover bg-center"
+    <section class="relative min-h-[90vh] flex items-center justify-center bg-cover bg-center hero-bg"
         style="background-image:url('/images/hero-bg.png')">
         <!-- White overlay for better text contrast -->
         <div class="absolute inset-0 bg-white/60"></div>
@@ -83,7 +105,8 @@
             <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                 <!-- Fresh Grads -->
                 <div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
-                    <div class="h-48 bg-cover bg-center" style="background-image:url('/images/fresh-grads-bg.png')">
+                    <div class="h-48 bg-cover bg-center card-image image-placeholder" 
+                         data-bg="/images/fresh-grads-bg.png">
                     </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-2 text-brand-700">Fresh Graduates</h3>
@@ -96,7 +119,9 @@
 
                 <!-- Prenatal -->
                 <div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
-                    <div class="h-48 bg-cover bg-center" style="background-image:url('/images/prenatal-bg.jpg')"></div>
+                    <div class="h-48 bg-cover bg-center card-image image-placeholder"
+                         data-bg="/images/prenatal-bg.jpg">
+                    </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-2 text-brand-700">Prenatal &amp; Family</h3>
                         <p class="text-gray-500 text-sm mb-4">Protect your growing family. Secure their future from day
@@ -108,7 +133,8 @@
 
                 <!-- Retirement -->
                 <div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
-                    <div class="h-48 bg-cover bg-center" style="background-image:url('/images/retirement-bg.png')">
+                    <div class="h-48 bg-cover bg-center card-image image-placeholder"
+                         data-bg="/images/retirement-bg.png">
                     </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-2 text-brand-700">Retirement Planning</h3>
@@ -121,7 +147,9 @@
 
                 <!-- Legacy -->
                 <div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
-                    <div class="h-48 bg-cover bg-center" style="background-image:url('/images/legacy-bg.png')"></div>
+                    <div class="h-48 bg-cover bg-center card-image image-placeholder"
+                         data-bg="/images/legacy-bg.png">
+                    </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-2 text-brand-700">Legacy &amp; Wealth</h3>
                         <p class="text-gray-500 text-sm mb-4">Leave a lasting impact. Structure your wealth transfer
@@ -162,7 +190,7 @@
                             <path
                                 d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
                             <path
-                                d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
+                                d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
                         </svg>
                         Chat on WhatsApp
                     </a>
@@ -175,9 +203,43 @@
     </footer>
 
     <script>
+        // Mobile navigation toggle
         document.getElementById('navToggle').addEventListener('click', () => {
             document.getElementById('mobileMenu').classList.toggle('hidden');
         });
+
+        // Lazy loading implementation for card images
+        const observerOptions = {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0.1
+        };
+
+        const imageObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    const bgImage = img.getAttribute('data-bg');
+                    
+                    // Create new image to preload
+                    const newImg = new Image();
+                    newImg.onload = () => {
+                        img.style.backgroundImage = `url('${bgImage}')`;
+                        img.classList.remove('image-placeholder');
+                        img.classList.add('loaded');
+                    };
+                    newImg.src = bgImage;
+                    
+                    imageObserver.unobserve(img);
+                }
+            });
+        }, observerOptions);
+
+        // Observe all card images for lazy loading
+        document.addEventListener('DOMContentLoaded', () => {
+            const cardImages = document.querySelectorAll('.card-image');
+            cardImages.forEach(img => imageObserver.observe(img));
+        });
     </script>
 </body>