Spaces:
Running
Running
File size: 9,376 Bytes
746e434 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Khmer23</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'obsidian': '#1a1a1a',
'charcoal': '#2d2d2d',
'alabaster': '#f5f5f5',
'slate': {
400: '#64748b',
500: '#475569',
600: '#334155',
700: '#1e293b',
800: '#0f172a',
900: '#020617'
},
'emerald': {
50: '#ecfdf5',
100: '#d1fae5',
500: '#10b981',
600: '#059669',
700: '#047857'
}
}
}
}
}
</script>
</head>
<body class="bg-obsidian text-alabaster overflow-x-hidden">
<!-- Theme Switcher -->
<div class="fixed top-4 right-4 z-50">
<button id="themeToggle" class="bg-slate-800 hover:bg-slate-700 text-alabaster p-3 rounded-full transition-all duration-300 hover:scale-110 shadow-2xl">
<i data-feather="sun" class="w-5 h-5"></i>
</button>
</div>
<!-- Navigation Component -->
<custom-navbar></custom-navbar>
<!-- Hero Section -->
<section class="relative py-20 px-6">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-5xl md:text-6xl font-thin tracking-tight mb-6">The Khmer23 Standard</h1>
<p class="text-slate-400 text-xl font-light leading-relaxed">
We don't just sell properties. We curate legacies. Every transaction is a testament to our unwavering commitment to excellence.
</p>
</div>
</section>
<!-- Philosophy Section -->
<section class="py-20 px-6 bg-slate-900/50">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-4xl font-thin mb-6">Our Philosophy</h2>
<div class="space-y-6 text-slate-300 font-light leading-relaxed">
<p>
In a market saturated with mediocrity, Khmer23 stands alone. We have built our reputation not through volume, but through selectiveness. Every property in our portfolio represents the pinnacle of Cambodian luxury real estate.
</p>
<p>
Our clientele is as exclusive as our properties. By invitation only, we serve those who understand that true luxury isn't about conspicuous consumption—it's about exceptional quality, strategic investment, and the preservation of value across generations.
</p>
<p>
We don't compete. We lead. While others chase trends, we set them. While others market, we curate. This isn't just business—it's the art of possibility.
</p>
</div>
</div>
<div class="relative">
<img src="https://static.photos/luxury/600x600/14" alt="Philosophy" class="rounded-3xl shadow-2xl">
<div class="absolute -bottom-6 -right-6 bg-slate-800 p-6 rounded-2xl border border-slate-700">
<div class="text-4xl font-bold text-emerald-400">97%</div>
<div class="text-sm text-slate-400 mt-1">Client Retention Rate</div>
</div>
</div>
</div>
</div>
</section>
<!-- Numbers Section -->
<section class="py-20 px-6">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="text-center">
<div class="text-5xl font-thin text-emerald-400 mb-2">$2.4B</div>
<div class="text-slate-400 font-light">Total Transaction Volume</div>
</div>
<div class="text-center">
<div class="text-5xl font-thin text-emerald-400 mb-2">237</div>
<div class="text-slate-400 font-light">Properties Transacted</div>
</div>
<div class="text-center">
<div class="text-5xl font-thin text-emerald-400 mb-2">48</div>
<div class="text-slate-400 font-light">Months of Operation</div>
</div>
<div class="text-center">
<div class="text-5xl font-thin text-emerald-400 mb-2">12</div>
<div class="text-slate-400 font-light">Exclusive Advisors</div>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section class="py-20 px-6 bg-slate-900/50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-thin mb-4">Leadership</h2>
<p class="text-slate-400 text-lg font-light">The architects of luxury Cambodian real estate</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="relative mb-6 mx-auto w-48 h-48">
<img src="https://static.photos/people/200x200/15" alt="Team Member" class="w-full h-full rounded-full object-cover">
<div class="absolute inset-0 rounded-full bg-gradient-to-t from-slate-900/50 to-transparent"></div>
</div>
<h3 class="text-2xl font-light mb-2">Alexandra Chen</h3>
<p class="text-emerald-400 text-sm mb-3">Founding Partner</p>
<p class="text-slate-400 text-sm font-light">15 years in Southeast Asian luxury markets</p>
</div>
<div class="text-center">
<div class="relative mb-6 mx-auto w-48 h-48">
<img src="https://static.photos/people/200x200/16" alt="Team Member" class="w-full h-full rounded-full object-cover">
<div class="absolute inset-0 rounded-full bg-gradient-to-t from-slate-900/50 to-transparent"></div>
</div>
<h3 class="text-2xl font-light mb-2">Marcus Thong</h3>
<p class="text-emerald-400 text-sm mb-3">Head of Acquisitions</p>
<p class="text-slate-400 text-sm font-light">Former Goldman Sachs Real Estate Division</p>
</div>
<div class="text-center">
<div class="relative mb-6 mx-auto w-48 h-48">
<img src="https://static.photos/people/200x200/17" alt="Team Member" class="w-full h-full rounded-full object-cover">
<div class="absolute inset-0 rounded-full bg-gradient-to-t from-slate-900/50 to-transparent"></div>
</div>
<h3 class="text-2xl font-light mb-2">Sophie Laurent</h3>
<p class="text-emerald-400 text-sm mb-3">Client Relations Director</p>
<p class="text-slate-400 text-sm font-light">Bespoke service architect for UHNWIs</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 px-6">
<div class="max-w-4xl mx-auto text-center">
<div class="bg-gradient-to-r from-slate-800 to-slate-900 rounded-3xl p-12 border border-slate-700">
<h2 class="text-4xl font-thin mb-4">Membership by Invitation</h2>
<p class="text-slate-400 text-lg font-light mb-8">
Access to Khmer23 is reserved for those who understand that the finest opportunities are never public.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="contact.html" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-alabaster rounded-full transition-all duration-500 hover:scale-105 hover:shadow-2xl">
Request Consideration
</a>
<a href="index.html" class="px-8 py-4 border border-slate-600 text-alabaster rounded-full transition-all duration-500 hover:bg-slate-800 hover:scale-105">
Return Home
</a>
</div>
</div>
</div>
</section>
<!-- Footer Component -->
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
</body>
</html> |