246 lines
No EOL
13 KiB
HTML
246 lines
No EOL
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Better Life SG — Insurance for Every Stage of Life</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: { 50: '#e6f7f5', 100: '#b3e8e0', 200: '#80d9cc', 300: '#4dcab8', 400: '#26bfa8', 500: '#00b49a', 600: '#009e87', 700: '#008571', 800: '#006b5b', 900: '#004d41' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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>
|
|
|
|
<body class="bg-white text-gray-800 font-sans">
|
|
|
|
<!-- Navbar -->
|
|
<nav class="fixed top-0 w-full bg-white/95 backdrop-blur shadow-sm z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
|
|
<a href="/" class="text-xl font-bold text-brand-600">Better Life</a>
|
|
<button id="navToggle" class="md:hidden p-2 rounded text-gray-600 hover:bg-gray-100">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<div id="navMenu" class="hidden md:flex items-center gap-6 text-sm font-medium">
|
|
<a href="/" class="text-brand-600">Home</a>
|
|
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
|
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</a>
|
|
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
|
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
|
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
|
<a href="/contact.html"
|
|
class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition">Contact Us</a>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile menu -->
|
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
|
<a href="/" class="block py-2 text-brand-600">Home</a>
|
|
<a href="/fresh-grads.html" class="block py-2 hover:text-brand-600">Fresh Grads</a>
|
|
<a href="/prenatal.html" class="block py-2 hover:text-brand-600">Prenatal</a>
|
|
<a href="/retirement.html" class="block py-2 hover:text-brand-600">Retirement</a>
|
|
<a href="/legacy.html" class="block py-2 hover:text-brand-600">Legacy</a>
|
|
<a href="/team.html" class="block py-2 hover:text-brand-600">Our Team</a>
|
|
<a href="/contact.html" class="block py-2 text-brand-500 font-semibold">Contact Us</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<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>
|
|
<div class="relative z-10 text-center px-4 max-w-3xl">
|
|
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6 text-gray-900">Better Life</h1>
|
|
<p class="text-lg sm:text-xl md:text-2xl mb-8 text-gray-700">Why settle for good when you can have it
|
|
better?</p>
|
|
<a href="/contact.html"
|
|
class="inline-block bg-brand-600 text-white font-semibold px-8 py-3 rounded-lg hover:bg-brand-700 transition text-lg">Start
|
|
Planning</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cards -->
|
|
<section class="py-20 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Insurance for Every Stage of Life</h2>
|
|
<p class="text-center text-gray-500 mb-14 max-w-2xl mx-auto">Discover tailored plans designed to protect you
|
|
and your loved ones.</p>
|
|
|
|
<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 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>
|
|
<p class="text-gray-500 text-sm mb-4">Start your career with confidence. Build a strong
|
|
financial foundation early.</p>
|
|
<a href="/fresh-grads.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
|
|
Plans →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prenatal -->
|
|
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
|
<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 & Family</h3>
|
|
<p class="text-gray-500 text-sm mb-4">Protect your growing family. Secure their future from day
|
|
one.</p>
|
|
<a href="/prenatal.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
|
|
Plans →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Retirement -->
|
|
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
|
<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>
|
|
<p class="text-gray-500 text-sm mb-4">Plan for your golden years. Ensure a comfortable and
|
|
stress-free retirement.</p>
|
|
<a href="/retirement.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
|
|
Plans →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legacy -->
|
|
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
|
<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 & Wealth</h3>
|
|
<p class="text-gray-500 text-sm mb-4">Leave a lasting impact. Structure your wealth transfer
|
|
efficiently.</p>
|
|
<a href="/legacy.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
|
|
Plans →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-brand-900 text-white py-12">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div>
|
|
<h4 class="text-lg font-bold mb-3">Better Life SG</h4>
|
|
<p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg font-bold mb-3">Quick Links</h4>
|
|
<ul class="space-y-1 text-sm text-white/70">
|
|
<li><a href="/" class="hover:text-white transition">Home</a></li>
|
|
<li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li>
|
|
<li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li>
|
|
<li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li>
|
|
<li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li>
|
|
<li><a href="/team.html" class="hover:text-white transition">Our Team</a></li>
|
|
<li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg font-bold mb-3">Get in Touch</h4>
|
|
<a href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
|
|
class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<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 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>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">
|
|
© 2026 Better Life SG. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
</html> |