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

Refactor team.html for improved readability and structure; update styles and layout for consistency

Browse source
This commit is contained in:
Andre Kamarudin 2026-04-16 08:19:01 +08:00
parent f9f6f80347
commit f67b356dfe
7 changed files with 1087 additions and 692 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

256
site/contact.html
View file

@ -1,112 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us — Better Life SG</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>
<style>html{scroll-behavior:smooth}.hero-overlay{background:linear-gradient(135deg,rgba(0,180,154,0.85) 0%,rgba(0,77,65,0.90) 100%)}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us — Better Life SG</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>
<style>
html {
scroll-behavior: smooth
}
.hero-overlay {
background: linear-gradient(135deg, rgba(0, 180, 154, 0.85) 0%, rgba(0, 77, 65, 0.90) 100%)
}
</style>
</head>
<body class="bg-white text-gray-800 font-sans">
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html" class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a href="/team.html" class="block py-2">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-[50vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/contact-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Contact Us</h1>
<p class="text-lg sm:text-xl text-white/90">We're here to help you plan for a better tomorrow.</p>
</div>
</section>
<!-- Contact Form -->
<section class="py-20">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-8">Send us a message</h2>
<form id="contactForm" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">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>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Contact Number</label>
<input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html"
class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a
href="/team.html" class="block py-2">Our Team</a><a href="/contact.html"
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
</nav>
<!-- Hero -->
<section class="relative min-h-[50vh] flex items-center justify-center bg-cover bg-center"
style="background-image:url('/images/contact-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Contact Us</h1>
<p class="text-lg sm:text-xl text-white/90">We're here to help you plan for a better tomorrow.</p>
</div>
<div class="flex items-start gap-3">
<input type="checkbox" id="pdpa" name="pdpa" required class="mt-1 w-4 h-4 text-brand-500 border-gray-300 rounded focus:ring-brand-500">
<label for="pdpa" class="text-sm text-gray-600">
<strong>PDPA Consent</strong> — By submitting this form, I hereby consent to Better Life collecting, using, and disclosing my personal data for the purposes of contacting me regarding my inquiry, in accordance with the Singapore Personal Data Protection Act (PDPA).
</label>
</section>
<!-- Contact Form -->
<section class="py-20">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-8">Send us a message</h2>
<form id="contactForm" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" id="name" name="name" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Contact Number</label>
<input type="tel" id="phone" name="phone" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" id="email" name="email" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
</div>
<div class="flex items-start gap-3">
<input type="checkbox" id="pdpa" name="pdpa" required
class="mt-1 w-4 h-4 text-brand-500 border-gray-300 rounded focus:ring-brand-500">
<label for="pdpa" class="text-sm text-gray-600">
<strong>PDPA Consent</strong> — By submitting this form, I hereby consent to Better Life
collecting, using, and disclosing my personal data for the purposes of contacting me regarding
my inquiry, in accordance with the Singapore Personal Data Protection Act (PDPA).
</label>
</div>
<button type="submit"
class="w-full bg-brand-500 text-white font-semibold py-3 px-6 rounded-lg hover:bg-brand-600 transition text-lg">Submit
Inquiry</button>
</form>
<div id="formSuccess"
class="hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-center">
Thank you! We'll be in touch soon.
</div>
</div>
<button type="submit" class="w-full bg-brand-500 text-white font-semibold py-3 px-6 rounded-lg hover:bg-brand-600 transition text-lg">Submit Inquiry</button>
</form>
<div id="formSuccess" class="hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-center">
Thank you! We'll be in touch soon.
</div>
</div>
</section>
</section>
<!-- WhatsApp CTA -->
<section class="py-16 bg-brand-50">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-2xl font-bold mb-4">Prefer to chat?</h2>
<p class="text-gray-600 mb-6">Reach us instantly on WhatsApp for a quick consultation.</p>
<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-8 py-3 rounded-lg hover:bg-green-700 transition text-lg font-medium">
<svg class="w-6 h-6" 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 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"/></svg>
Chat on WhatsApp
</a>
</div>
</section>
<!-- WhatsApp CTA -->
<section class="py-16 bg-brand-50">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-2xl font-bold mb-4">Prefer to chat?</h2>
<p class="text-gray-600 mb-6">Reach us instantly on WhatsApp for a quick consultation.</p>
<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-8 py-3 rounded-lg hover:bg-green-700 transition text-lg font-medium">
<svg class="w-6 h-6" 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 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" />
</svg>
Chat on WhatsApp
</a>
</div>
</section>
<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 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"/></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>
<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 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" />
</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>
document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')});
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
var name = encodeURIComponent(document.getElementById('name').value);
var phone = encodeURIComponent(document.getElementById('phone').value);
var email = encodeURIComponent(document.getElementById('email').value);
var msg = 'Hi, I am ' + decodeURIComponent(name) + '. My email is ' + decodeURIComponent(email) + ' and my number is ' + decodeURIComponent(phone) + '. I am interested in Better Life.';
window.open('https://wa.me/6583226533?text=' + encodeURIComponent(msg), '_blank');
this.classList.add('hidden');
document.getElementById('formSuccess').classList.remove('hidden');
});
</script>
<script>
document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') });
document.getElementById('contactForm').addEventListener('submit', function (e) {
e.preventDefault();
var name = encodeURIComponent(document.getElementById('name').value);
var phone = encodeURIComponent(document.getElementById('phone').value);
var email = encodeURIComponent(document.getElementById('email').value);
var msg = 'Hi, I am ' + decodeURIComponent(name) + '. My email is ' + decodeURIComponent(email) + ' and my number is ' + decodeURIComponent(phone) + '. I am interested in Better Life.';
window.open('https://wa.me/6583226533?text=' + encodeURIComponent(msg), '_blank');
this.classList.add('hidden');
document.getElementById('formSuccess').classList.remove('hidden');
});
</script>
</body>
</html>

257
site/fresh-grads.html
View file

@ -1,112 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fresh Graduates — Better Life SG</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>
<style>html{scroll-behavior:smooth}.hero-overlay{background:linear-gradient(135deg,rgba(0,180,154,0.85) 0%,rgba(0,77,65,0.90) 100%)}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fresh Graduates — Better Life SG</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>
<style>
html {
scroll-behavior: smooth
}
.hero-overlay {
background: linear-gradient(135deg, rgba(0, 180, 154, 0.85) 0%, rgba(0, 77, 65, 0.90) 100%)
}
</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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="text-brand-600">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2 text-brand-600">Fresh Grads</a><a href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html" class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a href="/team.html" class="block py-2">Our Team</a><a href="/contact.html" class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
</nav>
<!-- 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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="text-brand-600">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2 text-brand-600">Fresh
Grads</a><a href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html"
class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a
href="/team.html" class="block py-2">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-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/fresh-grads-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Start Your Career with Confidence</h1>
<p class="text-lg sm:text-xl text-white/90">Build a strong financial foundation early and protect your future.</p>
</div>
</section>
<!-- Hero -->
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center"
style="background-image:url('/images/fresh-grads-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Start Your Career with Confidence</h1>
<p class="text-lg sm:text-xl text-white/90">Build a strong financial foundation early and protect your
future.</p>
</div>
</section>
<!-- Why Insurance Matters Early -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Why Insurance Matters Early</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/></svg></div>
<h3 class="text-xl font-bold mb-2">Lower Premiums</h3>
<p class="text-gray-500">Starting young means locking in lower premiums for life.</p>
<!-- Why Insurance Matters Early -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Why Insurance Matters Early</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Lower Premiums</h3>
<p class="text-gray-500">Starting young means locking in lower premiums for life.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Compound Growth</h3>
<p class="text-gray-500">Investment-linked policies benefit greatly from starting early.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Peace of Mind</h3>
<p class="text-gray-500">Focus on your career knowing you are protected against the unexpected.</p>
</div>
</div>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
<h3 class="text-xl font-bold mb-2">Compound Growth</h3>
<p class="text-gray-500">Investment-linked policies benefit greatly from starting early.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
<h3 class="text-xl font-bold mb-2">Peace of Mind</h3>
<p class="text-gray-500">Focus on your career knowing you are protected against the unexpected.</p>
</div>
</div>
</div>
</section>
</section>
<!-- Benefits -->
<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 font-bold text-center mb-12">Benefits of Early Planning</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Health Coverage</h3>
<p class="text-gray-500">Comprehensive medical coverage before any pre-existing conditions arise.</p>
<!-- Benefits -->
<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 font-bold text-center mb-12">Benefits of Early Planning</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Health Coverage</h3>
<p class="text-gray-500">Comprehensive medical coverage before any pre-existing conditions arise.
</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Income Protection</h3>
<p class="text-gray-500">Safeguard your earning potential against accidents or illnesses.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Wealth Accumulation</h3>
<p class="text-gray-500">Start building your wealth portfolio with disciplined savings.</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Income Protection</h3>
<p class="text-gray-500">Safeguard your earning potential against accidents or illnesses.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Wealth Accumulation</h3>
<p class="text-gray-500">Start building your wealth portfolio with disciplined savings.</p>
</div>
</div>
</div>
</section>
</section>
<!-- CTA -->
<section class="py-20 bg-brand-600 text-white">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Ready to start your journey?</h2>
<p class="text-white/80 mb-8">Speak with our advisors to tailor a plan that fits your new career.</p>
<a href="/contact.html" class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get Started Today</a>
</div>
</section>
<!-- CTA -->
<section class="py-20 bg-brand-600 text-white">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Ready to start your journey?</h2>
<p class="text-white/80 mb-8">Speak with our advisors to tailor a plan that fits your new career.</p>
<a href="/contact.html"
class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get
Started Today</a>
</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 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"/></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>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
<!-- 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 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" />
</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>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body>
</html>

310
site/index.html
View file

@ -1,155 +1,187 @@
<!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' },
}
<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>
<style>
html { scroll-behavior: smooth; }
.hero-overlay { background: linear-gradient(135deg, rgba(0,180,154,0.85) 0%, rgba(0,77,65,0.90) 100%); }
</style>
</script>
<style>
html {
scroll-behavior: smooth;
}
.hero-overlay {
background: linear-gradient(135deg, rgba(0, 180, 154, 0.85) 0%, rgba(0, 77, 65, 0.90) 100%);
}
</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" style="background-image:url('/images/hero-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6">Better Life</h1>
<p class="text-lg sm:text-xl md:text-2xl mb-8 text-white/90">Why settle for good when you can have it better?</p>
<a href="/contact.html" class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 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" style="background-image:url('/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>
<!-- 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>
<!-- 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="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 one.</p>
<a href="/prenatal.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a>
</div>
<!-- Hero -->
<section class="relative min-h-[90vh] flex items-center justify-center bg-cover bg-center"
style="background-image:url('/images/hero-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6">Better Life</h1>
<p class="text-lg sm:text-xl md:text-2xl mb-8 text-white/90">Why settle for good when you can have it
better?</p>
<a href="/contact.html"
class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Start
Planning</a>
</div>
</section>
<!-- 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>
<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>
<!-- 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>
<!-- 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="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 efficiently.</p>
<a href="/legacy.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a>
</div>
</div>
</div>
</div>
</section>
<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>
<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>
<!-- 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 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"/></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>
<!-- 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="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
one.</p>
<a href="/prenatal.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
Plans →</a>
</div>
</div>
<script>
document.getElementById('navToggle').addEventListener('click', () => {
document.getElementById('mobileMenu').classList.toggle('hidden');
});
</script>
<!-- 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>
<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" style="background-image:url('/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
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 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" />
</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>
document.getElementById('navToggle').addEventListener('click', () => {
document.getElementById('mobileMenu').classList.toggle('hidden');
});
</script>
</body>
</html>

247
site/legacy.html
View file

@ -1,106 +1,169 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legacy &amp; Wealth — Better Life SG</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>
<style>html{scroll-behavior:smooth}.hero-overlay{background:linear-gradient(135deg,rgba(0,180,154,0.85) 0%,rgba(0,77,65,0.90) 100%)}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legacy &amp; Wealth — Better Life SG</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>
<style>
html {
scroll-behavior: smooth
}
.hero-overlay {
background: linear-gradient(135deg, rgba(0, 180, 154, 0.85) 0%, rgba(0, 77, 65, 0.90) 100%)
}
</style>
</head>
<body class="bg-white text-gray-800 font-sans">
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">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="text-brand-600">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html" class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2 text-brand-600">Legacy</a><a href="/team.html" class="block py-2">Our Team</a><a href="/contact.html" class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
</nav>
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">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="text-brand-600">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html"
class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2 text-brand-600">Legacy</a><a
href="/team.html" class="block py-2">Our Team</a><a href="/contact.html"
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
</nav>
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/legacy-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Leave a Lasting Legacy</h1>
<p class="text-lg sm:text-xl text-white/90">Ensure your wealth is transferred smoothly to the next generation.</p>
</div>
</section>
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center"
style="background-image:url('/images/legacy-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Leave a Lasting Legacy</h1>
<p class="text-lg sm:text-xl text-white/90">Ensure your wealth is transferred smoothly to the next
generation.</p>
</div>
</section>
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">The Importance of Legacy Planning</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg></div>
<h3 class="text-xl font-bold mb-2">Estate Equalization</h3>
<p class="text-gray-500">Distribute your assets fairly among your heirs without liquidating businesses.</p>
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">The Importance of Legacy Planning</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Estate Equalization</h3>
<p class="text-gray-500">Distribute your assets fairly among your heirs without liquidating
businesses.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Tax Efficiency</h3>
<p class="text-gray-500">Minimize estate taxes and ensure your beneficiaries receive the maximum
value.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Business Succession</h3>
<p class="text-gray-500">Ensure a smooth transition of your business to the next generation or
partners.</p>
</div>
</div>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/></svg></div>
<h3 class="text-xl font-bold mb-2">Tax Efficiency</h3>
<p class="text-gray-500">Minimize estate taxes and ensure your beneficiaries receive the maximum value.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
<h3 class="text-xl font-bold mb-2">Business Succession</h3>
<p class="text-gray-500">Ensure a smooth transition of your business to the next generation or partners.</p>
</div>
</div>
</div>
</section>
</section>
<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 font-bold text-center mb-12">Legacy Solutions</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Universal Life Insurance</h3>
<p class="text-gray-500">High coverage amounts designed specifically for wealth transfer.</p>
<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 font-bold text-center mb-12">Legacy Solutions</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Universal Life Insurance</h3>
<p class="text-gray-500">High coverage amounts designed specifically for wealth transfer.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Trust Structures</h3>
<p class="text-gray-500">Protect assets from creditors and control how funds are distributed.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Keyman Insurance</h3>
<p class="text-gray-500">Protect your business against the loss of crucial personnel.</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Trust Structures</h3>
<p class="text-gray-500">Protect assets from creditors and control how funds are distributed.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Keyman Insurance</h3>
<p class="text-gray-500">Protect your business against the loss of crucial personnel.</p>
</div>
</div>
</div>
</section>
</section>
<section class="py-20 bg-brand-600 text-white">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Leave a lasting legacy</h2>
<p class="text-white/80 mb-8">Speak with our wealth advisors to structure your estate planning.</p>
<a href="/contact.html" class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get Started Today</a>
</div>
</section>
<section class="py-20 bg-brand-600 text-white">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Leave a lasting legacy</h2>
<p class="text-white/80 mb-8">Speak with our wealth advisors to structure your estate planning.</p>
<a href="/contact.html"
class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get
Started Today</a>
</div>
</section>
<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 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"/></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>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
<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 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" />
</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>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body>
</html>

244
site/prenatal.html
View file

@ -1,106 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prenatal &amp; Family — Better Life SG</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>
<style>html{scroll-behavior:smooth}.hero-overlay{background:linear-gradient(135deg,rgba(0,180,154,0.85) 0%,rgba(0,77,65,0.90) 100%)}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prenatal &amp; Family — Better Life SG</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>
<style>
html {
scroll-behavior: smooth
}
.hero-overlay {
background: linear-gradient(135deg, rgba(0, 180, 154, 0.85) 0%, rgba(0, 77, 65, 0.90) 100%)
}
</style>
</head>
<body class="bg-white text-gray-800 font-sans">
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
<a href="/prenatal.html" class="text-brand-600">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a href="/prenatal.html" class="block py-2 text-brand-600">Prenatal</a><a href="/retirement.html" class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a href="/team.html" class="block py-2">Our Team</a><a href="/contact.html" class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
</nav>
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
<a href="/prenatal.html" class="text-brand-600">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
href="/prenatal.html" class="block py-2 text-brand-600">Prenatal</a><a href="/retirement.html"
class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a
href="/team.html" class="block py-2">Our Team</a><a href="/contact.html"
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
</nav>
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/prenatal-bg.jpg')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Protect Your Growing Family</h1>
<p class="text-lg sm:text-xl text-white/90">Comprehensive coverage from pregnancy to parenthood.</p>
</div>
</section>
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center"
style="background-image:url('/images/prenatal-bg.jpg')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Protect Your Growing Family</h1>
<p class="text-lg sm:text-xl text-white/90">Comprehensive coverage from pregnancy to parenthood.</p>
</div>
</section>
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Why Prenatal Insurance?</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg></div>
<h3 class="text-xl font-bold mb-2">Maternity Coverage</h3>
<p class="text-gray-500">Protection against pregnancy complications and congenital conditions.</p>
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Why Prenatal Insurance?</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Maternity Coverage</h3>
<p class="text-gray-500">Protection against pregnancy complications and congenital conditions.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Newborn Protection</h3>
<p class="text-gray-500">Guaranteed coverage for your baby from the moment they are born.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Education Funds</h3>
<p class="text-gray-500">Start saving early for your child's future education needs.</p>
</div>
</div>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/></svg></div>
<h3 class="text-xl font-bold mb-2">Newborn Protection</h3>
<p class="text-gray-500">Guaranteed coverage for your baby from the moment they are born.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div>
<h3 class="text-xl font-bold mb-2">Education Funds</h3>
<p class="text-gray-500">Start saving early for your child's future education needs.</p>
</div>
</div>
</div>
</section>
</section>
<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 font-bold text-center mb-12">Key Features</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Hospital Cash Benefit</h3>
<p class="text-gray-500">Daily cash payouts during hospital stays for mother or baby.</p>
<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 font-bold text-center mb-12">Key Features</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Hospital Cash Benefit</h3>
<p class="text-gray-500">Daily cash payouts during hospital stays for mother or baby.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Transferable Policies</h3>
<p class="text-gray-500">Easily transfer the life policy to your child without medical underwriting.
</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Mental Health Support</h3>
<p class="text-gray-500">Coverage for postpartum depression and related mental health needs.</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Transferable Policies</h3>
<p class="text-gray-500">Easily transfer the life policy to your child without medical underwriting.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Mental Health Support</h3>
<p class="text-gray-500">Coverage for postpartum depression and related mental health needs.</p>
</div>
</div>
</div>
</section>
</section>
<section class="py-20 bg-brand-600 text-white">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Secure your family's future</h2>
<p class="text-white/80 mb-8">Let us help you build a safety net for your growing family.</p>
<a href="/contact.html" class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get Started Today</a>
</div>
</section>
<section class="py-20 bg-brand-600 text-white">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Secure your family's future</h2>
<p class="text-white/80 mb-8">Let us help you build a safety net for your growing family.</p>
<a href="/contact.html"
class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get
Started Today</a>
</div>
</section>
<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 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"/></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>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
<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 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" />
</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>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body>
</html>

247
site/retirement.html
View file

@ -1,106 +1,169 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retirement Planning — Better Life SG</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>
<style>html{scroll-behavior:smooth}.hero-overlay{background:linear-gradient(135deg,rgba(0,180,154,0.85) 0%,rgba(0,77,65,0.90) 100%)}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retirement Planning — Better Life SG</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>
<style>
html {
scroll-behavior: smooth
}
.hero-overlay {
background: linear-gradient(135deg, rgba(0, 180, 154, 0.85) 0%, rgba(0, 77, 65, 0.90) 100%)
}
</style>
</head>
<body class="bg-white text-gray-800 font-sans">
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">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="text-brand-600">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html" class="block py-2 text-brand-600">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a href="/team.html" class="block py-2">Our Team</a><a href="/contact.html" class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
</nav>
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">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="text-brand-600">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html"
class="block py-2 text-brand-600">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a
href="/team.html" class="block py-2">Our Team</a><a href="/contact.html"
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
</nav>
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/retirement-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Plan Your Golden Years</h1>
<p class="text-lg sm:text-xl text-white/90">Ensure a comfortable, stress-free lifestyle when you stop working.</p>
</div>
</section>
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center"
style="background-image:url('/images/retirement-bg.png')">
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Plan Your Golden Years</h1>
<p class="text-lg sm:text-xl text-white/90">Ensure a comfortable, stress-free lifestyle when you stop
working.</p>
</div>
</section>
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Why Plan for Retirement Now?</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
<h3 class="text-xl font-bold mb-2">Inflation Protection</h3>
<p class="text-gray-500">Ensure your savings outpace inflation so your purchasing power remains strong.</p>
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Why Plan for Retirement Now?</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Inflation Protection</h3>
<p class="text-gray-500">Ensure your savings outpace inflation so your purchasing power remains
strong.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Healthcare Costs</h3>
<p class="text-gray-500">Medical expenses rise with age. Be prepared with adequate health coverage.
</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg></div>
<h3 class="text-xl font-bold mb-2">Lifestyle Maintenance</h3>
<p class="text-gray-500">Maintain your current standard of living without relying on a monthly
paycheck.</p>
</div>
</div>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg></div>
<h3 class="text-xl font-bold mb-2">Healthcare Costs</h3>
<p class="text-gray-500">Medical expenses rise with age. Be prepared with adequate health coverage.</p>
</div>
<div class="text-center p-8 rounded-2xl bg-brand-50">
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg></div>
<h3 class="text-xl font-bold mb-2">Lifestyle Maintenance</h3>
<p class="text-gray-500">Maintain your current standard of living without relying on a monthly paycheck.</p>
</div>
</div>
</div>
</section>
</section>
<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 font-bold text-center mb-12">Retirement Strategies</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Annuity Plans</h3>
<p class="text-gray-500">Receive a guaranteed monthly income stream for life.</p>
<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 font-bold text-center mb-12">Retirement Strategies</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Annuity Plans</h3>
<p class="text-gray-500">Receive a guaranteed monthly income stream for life.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Dividend Portfolios</h3>
<p class="text-gray-500">Invest in stable, dividend-yielding assets for passive income.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Long-term Care</h3>
<p class="text-gray-500">Coverage for nursing homes or home care assistance if needed.</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Dividend Portfolios</h3>
<p class="text-gray-500">Invest in stable, dividend-yielding assets for passive income.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Long-term Care</h3>
<p class="text-gray-500">Coverage for nursing homes or home care assistance if needed.</p>
</div>
</div>
</div>
</section>
</section>
<section class="py-20 bg-brand-600 text-white">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Plan your golden years</h2>
<p class="text-white/80 mb-8">Connect with our experts to ensure a comfortable and secure retirement.</p>
<a href="/contact.html" class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get Started Today</a>
</div>
</section>
<section class="py-20 bg-brand-600 text-white">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Plan your golden years</h2>
<p class="text-white/80 mb-8">Connect with our experts to ensure a comfortable and secure retirement.</p>
<a href="/contact.html"
class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get
Started Today</a>
</div>
</section>
<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 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"/></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>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
<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 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" />
</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>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body>
</html>

204
site/team.html
View file

@ -1,85 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Team — Better Life SG</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>
<style>html{scroll-behavior:smooth}.hero-overlay{background:linear-gradient(135deg,rgba(0,180,154,0.85) 0%,rgba(0,77,65,0.90) 100%)}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Team — Better Life SG</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>
<style>
html {
scroll-behavior: smooth
}
.hero-overlay {
background: linear-gradient(135deg, rgba(0, 180, 154, 0.85) 0%, rgba(0, 77, 65, 0.90) 100%)
}
</style>
</head>
<body class="bg-white text-gray-800 font-sans">
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">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="text-brand-600">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>
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html" class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a href="/team.html" class="block py-2 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-[50vh] flex items-center justify-center bg-brand-600">
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Our Team</h1>
<p class="text-lg sm:text-xl text-white/90">Dedicated professionals committed to securing your future.</p>
</div>
</section>
<!-- Team Members -->
<section class="py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12">
<div class="text-center">
<img src="/images/hendri.jpg" alt="Hendri Kamarudin" class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
<h3 class="text-2xl font-bold text-brand-700">Hendri Kamarudin</h3>
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder &amp; Principal Consultant</p>
<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 class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">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="text-brand-600">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>
<div class="text-center">
<img src="/images/chris.png" alt="Chris Zheng Liyuan" class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
<h3 class="text-2xl font-bold text-brand-700">Chris Zheng Liyuan</h3>
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder &amp; Wealth Strategist</p>
<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">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html"
class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a
href="/team.html" class="block py-2 text-brand-600">Our Team</a><a href="/contact.html"
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
</div>
</div>
</section>
</nav>
<!-- Story & Vision -->
<section class="py-20 bg-gray-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-8">Our Story &amp; Vision</h2>
<div class="prose prose-lg max-w-none text-gray-600 space-y-4">
<p>Better Life SG was founded on a simple yet profound belief: everyone deserves access to transparent, comprehensive, and personalized financial planning. We recognized a gap in the industry where clients were often treated as transactions rather than lifelong partners.</p>
<p>Our philosophy is rooted in education and empowerment. We believe that the best financial decisions are made when clients fully understand their options. Whether you are a fresh graduate stepping into the workforce, a growing family planning for the future, or looking to leave a lasting legacy, our approach remains the same: we listen first, advise second.</p>
<p>Together, we bring decades of combined experience in wealth management, risk assessment, and legacy planning. Our core values of integrity, empathy, and excellence drive everything we do. We are not just here to sell policies; we are here to build a better life for you and the generations to come.</p>
</div>
</div>
</section>
<!-- Hero -->
<section class="relative min-h-[50vh] flex items-center justify-center bg-brand-600">
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Our Team</h1>
<p class="text-lg sm:text-xl text-white/90">Dedicated professionals committed to securing your future.</p>
</div>
</section>
<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 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"/></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>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
<!-- Team Members -->
<section class="py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12">
<div class="text-center">
<img src="/images/hendri.jpg" alt="Hendri Kamarudin"
class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
<h3 class="text-2xl font-bold text-brand-700">Hendri Kamarudin</h3>
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder &amp;
Principal Consultant</p>
</div>
<div class="text-center">
<img src="/images/chris.png" alt="Chris Zheng Liyuan"
class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
<h3 class="text-2xl font-bold text-brand-700">Chris Zheng Liyuan</h3>
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder &amp; Wealth
Strategist</p>
</div>
</div>
</div>
</section>
<!-- Story & Vision -->
<section class="py-20 bg-gray-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-8">Our Story &amp; Vision</h2>
<div class="prose prose-lg max-w-none text-gray-600 space-y-4">
<p>Better Life SG was founded on a simple yet profound belief: everyone deserves access to transparent,
comprehensive, and personalized financial planning. We recognized a gap in the industry where
clients were often treated as transactions rather than lifelong partners.</p>
<p>Our philosophy is rooted in education and empowerment. We believe that the best financial decisions
are made when clients fully understand their options. Whether you are a fresh graduate stepping into
the workforce, a growing family planning for the future, or looking to leave a lasting legacy, our
approach remains the same: we listen first, advise second.</p>
<p>Together, we bring decades of combined experience in wealth management, risk assessment, and legacy
planning. Our core values of integrity, empathy, and excellence drive everything we do. We are not
just here to sell policies; we are here to build a better life for you and the generations to come.
</p>
</div>
</div>
</section>
<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 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" />
</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>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body>
</html>