342 lines
No EOL
21 KiB
HTML
342 lines
No EOL
21 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" />
|
|
<title>Why - KH3</title>
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
<meta name="description"
|
|
content="Learn about KH3 - Construction Project Management and Fit-out Services in Accra, Ghana. Building inspiring spaces since 2014." />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
|
rel="stylesheet" />
|
|
</head>
|
|
|
|
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
|
|
|
|
|
|
<!-- Navigation Menu (Standardized) -->
|
|
<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">
|
|
<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.webp" alt="KH3" class="w-12 h-12" />
|
|
</a>
|
|
</div>
|
|
<nav class="flex-1 relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="relative ml-8">
|
|
<!-- Links are now vertically aligned and have no underline -->
|
|
<div class="space-y-6">
|
|
<a href="index.html" class="nav-link ml-0" data-anim="fade-in-left" data-anim-delay="50">
|
|
<span class="md:hidden">HOME</span><span class="nav-link-span">H</span><span
|
|
class="nav-link-span">O</span><span class="nav-link-span">M</span><span
|
|
class="nav-link-span">E</span>
|
|
</a>
|
|
<a href="about.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
|
data-anim-delay="200">
|
|
<span class="md:hidden">WHY</span><span class="nav-link-span">W</span><span
|
|
class="nav-link-span">H</span><span class="nav-link-span">Y</span>
|
|
</a>
|
|
<a href="services.html" class="nav-link ml-0" data-trans="crossfade"
|
|
data-anim="fade-in-left" data-anim-delay="350">
|
|
<span class="md:hidden">HOW</span><span class="nav-link-span">H</span><span
|
|
class="nav-link-span">O</span><span class="nav-link-span">W</span>
|
|
</a>
|
|
<a href="projects.html" class="nav-link ml-0" data-trans="crossfade"
|
|
data-anim="fade-in-left" data-anim-delay="550">
|
|
<span class="md:hidden">WHAT</span><span class="nav-link-span">W</span><span
|
|
class="nav-link-span">H</span><span class="nav-link-span">A</span><span
|
|
class="nav-link-span">T</span>
|
|
</a>
|
|
<a href="who.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
|
data-anim-delay="650">
|
|
<span class="md:hidden">WHO</span><span class="nav-link-span">W</span><span
|
|
class="nav-link-span">H</span><span class="nav-link-span">O</span>
|
|
</a>
|
|
<a href="contact.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
|
data-anim-delay="750">
|
|
<span class="md:hidden">CONTACTS</span><span class="nav-link-span">C</span><span
|
|
class="nav-link-span">O</span><span class="nav-link-span">N</span><span
|
|
class="nav-link-span">T</span><span class="nav-link-span">A</span><span
|
|
class="nav-link-span">C</span><span class="nav-link-span">T</span><span
|
|
class="nav-link-span">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.webp" alt="KH3" class="w-12 h-12" />
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Menu Toggle -->
|
|
<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" role="button" aria-label="Toggle Navigation Menu" tabindex="0">
|
|
<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>
|
|
<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>
|
|
|
|
<!-- Main Content -->
|
|
<main class="pt-20">
|
|
<section class="relative bg-kh3-black hero-section">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
|
|
<div class="relative bg-kh3-black flex items-center">
|
|
<div class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
|
|
data-anim="fade-in-up" data-anim-delay="1200">
|
|
<div class="w-px flex-1 bg-neutral-800"></div>
|
|
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
|
|
<div class="w-px flex-1 bg-neutral-800"></div>
|
|
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
|
|
<div class="w-px flex-1 bg-neutral-800"></div>
|
|
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
|
|
<div class="w-px flex-1 bg-neutral-800"></div>
|
|
</div>
|
|
<div class="pl-28 pr-6 w-full">
|
|
<div class="flex items-center gap-6 opacity-0" data-anim="fade-in-up" data-anim-delay="1600">
|
|
<div class="flex-1 h-px bg-white"></div>
|
|
<h1 class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold">WHY</h1>
|
|
<div class="flex-1 h-px bg-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative overflow-hidden">
|
|
<img src="assets/images/room.webp" alt="About KH3"
|
|
class="w-full h-full object-cover opacity-0 animate-[diagMaskReveal_1500ms_ease-out_300ms_forwards]" />
|
|
<button id="aboutScrollArrow" aria-label="Scroll down"
|
|
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
|
|
data-anim="fade-in-up" data-anim-delay="1900">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-20 bg-kh3-black text-white relative dream-design-deliver hidden md:block">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<div class="text-center">
|
|
<div class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 opacity-0"
|
|
data-anim="fade-in-up" data-anim-delay="800">
|
|
<div class="flex items-center space-x-3">
|
|
<h2 class="text-3xl md:text-4xl font-bold tracking-wider text-white">DREAM</h2>
|
|
<div class="w-2 h-2 bg-kh3-red rounded-full"></div>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<h2 class="text-3xl md:text-4xl font-bold tracking-wider text-white">DESIGN</h2>
|
|
<div class="w-2 h-2 bg-kh3-red rounded-full"></div>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<h2 class="text-3xl md:text-4xl font-bold tracking-wider text-white">DELIVER</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0" data-anim="fade-in-up"
|
|
data-anim-delay="1200"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-32 bg-white text-kh3-black">
|
|
<div class="container mx-auto px-8 max-w-5xl">
|
|
<div class="text-center">
|
|
<div class="text-xl leading-relaxed space-y-8 max-w-4xl mx-auto">
|
|
<p class="opacity-0" data-anim="fade-in-up" data-anim-delay="200">KH3 is Ghana's leading
|
|
Construction Project Management Firm with a focus on Interior Design and Fit-out. Founded in
|
|
<span class="text-kh3-red font-semibold">2014</span> by a highly motivated team, KH3 is
|
|
committed to being the standard of business excellence in Africa.
|
|
</p>
|
|
<p class="opacity-0" data-anim="fade-in-up" data-anim-delay="300">Our turnkey approach provides
|
|
our clients with a single point of contact. This liberates them to refocus on their core
|
|
business. Results: Exceptional projects completed within budget and on time!</p>
|
|
<p class="opacity-0" data-anim="fade-in-up" data-anim-delay="400">Our forward thinking, highly
|
|
sort after network of professionals, artisans, suppliers and subcontractors, makeup the
|
|
power house that is the KH3 team.</p>
|
|
<p class="opacity-0" data-anim="fade-in-up" data-anim-delay="500">Guided by our core values of
|
|
Beauty, Integrity, Loyalty, Diligence, Excellence, Resilience and Studiousness, our team has
|
|
executed over 20,000 square meters of office space for international and national brands
|
|
such as <span class="text-kh3-red font-semibold">Google</span>, <span
|
|
class="text-kh3-red font-semibold">Align</span>, <span
|
|
class="text-kh3-red font-semibold">DBG</span> and <span
|
|
class="text-kh3-red font-semibold">Enterprise Group Limited</span>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-32 bg-kh3-grey text-kh3-black mission-vision">
|
|
<div class="container mx-auto px-8 max-w-7xl">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
|
|
<div class="relative group">
|
|
<div
|
|
class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
</div>
|
|
<div
|
|
class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
</div>
|
|
<div
|
|
class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl">
|
|
</div>
|
|
<div
|
|
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
|
</div>
|
|
<div class="absolute top-6 left-4 w-1.5 h-1.5 bg-kh3-red/50 rounded-full animate-pulse">
|
|
</div>
|
|
<div class="absolute bottom-4 right-6 w-1 h-1 bg-kh3-red/30 rounded-full animate-ping">
|
|
</div>
|
|
<div class="relative text-center">
|
|
<div
|
|
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110">
|
|
<span class="text-white text-2xl font-bold drop-shadow-lg">01</span>
|
|
</div>
|
|
<h2
|
|
class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg transition-all duration-300">
|
|
VISION</h2>
|
|
<div
|
|
class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500">
|
|
</div>
|
|
<p
|
|
class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300">
|
|
We will be the standard of global business excellence in Africa.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative group">
|
|
<div
|
|
class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
</div>
|
|
<div
|
|
class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
</div>
|
|
<div
|
|
class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl">
|
|
</div>
|
|
<div
|
|
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
|
</div>
|
|
<div class="absolute top-4 right-4 w-2 h-2 bg-kh3-red/60 rounded-full animate-pulse"></div>
|
|
<div class="absolute bottom-6 left-6 w-1 h-1 bg-kh3-red/40 rounded-full animate-ping"></div>
|
|
<div class="relative text-center">
|
|
<div
|
|
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110">
|
|
<span class="text-white text-2xl font-bold drop-shadow-lg">02</span>
|
|
</div>
|
|
<h2
|
|
class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg transition-all duration-300">
|
|
MISSION</h2>
|
|
<div
|
|
class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500">
|
|
</div>
|
|
<p
|
|
class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300">
|
|
Out of the ordinary the Extraordinary that inspires the world.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- NEW Interactive Values Section -->
|
|
<section id="values-section" class="py-24 md:py-32 bg-white text-kh3-black">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<div class="text-center mb-16 md:mb-20">
|
|
<h2 class="text-5xl md:text-7xl font-bold opacity-0" data-anim="fade-in-up" data-anim-delay="200">
|
|
VALUES
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Main container for the interactive layout -->
|
|
<div class="relative md:grid md:grid-cols-3 md:gap-16 lg:gap-24">
|
|
|
|
<!-- Left Column: Sticky List of Value Titles -->
|
|
<div class="md:col-span-1 md:sticky top-32 self-start">
|
|
<ul id="values-list"
|
|
class="flex flex-wrap justify-center gap-x-4 gap-y-2 mb-12 md:flex-col md:flex-nowrap md:gap-4 md:mb-0">
|
|
<!-- Value titles will be dynamically populated by JS -->
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Right Column: Content Display Area -->
|
|
<div id="values-content" class="md:col-span-2">
|
|
<!-- Value descriptions will be dynamically populated by JS -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
<div data-include="components/footer.html"></div>
|
|
|
|
|
|
|
|
<!-- Custom Cursor -->
|
|
<div class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50" id="customCursor"></div>
|
|
|
|
<!-- Loading Screen -->
|
|
<div class="fixed inset-0 bg-kh3-black z-50 flex items-center justify-center" id="loadingScreen">
|
|
<div class="text-center">
|
|
<a href="index.html"
|
|
class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
|
|
<img src="assets/images/kh3_logo.webp" alt="KH3" class="w-16 h-16" />
|
|
</a>
|
|
<div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden">
|
|
<div class="h-full bg-kh3-red rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Scripts -->
|
|
<script src="js/include.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/about.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |