andre/betterlifesg
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

betterbot: update index.html
All checks were successful
Deploy Better Life SG / deploy (push) Successful in 6s
Details
Deploy Better Life SG / notify (push) Successful in 2s
Details

Browse source
This commit is contained in:
BetterBot 2026-04-16 10:08:48 +08:00
parent 397c21f387
commit a8a6f429a5
1 changed files with 68 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
site/index.html
View file

@ -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>