182 lines
No EOL
15 KiB
HTML
182 lines
No EOL
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Contact Us - KH3 | Building Inspiring Spaces</title>
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
<meta name="description" content="Get in touch with KH3 for your construction and project management needs. Contact us today for a consultation." />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
|
</head>
|
|
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
|
|
|
|
<!-- Navigation Menu (Standardized) -->
|
|
<div class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl" id="navMenu">
|
|
<div class="p-8 flex flex-col h-full">
|
|
<div class="flex items-center gap-3 mb-12"><a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity"><img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" /></a></div>
|
|
<nav class="flex-1 relative"><div class="absolute inset-0 flex items-center"><div class="relative ml-8"><div class="space-y-6">
|
|
<a href="index.html" class="nav-link ml-0" data-trans="crossfade">HOME</a>
|
|
<a href="about.html" class="nav-link ml-0 md:ml-6" data-trans="crossfade">WHY</a>
|
|
<a href="services.html" class="nav-link ml-0 md:ml-12" data-trans="crossfade">HOW</a>
|
|
<a href="projects.html" class="nav-link ml-0 md:ml-20" data-trans="crossfade">WHAT</a>
|
|
<a href="who.html" class="nav-link ml-0 md:ml-20" data-trans="crossfade">WHO</a>
|
|
<a href="contact.html" class="nav-link border-b border-white pb-1 ml-0 md:ml-12">CONTACTS</a>
|
|
</div></div></div></nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Static Logo and Menu -->
|
|
<div class="fixed top-6 left-8 z-40"><a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity"><img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" /></a></div>
|
|
|
|
<!-- Menu Toggle -->
|
|
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
|
|
<div class="cursor-pointer" id="menuToggle">
|
|
<div class="relative inline-block hidden md:block" id="menuWrap"><div class="menu-waves" aria-hidden="true"><span class="wave"></span><span class="wave"></span><span class="wave"></span></div><div class="menu-outline" aria-hidden="true"></div><div class="relative" id="menuGrid"><img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" /></div><div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"><img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" /></div></div>
|
|
<div class="md:hidden"><div class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"><div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile"><span class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span></div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
<section class="relative min-h-screen flex items-center py-24 px-8 contact-form-section">
|
|
<div class="absolute inset-0">
|
|
<img src="assets/images/contact.png" alt="Office Background" class="w-full h-full object-cover" />
|
|
<div class="absolute inset-0 bg-kh3-black/80 backdrop-blur-sm"></div>
|
|
</div>
|
|
<div class="relative z-10 w-full container mx-auto max-w-7xl">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
|
|
<!-- Left Column: Information -->
|
|
<div class="text-white space-y-8 lg:sticky top-24 self-start">
|
|
<h1 class="text-5xl md:text-7xl font-bold text-white opacity-0" data-anim="fade-in-up" data-anim-delay="200">Get In Touch</h1>
|
|
<p class="text-lg leading-relaxed text-white/80 max-w-lg opacity-0" data-anim="fade-in-up" data-anim-delay="300">Ready to start your next project? We'd love to hear from you. Fill out the form and we'll get back to you within 24 hours.</p>
|
|
<div class="space-y-6 pt-4 border-t border-neutral-800">
|
|
<div class="flex items-start space-x-4 opacity-0" data-anim="fade-in-up" data-anim-delay="400">
|
|
<span class="text-kh3-red text-2xl mt-1">📍</span>
|
|
<div><h3 class="text-xl font-semibold mb-1 text-white">Address</h3><p class="text-white/80">29 Labone Crescent, Accra, Ghana</p></div>
|
|
</div>
|
|
<div class="flex items-start space-x-4 opacity-0" data-anim="fade-in-up" data-anim-delay="500">
|
|
<span class="text-kh3-red text-2xl mt-1">📞</span>
|
|
<div><h3 class="text-xl font-semibold mb-1 text-white">Phone</h3><p class="text-white/80">+233 30 396 9970</p></div>
|
|
</div>
|
|
<div class="flex items-start space-x-4 opacity-0" data-anim="fade-in-up" data-anim-delay="600">
|
|
<span class="text-kh3-red text-2xl mt-1">✉️</span>
|
|
<div><h3 class="text-xl font-semibold mb-1 text-white">Email</h3><p class="text-white/80">Info@KH3group.com</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Contact Form -->
|
|
<div class="bg-black/30 border border-neutral-800 p-8 rounded-lg shadow-xl opacity-0" data-anim="fade-in-up" data-anim-delay="400">
|
|
<form class="space-y-6" id="contactForm">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div><label for="name" class="block text-sm font-semibold mb-2 text-white/80">Full Name *</label><input type="text" id="name" name="name" required class="form-input" /></div>
|
|
<div><label for="email" class="block text-sm font-semibold mb-2 text-white/80">Email Address *</label><input type="email" id="email" name="email" required class="form-input" /></div>
|
|
<div><label for="phone" class="block text-sm font-semibold mb-2 text-white/80">Phone Number</label><input type="tel" id="phone" name="phone" class="form-input" /></div>
|
|
<div><label for="company" class="block text-sm font-semibold mb-2 text-white/80">Company</label><input type="text" id="company" name="company" class="form-input" /></div>
|
|
<div><label for="service" class="block text-sm font-semibold mb-2 text-white/80">Service Interest</label><select id="service" name="service" class="form-input"><option value="">Select a service</option><option value="design">Interior Design</option><option value="build">Construction & Build</option><option value="furnish">Furnishing</option><option value="full-service">Full Service</option></select></div>
|
|
<div><label for="budget" class="block text-sm font-semibold mb-2 text-white/80">Project Budget</label><select id="budget" name="budget" class="form-input"><option value="">Select budget range</option><option value="under-100k">Under 100K GHS</option><option value="100k-500k">100K - 500K GHS</option><option value="500k-1m">500K - 1M GHS</option><option value="over-1m">Over 1M GHS</option></select></div>
|
|
</div>
|
|
<div><label for="message" class="block text-sm font-semibold mb-2 text-white/80">Project Details *</label><textarea id="message" name="message" rows="5" required placeholder="Tell us about your project..." class="form-input resize-none"></textarea></div>
|
|
<button type="submit" class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-red-700 transition-all duration-300 flex items-center justify-center space-x-2 font-semibold transform hover:scale-105">
|
|
<span>Send Message</span><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-24 bg-kh3-black text-white map-section">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<h2 class="text-4xl font-bold text-center mb-12 opacity-0" data-anim="fade-in-up" data-anim-delay="200">Find Us</h2>
|
|
<div class="w-full overflow-hidden rounded-lg opacity-0" data-anim="fade-in-up" data-anim-delay="300" style="aspect-ratio: 16 / 9;">
|
|
<iframe title="KH3 Office Location Map" width="100%" height="100%" style="border: 0; filter: invert(90%) grayscale(80%);" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3970.835158882042!2d-0.1741!3d5.5898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf9a7c0f1b4c6b%3A0x8f7c9e0f3b4c9a3!2s29%20Labone%20Cres%2C%20Accra%2C%20Ghana!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus"></iframe>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- NEW Signature Footer -->
|
|
<footer class="bg-kh3-black text-white/70">
|
|
<!-- Section 1: Call to Action -->
|
|
<div class="py-20 px-8 bg-neutral-900">
|
|
<div class="container mx-auto max-w-6xl text-center">
|
|
<h2 class="text-3xl md:text-5xl font-bold text-white mb-6 opacity-0" data-anim="fade-in-up" data-anim-delay="200">
|
|
Let's Build Something Inspiring Together
|
|
</h2>
|
|
<p class="text-lg md:text-xl text-neutral-400 max-w-3xl mx-auto mb-10 opacity-0" data-anim="fade-in-up" data-anim-delay="300">
|
|
Ready to start your next project? We're here to turn your vision into a stunning reality.
|
|
</p>
|
|
<a href="contact.html" class="inline-block bg-kh3-red text-white font-semibold uppercase tracking-wider px-8 py-4 rounded-md transition-transform transform hover:scale-105 hover:shadow-lg hover:shadow-red-500/30 opacity-0" data-trans="crossfade" data-anim="fade-in-up" data-anim-delay="400">
|
|
Get In Touch
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Main Footer Content -->
|
|
<div class="py-16 px-8">
|
|
<div class="container mx-auto max-w-7xl">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 text-center md:text-left">
|
|
|
|
<!-- Column 1: Brand -->
|
|
<div class="opacity-0" data-anim="fade-in-up" data-anim-delay="200">
|
|
<a href="index.html" class="inline-block mb-4">
|
|
<img src="assets/images/kh3_logo.png" alt="KH3 Logo" class="w-14 h-14 mx-auto md:mx-0">
|
|
</a>
|
|
<p class="text-sm leading-relaxed max-w-xs mx-auto md:mx-0">
|
|
Building inspiring spaces through innovative construction and design solutions since 2014.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Column 2: Navigate -->
|
|
<div class="opacity-0" data-anim="fade-in-up" data-anim-delay="300">
|
|
<h3 class="text-lg font-semibold text-white mb-4 uppercase tracking-wider">Navigate</h3>
|
|
<ul class="space-y-3">
|
|
<li><a href="index.html" class="hover:text-kh3-red transition-colors">Home</a></li>
|
|
<li><a href="about.html" class="hover:text-kh3-red transition-colors">Why KH3</a></li>
|
|
<li><a href="services.html" class="hover:text-kh3-red transition-colors">How We Work</a></li>
|
|
<li><a href="projects.html" class="hover:text-kh3-red transition-colors">Our What</a></li>
|
|
<li><a href="who.html" class="hover:text-kh3-red transition-colors">Who We Are</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Column 3: Connect -->
|
|
<div class="opacity-0" data-anim="fade-in-up" data-anim-delay="400">
|
|
<h3 class="text-lg font-semibold text-white mb-4 uppercase tracking-wider">Connect</h3>
|
|
<ul class="space-y-3">
|
|
<li><a href="tel:+233303969970" class="hover:text-kh3-red transition-colors">+233 30 396 9970</a></li>
|
|
<li><a href="mailto:info@kh3group.com" class="hover:text-kh3-red transition-colors">info@kh3group.com</a></li>
|
|
</ul>
|
|
<!-- Social Icons (add your links) -->
|
|
<div class="flex justify-center md:justify-start space-x-4 mt-6">
|
|
<a href="#" aria-label="LinkedIn" class="hover:text-kh3-red transition-colors"><!-- SVG for LinkedIn --></a>
|
|
<a href="#" aria-label="Instagram" class="hover:text-kh3-red transition-colors"><!-- SVG for Instagram --></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column 4: Location -->
|
|
<div class="opacity-0" data-anim="fade-in-up" data-anim-delay="500">
|
|
<h3 class="text-lg font-semibold text-white mb-4 uppercase tracking-wider">Location</h3>
|
|
<p class="text-sm leading-relaxed">29 Labone Crescent, Accra, Ghana</p>
|
|
<div class="mt-4 rounded-lg overflow-hidden border border-neutral-800 h-32">
|
|
<iframe title="KH3 Office Location" width="100%" height="100%" style="border:0; filter: invert(90%) grayscale(80%);" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3970.835158882042!2d-0.1741!3d5.5898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf9a7c0f1b4c6b%3A0x8f7c9e0f3b4c9a3!2s29%20Labone%20Cres%2C%20Accra%2C%20Ghana!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="mt-16 pt-8 border-t border-neutral-800 text-center text-sm text-neutral-500">
|
|
<p>© <span id="current-year"></span> KH3 Group. All Rights Reserved.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<div class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50 hidden md:block" id="customCursor"></div>
|
|
|
|
<script src="js/main.js"></script>
|
|
<script src="js/carousel.js"></script>
|
|
|
|
</body>
|
|
</html> |