mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 06:13:41 +00:00
408 lines
15 KiB
HTML
408 lines
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" />
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
<title>Contact Us - KH3 | Building Inspiring Spaces</title>
|
|
<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 Overlay -->
|
|
<nav
|
|
class="fixed inset-0 bg-black bg-opacity-95 z-50 hidden"
|
|
id="navOverlay"
|
|
>
|
|
<div class="flex flex-col h-full">
|
|
<div class="flex justify-between items-center p-8">
|
|
<div class="flex items-center gap-3">
|
|
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
|
<span class="text-white text-2xl font-bold tracking-wider"
|
|
>KH3</span
|
|
>
|
|
</div>
|
|
<button
|
|
class="text-white hover:text-kh3-red transition-colors"
|
|
id="navClose"
|
|
>
|
|
<span
|
|
class="block w-6 h-0.5 bg-current transform rotate-45 translate-y-0.5"
|
|
></span>
|
|
<span
|
|
class="block w-6 h-0.5 bg-current transform -rotate-45 -translate-y-0.5"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
<ul class="flex-1 flex flex-col justify-center items-center space-y-8">
|
|
<li>
|
|
<a
|
|
href="index.html"
|
|
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
|
|
>HOME</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="about.html"
|
|
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
|
|
>ABOUT US</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="projects.html"
|
|
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
|
|
>PROJECTS</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="services.html"
|
|
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
|
|
>SERVICES</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="approach.html"
|
|
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
|
|
>APPROACH</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="careers.html"
|
|
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
|
|
>CAREER</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="news.html"
|
|
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
|
|
>NEWS</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="brands.html"
|
|
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
|
|
>OTHER BRANDS BY FBS</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<header
|
|
class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/80 backdrop-blur-sm"
|
|
>
|
|
<div class="container mx-auto px-8">
|
|
<div class="flex justify-between items-center py-6">
|
|
<div class="flex items-center gap-3">
|
|
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
|
<span class="text-white text-2xl font-bold tracking-wider"
|
|
>KH3</span
|
|
>
|
|
</div>
|
|
<div class="cursor-pointer" id="menuToggle">
|
|
<div class="grid grid-cols-3 gap-1 w-6 h-6">
|
|
<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>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative h-screen flex items-center justify-center">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-kh3-black/80 to-kh3-black/60"
|
|
></div>
|
|
<div class="relative z-10 text-center">
|
|
<h1 class="text-6xl md:text-8xl font-bold mb-6">CONTACT US</h1>
|
|
<div class="text-xl md:text-2xl text-neutral-300 tracking-widest">
|
|
LET'S DISCUSS YOUR PROJECT
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-b from-transparent to-kh3-black"
|
|
></div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="py-20 bg-white text-kh3-black">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
|
<div class="space-y-8">
|
|
<h2 class="text-4xl font-bold">GET IN TOUCH</h2>
|
|
<p class="text-lg leading-relaxed text-neutral-600">
|
|
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-8">
|
|
<div class="flex items-start space-x-4">
|
|
<div class="text-3xl">📍</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-2">Address</h3>
|
|
<p class="text-neutral-600">Accra, Ghana<br />Main Office</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="text-3xl">📞</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-2">Phone</h3>
|
|
<p class="text-neutral-600">
|
|
+233 20 123 4567<br />+233 24 123 4567
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="text-3xl">✉️</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-2">Email</h3>
|
|
<p class="text-neutral-600">
|
|
info@kh3.com<br />projects@kh3.com
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="text-3xl">🕒</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-2">Business Hours</h3>
|
|
<p class="text-neutral-600">
|
|
Monday - Friday<br />8:00 AM - 6:00 PM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-neutral-50 p-8 rounded-lg">
|
|
<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"
|
|
>Full Name *</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-semibold mb-2"
|
|
>Email Address *</label
|
|
>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-semibold mb-2"
|
|
>Phone Number</label
|
|
>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="company" class="block text-sm font-semibold mb-2"
|
|
>Company</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="company"
|
|
name="company"
|
|
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="service" class="block text-sm font-semibold mb-2"
|
|
>Service Interest</label
|
|
>
|
|
<select
|
|
id="service"
|
|
name="service"
|
|
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
|
>
|
|
<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 (Design + Build + Furnish)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="budget" class="block text-sm font-semibold mb-2"
|
|
>Project Budget</label
|
|
>
|
|
<select
|
|
id="budget"
|
|
name="budget"
|
|
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
|
>
|
|
<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"
|
|
>Project Details *</label
|
|
>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows="6"
|
|
required
|
|
placeholder="Tell us about your project, requirements, timeline, and any specific needs..."
|
|
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none"
|
|
></textarea>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2"
|
|
>
|
|
<span>Send Message</span>
|
|
<span>→</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Map Section -->
|
|
<section class="py-20 bg-kh3-black text-white">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<h2 class="text-4xl font-bold text-center mb-16">FIND US</h2>
|
|
<div class="bg-neutral-800 rounded-lg p-12 text-center">
|
|
<div class="max-w-2xl mx-auto">
|
|
<h3 class="text-2xl font-bold mb-4">Accra, Ghana</h3>
|
|
<p class="text-neutral-300 leading-relaxed mb-6">
|
|
Our main office is located in the heart of Accra, easily
|
|
accessible from all major areas.
|
|
</p>
|
|
<div class="text-kh3-red font-semibold">
|
|
<span>📍 5.5600° N, 0.2057° W</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-kh3-black text-white py-16">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<div
|
|
class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
|
<span class="text-2xl font-bold tracking-wider">KH3</span>
|
|
</div>
|
|
<div class="flex space-x-8">
|
|
<a
|
|
href="contact.html"
|
|
class="text-neutral-300 hover:text-white transition-colors"
|
|
>Contact</a
|
|
>
|
|
<a
|
|
href="privacy.html"
|
|
class="text-neutral-300 hover:text-white transition-colors"
|
|
>Privacy Policy</a
|
|
>
|
|
<a
|
|
href="terms.html"
|
|
class="text-neutral-300 hover:text-white transition-colors"
|
|
>Terms of Service</a
|
|
>
|
|
</div>
|
|
<div class="text-neutral-400">© 2024 KH3. All rights reserved.</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
// Menu toggle functionality
|
|
const menuToggle = document.getElementById("menuToggle");
|
|
const navOverlay = document.getElementById("navOverlay");
|
|
const navClose = document.getElementById("navClose");
|
|
|
|
if (menuToggle && navOverlay && navClose) {
|
|
menuToggle.addEventListener("click", () => {
|
|
navOverlay.classList.remove("hidden");
|
|
});
|
|
|
|
navClose.addEventListener("click", () => {
|
|
navOverlay.classList.add("hidden");
|
|
});
|
|
|
|
navOverlay.addEventListener("click", (e) => {
|
|
if (e.target === navOverlay) {
|
|
navOverlay.classList.add("hidden");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Form submission
|
|
const contactForm = document.getElementById("contactForm");
|
|
if (contactForm) {
|
|
contactForm.addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
// Add your form submission logic here
|
|
alert(
|
|
"Thank you for your message! We'll get back to you within 24 hours."
|
|
);
|
|
contactForm.reset();
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|