293 lines
No EOL
19 KiB
HTML
293 lines
No EOL
19 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>What - KH3</title>
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
<meta name="description"
|
|
content="Explore KH3's portfolio of construction projects, fit-outs, and design developments across Ghana and West Africa." />
|
|
<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.png" 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.png" 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">
|
|
<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-16 md: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">OUR WHAT</h1>
|
|
<div class="flex-1 h-px bg-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative overflow-hidden">
|
|
<img id="projectsCurrentImg" src="assets/images/room.webp" alt="KH3 Projects"
|
|
class="w-full h-full object-cover opacity-0 animate-[diagMaskReveal_1500ms_ease-out_300ms_forwards]" />
|
|
<img id="projectsNextImg" src="assets/images/chair.webp" alt="KH3 Projects"
|
|
class="w-full h-full object-cover opacity-0 absolute inset-0" />
|
|
<button id="projectsScrollArrow"
|
|
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-32 bg-kh3-black">
|
|
<div class="container mx-auto px-8 max-w-7xl">
|
|
<div class="mb-16 text-center">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h2 class="text-2xl md:text-3xl font-light text-white mb-4 opacity-0" data-anim="fade-in-up"
|
|
data-anim-delay="200">Browse through our past projects</h2>
|
|
<p class="text-lg text-neutral-400 leading-relaxed opacity-0" data-anim="fade-in-up"
|
|
data-anim-delay="400">Discover the diverse portfolio of inspiring spaces we've created
|
|
across Ghana and West Africa. Each project represents our commitment to excellence,
|
|
innovation, and transforming visions into reality.</p>
|
|
</div>
|
|
</div>
|
|
<div id="projectsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Project cards will be dynamically loaded here by projects.js -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Project Details Modal (Preserved with no changes) -->
|
|
<div id="projectModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 hidden">
|
|
<div class="relative w-full h-full flex items-center justify-center p-4">
|
|
<div id="modalContent"
|
|
class="bg-kh3-black border border-white/20 rounded-2xl max-w-6xl w-full max-h-[90vh] overflow-hidden transform scale-95 opacity-0 transition-all duration-500 flex flex-col">
|
|
<div class="flex items-center justify-between p-6 border-b border-white/10">
|
|
<div>
|
|
<h2 id="modalTitle" class="text-2xl md:text-3xl font-bold text-white mb-2"></h2>
|
|
<p id="modalCategory" class="text-kh3-red text-sm font-medium tracking-wider"></p>
|
|
</div>
|
|
<button id="closeModal" class="text-white/70 hover:text-white transition-colors duration-300"><svg
|
|
class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg></button>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row flex-1 min-h-0">
|
|
<div class="lg:w-2/3 relative group">
|
|
<div class="relative h-80 lg:h-full overflow-hidden">
|
|
<img id="modalMainImage" src="" alt=""
|
|
class="w-full h-full object-cover transition-all duration-500 cursor-pointer hover:scale-105"
|
|
onclick="enlargeImage()" />
|
|
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
|
|
<div id="imageDots" class="flex space-x-2"></div>
|
|
</div>
|
|
<button id="prevImage"
|
|
class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full transition-all duration-300 opacity-0 group-hover:opacity-100"><svg
|
|
class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 19l-7-7 7-7"></path>
|
|
</svg></button>
|
|
<button id="nextImage"
|
|
class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full transition-all duration-300 opacity-0 group-hover:opacity-100"><svg
|
|
class="w-6 h-6" 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>
|
|
<div class="absolute top-4 right-4 bg-black/50 text-white px-3 py-1 rounded-full text-sm">
|
|
<span id="imageCounter">1</span> / <span id="totalImages">1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:w-1/3 p-6 overflow-y-auto" style="max-height: calc(90vh - 120px)">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-3 border-b border-white/20 pb-2">PROJECT
|
|
OVERVIEW</h3>
|
|
<p id="modalDescription" class="text-white/80 text-sm leading-relaxed"></p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-3 border-b border-white/20 pb-2">PROJECT
|
|
DETAILS</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between gap-4"><span
|
|
class="text-white/60 text-sm">Client:</span><span id="modalClient"
|
|
class="text-white text-sm font-medium text-right max-w-[60%]"></span></div>
|
|
<div class="flex justify-between gap-4"><span class="text-white/60 text-sm">Type of
|
|
Work:</span><span id="modalTypeOfWork"
|
|
class="text-white text-sm font-medium text-right max-w-[60%]"></span></div>
|
|
<div class="flex justify-between gap-4"><span
|
|
class="text-white/60 text-sm">Size:</span><span id="modalSize"
|
|
class="text-white text-sm font-medium text-right max-w-[60%]"></span></div>
|
|
<div class="flex justify-between gap-4"><span
|
|
class="text-white/60 text-sm">Completion:</span><span
|
|
id="modalCompletionDate"
|
|
class="text-white text-sm font-medium text-right max-w-[60%]"></span></div>
|
|
<div class="flex justify-between gap-4"><span
|
|
class="text-white/60 text-sm">Location:</span><span id="modalLocation"
|
|
class="text-white text-sm font-medium text-right max-w-[60%]"></span></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-3 border-b border-white/20 pb-2">
|
|
HIGHLIGHTS</h3>
|
|
<ul id="modalHighlights" class="space-y-2"></ul>
|
|
</div>
|
|
<div class="pt-4 border-t border-white/20"><a href="contact.html"
|
|
class="block w-full bg-kh3-red hover:bg-red-700 text-white py-3 px-6 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 text-center"
|
|
data-trans="crossfade">WORK WITH US</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="imageEnlargeModal" class="fixed inset-0 bg-black/95 backdrop-blur-sm z-[60] hidden">
|
|
<div class="relative w-full h-full flex items-center justify-center p-4">
|
|
<div class="relative max-w-7xl max-h-full"><img id="enlargedImage" src="" alt=""
|
|
class="max-w-full max-h-full object-contain rounded-lg shadow-2xl" /><button
|
|
id="closeEnlargeModal"
|
|
class="absolute -top-4 -right-4 bg-kh3-red hover:bg-red-700 text-white p-3 rounded-full transition-all duration-300 transform hover:scale-110"><svg
|
|
class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg></button>
|
|
<div class="absolute bottom-4 left-4 bg-black/70 text-white px-4 py-2 rounded-lg"><span
|
|
id="enlargedImageCounter">1</span> / <span id="enlargedTotalImages">1</span></div><button
|
|
id="enlargePrevImage"
|
|
class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-4 rounded-full transition-all duration-300"><svg
|
|
class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
|
|
</path>
|
|
</svg></button><button id="enlargeNextImage"
|
|
class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-4 rounded-full transition-all duration-300"><svg
|
|
class="w-8 h-8" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global and Page-Specific Scripts -->
|
|
<script src="js/main.js"></script>
|
|
<script src="js/carousel.js"></script>
|
|
<script src="js/projects.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |