betterlifesg/site/team.html

85 lines
7.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Team — Better Life SG</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: { extend: { colors: { brand: { 50:'#e6f7f5',100:'#b3e8e0',200:'#80d9cc',300:'#4dcab8',400:'#26bfa8',500:'#00b49a',600:'#009e87',700:'#008571',800:'#006b5b',900:'#004d41' }}}}
}
</script>
<style>html{scroll-behavior:smooth}.hero-overlay{background:linear-gradient(135deg,rgba(0,180,154,0.85) 0%,rgba(0,77,65,0.90) 100%)}</style>
</head>
<body class="bg-white text-gray-800 font-sans">
<nav class="fixed top-0 w-full bg-white/95 backdrop-blur shadow-sm z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="/" class="text-xl font-bold text-brand-600">Better Life</a>
<button id="navToggle" class="md:hidden p-2 rounded text-gray-600 hover:bg-gray-100"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="/" class="hover:text-brand-600 transition">Home</a>
<a href="/fresh-grads.html" class="hover:text-brand-600 transition">Fresh Grads</a>
<a href="/prenatal.html" class="hover:text-brand-600 transition">Prenatal</a>
<a href="/retirement.html" class="hover:text-brand-600 transition">Retirement</a>
<a href="/legacy.html" class="hover:text-brand-600 transition">Legacy</a>
<a href="/team.html" class="text-brand-600">Our Team</a>
<a href="/contact.html" class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition">Contact Us</a>
</div>
</div>
<div id="mobileMenu" class="md:hidden hidden bg-white border-t px-4 pb-4 space-y-2 text-sm font-medium">
<a href="/" class="block py-2">Home</a><a href="/fresh-grads.html" class="block py-2">Fresh Grads</a><a href="/prenatal.html" class="block py-2">Prenatal</a><a href="/retirement.html" class="block py-2">Retirement</a><a href="/legacy.html" class="block py-2">Legacy</a><a href="/team.html" class="block py-2 text-brand-600">Our Team</a><a href="/contact.html" class="block py-2 text-brand-500 font-semibold">Contact Us</a>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-[50vh] flex items-center justify-center bg-brand-600">
<div class="relative z-10 text-center text-white px-4 max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">Our Team</h1>
<p class="text-lg sm:text-xl text-white/90">Dedicated professionals committed to securing your future.</p>
</div>
</section>
<!-- Team Members -->
<section class="py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12">
<div class="text-center">
<img src="/images/hendri.jpg" alt="Hendri Kamarudin" class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
<h3 class="text-2xl font-bold text-brand-700">Hendri Kamarudin</h3>
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder &amp; Principal Consultant</p>
</div>
<div class="text-center">
<img src="/images/chris.png" alt="Chris Zheng Liyuan" class="w-56 h-56 rounded-full mx-auto mb-6 object-cover shadow-lg">
<h3 class="text-2xl font-bold text-brand-700">Chris Zheng Liyuan</h3>
<p class="text-brand-500 font-semibold uppercase tracking-wide text-sm mt-1">Co-Founder &amp; Wealth Strategist</p>
</div>
</div>
</div>
</section>
<!-- Story & Vision -->
<section class="py-20 bg-gray-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-8">Our Story &amp; Vision</h2>
<div class="prose prose-lg max-w-none text-gray-600 space-y-4">
<p>Better Life SG was founded on a simple yet profound belief: everyone deserves access to transparent, comprehensive, and personalized financial planning. We recognized a gap in the industry where clients were often treated as transactions rather than lifelong partners.</p>
<p>Our philosophy is rooted in education and empowerment. We believe that the best financial decisions are made when clients fully understand their options. Whether you are a fresh graduate stepping into the workforce, a growing family planning for the future, or looking to leave a lasting legacy, our approach remains the same: we listen first, advise second.</p>
<p>Together, we bring decades of combined experience in wealth management, risk assessment, and legacy planning. Our core values of integrity, empathy, and excellence drive everything we do. We are not just here to sell policies; we are here to build a better life for you and the generations to come.</p>
</div>
</div>
</section>
<footer class="bg-brand-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-8">
<div><h4 class="text-lg font-bold mb-3">Better Life SG</h4><p class="text-white/70 text-sm">Why settle for good when you can have it better?</p></div>
<div><h4 class="text-lg font-bold mb-3">Quick Links</h4><ul class="space-y-1 text-sm text-white/70"><li><a href="/" class="hover:text-white transition">Home</a></li><li><a href="/fresh-grads.html" class="hover:text-white transition">Fresh Grads</a></li><li><a href="/prenatal.html" class="hover:text-white transition">Prenatal</a></li><li><a href="/retirement.html" class="hover:text-white transition">Retirement</a></li><li><a href="/legacy.html" class="hover:text-white transition">Legacy</a></li><li><a href="/team.html" class="hover:text-white transition">Our Team</a></li><li><a href="/contact.html" class="hover:text-white transition">Contact Us</a></li></ul></div>
<div><h4 class="text-lg font-bold mb-3">Get in Touch</h4><a href="https://wa.me/6583226533?text=I%20am%20interested%20for%20Better%20Life" class="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-2.5 rounded-lg hover:bg-green-700 transition text-sm font-medium"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492l4.625-1.474A11.932 11.932 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.168 0-4.19-.586-5.932-1.609l-.425-.252-2.742.875.873-2.689-.277-.44A9.776 9.776 0 012.182 12c0-5.417 4.401-9.818 9.818-9.818S21.818 6.583 21.818 12s-4.401 9.818-9.818 9.818z"/></svg>Chat on WhatsApp</a></div>
</div>
<div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/50">© 2026 Better Life SG. All rights reserved.</div>
</div>
</footer>
<script>document.getElementById('navToggle').addEventListener('click',()=>{document.getElementById('mobileMenu').classList.toggle('hidden')})</script>
</body>
</html>