mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-10-16 22:31:47 +00:00
944 lines
35 KiB
HTML
944 lines
35 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 pt-12 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-start">
|
|
<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="brands.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>
|
|
|
|
<!-- 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" 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>
|
|
</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 masked-reveal">
|
|
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-5xl 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>
|
|
|
|
<!-- Embedded Map -->
|
|
<div
|
|
class="mt-10 w-full overflow-hidden rounded-lg"
|
|
style="aspect-ratio: 4 / 3"
|
|
>
|
|
<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.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 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 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);
|
|
}
|
|
}, 2000);
|
|
</script>
|
|
</body>
|
|
</html>
|