mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:13:41 +00:00
1051 lines
38 KiB
HTML
1051 lines
38 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-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">
|
|
<!-- Logo -->
|
|
<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" />
|
|
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
|
</a>
|
|
</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-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">HOME</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.075s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>M</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.125s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
</a>
|
|
|
|
<!-- WHY - Slightly right -->
|
|
<a
|
|
href="about.html"
|
|
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">WHY</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.225s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.25s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>Y</span
|
|
>
|
|
</a>
|
|
|
|
<!-- HOW - More right -->
|
|
<a
|
|
href="services.html"
|
|
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">HOW</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.375s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.4s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
</a>
|
|
|
|
<!-- WHAT - Most right -->
|
|
<a
|
|
href="projects.html"
|
|
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.55s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">WHAT</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.55s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.575s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.6s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.625s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
</a>
|
|
|
|
<!-- WHO - New position -->
|
|
<a
|
|
href="who.html"
|
|
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">WHO</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.675s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.7s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
</a>
|
|
|
|
<!-- CONTACTS - More right -->
|
|
<a
|
|
href="contact.html"
|
|
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
>
|
|
<span class="md:hidden">CONTACTS</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.775s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.8s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>N</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.825s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.85s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.875s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.9s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.925s;
|
|
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-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"
|
|
/>
|
|
<span class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
|
|
>KH3</span
|
|
>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Menu Toggle with Homepage/WHY structure -->
|
|
<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" 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="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
|
|
<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>
|
|
</div>
|
|
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
|
|
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative h-screen flex items-center justify-center hero-section">
|
|
<!-- 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-4 sm:gap-8 mb-6 max-w-6xl mx-auto px-4 sm:px-6 min-w-0">
|
|
<div class="flex-1 h-1 bg-white opacity-0 min-w-[60px] sm:min-w-[100px]" style="animation: fadeInLeft 1s ease-out 0.3s forwards;"></div>
|
|
<h1
|
|
class="text-4xl md:text-8xl font-bold whitespace-normal md:whitespace-nowrap tracking-normal md:tracking-[0.2em] px-2 sm: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 min-w-[60px] sm:min-w-[100px]" style="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 contact-form-section">
|
|
<!-- 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>
|
|
|
|
|
|
</section>
|
|
|
|
<!-- Map Section -->
|
|
<section class="py-20 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-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"
|
|
>
|
|
<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"
|
|
/>
|
|
<span class="text-2xl font-bold tracking-wider">KH3</span>
|
|
</a>
|
|
<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);
|
|
}
|
|
|
|
/* Request quote button hover effect */
|
|
.bg-kh3-red:hover {
|
|
box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
|
|
}
|
|
|
|
/* Page transition animations */
|
|
@keyframes staggerFadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(0.95);
|
|
}
|
|
}
|
|
|
|
/* Section classes for targeting */
|
|
.hero-section { contain: layout; }
|
|
|
|
.contact-form-section { contain: layout; }
|
|
|
|
.map-section { contain: layout; }
|
|
/* Homepage-style menu outline and waves */
|
|
#menuWrap { position: relative; overflow: visible; }
|
|
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
|
|
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
|
|
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
|
|
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
|
|
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
|
|
#menuWrap.open #menuPetal { opacity: 1; }
|
|
#menuWrap.open #menuGrid { opacity: 0; }
|
|
@keyframes waveBurst { 0%,69%{opacity:0;transform:scale(1)} 77%{opacity:.38;transform:scale(1.18,1.12)} 92%{opacity:.22;transform:scale(1.55,1.42)} 100%{opacity:0;transform:scale(1.95,1.75)} }
|
|
</style>
|
|
|
|
<script>
|
|
// Menu toggle functionality (class-toggle)
|
|
const menuToggle = document.getElementById("menuToggle");
|
|
const navMenu = document.getElementById("navMenu");
|
|
const menuWrap = document.getElementById("menuWrap");
|
|
(function setupMenu(){
|
|
if (!menuToggle || !navMenu || !menuWrap) return;
|
|
let isOpen = false;
|
|
menuToggle.addEventListener('click', (e)=>{
|
|
e.stopPropagation();
|
|
isOpen = !isOpen;
|
|
if (isOpen) { navMenu.classList.remove('hidden'); menuWrap.classList.add('open'); }
|
|
else { navMenu.classList.add('hidden'); menuWrap.classList.remove('open'); }
|
|
});
|
|
document.addEventListener('click', (e)=>{
|
|
if (!isOpen) return;
|
|
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
|
isOpen = false;
|
|
navMenu.classList.add('hidden');
|
|
menuWrap.classList.remove('open');
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
// 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);
|
|
|
|
// Page transition functionality
|
|
function handlePageTransition(e) {
|
|
e.preventDefault();
|
|
const targetUrl = e.currentTarget.href;
|
|
const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
|
|
|
|
// Get all elements to animate out
|
|
const elementsToAnimate = [
|
|
document.querySelector('.hero-section'),
|
|
document.querySelector('.contact-form-section'),
|
|
document.querySelector('.map-section'),
|
|
document.querySelector('main')
|
|
].filter(el => el);
|
|
|
|
// Animate elements out in order
|
|
elementsToAnimate.forEach((element, index) => {
|
|
setTimeout(() => {
|
|
if (element) {
|
|
element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
|
|
}
|
|
}, index * 100);
|
|
});
|
|
|
|
// Navigate after animations complete
|
|
setTimeout(() => {
|
|
window.location.href = targetUrl;
|
|
}, elementsToAnimate.length * 100 + 600);
|
|
}
|
|
|
|
// Add event listeners for page transitions
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const transitionLinks = document.querySelectorAll('[data-trans]');
|
|
transitionLinks.forEach(link => {
|
|
link.addEventListener('click', handlePageTransition);
|
|
});
|
|
});
|
|
|
|
// Handle back/forward navigation
|
|
window.addEventListener('pageshow', function(event) {
|
|
if (event.persisted) {
|
|
// Page was loaded from cache (back/forward)
|
|
window.location.reload();
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
// Ensure clean state on back/forward cache restores
|
|
window.addEventListener('pageshow', () => {
|
|
const nav = document.getElementById('navMenu');
|
|
const wrap = document.getElementById('menuWrap');
|
|
if (nav) nav.classList.add('hidden');
|
|
if (wrap) wrap.classList.remove('open');
|
|
});
|
|
|
|
// Cleanup before bfcache snapshot
|
|
window.addEventListener('pagehide', () => {
|
|
const nav = document.getElementById('navMenu');
|
|
const wrap = document.getElementById('menuWrap');
|
|
if (nav) nav.classList.add('hidden');
|
|
if (wrap) wrap.classList.remove('open');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|