958 lines
34 KiB
HTML
958 lines
34 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" />
|
|
</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"
|
|
/>
|
|
|
|
</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">
|
|
<!-- Desktop view: menuWrap with waves and outline -->
|
|
<div class="relative inline-block hidden md:block" id="menuWrap">
|
|
<div class="menu-waves" aria-hidden="true">
|
|
<span class="wave"></span>
|
|
<span class="wave"></span>
|
|
<span class="wave"></span>
|
|
</div>
|
|
<div class="menu-outline" aria-hidden="true"></div>
|
|
<div class="relative" id="menuGrid">
|
|
<img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
|
|
</div>
|
|
<div
|
|
id="menuPetal"
|
|
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
|
|
>
|
|
<img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile view: simple transparent background -->
|
|
<div class="md:hidden">
|
|
<div
|
|
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
|
>
|
|
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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 - 5: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"
|
|
/>
|
|
|
|
</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; }
|
|
|
|
/* Hide menu outline on mobile */
|
|
@media (max-width: 768px) {
|
|
.menu-outline {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Create a proper button container for mobile */
|
|
#menuGrid {
|
|
background: rgba(255, 255, 255, 0.12) !important;
|
|
border-radius: 8px !important;
|
|
padding: 6px !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
}
|
|
}
|
|
|
|
.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
|
|
const menuToggle = document.getElementById("menuToggle");
|
|
const navMenu = document.getElementById("navMenu");
|
|
const menuWrap = document.getElementById("menuWrap");
|
|
const menuGrid = document.getElementById("menuGrid");
|
|
const menuGridMobile = document.getElementById("menuGridMobile");
|
|
|
|
if (menuToggle && navMenu) {
|
|
let isMenuOpen = false;
|
|
|
|
menuToggle.addEventListener("click", () => {
|
|
if (isMenuOpen) {
|
|
// Close menu
|
|
navMenu.classList.add("hidden");
|
|
if (menuWrap) menuWrap.classList.remove("open");
|
|
isMenuOpen = false;
|
|
} else {
|
|
// Open menu
|
|
navMenu.classList.remove("hidden");
|
|
if (menuWrap) menuWrap.classList.add("open");
|
|
isMenuOpen = true;
|
|
}
|
|
});
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener("click", (e) => {
|
|
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
|
navMenu.classList.add("hidden");
|
|
if (menuWrap) menuWrap.classList.remove("open");
|
|
isMenuOpen = false;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script src="js/contact.js"></script>
|
|
</body>
|
|
</html>
|