mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-10-16 20:41:47 +00:00
1076 lines
38 KiB
HTML
1076 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" />
|
|
<title>About Us - 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=Bai+Jamjuree:wght@600;800&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<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 -->
|
|
<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 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-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-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.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.15s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>M</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.25s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>E</span
|
|
>
|
|
</a>
|
|
|
|
<!-- ABOUT US - Slightly right -->
|
|
<a
|
|
href="about.html"
|
|
class="block text-white text-lg font-medium border-b border-white pb-1 ml-6 font-montserrat"
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.3s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>B</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.4s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.45s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>U</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.5s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.55s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
> </span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.6s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>U</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- PROJECTS - More right -->
|
|
<a
|
|
href="projects.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.7s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>P</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.8s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.85s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>J</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.9s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.95s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- SERVICES - Most right -->
|
|
<a
|
|
href="services.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: 1.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>S</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.15s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.25s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>V</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.3s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>I</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.4s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.45s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- APPROACH - Most right -->
|
|
<a
|
|
href="approach.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: 1.5s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.55s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>P</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.6s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>P</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.7s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.8s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.85s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>H</span
|
|
>
|
|
</a>
|
|
|
|
<!-- CAREERS - More right -->
|
|
<a
|
|
href="careers.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: 1.9s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 1.95s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.15s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- NEWS - Slightly right -->
|
|
<a
|
|
href="news.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: 2.3s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>N</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.4s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.45s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- OTHER BRANDS - 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: 2.5s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.55s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.6s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.7s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
> </span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.8s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>B</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.85s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.9s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 2.95s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>N</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 3s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>D</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 3.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>S</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 3.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
> </span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 3.15s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>B</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 3.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>Y</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 3.25s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
> </span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 3.3s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>K</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 3.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 3.4s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
"
|
|
>3</span
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<header
|
|
class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/90 backdrop-blur-sm"
|
|
>
|
|
<div
|
|
class="container mx-auto px-8 py-4 flex justify-between items-center"
|
|
>
|
|
<!-- Logo -->
|
|
<a href="index.html" class="flex items-center gap-3">
|
|
<img
|
|
src="assets/images/kh3_logo_dark.png"
|
|
alt="KH3"
|
|
class="w-12 h-12"
|
|
/>
|
|
<span class="text-white text-xl font-bold tracking-wider">KH3</span>
|
|
</a>
|
|
|
|
<!-- Menu Grid -->
|
|
<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"></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>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="pt-20">
|
|
<!-- Hero Section -->
|
|
<section class="relative py-20 bg-kh3-black">
|
|
<div class="container mx-auto px-8 text-center">
|
|
<h1
|
|
class="text-4xl md:text-6xl font-bold mb-6 text-white opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 0.3s forwards"
|
|
>
|
|
About KH3
|
|
</h1>
|
|
<p
|
|
class="text-xl text-neutral-300 max-w-2xl mx-auto opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 0.6s forwards"
|
|
>
|
|
Building inspiring spaces through innovative construction and design
|
|
solutions since 2014
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section class="py-20 bg-white text-kh3-black">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<div class="text-center">
|
|
<h2
|
|
class="text-4xl font-bold mb-12 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 0.8s forwards"
|
|
>
|
|
OUR STORY
|
|
</h2>
|
|
<div class="text-lg leading-relaxed space-y-6 max-w-4xl mx-auto">
|
|
<p
|
|
class="opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 1s forwards"
|
|
>
|
|
BASED IN ACCRA, GHANA, KH3 WAS ESTABLISHED IN
|
|
<span class="text-kh3-red font-semibold">2014</span> TO CATER
|
|
FOR THE CONSTRUCTION PROJECT MANAGEMENT NEEDS OF COMMERCIAL
|
|
CLIENTS. WITH A GROWING REPUTATION FOR QUALITY, ATTENTION TO
|
|
DETAIL AND THE UPMOST
|
|
<span class="text-kh3-red font-semibold">PROFESSIONALISM</span>,
|
|
KH3 EXPANDED INTO COMPREHENSIVE DESIGN AND FIT-OUT SERVICES.
|
|
</p>
|
|
<p
|
|
class="opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 1.2s forwards"
|
|
>
|
|
THIS MEANT MORE CONTROL OVER THE END-TO-END PROCESS, MAINTAINING
|
|
<span class="text-kh3-red font-semibold">HIGH STANDARDS</span>
|
|
FROM START TO FINISH AND ENSURING THAT THE ORIGINAL
|
|
SPECIFICATION COULD BE MET AND EXCEEDED. TODAY, KH3 WORKS WITH A
|
|
BROAD SPECTRUM OF CLIENTS, EXPANDING INTO NEW MARKETS WHILST
|
|
HANDLING THE ENTIRE PROCESS FROM DESIGN TO THE FINAL FINISH.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Values Section -->
|
|
<section class="py-20 bg-neutral-100 text-kh3-black">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<div class="text-center mb-16">
|
|
<h2
|
|
class="text-4xl font-bold mb-6 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 1.4s forwards"
|
|
>
|
|
OUR VALUES
|
|
</h2>
|
|
<p
|
|
class="text-lg text-neutral-600 max-w-2xl mx-auto opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 1.6s forwards"
|
|
>
|
|
The principles that guide everything we do
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
|
|
<div
|
|
class="text-center opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 1.8s forwards"
|
|
>
|
|
<div
|
|
class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-xl font-semibold mb-4">QUALITY</h3>
|
|
<p class="text-neutral-600">
|
|
We maintain the highest standards in every project, ensuring
|
|
excellence from conception to completion.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-center opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 2s forwards"
|
|
>
|
|
<div
|
|
class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-xl font-semibold mb-4">PROFESSIONALISM</h3>
|
|
<p class="text-neutral-600">
|
|
Our team approaches every project with dedication, expertise,
|
|
and unwavering commitment to our clients.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-center opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 2.2s forwards"
|
|
>
|
|
<div
|
|
class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-xl font-semibold mb-4">INNOVATION</h3>
|
|
<p class="text-neutral-600">
|
|
We continuously evolve our methods and embrace new technologies
|
|
to deliver cutting-edge solutions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-kh3-black text-white py-16">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<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>
|
|
<p class="text-neutral-300 leading-relaxed">
|
|
Building inspiring spaces through innovative construction and
|
|
design solutions.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-6">Quick Links</h3>
|
|
<ul class="space-y-3">
|
|
<li>
|
|
<a
|
|
href="index.html"
|
|
class="text-neutral-300 hover:text-white transition-colors"
|
|
>Home</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="about.html"
|
|
class="text-neutral-300 hover:text-white transition-colors"
|
|
>About Us</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="projects.html"
|
|
class="text-neutral-300 hover:text-white transition-colors"
|
|
>Projects</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="contact.html"
|
|
class="text-neutral-300 hover:text-white transition-colors"
|
|
>Contact</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-6">Contact Info</h3>
|
|
<div class="space-y-3 text-neutral-300">
|
|
<p>Accra, Ghana</p>
|
|
<p>Email: info@kh3.com</p>
|
|
<p>Phone: +233 XX XXX XXXX</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="border-t border-neutral-800 pt-8 text-center text-neutral-400"
|
|
>
|
|
<p>© 2024 KH3. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 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">
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<img
|
|
src="assets/images/kh3_logo_dark.png"
|
|
alt="KH3"
|
|
class="w-16 h-16"
|
|
/>
|
|
<span class="text-4xl font-bold tracking-wider">KH3</span>
|
|
</div>
|
|
<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>
|
|
|
|
<style>
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pageEnter {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
// Enhanced page transition system
|
|
const cover =
|
|
document.getElementById("pageCover") ||
|
|
(() => {
|
|
const div = document.createElement("div");
|
|
div.id = "pageCover";
|
|
div.className =
|
|
"fixed inset-0 bg-kh3-red z-50 transform translate-x-full transition-all duration-500 ease-in-out";
|
|
div.style.background = "linear-gradient(45deg, #b03037, #8a252a)";
|
|
document.body.appendChild(div);
|
|
return div;
|
|
})();
|
|
|
|
// Add entrance animation class
|
|
document.body.style.animation = "pageEnter 0.6s ease-out";
|
|
|
|
document.querySelectorAll("a[data-trans]").forEach((a) => {
|
|
a.addEventListener("click", (e) => {
|
|
const href = a.getAttribute("href");
|
|
if (!href || href.startsWith("#")) return;
|
|
e.preventDefault();
|
|
|
|
// Enhanced exit animation
|
|
cover.style.transform = "translateX(0)";
|
|
cover.style.opacity = "0.95";
|
|
|
|
setTimeout(() => {
|
|
location.href = href;
|
|
}, 600);
|
|
});
|
|
});
|
|
|
|
// 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;
|
|
|
|
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>
|
|
`;
|
|
isMenuOpen = false;
|
|
} else {
|
|
// Open menu
|
|
navMenu.classList.remove("hidden");
|
|
menuGrid.innerHTML = `
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-kh3-red" 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>
|
|
</div>
|
|
`;
|
|
isMenuOpen = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Custom cursor functionality
|
|
const cursor = document.getElementById("customCursor");
|
|
if (cursor) {
|
|
document.addEventListener("mousemove", (e) => {
|
|
cursor.style.left = e.clientX - 12 + "px";
|
|
cursor.style.top = e.clientY - 12 + "px";
|
|
});
|
|
|
|
// Hide cursor on mobile
|
|
if (window.innerWidth < 768) {
|
|
cursor.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// Loading screen
|
|
window.addEventListener("load", () => {
|
|
const loadingScreen = document.getElementById("loadingScreen");
|
|
if (loadingScreen) {
|
|
setTimeout(() => {
|
|
loadingScreen.style.opacity = "0";
|
|
setTimeout(() => {
|
|
loadingScreen.style.display = "none";
|
|
}, 500);
|
|
}, 1000);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|