Spaces:
Running
Running
Create a brand-forward luxury real-estate website for Khmer23, a high-prestige, invitation-only property agency operating in Kampot, Kep, Phnom Penh, and Sihanoukville. Khmer23 is not simply a vendor; it is a curated luxury brand positioned for Chinese high-net-worth individuals and serious English-speaking investors. The business is already running at capacity, with new rentals and sales closing daily. The website must quietly communicate selectiveness, authority, and effortless dominance of the premium Cambodian property market.
746e434 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact - 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"> | |
| <div class="mb-6"> | |
| <span class="inline-block px-4 py-2 bg-emerald-500/10 border border-emerald-500/30 rounded-full text-emerald-400 text-sm font-light tracking-wider"> | |
| BY INVITATION ONLY | |
| </span> | |
| </div> | |
| <h1 class="text-5xl md:text-6xl font-thin tracking-tight mb-6">Request Access</h1> | |
| <p class="text-slate-400 text-xl font-light leading-relaxed mb-12"> | |
| Your inquiry will be reviewed by our membership committee. We contact qualified candidates within 72 hours. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Contact Form Section --> | |
| <section class="py-20 px-6"> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="bg-slate-900/50 rounded-3xl p-8 md:p-12 border border-slate-700"> | |
| <form id="contactForm" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-slate-400 text-sm font-light mb-2">First Name *</label> | |
| <input type="text" required class="w-full bg-slate-800 border border-slate-700 rounded-full px-6 py-3 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors" placeholder="First name"> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm font-light mb-2">Last Name *</label> | |
| <input type="text" required class="w-full bg-slate-800 border border-slate-700 rounded-full px-6 py-3 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors" placeholder="Last name"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm font-light mb-2">Email Address *</label> | |
| <input type="email" required class="w-full bg-slate-800 border border-slate-700 rounded-full px-6 py-3 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors" placeholder="email@example.com"> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm font-light mb-2">Phone Number *</label> | |
| <input type="tel" required class="w-full bg-slate-800 border border-slate-700 rounded-full px-6 py-3 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors" placeholder="+1 (555) 123-4567"> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm font-light mb-2">Country of Residence *</label> | |
| <select required class="w-full bg-slate-800 border border-slate-700 rounded-full px-6 py-3 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors"> | |
| <option value="">Select Country</option> | |
| <option value="china">China</option> | |
| <option value="hongkong">Hong Kong</option> | |
| <option value="singapore">Singapore</option> | |
| <option value="united-states">United States</option> | |
| <option value="united-kingdom">United Kingdom</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm font-light mb-2">Investment Range *</label> | |
| <select required class="w-full bg-slate-800 border border-slate-700 rounded-full px-6 py-3 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors"> | |
| <option value="">Select Range</option> | |
| <option value="1-2">$1M - $2M USD</option> | |
| <option value="2-5">$2M - $5M USD</option> | |
| <option value="5-10">$5M - $10M USD</option> | |
| <option value="10+">$10M+ USD</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm font-light mb-2">Property Interest *</label> | |
| <div class="space-y-3"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="bg-slate-800 border-slate-600 text-emerald-500 rounded focus:ring-emerald-500"> | |
| <span class="ml-3 text-slate-300 font-light">Investment Properties</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="bg-slate-800 border-slate-600 text-emerald-500 rounded focus:ring-emerald-500"> | |
| <span class="ml-3 text-slate-300 font-light">Primary Residence</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="bg-slate-800 border-slate-600 text-emerald-500 rounded focus:ring-emerald-500"> | |
| <span class="ml-3 text-slate-300 font-light">Vacation Home</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="bg-slate-800 border-slate-600 text-emerald-500 rounded focus:ring-emerald-500"> | |
| <span class="ml-3 text-slate-300 font-light">Development Opportunities</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm font-light mb-2">Message</label> | |
| <textarea rows="4" class="w-full bg-slate-800 border border-slate-700 rounded-2xl px-6 py-4 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors resize-none" placeholder="Tell us about your investment objectives..."></textarea> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" required class="bg-slate-800 border-slate-600 text-emerald-500 rounded focus:ring-emerald-500 mt-1"> | |
| <label class="ml-3 text-slate-400 text-sm font-light"> | |
| I understand that Khmer23 operates by invitation only and that submission of this form does not guarantee access to exclusive properties. | |
| </label> | |
| </div> | |
| <div class="text-center pt-6"> | |
| <button type="submit" class="px-12 py-4 bg-emerald-600 hover:bg-emerald-500 text-alabaster rounded-full transition-all duration-500 hover:scale-105 hover:shadow-2xl font-light tracking-wide"> | |
| Submit Request | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Information Section --> | |
| <section class="py-20 px-6 bg-slate-900/50"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-light mb-4">Contact Information</h2> | |
| <p class="text-slate-400">For existing clients and qualified inquiries</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 mx-auto mb-4 bg-slate-800 rounded-full flex items-center justify-center"> | |
| <i data-feather="map-pin" class="w-8 h-8 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-xl font-light mb-2">Headquarters</h3> | |
| <p class="text-slate-400 text-sm font-light">Boulevard Norodom<br>Phnom Penh, Cambodia</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 mx-auto mb-4 bg-slate-800 rounded-full flex items-center justify-center"> | |
| <i data-feather="phone" class="w-8 h-8 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-xl font-light mb-2">Direct Line</h3> | |
| <p class="text-slate-400 text-sm font-light">+855 23 999 023<br>M-F 9AM-6PM ICT</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 mx-auto mb-4 bg-slate-800 rounded-full flex items-center justify-center"> | |
| <i data-feather="mail" class="w-8 h-8 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-xl font-light mb-2">Private Email</h3> | |
| <p class="text-slate-400 text-sm font-light">exclusive@khmer23.com<br>Encrypted communications preferred</p> | |
| </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> |