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

102
site/contact.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -7,16 +8,28 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { 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' }}}} 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> </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> <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> </head>
<body class="bg-white text-gray-800 font-sans"> <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"> <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"> <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> <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> <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"> <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="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a> <a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
@ -24,16 +37,22 @@
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</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="/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="/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> <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> </div>
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium"> <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> <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>
</nav> </nav>
<!-- Hero --> <!-- Hero -->
<section class="relative min-h-[50vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/contact-bg.png')"> <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="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl"> <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> <h1 class="text-4xl sm:text-5xl font-bold mb-4">Contact Us</h1>
@ -48,25 +67,34 @@
<form id="contactForm" class="space-y-6"> <form id="contactForm" class="space-y-6">
<div> <div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> <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"> <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>
<div> <div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Contact Number</label> <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"> <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>
<div> <div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> <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"> <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>
<div class="flex items-start gap-3"> <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"> <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"> <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). <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> </label>
</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> <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> </form>
<div id="formSuccess" class="hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-center"> <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. Thank you! We'll be in touch soon.
</div> </div>
</div> </div>
@ -77,8 +105,14 @@
<div class="max-w-3xl mx-auto px-4 text-center"> <div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-2xl font-bold mb-4">Prefer to chat?</h2> <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> <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"> <a href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
<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> 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 Chat on WhatsApp
</a> </a>
</div> </div>
@ -87,17 +121,42 @@
<footer class="bg-brand-900 text-white py-12"> <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-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>
<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> <h4 class="text-lg font-bold mb-3">Better Life SG</h4>
<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> <p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
</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>
<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> </div>
</footer> </footer>
<script> <script>
document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')}); document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') });
document.getElementById('contactForm').addEventListener('submit', function(e) { document.getElementById('contactForm').addEventListener('submit', function (e) {
e.preventDefault(); e.preventDefault();
var name = encodeURIComponent(document.getElementById('name').value); var name = encodeURIComponent(document.getElementById('name').value);
var phone = encodeURIComponent(document.getElementById('phone').value); var phone = encodeURIComponent(document.getElementById('phone').value);
@ -109,4 +168,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>

95
site/fresh-grads.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -7,17 +8,29 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { 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' }}}} 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> </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> <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> </head>
<body class="bg-white text-gray-800 font-sans"> <body class="bg-white text-gray-800 font-sans">
<!-- Navbar --> <!-- Navbar -->
<nav class="fixed top-0 w-full bg-white/95 backdrop-blur shadow-sm z-50"> <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"> <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> <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> <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"> <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="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="text-brand-600">Fresh Grads</a> <a href="/fresh-grads.html" class="text-brand-600">Fresh Grads</a>
@ -25,20 +38,27 @@
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</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="/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="/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> <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> </div>
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium"> <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> <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> </div>
</nav> </nav>
<!-- Hero --> <!-- 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')"> <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="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl"> <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> <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> <p class="text-lg sm:text-xl text-white/90">Build a strong financial foundation early and protect your
future.</p>
</div> </div>
</section> </section>
@ -48,17 +68,29 @@
<h2 class="text-3xl font-bold text-center mb-12">Why Insurance Matters Early</h2> <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="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Starting young means locking in lower premiums for life.</p>
</div> </div>
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Investment-linked policies benefit greatly from starting early.</p>
</div> </div>
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Focus on your career knowing you are protected against the unexpected.</p>
</div> </div>
@ -73,7 +105,8 @@
<div class="grid md:grid-cols-3 gap-8"> <div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-md"> <div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Health Coverage</h3> <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> <p class="text-gray-500">Comprehensive medical coverage before any pre-existing conditions arise.
</p>
</div> </div>
<div class="bg-white p-8 rounded-2xl shadow-md"> <div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Income Protection</h3> <h3 class="text-xl font-bold mb-2 text-brand-700">Income Protection</h3>
@ -92,7 +125,9 @@
<div class="max-w-3xl mx-auto px-4 text-center"> <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> <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> <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> <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> </div>
</section> </section>
@ -100,13 +135,39 @@
<footer class="bg-brand-900 text-white py-12"> <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-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>
<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> <h4 class="text-lg font-bold mb-3">Better Life SG</h4>
<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> <p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
</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>
<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> </div>
</footer> </footer>
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script> <script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body> </body>
</html> </html>

74
site/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,17 +11,23 @@
theme: { theme: {
extend: { extend: {
colors: { colors: {
brand: { 50:'#e6f7f5', 100:'#b3e8e0', 200:'#80d9cc', 300:'#4dcab8', 400:'#26bfa8', 500:'#00b49a', 600:'#009e87', 700:'#008571', 800:'#006b5b', 900:'#004d41' }, brand: { 50: '#e6f7f5', 100: '#b3e8e0', 200: '#80d9cc', 300: '#4dcab8', 400: '#26bfa8', 500: '#00b49a', 600: '#009e87', 700: '#008571', 800: '#006b5b', 900: '#004d41' },
} }
} }
} }
} }
</script> </script>
<style> <style>
html { scroll-behavior: smooth; } html {
.hero-overlay { background: linear-gradient(135deg, rgba(0,180,154,0.85) 0%, rgba(0,77,65,0.90) 100%); } scroll-behavior: smooth;
}
.hero-overlay {
background: linear-gradient(135deg, rgba(0, 180, 154, 0.85) 0%, rgba(0, 77, 65, 0.90) 100%);
}
</style> </style>
</head> </head>
<body class="bg-white text-gray-800 font-sans"> <body class="bg-white text-gray-800 font-sans">
<!-- Navbar --> <!-- Navbar -->
@ -28,7 +35,9 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16"> <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> <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"> <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> <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> </button>
<div id="navMenu" class="hidden md:flex items-center gap-6 text-sm font-medium"> <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="/" class="text-brand-600">Home</a>
@ -37,7 +46,8 @@
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</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="/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="/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> <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> </div>
<!-- Mobile menu --> <!-- Mobile menu -->
@ -53,12 +63,16 @@
</nav> </nav>
<!-- Hero --> <!-- Hero -->
<section class="relative min-h-[90vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/hero-bg.png')"> <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="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl"> <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> <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> <p class="text-lg sm:text-xl md:text-2xl mb-8 text-white/90">Why settle for good when you can have it
<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> 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> </div>
</section> </section>
@ -66,16 +80,20 @@
<section class="py-20 bg-gray-50"> <section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <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> <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> <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"> <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Fresh Grads --> <!-- Fresh Grads -->
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group"> <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="h-48 bg-cover bg-center" style="background-image:url('/images/fresh-grads-bg.png')">
</div>
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-bold mb-2 text-brand-700">Fresh Graduates</h3> <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> <p class="text-gray-500 text-sm mb-4">Start your career with confidence. Build a strong
<a href="/fresh-grads.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a> financial foundation early.</p>
<a href="/fresh-grads.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
Plans →</a>
</div> </div>
</div> </div>
@ -84,18 +102,23 @@
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/prenatal-bg.jpg')"></div> <div class="h-48 bg-cover bg-center" style="background-image:url('/images/prenatal-bg.jpg')"></div>
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-bold mb-2 text-brand-700">Prenatal &amp; Family</h3> <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> <p class="text-gray-500 text-sm mb-4">Protect your growing family. Secure their future from day
<a href="/prenatal.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a> one.</p>
<a href="/prenatal.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
Plans →</a>
</div> </div>
</div> </div>
<!-- Retirement --> <!-- Retirement -->
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group"> <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="h-48 bg-cover bg-center" style="background-image:url('/images/retirement-bg.png')">
</div>
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-bold mb-2 text-brand-700">Retirement Planning</h3> <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> <p class="text-gray-500 text-sm mb-4">Plan for your golden years. Ensure a comfortable and
<a href="/retirement.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a> stress-free retirement.</p>
<a href="/retirement.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
Plans →</a>
</div> </div>
</div> </div>
@ -104,8 +127,10 @@
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/legacy-bg.png')"></div> <div class="h-48 bg-cover bg-center" style="background-image:url('/images/legacy-bg.png')"></div>
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-bold mb-2 text-brand-700">Legacy &amp; Wealth</h3> <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> <p class="text-gray-500 text-sm mb-4">Leave a lasting impact. Structure your wealth transfer
<a href="/legacy.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a> efficiently.</p>
<a href="/legacy.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
Plans →</a>
</div> </div>
</div> </div>
</div> </div>
@ -134,8 +159,14 @@
</div> </div>
<div> <div>
<h4 class="text-lg font-bold mb-3">Get in Touch</h4> <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"> <a href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
<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> 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 Chat on WhatsApp
</a> </a>
</div> </div>
@ -152,4 +183,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>

101
site/legacy.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -7,16 +8,28 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { 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' }}}} 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> </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> <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> </head>
<body class="bg-white text-gray-800 font-sans"> <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"> <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"> <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> <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> <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"> <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="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a> <a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
@ -24,19 +37,26 @@
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</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="/legacy.html" class="text-brand-600">Legacy</a>
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</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> <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> </div>
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium"> <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> <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> </div>
</nav> </nav>
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/legacy-bg.png')"> <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="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl"> <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> <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> <p class="text-lg sm:text-xl text-white/90">Ensure your wealth is transferred smoothly to the next
generation.</p>
</div> </div>
</section> </section>
@ -45,19 +65,34 @@
<h2 class="text-3xl font-bold text-center mb-12">The Importance of Legacy Planning</h2> <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="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Distribute your assets fairly among your heirs without liquidating
businesses.</p>
</div> </div>
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Minimize estate taxes and ensure your beneficiaries receive the maximum
value.</p>
</div> </div>
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Ensure a smooth transition of your business to the next generation or
partners.</p>
</div> </div>
</div> </div>
</div> </div>
@ -87,20 +122,48 @@
<div class="max-w-3xl mx-auto px-4 text-center"> <div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Leave a lasting legacy</h2> <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> <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> <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> </div>
</section> </section>
<footer class="bg-brand-900 text-white py-12"> <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-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>
<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> <h4 class="text-lg font-bold mb-3">Better Life SG</h4>
<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> <p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
</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>
<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> </div>
</footer> </footer>
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script> <script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body> </body>
</html> </html>

92
site/prenatal.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -7,16 +8,28 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { 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' }}}} 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> </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> <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> </head>
<body class="bg-white text-gray-800 font-sans"> <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"> <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"> <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> <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> <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"> <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="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a> <a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
@ -24,15 +37,21 @@
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</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="/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="/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> <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> </div>
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium"> <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> <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> </div>
</nav> </nav>
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/prenatal-bg.jpg')"> <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="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl"> <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> <h1 class="text-4xl sm:text-5xl font-bold mb-4">Protect Your Growing Family</h1>
@ -45,17 +64,29 @@
<h2 class="text-3xl font-bold text-center mb-12">Why Prenatal Insurance?</h2> <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="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <h3 class="text-xl font-bold mb-2">Maternity Coverage</h3>
<p class="text-gray-500">Protection against pregnancy complications and congenital conditions.</p> <p class="text-gray-500">Protection against pregnancy complications and congenital conditions.</p>
</div> </div>
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Guaranteed coverage for your baby from the moment they are born.</p>
</div> </div>
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Start saving early for your child's future education needs.</p>
</div> </div>
@ -73,7 +104,8 @@
</div> </div>
<div class="bg-white p-8 rounded-2xl shadow-md"> <div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-xl font-bold mb-2 text-brand-700">Transferable Policies</h3> <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> <p class="text-gray-500">Easily transfer the life policy to your child without medical underwriting.
</p>
</div> </div>
<div class="bg-white p-8 rounded-2xl shadow-md"> <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> <h3 class="text-xl font-bold mb-2 text-brand-700">Mental Health Support</h3>
@ -87,20 +119,48 @@
<div class="max-w-3xl mx-auto px-4 text-center"> <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> <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> <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> <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> </div>
</section> </section>
<footer class="bg-brand-900 text-white py-12"> <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-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>
<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> <h4 class="text-lg font-bold mb-3">Better Life SG</h4>
<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> <p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
</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>
<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> </div>
</footer> </footer>
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script> <script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body> </body>
</html> </html>

101
site/retirement.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -7,16 +8,28 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { 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' }}}} 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> </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> <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> </head>
<body class="bg-white text-gray-800 font-sans"> <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"> <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"> <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> <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> <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"> <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="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a> <a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
@ -24,19 +37,26 @@
<a href="/retirement.html" class="text-brand-600">Retirement</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="/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="/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> <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> </div>
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium"> <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> <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> </div>
</nav> </nav>
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/retirement-bg.png')"> <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="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center text-white px-4 max-w-3xl"> <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> <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> <p class="text-lg sm:text-xl text-white/90">Ensure a comfortable, stress-free lifestyle when you stop
working.</p>
</div> </div>
</section> </section>
@ -45,19 +65,34 @@
<h2 class="text-3xl font-bold text-center mb-12">Why Plan for Retirement Now?</h2> <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="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Ensure your savings outpace inflation so your purchasing power remains
strong.</p>
</div> </div>
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Medical expenses rise with age. Be prepared with adequate health coverage.
</p>
</div> </div>
<div class="text-center p-8 rounded-2xl bg-brand-50"> <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> <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> <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> <p class="text-gray-500">Maintain your current standard of living without relying on a monthly
paycheck.</p>
</div> </div>
</div> </div>
</div> </div>
@ -87,20 +122,48 @@
<div class="max-w-3xl mx-auto px-4 text-center"> <div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Plan your golden years</h2> <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> <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> <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> </div>
</section> </section>
<footer class="bg-brand-900 text-white py-12"> <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-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>
<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> <h4 class="text-lg font-bold mb-3">Better Life SG</h4>
<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> <p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
</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>
<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> </div>
</footer> </footer>
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script> <script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body> </body>
</html> </html>

90
site/team.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -7,16 +8,28 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { 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' }}}} 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> </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> <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> </head>
<body class="bg-white text-gray-800 font-sans"> <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"> <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"> <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> <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> <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"> <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="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a> <a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
@ -24,11 +37,16 @@
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</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="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
<a href="/team.html" class="text-brand-600">Our Team</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> <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> </div>
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium"> <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> <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>
</nav> </nav>
@ -45,14 +63,18 @@
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> <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="grid md:grid-cols-2 gap-12">
<div class="text-center"> <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"> <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> <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> <p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder &amp;
Principal Consultant</p>
</div> </div>
<div class="text-center"> <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"> <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> <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> <p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder &amp; Wealth
Strategist</p>
</div> </div>
</div> </div>
</div> </div>
@ -63,9 +85,17 @@
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <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> <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"> <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>Better Life SG was founded on a simple yet profound belief: everyone deserves access to transparent,
<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> comprehensive, and personalized financial planning. We recognized a gap in the industry where
<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> 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>
</div> </div>
</section> </section>
@ -73,13 +103,39 @@
<footer class="bg-brand-900 text-white py-12"> <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-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>
<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> <h4 class="text-lg font-bold mb-3">Better Life SG</h4>
<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> <p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
</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>
<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> </div>
</footer> </footer>
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script> <script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
</body> </body>
</html> </html>