Refactor team.html for improved readability and structure; update styles and layout for consistency
This commit is contained in:
parent
f9f6f80347
commit
f67b356dfe
7 changed files with 1087 additions and 692 deletions
|
|
@ -1,112 +1,172 @@
|
||||||
<!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">
|
||||||
<title>Contact Us — Better Life SG</title>
|
<title>Contact Us — Better Life SG</title>
|
||||||
<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"
|
||||||
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
</svg></button>
|
||||||
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</a>
|
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
||||||
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
||||||
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
||||||
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</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="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
||||||
</div>
|
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
||||||
</div>
|
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
||||||
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
<a href="/contact.html"
|
||||||
<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>
|
class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition">Contact Us</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-[50vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/contact-bg.png')">
|
|
||||||
<div class="hero-overlay absolute inset-0"></div>
|
|
||||||
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
|
||||||
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Contact Us</h1>
|
|
||||||
<p class="text-lg sm:text-xl text-white/90">We're here to help you plan for a better tomorrow.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Contact Form -->
|
|
||||||
<section class="py-20">
|
|
||||||
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<h2 class="text-3xl font-bold text-center mb-8">Send us a message</h2>
|
|
||||||
<form id="contactForm" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
|
|
||||||
<input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
|
|
||||||
</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">
|
||||||
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Contact Number</label>
|
<a href="/" class="block py-2">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
|
||||||
<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">
|
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>
|
||||||
<div>
|
</nav>
|
||||||
<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">
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-[50vh] flex items-center justify-center bg-cover bg-center"
|
||||||
|
style="background-image:url('/images/contact-bg.png')">
|
||||||
|
<div class="hero-overlay absolute inset-0"></div>
|
||||||
|
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
||||||
|
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Contact Us</h1>
|
||||||
|
<p class="text-lg sm:text-xl text-white/90">We're here to help you plan for a better tomorrow.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-start gap-3">
|
</section>
|
||||||
<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">
|
<!-- Contact Form -->
|
||||||
<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).
|
<section class="py-20">
|
||||||
</label>
|
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-8">Send us a message</h2>
|
||||||
|
<form id="contactForm" class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
|
||||||
|
<input type="text" id="name" name="name" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Contact Number</label>
|
||||||
|
<input type="tel" id="phone" name="phone" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
|
||||||
|
<input type="email" id="email" name="email" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<input type="checkbox" id="pdpa" name="pdpa" required
|
||||||
|
class="mt-1 w-4 h-4 text-brand-500 border-gray-300 rounded focus:ring-brand-500">
|
||||||
|
<label for="pdpa" class="text-sm text-gray-600">
|
||||||
|
<strong>PDPA Consent</strong> — By submitting this form, I hereby consent to Better Life
|
||||||
|
collecting, using, and disclosing my personal data for the purposes of contacting me regarding
|
||||||
|
my inquiry, in accordance with the Singapore Personal Data Protection Act (PDPA).
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-brand-500 text-white font-semibold py-3 px-6 rounded-lg hover:bg-brand-600 transition text-lg">Submit
|
||||||
|
Inquiry</button>
|
||||||
|
</form>
|
||||||
|
<div id="formSuccess"
|
||||||
|
class="hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-center">
|
||||||
|
Thank you! We'll be in touch soon.
|
||||||
|
</div>
|
||||||
</div>
|
</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>
|
</section>
|
||||||
</form>
|
|
||||||
<div id="formSuccess" class="hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-center">
|
|
||||||
Thank you! We'll be in touch soon.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- WhatsApp CTA -->
|
<!-- WhatsApp CTA -->
|
||||||
<section class="py-16 bg-brand-50">
|
<section class="py-16 bg-brand-50">
|
||||||
<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">
|
||||||
Chat on WhatsApp
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||||
</a>
|
<path
|
||||||
</div>
|
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" />
|
||||||
</section>
|
<path
|
||||||
|
d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
|
||||||
|
</svg>
|
||||||
|
Chat on WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<footer class="bg-brand-900 text-white py-12">
|
<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>
|
||||||
</div>
|
<h4 class="text-lg font-bold mb-3">Quick Links</h4>
|
||||||
</footer>
|
<ul class="space-y-1 text-sm text-white/70">
|
||||||
|
<li><a href="/" class="hover:text-white transition">Home</a></li>
|
||||||
|
<li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li>
|
||||||
|
<li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li>
|
||||||
|
<li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li>
|
||||||
|
<li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li>
|
||||||
|
<li><a href="/team.html" class="hover:text-white transition">Our Team</a></li>
|
||||||
|
<li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Get in Touch</h4><a
|
||||||
|
href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
|
||||||
|
class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium"><svg
|
||||||
|
class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
|
||||||
|
<path
|
||||||
|
d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
|
||||||
|
</svg>Chat on WhatsApp</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">© 2026 Better Life SG. All
|
||||||
|
rights reserved.</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<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);
|
||||||
var email = encodeURIComponent(document.getElementById('email').value);
|
var email = encodeURIComponent(document.getElementById('email').value);
|
||||||
var msg = 'Hi, I am ' + decodeURIComponent(name) + '. My email is ' + decodeURIComponent(email) + ' and my number is ' + decodeURIComponent(phone) + '. I am interested in Better Life.';
|
var msg = 'Hi, I am ' + decodeURIComponent(name) + '. My email is ' + decodeURIComponent(email) + ' and my number is ' + decodeURIComponent(phone) + '. I am interested in Better Life.';
|
||||||
window.open('https://wa.me/6583226533?text=' + encodeURIComponent(msg), '_blank');
|
window.open('https://wa.me/6583226533?text=' + encodeURIComponent(msg), '_blank');
|
||||||
this.classList.add('hidden');
|
this.classList.add('hidden');
|
||||||
document.getElementById('formSuccess').classList.remove('hidden');
|
document.getElementById('formSuccess').classList.remove('hidden');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,112 +1,173 @@
|
||||||
<!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">
|
||||||
<title>Fresh Graduates — Better Life SG</title>
|
<title>Fresh Graduates — Better Life SG</title>
|
||||||
<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"
|
||||||
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<a href="/fresh-grads.html" class="text-brand-600">Fresh Grads</a>
|
</svg></button>
|
||||||
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</a>
|
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
||||||
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
||||||
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
<a href="/fresh-grads.html" class="text-brand-600">Fresh Grads</a>
|
||||||
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</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="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
||||||
</div>
|
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
||||||
</div>
|
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
||||||
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
<a href="/contact.html"
|
||||||
<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>
|
class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition">Contact Us</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
||||||
|
<a href="/" class="block py-2">Home</a><a href="/fresh-grads.html" class="block py-2 text-brand-600">Fresh
|
||||||
|
Grads</a><a href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html"
|
||||||
|
class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a
|
||||||
|
href="/team.html" class="block py-2">Our Team</a><a href="/contact.html"
|
||||||
|
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<!-- Hero -->
|
<!-- 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"
|
||||||
<div class="hero-overlay absolute inset-0"></div>
|
style="background-image:url('/images/fresh-grads-bg.png')">
|
||||||
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
<div class="hero-overlay absolute inset-0"></div>
|
||||||
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Start Your Career with Confidence</h1>
|
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
||||||
<p class="text-lg sm:text-xl text-white/90">Build a strong financial foundation early and protect your future.</p>
|
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Start Your Career with Confidence</h1>
|
||||||
</div>
|
<p class="text-lg sm:text-xl text-white/90">Build a strong financial foundation early and protect your
|
||||||
</section>
|
future.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Why Insurance Matters Early -->
|
<!-- Why Insurance Matters Early -->
|
||||||
<section class="py-20">
|
<section class="py-20">
|
||||||
<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 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
|
||||||
<h3 class="text-xl font-bold mb-2">Lower Premiums</h3>
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<p class="text-gray-500">Starting young means locking in lower premiums for life.</p>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Lower Premiums</h3>
|
||||||
|
<p class="text-gray-500">Starting young means locking in lower premiums for life.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
||||||
|
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
|
||||||
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Compound Growth</h3>
|
||||||
|
<p class="text-gray-500">Investment-linked policies benefit greatly from starting early.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
||||||
|
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
|
||||||
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Peace of Mind</h3>
|
||||||
|
<p class="text-gray-500">Focus on your career knowing you are protected against the unexpected.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
</section>
|
||||||
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Compound Growth</h3>
|
|
||||||
<p class="text-gray-500">Investment-linked policies benefit greatly from starting early.</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
|
||||||
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Peace of Mind</h3>
|
|
||||||
<p class="text-gray-500">Focus on your career knowing you are protected against the unexpected.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Benefits -->
|
<!-- Benefits -->
|
||||||
<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 font-bold text-center mb-12">Benefits of Early Planning</h2>
|
<h2 class="text-3xl font-bold text-center mb-12">Benefits of Early Planning</h2>
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
<div class="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 class="bg-white p-8 rounded-2xl shadow-md">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Income Protection</h3>
|
||||||
|
<p class="text-gray-500">Safeguard your earning potential against accidents or illnesses.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Wealth Accumulation</h3>
|
||||||
|
<p class="text-gray-500">Start building your wealth portfolio with disciplined savings.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
</section>
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Income Protection</h3>
|
|
||||||
<p class="text-gray-500">Safeguard your earning potential against accidents or illnesses.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Wealth Accumulation</h3>
|
|
||||||
<p class="text-gray-500">Start building your wealth portfolio with disciplined savings.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section class="py-20 bg-brand-600 text-white">
|
<section class="py-20 bg-brand-600 text-white">
|
||||||
<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"
|
||||||
</div>
|
class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get
|
||||||
</section>
|
Started Today</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<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>
|
||||||
</div>
|
<h4 class="text-lg font-bold mb-3">Quick Links</h4>
|
||||||
</footer>
|
<ul class="space-y-1 text-sm text-white/70">
|
||||||
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
|
<li><a href="/" class="hover:text-white transition">Home</a></li>
|
||||||
|
<li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li>
|
||||||
|
<li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li>
|
||||||
|
<li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li>
|
||||||
|
<li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li>
|
||||||
|
<li><a href="/team.html" class="hover:text-white transition">Our Team</a></li>
|
||||||
|
<li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Get in Touch</h4><a
|
||||||
|
href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
|
||||||
|
class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium"><svg
|
||||||
|
class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
|
||||||
|
<path
|
||||||
|
d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
|
||||||
|
</svg>Chat on WhatsApp</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">© 2026 Better Life SG. All
|
||||||
|
rights reserved.</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
312
site/index.html
312
site/index.html
|
|
@ -1,155 +1,187 @@
|
||||||
<!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">
|
||||||
<title>Better Life SG — Insurance for Every Stage of Life</title>
|
<title>Better Life SG — Insurance for Every Stage of Life</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script>
|
<script>
|
||||||
tailwind.config = {
|
tailwind.config = {
|
||||||
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>
|
||||||
}
|
<style>
|
||||||
</script>
|
html {
|
||||||
<style>
|
scroll-behavior: smooth;
|
||||||
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>
|
.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">
|
<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">
|
||||||
</button>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<div id="navMenu" class="hidden md:flex items-center gap-6 text-sm font-medium">
|
</svg>
|
||||||
<a href="/" class="text-brand-600">Home</a>
|
</button>
|
||||||
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
<div id="navMenu" class="hidden md:flex items-center gap-6 text-sm font-medium">
|
||||||
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</a>
|
<a href="/" class="text-brand-600">Home</a>
|
||||||
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
||||||
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</a>
|
||||||
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</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="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
||||||
</div>
|
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
||||||
</div>
|
<a href="/contact.html"
|
||||||
<!-- Mobile menu -->
|
class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition">Contact Us</a>
|
||||||
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
</div>
|
||||||
<a href="/" class="block py-2 text-brand-600">Home</a>
|
|
||||||
<a href="/fresh-grads.html" class="block py-2 hover:text-brand-600">Fresh Grads</a>
|
|
||||||
<a href="/prenatal.html" class="block py-2 hover:text-brand-600">Prenatal</a>
|
|
||||||
<a href="/retirement.html" class="block py-2 hover:text-brand-600">Retirement</a>
|
|
||||||
<a href="/legacy.html" class="block py-2 hover:text-brand-600">Legacy</a>
|
|
||||||
<a href="/team.html" class="block py-2 hover:text-brand-600">Our Team</a>
|
|
||||||
<a href="/contact.html" class="block py-2 text-brand-500 font-semibold">Contact Us</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-[90vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/hero-bg.png')">
|
|
||||||
<div class="hero-overlay absolute inset-0"></div>
|
|
||||||
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
|
||||||
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6">Better Life</h1>
|
|
||||||
<p class="text-lg sm:text-xl md:text-2xl mb-8 text-white/90">Why settle for good when you can have it better?</p>
|
|
||||||
<a href="/contact.html" class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Start Planning</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Cards -->
|
|
||||||
<section class="py-20 bg-gray-50">
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Insurance for Every Stage of Life</h2>
|
|
||||||
<p class="text-center text-gray-500 mb-14 max-w-2xl mx-auto">Discover tailored plans designed to protect you and your loved ones.</p>
|
|
||||||
|
|
||||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
||||||
<!-- Fresh Grads -->
|
|
||||||
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
|
||||||
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/fresh-grads-bg.png')"></div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Fresh Graduates</h3>
|
|
||||||
<p class="text-gray-500 text-sm mb-4">Start your career with confidence. Build a strong financial foundation early.</p>
|
|
||||||
<a href="/fresh-grads.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Mobile menu -->
|
||||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
||||||
|
<a href="/" class="block py-2 text-brand-600">Home</a>
|
||||||
|
<a href="/fresh-grads.html" class="block py-2 hover:text-brand-600">Fresh Grads</a>
|
||||||
|
<a href="/prenatal.html" class="block py-2 hover:text-brand-600">Prenatal</a>
|
||||||
|
<a href="/retirement.html" class="block py-2 hover:text-brand-600">Retirement</a>
|
||||||
|
<a href="/legacy.html" class="block py-2 hover:text-brand-600">Legacy</a>
|
||||||
|
<a href="/team.html" class="block py-2 hover:text-brand-600">Our Team</a>
|
||||||
|
<a href="/contact.html" class="block py-2 text-brand-500 font-semibold">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<!-- Prenatal -->
|
<!-- Hero -->
|
||||||
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
<section class="relative min-h-[90vh] flex items-center justify-center bg-cover bg-center"
|
||||||
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/prenatal-bg.jpg')"></div>
|
style="background-image:url('/images/hero-bg.png')">
|
||||||
<div class="p-6">
|
<div class="hero-overlay absolute inset-0"></div>
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Prenatal & Family</h3>
|
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
||||||
<p class="text-gray-500 text-sm mb-4">Protect your growing family. Secure their future from day one.</p>
|
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6">Better Life</h1>
|
||||||
<a href="/prenatal.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a>
|
<p class="text-lg sm:text-xl md:text-2xl mb-8 text-white/90">Why settle for good when you can have it
|
||||||
</div>
|
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>
|
||||||
|
|
||||||
<!-- Retirement -->
|
<!-- Cards -->
|
||||||
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
<section class="py-20 bg-gray-50">
|
||||||
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/retirement-bg.png')"></div>
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div class="p-6">
|
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Insurance for Every Stage of Life</h2>
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Retirement Planning</h3>
|
<p class="text-center text-gray-500 mb-14 max-w-2xl mx-auto">Discover tailored plans designed to protect you
|
||||||
<p class="text-gray-500 text-sm mb-4">Plan for your golden years. Ensure a comfortable and stress-free retirement.</p>
|
and your loved ones.</p>
|
||||||
<a href="/retirement.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Legacy -->
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
<!-- Fresh Grads -->
|
||||||
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/legacy-bg.png')"></div>
|
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
||||||
<div class="p-6">
|
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/fresh-grads-bg.png')">
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Legacy & Wealth</h3>
|
</div>
|
||||||
<p class="text-gray-500 text-sm mb-4">Leave a lasting impact. Structure your wealth transfer efficiently.</p>
|
<div class="p-6">
|
||||||
<a href="/legacy.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore Plans →</a>
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Fresh Graduates</h3>
|
||||||
</div>
|
<p class="text-gray-500 text-sm mb-4">Start your career with confidence. Build a strong
|
||||||
</div>
|
financial foundation early.</p>
|
||||||
</div>
|
<a href="/fresh-grads.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
|
||||||
</div>
|
Plans →</a>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Prenatal -->
|
||||||
<footer class="bg-brand-900 text-white py-12">
|
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/prenatal-bg.jpg')"></div>
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
<div class="p-6">
|
||||||
<div>
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Prenatal & Family</h3>
|
||||||
<h4 class="text-lg font-bold mb-3">Better Life SG</h4>
|
<p class="text-gray-500 text-sm mb-4">Protect your growing family. Secure their future from day
|
||||||
<p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
|
one.</p>
|
||||||
</div>
|
<a href="/prenatal.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
|
||||||
<div>
|
Plans →</a>
|
||||||
<h4 class="text-lg font-bold mb-3">Quick Links</h4>
|
</div>
|
||||||
<ul class="space-y-1 text-sm text-white/70">
|
</div>
|
||||||
<li><a href="/" class="hover:text-white transition">Home</a></li>
|
|
||||||
<li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li>
|
|
||||||
<li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li>
|
|
||||||
<li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li>
|
|
||||||
<li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li>
|
|
||||||
<li><a href="/team.html" class="hover:text-white transition">Our Team</a></li>
|
|
||||||
<li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="text-lg font-bold mb-3">Get in Touch</h4>
|
|
||||||
<a href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life" class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium">
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z"/></svg>
|
|
||||||
Chat on WhatsApp
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">
|
|
||||||
© 2026 Better Life SG. All rights reserved.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
<!-- Retirement -->
|
||||||
document.getElementById('navToggle').addEventListener('click', () => {
|
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
||||||
document.getElementById('mobileMenu').classList.toggle('hidden');
|
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/retirement-bg.png')">
|
||||||
});
|
</div>
|
||||||
</script>
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Retirement Planning</h3>
|
||||||
|
<p class="text-gray-500 text-sm mb-4">Plan for your golden years. Ensure a comfortable and
|
||||||
|
stress-free retirement.</p>
|
||||||
|
<a href="/retirement.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
|
||||||
|
Plans →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Legacy -->
|
||||||
|
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition overflow-hidden group">
|
||||||
|
<div class="h-48 bg-cover bg-center" style="background-image:url('/images/legacy-bg.png')"></div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Legacy & Wealth</h3>
|
||||||
|
<p class="text-gray-500 text-sm mb-4">Leave a lasting impact. Structure your wealth transfer
|
||||||
|
efficiently.</p>
|
||||||
|
<a href="/legacy.html" class="text-brand-500 font-semibold text-sm hover:underline">Explore
|
||||||
|
Plans →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-brand-900 text-white py-12">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Better Life SG</h4>
|
||||||
|
<p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Quick Links</h4>
|
||||||
|
<ul class="space-y-1 text-sm text-white/70">
|
||||||
|
<li><a href="/" class="hover:text-white transition">Home</a></li>
|
||||||
|
<li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li>
|
||||||
|
<li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li>
|
||||||
|
<li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li>
|
||||||
|
<li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li>
|
||||||
|
<li><a href="/team.html" class="hover:text-white transition">Our Team</a></li>
|
||||||
|
<li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Get in Touch</h4>
|
||||||
|
<a href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
|
||||||
|
class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium">
|
||||||
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
|
||||||
|
<path
|
||||||
|
d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
|
||||||
|
</svg>
|
||||||
|
Chat on WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">
|
||||||
|
© 2026 Better Life SG. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('navToggle').addEventListener('click', () => {
|
||||||
|
document.getElementById('mobileMenu').classList.toggle('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
249
site/legacy.html
249
site/legacy.html
|
|
@ -1,106 +1,169 @@
|
||||||
<!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">
|
||||||
<title>Legacy & Wealth — Better Life SG</title>
|
<title>Legacy & Wealth — Better Life SG</title>
|
||||||
<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"
|
||||||
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
</svg></button>
|
||||||
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</a>
|
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
||||||
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
||||||
<a href="/legacy.html" class="text-brand-600">Legacy</a>
|
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
||||||
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</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="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
||||||
</div>
|
<a href="/legacy.html" class="text-brand-600">Legacy</a>
|
||||||
</div>
|
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
||||||
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
<a href="/contact.html"
|
||||||
<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>
|
class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition">Contact Us</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
||||||
|
<a href="/" class="block py-2">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
|
||||||
|
href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html"
|
||||||
|
class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2 text-brand-600">Legacy</a><a
|
||||||
|
href="/team.html" class="block py-2">Our Team</a><a href="/contact.html"
|
||||||
|
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/legacy-bg.png')">
|
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center"
|
||||||
<div class="hero-overlay absolute inset-0"></div>
|
style="background-image:url('/images/legacy-bg.png')">
|
||||||
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
<div class="hero-overlay absolute inset-0"></div>
|
||||||
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Leave a Lasting Legacy</h1>
|
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
||||||
<p class="text-lg sm:text-xl text-white/90">Ensure your wealth is transferred smoothly to the next generation.</p>
|
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Leave a Lasting Legacy</h1>
|
||||||
</div>
|
<p class="text-lg sm:text-xl text-white/90">Ensure your wealth is transferred smoothly to the next
|
||||||
</section>
|
generation.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="py-20">
|
<section class="py-20">
|
||||||
<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 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
|
||||||
<h3 class="text-xl font-bold mb-2">Estate Equalization</h3>
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<p class="text-gray-500">Distribute your assets fairly among your heirs without liquidating businesses.</p>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Estate Equalization</h3>
|
||||||
|
<p class="text-gray-500">Distribute your assets fairly among your heirs without liquidating
|
||||||
|
businesses.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
||||||
|
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
|
||||||
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Tax Efficiency</h3>
|
||||||
|
<p class="text-gray-500">Minimize estate taxes and ensure your beneficiaries receive the maximum
|
||||||
|
value.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
||||||
|
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
|
||||||
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Business Succession</h3>
|
||||||
|
<p class="text-gray-500">Ensure a smooth transition of your business to the next generation or
|
||||||
|
partners.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
</section>
|
||||||
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/></svg></div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Tax Efficiency</h3>
|
|
||||||
<p class="text-gray-500">Minimize estate taxes and ensure your beneficiaries receive the maximum value.</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
|
||||||
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Business Succession</h3>
|
|
||||||
<p class="text-gray-500">Ensure a smooth transition of your business to the next generation or partners.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section 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 font-bold text-center mb-12">Legacy Solutions</h2>
|
<h2 class="text-3xl font-bold text-center mb-12">Legacy Solutions</h2>
|
||||||
<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">Universal Life Insurance</h3>
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Universal Life Insurance</h3>
|
||||||
<p class="text-gray-500">High coverage amounts designed specifically for wealth transfer.</p>
|
<p class="text-gray-500">High coverage amounts designed specifically for wealth transfer.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Trust Structures</h3>
|
||||||
|
<p class="text-gray-500">Protect assets from creditors and control how funds are distributed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Keyman Insurance</h3>
|
||||||
|
<p class="text-gray-500">Protect your business against the loss of crucial personnel.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
</section>
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Trust Structures</h3>
|
|
||||||
<p class="text-gray-500">Protect assets from creditors and control how funds are distributed.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Keyman Insurance</h3>
|
|
||||||
<p class="text-gray-500">Protect your business against the loss of crucial personnel.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="py-20 bg-brand-600 text-white">
|
<section class="py-20 bg-brand-600 text-white">
|
||||||
<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"
|
||||||
</div>
|
class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get
|
||||||
</section>
|
Started Today</a>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
</div>
|
<h4 class="text-lg font-bold mb-3">Quick Links</h4>
|
||||||
</footer>
|
<ul class="space-y-1 text-sm text-white/70">
|
||||||
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
|
<li><a href="/" class="hover:text-white transition">Home</a></li>
|
||||||
|
<li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li>
|
||||||
|
<li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li>
|
||||||
|
<li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li>
|
||||||
|
<li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li>
|
||||||
|
<li><a href="/team.html" class="hover:text-white transition">Our Team</a></li>
|
||||||
|
<li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Get in Touch</h4><a
|
||||||
|
href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
|
||||||
|
class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium"><svg
|
||||||
|
class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
|
||||||
|
<path
|
||||||
|
d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
|
||||||
|
</svg>Chat on WhatsApp</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">© 2026 Better Life SG. All
|
||||||
|
rights reserved.</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,106 +1,166 @@
|
||||||
<!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">
|
||||||
<title>Prenatal & Family — Better Life SG</title>
|
<title>Prenatal & Family — Better Life SG</title>
|
||||||
<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"
|
||||||
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
</svg></button>
|
||||||
<a href="/prenatal.html" class="text-brand-600">Prenatal</a>
|
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
||||||
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
||||||
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
||||||
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
<a href="/prenatal.html" class="text-brand-600">Prenatal</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="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
||||||
</div>
|
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
||||||
</div>
|
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
||||||
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
<a href="/contact.html"
|
||||||
<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>
|
class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition">Contact Us</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
||||||
|
<a href="/" class="block py-2">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
|
||||||
|
href="/prenatal.html" class="block py-2 text-brand-600">Prenatal</a><a href="/retirement.html"
|
||||||
|
class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a
|
||||||
|
href="/team.html" class="block py-2">Our Team</a><a href="/contact.html"
|
||||||
|
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/prenatal-bg.jpg')">
|
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center"
|
||||||
<div class="hero-overlay absolute inset-0"></div>
|
style="background-image:url('/images/prenatal-bg.jpg')">
|
||||||
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
<div class="hero-overlay absolute inset-0"></div>
|
||||||
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Protect Your Growing Family</h1>
|
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
||||||
<p class="text-lg sm:text-xl text-white/90">Comprehensive coverage from pregnancy to parenthood.</p>
|
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Protect Your Growing Family</h1>
|
||||||
</div>
|
<p class="text-lg sm:text-xl text-white/90">Comprehensive coverage from pregnancy to parenthood.</p>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="py-20">
|
<section class="py-20">
|
||||||
<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 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
|
||||||
<h3 class="text-xl font-bold mb-2">Maternity Coverage</h3>
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<p class="text-gray-500">Protection against pregnancy complications and congenital conditions.</p>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Maternity Coverage</h3>
|
||||||
|
<p class="text-gray-500">Protection against pregnancy complications and congenital conditions.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
||||||
|
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
|
||||||
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Newborn Protection</h3>
|
||||||
|
<p class="text-gray-500">Guaranteed coverage for your baby from the moment they are born.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
||||||
|
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
|
||||||
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Education Funds</h3>
|
||||||
|
<p class="text-gray-500">Start saving early for your child's future education needs.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
</section>
|
||||||
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/></svg></div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Newborn Protection</h3>
|
|
||||||
<p class="text-gray-500">Guaranteed coverage for your baby from the moment they are born.</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
|
||||||
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Education Funds</h3>
|
|
||||||
<p class="text-gray-500">Start saving early for your child's future education needs.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section 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 font-bold text-center mb-12">Key Features</h2>
|
<h2 class="text-3xl font-bold text-center mb-12">Key Features</h2>
|
||||||
<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">Hospital Cash Benefit</h3>
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Hospital Cash Benefit</h3>
|
||||||
<p class="text-gray-500">Daily cash payouts during hospital stays for mother or baby.</p>
|
<p class="text-gray-500">Daily cash payouts during hospital stays for mother or baby.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Transferable Policies</h3>
|
||||||
|
<p class="text-gray-500">Easily transfer the life policy to your child without medical underwriting.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Mental Health Support</h3>
|
||||||
|
<p class="text-gray-500">Coverage for postpartum depression and related mental health needs.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
</section>
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Transferable Policies</h3>
|
|
||||||
<p class="text-gray-500">Easily transfer the life policy to your child without medical underwriting.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Mental Health Support</h3>
|
|
||||||
<p class="text-gray-500">Coverage for postpartum depression and related mental health needs.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="py-20 bg-brand-600 text-white">
|
<section class="py-20 bg-brand-600 text-white">
|
||||||
<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"
|
||||||
</div>
|
class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get
|
||||||
</section>
|
Started Today</a>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
</div>
|
<h4 class="text-lg font-bold mb-3">Quick Links</h4>
|
||||||
</footer>
|
<ul class="space-y-1 text-sm text-white/70">
|
||||||
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
|
<li><a href="/" class="hover:text-white transition">Home</a></li>
|
||||||
|
<li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li>
|
||||||
|
<li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li>
|
||||||
|
<li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li>
|
||||||
|
<li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li>
|
||||||
|
<li><a href="/team.html" class="hover:text-white transition">Our Team</a></li>
|
||||||
|
<li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Get in Touch</h4><a
|
||||||
|
href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
|
||||||
|
class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium"><svg
|
||||||
|
class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
|
||||||
|
<path
|
||||||
|
d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
|
||||||
|
</svg>Chat on WhatsApp</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">© 2026 Better Life SG. All
|
||||||
|
rights reserved.</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,106 +1,169 @@
|
||||||
<!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">
|
||||||
<title>Retirement Planning — Better Life SG</title>
|
<title>Retirement Planning — Better Life SG</title>
|
||||||
<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"
|
||||||
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
</svg></button>
|
||||||
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</a>
|
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
||||||
<a href="/retirement.html" class="text-brand-600">Retirement</a>
|
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
||||||
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
||||||
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</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="/retirement.html" class="text-brand-600">Retirement</a>
|
||||||
</div>
|
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
||||||
</div>
|
<a href="/team.html" class="hover:text-brand-600 transition">Our Team</a>
|
||||||
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
<a href="/contact.html"
|
||||||
<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>
|
class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition">Contact Us</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
||||||
|
<a href="/" class="block py-2">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
|
||||||
|
href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html"
|
||||||
|
class="block py-2 text-brand-600">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a
|
||||||
|
href="/team.html" class="block py-2">Our Team</a><a href="/contact.html"
|
||||||
|
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center" style="background-image:url('/images/retirement-bg.png')">
|
<section class="relative min-h-[60vh] flex items-center justify-center bg-cover bg-center"
|
||||||
<div class="hero-overlay absolute inset-0"></div>
|
style="background-image:url('/images/retirement-bg.png')">
|
||||||
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
<div class="hero-overlay absolute inset-0"></div>
|
||||||
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Plan Your Golden Years</h1>
|
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
||||||
<p class="text-lg sm:text-xl text-white/90">Ensure a comfortable, stress-free lifestyle when you stop working.</p>
|
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Plan Your Golden Years</h1>
|
||||||
</div>
|
<p class="text-lg sm:text-xl text-white/90">Ensure a comfortable, stress-free lifestyle when you stop
|
||||||
</section>
|
working.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="py-20">
|
<section class="py-20">
|
||||||
<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 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
|
||||||
<h3 class="text-xl font-bold mb-2">Inflation Protection</h3>
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<p class="text-gray-500">Ensure your savings outpace inflation so your purchasing power remains strong.</p>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Inflation Protection</h3>
|
||||||
|
<p class="text-gray-500">Ensure your savings outpace inflation so your purchasing power remains
|
||||||
|
strong.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
||||||
|
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
|
||||||
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Healthcare Costs</h3>
|
||||||
|
<p class="text-gray-500">Medical expenses rise with age. Be prepared with adequate health coverage.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
||||||
|
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
|
||||||
|
class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||||
|
</svg></div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Lifestyle Maintenance</h3>
|
||||||
|
<p class="text-gray-500">Maintain your current standard of living without relying on a monthly
|
||||||
|
paycheck.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
</section>
|
||||||
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg></div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Healthcare Costs</h3>
|
|
||||||
<p class="text-gray-500">Medical expenses rise with age. Be prepared with adequate health coverage.</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center p-8 rounded-2xl bg-brand-50">
|
|
||||||
<div class="w-14 h-14 bg-brand-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg></div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Lifestyle Maintenance</h3>
|
|
||||||
<p class="text-gray-500">Maintain your current standard of living without relying on a monthly paycheck.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section 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 font-bold text-center mb-12">Retirement Strategies</h2>
|
<h2 class="text-3xl font-bold text-center mb-12">Retirement Strategies</h2>
|
||||||
<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">Annuity Plans</h3>
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Annuity Plans</h3>
|
||||||
<p class="text-gray-500">Receive a guaranteed monthly income stream for life.</p>
|
<p class="text-gray-500">Receive a guaranteed monthly income stream for life.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Dividend Portfolios</h3>
|
||||||
|
<p class="text-gray-500">Invest in stable, dividend-yielding assets for passive income.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-brand-700">Long-term Care</h3>
|
||||||
|
<p class="text-gray-500">Coverage for nursing homes or home care assistance if needed.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
</section>
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Dividend Portfolios</h3>
|
|
||||||
<p class="text-gray-500">Invest in stable, dividend-yielding assets for passive income.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
|
||||||
<h3 class="text-xl font-bold mb-2 text-brand-700">Long-term Care</h3>
|
|
||||||
<p class="text-gray-500">Coverage for nursing homes or home care assistance if needed.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="py-20 bg-brand-600 text-white">
|
<section class="py-20 bg-brand-600 text-white">
|
||||||
<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"
|
||||||
</div>
|
class="inline-block bg-white text-brand-600 font-semibold px-8 py-3 rounded-lg hover:bg-brand-50 transition text-lg">Get
|
||||||
</section>
|
Started Today</a>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
</div>
|
<h4 class="text-lg font-bold mb-3">Quick Links</h4>
|
||||||
</footer>
|
<ul class="space-y-1 text-sm text-white/70">
|
||||||
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
|
<li><a href="/" class="hover:text-white transition">Home</a></li>
|
||||||
|
<li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li>
|
||||||
|
<li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li>
|
||||||
|
<li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li>
|
||||||
|
<li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li>
|
||||||
|
<li><a href="/team.html" class="hover:text-white transition">Our Team</a></li>
|
||||||
|
<li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Get in Touch</h4><a
|
||||||
|
href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
|
||||||
|
class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium"><svg
|
||||||
|
class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
|
||||||
|
<path
|
||||||
|
d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
|
||||||
|
</svg>Chat on WhatsApp</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">© 2026 Better Life SG. All
|
||||||
|
rights reserved.</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
206
site/team.html
206
site/team.html
|
|
@ -1,85 +1,141 @@
|
||||||
<!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">
|
||||||
<title>Our Team — Better Life SG</title>
|
<title>Our Team — Better Life SG</title>
|
||||||
<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"
|
||||||
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
</svg></button>
|
||||||
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</a>
|
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
||||||
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
<a href="/" class="hover:text-brand-600 transition">Home</a>
|
||||||
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
|
||||||
<a href="/team.html" class="text-brand-600">Our Team</a>
|
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</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="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
|
||||||
</div>
|
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
|
||||||
</div>
|
<a href="/team.html" class="text-brand-600">Our Team</a>
|
||||||
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
<a href="/contact.html"
|
||||||
<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>
|
class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition">Contact Us</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-[50vh] flex items-center justify-center bg-brand-600">
|
|
||||||
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
|
||||||
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Our Team</h1>
|
|
||||||
<p class="text-lg sm:text-xl text-white/90">Dedicated professionals committed to securing your future.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Team Members -->
|
|
||||||
<section class="py-20">
|
|
||||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12">
|
|
||||||
<div class="text-center">
|
|
||||||
<img src="/images/hendri.jpg" alt="Hendri Kamarudin" class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
|
|
||||||
<h3 class="text-2xl font-bold text-brand-700">Hendri Kamarudin</h3>
|
|
||||||
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder & Principal Consultant</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center">
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
|
||||||
<img src="/images/chris.png" alt="Chris Zheng Liyuan" class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
|
<a href="/" class="block py-2">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a
|
||||||
<h3 class="text-2xl font-bold text-brand-700">Chris Zheng Liyuan</h3>
|
href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html"
|
||||||
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder & Wealth Strategist</p>
|
class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a
|
||||||
|
href="/team.html" class="block py-2 text-brand-600">Our Team</a><a href="/contact.html"
|
||||||
|
class="block py-2 text-brand-500 font-semibold">Contact Us</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Story & Vision -->
|
<!-- Hero -->
|
||||||
<section class="py-20 bg-gray-50">
|
<section class="relative min-h-[50vh] flex items-center justify-center bg-brand-600">
|
||||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
|
||||||
<h2 class="text-3xl font-bold text-center mb-8">Our Story & Vision</h2>
|
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Our Team</h1>
|
||||||
<div class="prose prose-lg max-w-none text-gray-600 space-y-4">
|
<p class="text-lg sm:text-xl text-white/90">Dedicated professionals committed to securing your future.</p>
|
||||||
<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>
|
</div>
|
||||||
<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>
|
</section>
|
||||||
<p>Together, we bring decades of combined experience in wealth management, risk assessment, and legacy planning. Our core values of integrity, empathy, and excellence drive everything we do. We are not just here to sell policies; we are here to build a better life for you and the generations to come.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="bg-brand-900 text-white py-12">
|
<!-- Team Members -->
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<section class="py-20">
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-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 class="grid md:grid-cols-2 gap-12">
|
||||||
<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 class="text-center">
|
||||||
<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>
|
<img src="/images/hendri.jpg" alt="Hendri Kamarudin"
|
||||||
</div>
|
class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
|
||||||
<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>
|
<h3 class="text-2xl font-bold text-brand-700">Hendri Kamarudin</h3>
|
||||||
</div>
|
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder &
|
||||||
</footer>
|
Principal Consultant</p>
|
||||||
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<img src="/images/chris.png" alt="Chris Zheng Liyuan"
|
||||||
|
class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
|
||||||
|
<h3 class="text-2xl font-bold text-brand-700">Chris Zheng Liyuan</h3>
|
||||||
|
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder & Wealth
|
||||||
|
Strategist</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Story & Vision -->
|
||||||
|
<section class="py-20 bg-gray-50">
|
||||||
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-8">Our Story & Vision</h2>
|
||||||
|
<div class="prose prose-lg max-w-none text-gray-600 space-y-4">
|
||||||
|
<p>Better Life SG was founded on a simple yet profound belief: everyone deserves access to transparent,
|
||||||
|
comprehensive, and personalized financial planning. We recognized a gap in the industry where
|
||||||
|
clients were often treated as transactions rather than lifelong partners.</p>
|
||||||
|
<p>Our philosophy is rooted in education and empowerment. We believe that the best financial decisions
|
||||||
|
are made when clients fully understand their options. Whether you are a fresh graduate stepping into
|
||||||
|
the workforce, a growing family planning for the future, or looking to leave a lasting legacy, our
|
||||||
|
approach remains the same: we listen first, advise second.</p>
|
||||||
|
<p>Together, we bring decades of combined experience in wealth management, risk assessment, and legacy
|
||||||
|
planning. Our core values of integrity, empathy, and excellence drive everything we do. We are not
|
||||||
|
just here to sell policies; we are here to build a better life for you and the generations to come.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="bg-brand-900 text-white py-12">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Better Life SG</h4>
|
||||||
|
<p class="text-white/70 text-sm">Why settle for good when you can have it better?</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Quick Links</h4>
|
||||||
|
<ul class="space-y-1 text-sm text-white/70">
|
||||||
|
<li><a href="/" class="hover:text-white transition">Home</a></li>
|
||||||
|
<li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li>
|
||||||
|
<li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li>
|
||||||
|
<li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li>
|
||||||
|
<li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li>
|
||||||
|
<li><a href="/team.html" class="hover:text-white transition">Our Team</a></li>
|
||||||
|
<li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-lg font-bold mb-3">Get in Touch</h4><a
|
||||||
|
href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life"
|
||||||
|
class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium"><svg
|
||||||
|
class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
|
||||||
|
<path
|
||||||
|
d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z" />
|
||||||
|
</svg>Chat on WhatsApp</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">© 2026 Better Life SG. All
|
||||||
|
rights reserved.</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>document.getElementById('navToggle').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden') })</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue