mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
George Birikorang
2fc620570b
All checks were successful
continuous-integration/drone/push Build is passing
1212 lines
46 KiB
HTML
1212 lines
46 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=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-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">
|
|
<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-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;
|
|
"
|
|
>
|
|
<span class="md:hidden">HOME</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.075s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>M</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.125s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
</a>
|
|
|
|
<!-- ABOUT US - Slightly right -->
|
|
<a
|
|
href="about.html"
|
|
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 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;
|
|
"
|
|
>ABOUT US</a
|
|
>
|
|
|
|
<!-- SERVICES - 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;
|
|
"
|
|
>
|
|
<span class="md:hidden">SERVICES</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.375s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.4s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>R</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.425s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>V</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.45s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>I</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.475s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.5s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
class="inline-block opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.525s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
|
|
<!-- PROJECTS - 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;
|
|
"
|
|
>PROJECTS</a
|
|
>
|
|
|
|
<!-- CONTACTS - More right -->
|
|
<a
|
|
href="contact.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.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
>CONTACTS</a
|
|
>
|
|
|
|
<!-- PARTNERS - Back to left -->
|
|
<a
|
|
href="partners.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.95s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
>PARTNERS</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Static Logo and Menu -->
|
|
<div class="fixed top-6 left-8 z-40">
|
|
<div 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-2xl font-bold tracking-wider drop-shadow-lg"
|
|
>KH3</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu Toggle with Transparent Background -->
|
|
<div class="fixed top-6 right-8 z-40">
|
|
<div
|
|
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
|
id="menuToggle"
|
|
>
|
|
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
|
|
<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>
|
|
|
|
<!-- Main Content -->
|
|
<main class="pt-20">
|
|
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
|
|
<section class="relative bg-kh3-black">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
|
|
<!-- Left dark panel -->
|
|
<div class="relative bg-kh3-black flex items-center">
|
|
<!-- Vertical timeline with diamonds -->
|
|
<div
|
|
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
|
|
style="animation: fadeInUp 800ms ease-out 1200ms forwards"
|
|
>
|
|
<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>
|
|
|
|
<!-- Title with horizontal ruler -->
|
|
<div class="pl-28 pr-6 w-full">
|
|
<div
|
|
class="flex items-center gap-6 opacity-0"
|
|
style="animation: fadeInUp 800ms ease-out 1600ms forwards"
|
|
>
|
|
<div class="flex-1 h-px bg-white"></div>
|
|
<h1
|
|
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
|
|
>
|
|
ABOUT US
|
|
</h1>
|
|
<div class="flex-1 h-px bg-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right image panel -->
|
|
<div class="relative overflow-hidden">
|
|
<img
|
|
src="assets/images/room.png"
|
|
alt="About KH3"
|
|
class="w-full h-full object-cover opacity-0"
|
|
style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
|
|
/>
|
|
<!-- Down arrow prompt -->
|
|
<button
|
|
id="aboutScrollArrow"
|
|
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
|
|
style="animation: fadeInUp 800ms ease-out 1900ms forwards"
|
|
>
|
|
<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"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
|
|
<!-- Dream Design Deliver Section -->
|
|
<section class="py-20 bg-kh3-black text-white relative">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<div class="text-center">
|
|
<!-- Elegant horizontal layout -->
|
|
<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"
|
|
style="animation: fadeInUp 1s ease-out 0.8s forwards"
|
|
>
|
|
<!-- DREAM -->
|
|
<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>
|
|
|
|
<!-- DESIGN -->
|
|
<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>
|
|
|
|
<!-- DELIVER -->
|
|
<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>
|
|
|
|
<!-- Subtle underline -->
|
|
<div
|
|
class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 1.2s forwards"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Introduction 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"
|
|
style="animation: fadeInUp 1s ease-out 1.2s forwards"
|
|
>
|
|
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"
|
|
style="animation: fadeInUp 1s ease-out 1.4s forwards"
|
|
>
|
|
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"
|
|
style="animation: fadeInUp 1s ease-out 1.6s forwards"
|
|
>
|
|
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"
|
|
style="animation: fadeInUp 1s ease-out 1.8s forwards"
|
|
>
|
|
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>
|
|
|
|
<!-- Mission & Vision Section -->
|
|
<section class="py-32 bg-kh3-grey text-kh3-black">
|
|
<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">
|
|
<!-- Mission Card -->
|
|
<div class="relative group">
|
|
<!-- Decorative elements -->
|
|
<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"
|
|
>
|
|
<!-- Glossy overlay -->
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl"
|
|
></div>
|
|
|
|
<!-- Animated border glow -->
|
|
<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>
|
|
|
|
<!-- Floating particles -->
|
|
<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">
|
|
<!-- Icon/Number with glow -->
|
|
<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>
|
|
|
|
<!-- Title with text glow -->
|
|
<h2
|
|
class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg group-hover:text-shadow-lg transition-all duration-300"
|
|
>
|
|
MISSION
|
|
</h2>
|
|
|
|
<!-- Animated divider -->
|
|
<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>
|
|
|
|
<!-- Content with hover effect -->
|
|
<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>
|
|
|
|
<!-- Vision Card -->
|
|
<div class="relative group">
|
|
<!-- Decorative elements -->
|
|
<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"
|
|
>
|
|
<!-- Glossy overlay -->
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl"
|
|
></div>
|
|
|
|
<!-- Animated border glow -->
|
|
<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>
|
|
|
|
<!-- Floating particles -->
|
|
<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">
|
|
<!-- Icon/Number with glow -->
|
|
<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>
|
|
|
|
<!-- Title with text glow -->
|
|
<h2
|
|
class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg group-hover:text-shadow-lg transition-all duration-300"
|
|
>
|
|
VISION
|
|
</h2>
|
|
|
|
<!-- Animated divider -->
|
|
<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>
|
|
|
|
<!-- Content with hover effect -->
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Values Section -->
|
|
<section class="py-32 bg-white text-kh3-black">
|
|
<div class="container mx-auto px-8 max-w-6xl">
|
|
<div class="text-center mb-20">
|
|
<h2
|
|
class="text-5xl md:text-7xl font-bold mb-16 opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 2.4s forwards"
|
|
>
|
|
VALUES
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Row 1: 3 columns -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-16 mb-16">
|
|
<div
|
|
class="text-center opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 2.6s forwards"
|
|
>
|
|
<div
|
|
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-2xl font-semibold mb-6">Beauty</h3>
|
|
<p class="text-lg text-neutral-600 leading-relaxed">
|
|
We treat all stake holders with politeness, dignity and civility
|
|
that equals the outward beauty of our environment and the
|
|
environments we create.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-center opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 2.8s forwards"
|
|
>
|
|
<div
|
|
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-2xl font-semibold mb-6">Integrity</h3>
|
|
<p class="text-lg text-neutral-600 leading-relaxed">
|
|
We stay true to our word. We will do what we say we will do, and
|
|
deliver on our promises. If forfeiting on our word is beyond our
|
|
human control; we will communicate this transparently and in
|
|
good time.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-center opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 3s forwards"
|
|
>
|
|
<div
|
|
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-2xl font-semibold mb-6">Loyalty</h3>
|
|
<p class="text-lg text-neutral-600 leading-relaxed">
|
|
We our faithful to our mission and vision and that of our
|
|
stakeholders and the organizations they represent.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2: 1 column (middle) -->
|
|
<div class="flex justify-center mb-16">
|
|
<div
|
|
class="text-center opacity-0 max-w-md"
|
|
style="animation: fadeInUp 1s ease-out 3.2s forwards"
|
|
>
|
|
<div
|
|
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-2xl font-semibold mb-6">Studiousness</h3>
|
|
<p class="text-lg text-neutral-600 leading-relaxed">
|
|
We are committed to learning and advancing our services,
|
|
products, and tools to best serve our stakeholders.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 3: 3 columns -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-16">
|
|
<div
|
|
class="text-center opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 3.4s forwards"
|
|
>
|
|
<div
|
|
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-2xl font-semibold mb-6">Diligence</h3>
|
|
<p class="text-lg text-neutral-600 leading-relaxed">
|
|
We give our utmost attention to all our projects. We do this in
|
|
earnest and with precision.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-center opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 3.6s forwards"
|
|
>
|
|
<div
|
|
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-2xl font-semibold mb-6">Excellence</h3>
|
|
<p class="text-lg text-neutral-600 leading-relaxed">
|
|
We are committed to delivering exceptional results in every area
|
|
of our operations.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-center opacity-0"
|
|
style="animation: fadeInUp 1s ease-out 3.8s forwards"
|
|
>
|
|
<div
|
|
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
|
></div>
|
|
<h3 class="text-2xl font-semibold mb-6">Resilience</h3>
|
|
<p class="text-lg text-neutral-600 leading-relaxed">
|
|
In the face of daunting challenges, setbacks and failures; we
|
|
learn and document lessons, bounce back and persist in the
|
|
pursuit of goals, targets, objectives and deadlines. We do this
|
|
with focused optimism.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team Section -->
|
|
<section class="py-32 bg-kh3-black text-white">
|
|
<div class="container mx-auto px-8 max-w-7xl">
|
|
<div class="text-center mb-20">
|
|
<!-- Main Title -->
|
|
<h2 class="text-6xl md:text-8xl font-bold mb-8">
|
|
<span class="text-white">KH3</span>
|
|
<span class="text-kh3-red">TEAM</span>
|
|
</h2>
|
|
|
|
<!-- Subtitle with line -->
|
|
<div class="flex items-center justify-center mb-8">
|
|
<div class="w-16 h-px bg-white"></div>
|
|
<span class="text-white text-xl font-medium mx-4 tracking-wider"
|
|
>MEET THE KH3 TEAM</span
|
|
>
|
|
<div class="w-16 h-px bg-white"></div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p
|
|
class="text-xl md:text-2xl text-white/80 max-w-4xl mx-auto leading-relaxed tracking-wide"
|
|
>
|
|
WE'RE AN EVER-EXPANDING FAMILY OF DESIGN AND CONSTRUCTION
|
|
CRAFTSMEN AND PROJECT MANAGEMENT EXPERTS WHO BELIEVE IN DELIVERING
|
|
HIGH QUALITY SOLUTIONS.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Team Members Grid -->
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 mt-20"
|
|
>
|
|
<!-- Team Member 1 -->
|
|
<div class="group relative">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
|
|
>
|
|
<div
|
|
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
|
|
>
|
|
<span class="text-4xl text-white/60">👤</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-white mb-2">
|
|
Team Member
|
|
</h3>
|
|
<p class="text-kh3-red font-medium">Project Manager</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 2 -->
|
|
<div class="group relative">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
|
|
>
|
|
<div
|
|
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
|
|
>
|
|
<span class="text-4xl text-white/60">👤</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-white mb-2">
|
|
Team Member
|
|
</h3>
|
|
<p class="text-kh3-red font-medium">Design Specialist</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 3 -->
|
|
<div class="group relative">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
|
|
>
|
|
<div
|
|
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
|
|
>
|
|
<span class="text-4xl text-white/60">👤</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-white mb-2">
|
|
Team Member
|
|
</h3>
|
|
<p class="text-kh3-red font-medium">Construction Lead</p>
|
|
</div>
|
|
</div>
|
|
</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);
|
|
}
|
|
}
|
|
|
|
/* Used by hero image pop-in */
|
|
@keyframes fadeInScale {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pageEnter {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
/* Image reveal from bottom-right */
|
|
@keyframes imgRevealBR {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(12%, 10%) scale(1.12);
|
|
filter: blur(3px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0) scale(1);
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
/* Diagonal mask reveal for hero image */
|
|
@keyframes diagMaskReveal {
|
|
0% {
|
|
opacity: 0;
|
|
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
|
|
transform: scale(1.03);
|
|
}
|
|
55% {
|
|
opacity: 1;
|
|
/* Sharper diagonal (more vertical edge) */
|
|
clip-path: polygon(82% 0, 100% 0, 100% 100%, 64% 100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
// Arrow pulse animation keyframes injected
|
|
(function () {
|
|
const s = document.createElement("style");
|
|
s.textContent =
|
|
"@keyframes arrowPulse{0%{transform:translateY(0)}50%{transform:translateY(4px)}100%{transform:translateY(0)}} .animate-arrowPulse{animation:arrowPulse 1.2s ease-in-out infinite}";
|
|
document.head.appendChild(s);
|
|
})();
|
|
|
|
// 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";
|
|
|
|
// Remove the page cover after entrance animation
|
|
setTimeout(() => {
|
|
if (cover) {
|
|
cover.style.transform = "translateX(100%)";
|
|
cover.style.opacity = "0";
|
|
}
|
|
}, 600);
|
|
|
|
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;
|
|
let closeBtnEl = null;
|
|
|
|
menuToggle.addEventListener("click", () => {
|
|
if (isMenuOpen) {
|
|
// Close menu
|
|
navMenu.classList.add("hidden");
|
|
menuGrid.innerHTML = `
|
|
<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>
|
|
`;
|
|
if (closeBtnEl) {
|
|
closeBtnEl.remove();
|
|
closeBtnEl = null;
|
|
}
|
|
isMenuOpen = false;
|
|
} else {
|
|
// Open menu
|
|
navMenu.classList.remove("hidden");
|
|
closeBtnEl = document.createElement("button");
|
|
closeBtnEl.setAttribute("aria-label", "Close navigation");
|
|
closeBtnEl.className =
|
|
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
|
|
closeBtnEl.innerHTML = `
|
|
<svg class="w-6 h-6" 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>`;
|
|
navMenu.appendChild(closeBtnEl);
|
|
closeBtnEl.addEventListener("click", () => {
|
|
navMenu.classList.add("hidden");
|
|
if (closeBtnEl) {
|
|
closeBtnEl.remove();
|
|
closeBtnEl = null;
|
|
}
|
|
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;
|
|
});
|
|
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);
|
|
}
|
|
|
|
// Ensure page cover is removed on page load
|
|
setTimeout(() => {
|
|
if (cover) {
|
|
cover.style.transform = "translateX(100%)";
|
|
cover.style.opacity = "0";
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
// Also remove cover when DOM is ready
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
setTimeout(() => {
|
|
if (cover) {
|
|
cover.style.transform = "translateX(100%)";
|
|
cover.style.opacity = "0";
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
// Smooth then abrupt scroll behavior for arrow
|
|
const arrowBtn = document.getElementById("aboutScrollArrow");
|
|
if (arrowBtn) {
|
|
arrowBtn.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
const target = document.querySelector("section.py-20.bg-white");
|
|
if (!target) return;
|
|
|
|
const targetY =
|
|
target.getBoundingClientRect().top + window.pageYOffset;
|
|
const startY = window.pageYOffset;
|
|
const midY = startY + (targetY - startY) * 0.7; // slow to 70%
|
|
|
|
// First phase: slow ease
|
|
window.scrollTo({ top: midY, behavior: "smooth" });
|
|
|
|
// Second phase: slight pause then quick snap to target
|
|
setTimeout(() => {
|
|
window.scrollTo({ top: targetY, behavior: "auto" });
|
|
}, 600);
|
|
});
|
|
}
|
|
|
|
// Remove cover on page visibility change (back/forward navigation)
|
|
document.addEventListener("visibilitychange", () => {
|
|
if (!document.hidden && cover) {
|
|
setTimeout(() => {
|
|
cover.style.transform = "translateX(100%)";
|
|
cover.style.opacity = "0";
|
|
}, 100);
|
|
}
|
|
});
|
|
|
|
// Remove cover on popstate (back/forward button)
|
|
window.addEventListener("popstate", () => {
|
|
if (cover) {
|
|
setTimeout(() => {
|
|
cover.style.transform = "translateX(100%)";
|
|
cover.style.opacity = "0";
|
|
}, 100);
|
|
}
|
|
});
|
|
|
|
// Cleanup before bfcache snapshot
|
|
window.addEventListener("pagehide", () => {
|
|
if (cover) {
|
|
cover.style.transform = "translateX(100%)";
|
|
cover.style.opacity = "0";
|
|
}
|
|
const nav = document.getElementById("navMenu");
|
|
const grid = document.getElementById("menuGrid");
|
|
if (nav) nav.classList.add("hidden");
|
|
if (grid) {
|
|
grid.innerHTML = `
|
|
<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>`;
|
|
}
|
|
});
|
|
|
|
// Also ensure clean state on bfcache restore / pageshow
|
|
window.addEventListener("pageshow", () => {
|
|
if (cover) {
|
|
cover.style.transform = "translateX(100%)";
|
|
cover.style.opacity = "0";
|
|
}
|
|
const nav = document.getElementById("navMenu");
|
|
const grid = document.getElementById("menuGrid");
|
|
if (nav) nav.classList.add("hidden");
|
|
if (grid) {
|
|
grid.innerHTML = `
|
|
<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>`;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|