1150 lines
41 KiB
HTML
1150 lines
41 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"
|
|
style="animation: pageEnter 0.8s ease-out both"
|
|
>
|
|
<!-- Navigation Menu -->
|
|
<div
|
|
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
|
|
id="navMenu"
|
|
>
|
|
<div class="p-8 flex flex-col h-full">
|
|
<!-- Logo -->
|
|
<div class="flex items-center gap-3 mb-12">
|
|
<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>
|
|
|
|
<!-- Navigation Links - Inverted C Layout -->
|
|
<nav class="flex-1 relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="relative ml-8">
|
|
<!-- Navigation items in inverted C shape -->
|
|
<div class="space-y-6">
|
|
<!-- HOME - Top -->
|
|
<a
|
|
href="index.html"
|
|
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.075s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>M</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.125s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
</a>
|
|
|
|
<!-- ABOUT US - Slightly right -->
|
|
<a
|
|
href="about.html"
|
|
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.15s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.175s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>B</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.225s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>U</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.25s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.275s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
> </span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.3s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>U</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.325s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- SERVICES - More right -->
|
|
<a
|
|
href="services.html"
|
|
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.375s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.4s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.425s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>V</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.45s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>I</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.475s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.5s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.525s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- PROJECTS - Most right -->
|
|
<a
|
|
href="projects.html"
|
|
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.55s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>P</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.575s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.6s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.625s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>J</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.675s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.7s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.725s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- CONTACTS - More right -->
|
|
<a
|
|
href="contact.html"
|
|
class="block text-white text-lg font-medium border-b border-white pb-1 ml-12 font-montserrat"
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.775s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.8s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>N</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.825s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.85s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.875s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.9s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.925s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- PARTNERS - Back to left -->
|
|
<a
|
|
href="partners.html"
|
|
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.95s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>P</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.975s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.025s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>N</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.075s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.125s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Static Logo and Menu -->
|
|
<div class="fixed top-8 left-8 z-40">
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
src="assets/images/kh3_logo_dark.png"
|
|
alt="KH3"
|
|
class="w-12 h-12"
|
|
/>
|
|
<span class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
|
|
>KH3</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu Toggle -->
|
|
<div class="fixed top-8 right-8 z-40">
|
|
<div class="cursor-pointer" id="menuToggle">
|
|
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
|
|
<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>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative h-screen flex items-center justify-center">
|
|
<!-- Background Image -->
|
|
<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-black/40"></div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="relative z-10 text-center w-full">
|
|
<div class="flex items-center gap-8 mb-6 max-w-6xl mx-auto">
|
|
<div
|
|
class="flex-1 h-1 bg-white opacity-0"
|
|
style="
|
|
min-width: 100px;
|
|
animation: fadeInLeft 1s ease-out 0.3s forwards;
|
|
"
|
|
></div>
|
|
<h1
|
|
class="text-6xl md:text-8xl font-bold whitespace-nowrap px-8 opacity-0"
|
|
style="animation: maskRevealCenter 1.2s ease-out 0.6s forwards"
|
|
>
|
|
CONTACT US
|
|
</h1>
|
|
<div
|
|
class="flex-1 h-1 bg-white opacity-0"
|
|
style="
|
|
min-width: 100px;
|
|
animation: fadeInRight 1s ease-out 0.3s forwards;
|
|
"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="text-xl md:text-2xl text-white tracking-widest opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 0.9s forwards"
|
|
>
|
|
LET'S DISCUSS YOUR PROJECT
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="relative min-h-screen flex items-center">
|
|
<!-- Background Image with Overlay -->
|
|
<div class="absolute inset-0">
|
|
<img
|
|
src="assets/images/contact.png"
|
|
alt="Office Background"
|
|
class="w-full h-full object-cover transform scale-y-[-1]"
|
|
/>
|
|
<div class="absolute inset-0 bg-black/60"></div>
|
|
</div>
|
|
|
|
<!-- Content Container -->
|
|
<div class="relative z-10 w-full">
|
|
<div class="container mx-auto px-8 max-w-7xl">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
<!-- Left Column - Contact Information -->
|
|
<div class="text-white space-y-8">
|
|
<!-- Title -->
|
|
<h2
|
|
class="text-5xl md:text-6xl font-bold text-white opacity-0 hover:scale-105 transition-transform duration-300"
|
|
style="animation: titleBounce 3s ease-out 2.7s forwards"
|
|
>
|
|
GET IN TOUCH
|
|
</h2>
|
|
|
|
<!-- Description -->
|
|
<p
|
|
class="text-lg leading-relaxed text-white/80 opacity-0 hover:text-white transition-colors duration-500"
|
|
style="animation: fadeInUp 1s ease-out 3.1s forwards"
|
|
>
|
|
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>
|
|
|
|
<!-- Contact Details -->
|
|
<div class="space-y-6">
|
|
<div
|
|
class="flex items-start space-x-4 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 3.3s forwards"
|
|
>
|
|
<div class="text-kh3-red text-2xl">📍</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-2 text-white">Address</h3>
|
|
<p class="text-white/80">
|
|
29 Labone Crescent, Accra<br />Accra - Ghana
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-start space-x-4 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 3.5s forwards"
|
|
>
|
|
<div class="text-kh3-red text-2xl">📞</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-2 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"
|
|
style="animation: fadeInUp 1s ease-out 3.7s forwards"
|
|
>
|
|
<div class="text-kh3-red text-2xl">✉️</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-2 text-white">Email</h3>
|
|
<p class="text-white/80">Info@KH3group.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-start space-x-4 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 3.9s forwards"
|
|
>
|
|
<div class="text-kh3-red text-2xl">🕒</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-2 text-white">Business Hours</h3>
|
|
<p class="text-white/80">
|
|
Monday - Friday<br />9:00 AM - 6:00 PM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column - Contact Form -->
|
|
<div
|
|
class="bg-white p-8 rounded-lg shadow-xl opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 2.9s forwards"
|
|
>
|
|
<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-gray-800"
|
|
>Full Name *</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-semibold mb-2 text-gray-800"
|
|
>Email Address *</label
|
|
>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-semibold mb-2 text-gray-800"
|
|
>Phone Number</label
|
|
>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="company" class="block text-sm font-semibold mb-2 text-gray-800"
|
|
>Company</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="company"
|
|
name="company"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="service" class="block text-sm font-semibold mb-2 text-gray-800"
|
|
>Service Interest</label
|
|
>
|
|
<select
|
|
id="service"
|
|
name="service"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
|
>
|
|
<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 text-gray-800"
|
|
>Project Budget</label
|
|
>
|
|
<select
|
|
id="budget"
|
|
name="budget"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
|
>
|
|
<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-gray-800"
|
|
>Project Details *</label
|
|
>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows="6"
|
|
required
|
|
placeholder="Tell us about your project, requirements, and any specific needs..."
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none text-gray-900"
|
|
></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 font-semibold"
|
|
>
|
|
<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>
|
|
|
|
<!-- Scroll Down Prompt -->
|
|
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2">
|
|
<button
|
|
id="contactScrollArrow"
|
|
class="flex items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
|
|
style="animation: fadeInUp 800ms ease-out 4.5s forwards"
|
|
>
|
|
<span class="text-xs tracking-widest mb-2">SCROLL</span>
|
|
<svg
|
|
class="w-5 h-5 animate-arrowPulse"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
<div class="w-px h-8 bg-white/70"></div>
|
|
</button>
|
|
</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 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 2.4s forwards"
|
|
>
|
|
FIND US
|
|
</h2>
|
|
<div class="bg-kh3-grey/20 rounded-lg p-12 text-center">
|
|
<div class="max-w-5xl mx-auto">
|
|
<h3
|
|
class="text-2xl font-bold mb-4 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 2.6s forwards"
|
|
>
|
|
Accra, Ghana
|
|
</h3>
|
|
<p
|
|
class="text-kh3-grey leading-relaxed mb-6 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 2.8s forwards"
|
|
>
|
|
Our main office is located in the heart of Accra, easily
|
|
accessible from all major areas.
|
|
</p>
|
|
<div
|
|
class="text-kh3-red font-semibold opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 3s forwards"
|
|
>
|
|
<span>📍 29 Labone Crescent, Accra, Ghana</span>
|
|
</div>
|
|
|
|
<!-- Embedded Map -->
|
|
<div
|
|
class="mt-10 w-full overflow-hidden rounded-lg opacity-0"
|
|
style="
|
|
aspect-ratio: 4 / 3;
|
|
animation: fadeInUp 1s ease-out 3.2s forwards;
|
|
"
|
|
>
|
|
<iframe
|
|
title="KH3 Office Location Map"
|
|
width="100%"
|
|
height="100%"
|
|
style="border: 0; filter: grayscale(20%) contrast(110%)"
|
|
loading="lazy"
|
|
allowfullscreen
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
src="https://www.google.com/maps?q=29%20Labone%20Crescent%2C%20Accra%2C%20Ghana&z=18&output=embed"
|
|
>
|
|
</iframe>
|
|
</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_dark.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>
|
|
<style>
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes fadeInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 0.5;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes fadeInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 0.5;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes arrowPulse {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(4px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.animate-arrowPulse {
|
|
animation: arrowPulse 1.2s ease-in-out infinite;
|
|
}
|
|
@keyframes titleBounce {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-50px) scale(0.5);
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(20px) scale(1.1);
|
|
}
|
|
40% {
|
|
transform: translateY(-10px) scale(0.95);
|
|
}
|
|
60% {
|
|
transform: translateY(5px) scale(1.02);
|
|
}
|
|
80% {
|
|
transform: translateY(-2px) scale(0.98);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes maskRevealCenter {
|
|
0% {
|
|
clip-path: inset(0 50% 0 50%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes maskReveal {
|
|
0% {
|
|
clip-path: inset(0 100% 0 0);
|
|
opacity: 0.001;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.masked-reveal {
|
|
clip-path: inset(0 100% 0 0);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Menu toggle functionality
|
|
const menuToggle = document.getElementById("menuToggle");
|
|
const navMenu = document.getElementById("navMenu");
|
|
const menuGrid = document.getElementById("menuGrid");
|
|
|
|
if (menuToggle && navMenu && menuGrid) {
|
|
let isMenuOpen = false;
|
|
let closeBtnEl = null;
|
|
|
|
menuToggle.addEventListener("click", () => {
|
|
if (isMenuOpen) {
|
|
// Close menu
|
|
navMenu.classList.add("hidden");
|
|
menuGrid.innerHTML = `
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
`;
|
|
if (closeBtnEl) {
|
|
closeBtnEl.remove();
|
|
closeBtnEl = null;
|
|
}
|
|
isMenuOpen = false;
|
|
} else {
|
|
// Open menu
|
|
navMenu.classList.remove("hidden");
|
|
// Place red X close button at the bottom of the menu panel
|
|
closeBtnEl = document.createElement("button");
|
|
closeBtnEl.setAttribute("aria-label", "Close navigation");
|
|
closeBtnEl.className =
|
|
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
|
|
closeBtnEl.innerHTML = `
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
`;
|
|
navMenu.appendChild(closeBtnEl);
|
|
closeBtnEl.addEventListener("click", () => {
|
|
navMenu.classList.add("hidden");
|
|
if (closeBtnEl) {
|
|
closeBtnEl.remove();
|
|
closeBtnEl = null;
|
|
}
|
|
menuGrid.innerHTML = `
|
|
<span class=\"w-1 h-1 bg-white\"></span>
|
|
<span class=\"w-1 h-1 bg-white\"></span>
|
|
<span class=\"w-1 h-1 bg-white\"></span>
|
|
<span class=\"w-1 h-1 bg-white\"></span>
|
|
<span class=\"w-1 h-1 bg-white\"></span>
|
|
<span class=\"w-1 h-1 bg-white\"></span>
|
|
<span class=\"w-1 h-1 bg-white\"></span>
|
|
<span class=\"w-1 h-1 bg-white\"></span>
|
|
<span class=\"w-1 h-1 bg-white\"></span>
|
|
`;
|
|
isMenuOpen = false;
|
|
});
|
|
isMenuOpen = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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();
|
|
});
|
|
}
|
|
|
|
// Staggered entrance for hero and sections
|
|
window.addEventListener("load", () => {
|
|
const heroTitle = document.querySelector(
|
|
"section.relative h1.masked-reveal"
|
|
);
|
|
const heroSub = document.querySelector("section.relative div.text-xl");
|
|
if (heroTitle) {
|
|
heroTitle.style.animation =
|
|
"maskReveal 900ms ease-out 150ms forwards";
|
|
}
|
|
if (heroSub) {
|
|
heroSub.style.opacity = "0";
|
|
heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
|
|
}
|
|
const contactSection = document.querySelector("section.py-20.bg-white");
|
|
if (contactSection) {
|
|
contactSection.style.opacity = "0";
|
|
contactSection.style.animation =
|
|
"fadeUp 800ms ease-out 600ms forwards";
|
|
}
|
|
const mapSection = document.querySelector("section.py-20.bg-kh3-black");
|
|
if (mapSection) {
|
|
mapSection.style.opacity = "0";
|
|
mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
|
|
}
|
|
});
|
|
|
|
// Auto-scroll to contact section after 2.5 seconds with custom smooth animation
|
|
setTimeout(() => {
|
|
const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section
|
|
if (contactSection) {
|
|
const targetPosition = contactSection.offsetTop;
|
|
const startPosition = window.pageYOffset;
|
|
const distance = targetPosition - startPosition;
|
|
const duration = 2000; // 2 seconds for the scroll animation
|
|
let start = null;
|
|
|
|
function animation(currentTime) {
|
|
if (start === null) start = currentTime;
|
|
const timeElapsed = currentTime - start;
|
|
const run = easeInOutCubic(
|
|
timeElapsed,
|
|
startPosition,
|
|
distance,
|
|
duration
|
|
);
|
|
window.scrollTo(0, run);
|
|
if (timeElapsed < duration) requestAnimationFrame(animation);
|
|
}
|
|
|
|
// Easing function for smooth animation
|
|
function easeInOutCubic(t, b, c, d) {
|
|
t /= d / 2;
|
|
if (t < 1) return (c / 2) * t * t * t + b;
|
|
t -= 2;
|
|
return (c / 2) * (t * t * t + 2) + b;
|
|
}
|
|
|
|
requestAnimationFrame(animation);
|
|
}
|
|
}, 2500);
|
|
</script>
|
|
</body>
|
|
</html>
|