1822 lines
67 KiB
HTML
1822 lines
67 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>Who - 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">
|
|
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
|
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation Links - Inverted C Layout -->
|
|
<nav class="flex-1 relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="relative ml-8">
|
|
<!-- Navigation items in inverted C shape -->
|
|
<div class="space-y-6">
|
|
<!-- HOME - Top -->
|
|
<a
|
|
href="index.html"
|
|
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">HOME</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.075s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>M</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.125s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
</a>
|
|
|
|
<!-- WHY - Slightly right -->
|
|
<a
|
|
href="about.html"
|
|
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">WHY</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.225s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.25s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>Y</span
|
|
>
|
|
</a>
|
|
|
|
<!-- HOW - More right -->
|
|
<a
|
|
href="services.html"
|
|
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">HOW</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.375s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.4s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
</a>
|
|
|
|
<!-- WHAT - Most right -->
|
|
<a
|
|
href="projects.html"
|
|
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.55s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">WHAT</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.55s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.575s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.6s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.625s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
</a>
|
|
|
|
<!-- WHO - Active position -->
|
|
<a
|
|
href="who.html"
|
|
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
>
|
|
<span class="md:hidden">WHO</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.675s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.7s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
</a>
|
|
|
|
<!-- CONTACTS - More right -->
|
|
<a
|
|
href="contact.html"
|
|
class="block text-white text-xl md:text-lg font-medium 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;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">CONTACTS</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.775s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.8s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>N</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.825s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.85s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.875s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.9s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.925s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Static Logo and Menu -->
|
|
<div class="fixed top-6 left-8 z-40">
|
|
<div class="flex items-center gap-3">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Menu Toggle with Homepage/WHY structure -->
|
|
<div
|
|
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
|
|
>
|
|
<div class="cursor-pointer" id="menuToggle">
|
|
<!-- Desktop view: menuWrap with waves and outline (wrapped like WHY page) -->
|
|
<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 z-20" id="menuGrid" style="opacity: 1;">
|
|
<img src="assets/icons/closed_petal.png" alt="closed petal" class="block w-6 h-6" />
|
|
</div>
|
|
<div
|
|
id="menuPetal"
|
|
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity z-0"
|
|
>
|
|
<img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile view: simple transparent background -->
|
|
<div class="md:hidden">
|
|
<div
|
|
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
|
>
|
|
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="pt-20">
|
|
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
|
|
<section class="relative bg-kh3-black hero-section">
|
|
<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"
|
|
>
|
|
WHO
|
|
</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/team/team_photo.png"
|
|
alt="KH3 Team"
|
|
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>
|
|
|
|
|
|
|
|
<!-- Team Section -->
|
|
<section class="py-32 bg-kh3-black text-white team-section">
|
|
<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-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="mt-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-6">
|
|
<!-- Team Member 1 -->
|
|
<div class="group relative team-card" data-card-index="0">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/kweku_hayford.png"
|
|
alt="Kweku HAYFORD"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Kweku HAYFORD
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Director
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 2 -->
|
|
<div class="group relative team-card" data-card-index="1">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/hanetta.png"
|
|
alt="Hanetta HAYFORD"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Hanetta HAYFORD
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Head, Projects
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 3 -->
|
|
<div class="group relative team-card" data-card-index="2">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/yayra.png"
|
|
alt="D. Yayra NUMETU"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
D. Yayra NUMETU
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Head, Finance & Administration
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 4 -->
|
|
<div class="group relative team-card" data-card-index="3">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/fauzia.png"
|
|
alt="Fauzia ABDEL-MAJEED, PMP"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Fauzia ABDEL-MAJEED, PMP
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Head, Strategy
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 5 -->
|
|
<div class="group relative team-card" data-card-index="4">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/miranda.png"
|
|
alt="Miranda LARYEA"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Miranda LARYEA
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Lead Administration
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 6 -->
|
|
<div class="group relative team-card" data-card-index="5">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/helena.png"
|
|
alt="Helena NTIRI AMANKWAH"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Helena NTIRI AMANKWAH
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Lead Procurement
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 7 -->
|
|
<div class="group relative team-card" data-card-index="6">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/michael.png"
|
|
alt="Michael LARTEY"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Michael LARTEY
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Lead Projects
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 8 -->
|
|
<div class="group relative team-card" data-card-index="7">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/francis.png"
|
|
alt="Francis OPARE"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Francis OPARE
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Lead Finance
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 9 -->
|
|
<div class="group relative team-card" data-card-index="8">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/andrews.png"
|
|
alt="Andrews Amon KOTEY"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Andrews Amon KOTEY
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Lead Design
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 10 -->
|
|
<div class="group relative team-card" data-card-index="9">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/moses.png"
|
|
alt="Moses ARMAH"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Moses ARMAH
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Lead Project Assistant
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 11 -->
|
|
<div class="group relative team-card" data-card-index="10">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/dorothea.png"
|
|
alt="Dorothea ADJETEY"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Dorothea ADJETEY
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Project Assistant
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 12 -->
|
|
<div class="group relative team-card" data-card-index="11">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/claribel.png"
|
|
alt="Claribel ARMAH"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Claribel ARMAH
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Project Assistant
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 13 -->
|
|
<div class="group relative team-card" data-card-index="12">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/daniel.png"
|
|
alt="Daniel THOMPSON"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Daniel THOMPSON
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Project Assistant
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 14 -->
|
|
<div class="group relative team-card" data-card-index="13">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/joyleen.png"
|
|
alt="Joyleen Therson-COFFIE"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Joyleen Therson-COFFIE
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Project Assistant
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 15 -->
|
|
<div class="group relative team-card" data-card-index="14">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/rebecca.png"
|
|
alt="Rebecca SAM"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Rebecca SAM
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Project Assistant
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Member 16 -->
|
|
<div class="group relative team-card" data-card-index="15">
|
|
<div
|
|
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
|
|
>
|
|
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
|
|
>
|
|
<img
|
|
src="assets/images/team/siisi.png"
|
|
alt="Siisi NKETSIAH"
|
|
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<span class="text-4xl text-white/60" style="display: none"
|
|
>👤</span
|
|
>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3
|
|
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
|
>
|
|
Siisi NKETSIAH
|
|
</h3>
|
|
<p
|
|
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
|
|
>
|
|
Tech Support
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- CTA: Animated Contact Us Button -->
|
|
<section class="py-24 bg-[#1b2021] text-white">
|
|
<div class="container mx-auto px-8 max-w-7xl text-center">
|
|
<a
|
|
href="contact.html"
|
|
class="inline-block uppercase tracking-wider px-8 py-4 border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
|
|
>
|
|
Contact Us
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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.png"
|
|
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>
|
|
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Calibri:wght@300;400;500;600;700&display=swap");
|
|
|
|
.font-montserrat {
|
|
font-family: "Montserrat", sans-serif;
|
|
}
|
|
|
|
.font-calibri {
|
|
font-family: "Calibri", sans-serif;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInFromRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes arrowPulse {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: translateY(10px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes maskReveal {
|
|
0% {
|
|
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
|
|
}
|
|
100% {
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
|
}
|
|
}
|
|
|
|
@keyframes maskRevealCenter {
|
|
0% {
|
|
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
|
}
|
|
100% {
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
|
}
|
|
}
|
|
|
|
@keyframes maskRevealVertical {
|
|
0% {
|
|
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
|
|
}
|
|
100% {
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
|
}
|
|
}
|
|
|
|
@keyframes maskRevealDiagonal {
|
|
0% {
|
|
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
|
|
}
|
|
100% {
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
|
}
|
|
}
|
|
|
|
@keyframes maskRevealRadial {
|
|
0% {
|
|
clip-path: circle(0% at 50% 50%);
|
|
}
|
|
100% {
|
|
clip-path: circle(100% at 50% 50%);
|
|
}
|
|
}
|
|
|
|
@keyframes titleGlow {
|
|
0%, 100% {
|
|
text-shadow: 0 0 20px rgba(220, 38, 38, 0.5);
|
|
}
|
|
50% {
|
|
text-shadow: 0 0 30px rgba(220, 38, 38, 0.8), 0 0 40px rgba(220, 38, 38, 0.6);
|
|
}
|
|
}
|
|
|
|
@keyframes titleBounce {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes countUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes lineDraw {
|
|
from {
|
|
width: 0;
|
|
}
|
|
to {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes timelineExpand {
|
|
from {
|
|
transform: scaleX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideRight {
|
|
from {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Floating animation for team cards */
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px) rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: translateY(-4px) rotate(0.5deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-2px) rotate(-0.25deg);
|
|
}
|
|
75% {
|
|
transform: translateY(-6px) rotate(0.25deg);
|
|
}
|
|
}
|
|
|
|
.team-card.floating div {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.team-card.floating:nth-child(1) div {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.team-card.floating:nth-child(2) div {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.team-card.floating:nth-child(3) div {
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.team-card.floating:nth-child(4) div {
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
.team-card:hover div {
|
|
animation-play-state: paused !important;
|
|
}
|
|
|
|
/* Page transition animations */
|
|
@keyframes pageEnter {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(1.1);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pageExit {
|
|
from {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
@keyframes staggerFadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(0.95);
|
|
}
|
|
}
|
|
|
|
.page-enter {
|
|
animation: pageEnter 0.8s ease-out forwards;
|
|
}
|
|
|
|
.page-exit {
|
|
animation: pageExit 0.6s ease-in forwards;
|
|
}
|
|
|
|
.stagger-fade-out {
|
|
animation: staggerFadeOut 0.5s ease-out forwards;
|
|
}
|
|
|
|
/* Crossfade transition */
|
|
.crossfade-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 9999;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 1s ease-in-out;
|
|
}
|
|
|
|
.crossfade-overlay.active {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* Menu animations */
|
|
.menu-item {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
.menu-item.animate {
|
|
animation: slideInFromRight 0.3s ease-out forwards;
|
|
}
|
|
|
|
/* Letter-by-letter animation */
|
|
.letter {
|
|
display: inline-block;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
.letter.animate {
|
|
animation: fadeInUp 0.1s ease-out forwards;
|
|
}
|
|
|
|
/* Mobile menu adjustments */
|
|
@media (max-width: 768px) {
|
|
.menu-panel {
|
|
width: 83.333333%;
|
|
}
|
|
}
|
|
|
|
/* 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%);
|
|
}
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
|
|
/* Diamond pulse animation for Values section */
|
|
@keyframes diamondPulse {
|
|
0%, 100% {
|
|
transform: rotate(45deg) scale(1);
|
|
box-shadow: 0 0 0 rgba(220, 38, 38, 0);
|
|
}
|
|
50% {
|
|
transform: rotate(45deg) scale(0.8);
|
|
box-shadow: 0 0 0 rgba(220, 38, 38, 0);
|
|
}
|
|
75% {
|
|
transform: rotate(45deg) scale(1.1);
|
|
box-shadow: 0 0 15px rgba(220, 38, 38, 0.4), 0 0 25px rgba(220, 38, 38, 0.2);
|
|
}
|
|
}
|
|
|
|
.diamond-pulse {
|
|
animation: diamondPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.diamond-pulse:nth-child(1) { animation-delay: 0s; }
|
|
.diamond-pulse:nth-child(2) { animation-delay: 0.2s; }
|
|
.diamond-pulse:nth-child(3) { animation-delay: 0.4s; }
|
|
.diamond-pulse:nth-child(4) { animation-delay: 0.6s; }
|
|
.diamond-pulse:nth-child(5) { animation-delay: 0.8s; }
|
|
|
|
/* Page transition animations */
|
|
@keyframes staggerFadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(0.95);
|
|
}
|
|
}
|
|
|
|
/* Section classes for targeting */
|
|
|
|
/* Homepage-style menu outline and waves */
|
|
#menuWrap { position: relative; overflow: visible; }
|
|
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
|
|
|
|
/* Hide menu outline on mobile */
|
|
@media (max-width: 768px) {
|
|
.menu-outline {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Create a proper button container for mobile */
|
|
#menuGrid {
|
|
background: rgba(255, 255, 255, 0.12) !important;
|
|
border-radius: 8px !important;
|
|
padding: 6px !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
}
|
|
}
|
|
|
|
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
|
|
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
|
|
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
|
|
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
|
|
#menuWrap.open #menuPetal { opacity: 1; }
|
|
#menuWrap.open #menuGrid { opacity: 0; }
|
|
|
|
@keyframes waveBurst {
|
|
0%, 69% { opacity: 0; transform: scale(1); }
|
|
77% { opacity: 0.38; transform: scale(1.18, 1.12); }
|
|
92% { opacity: 0.22; transform: scale(1.55, 1.42); }
|
|
100% { opacity: 0; transform: scale(1.95, 1.75); }
|
|
}
|
|
</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 menuWrap = document.getElementById("menuWrap");
|
|
const menuGrid = document.getElementById("menuGrid");
|
|
const menuGridMobile = document.getElementById("menuGridMobile");
|
|
|
|
if (menuToggle && navMenu) {
|
|
let isMenuOpen = false;
|
|
|
|
menuToggle.addEventListener("click", () => {
|
|
if (isMenuOpen) {
|
|
// Close menu
|
|
navMenu.classList.add("hidden");
|
|
if (menuWrap) menuWrap.classList.remove("open");
|
|
isMenuOpen = false;
|
|
} else {
|
|
// Open menu
|
|
navMenu.classList.remove("hidden");
|
|
if (menuWrap) menuWrap.classList.add("open");
|
|
isMenuOpen = true;
|
|
}
|
|
});
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener("click", (e) => {
|
|
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
|
navMenu.classList.add("hidden");
|
|
if (menuWrap) menuWrap.classList.remove("open");
|
|
isMenuOpen = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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) {
|
|
// Ensure closed state on snapshot
|
|
grid.style.opacity = "1";
|
|
const wrap = document.getElementById("menuWrap");
|
|
if (wrap) wrap.classList.remove("open");
|
|
const petal = document.getElementById("menuPetal");
|
|
if (petal) petal.style.opacity = "0";
|
|
}
|
|
});
|
|
|
|
// 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) {
|
|
// Ensure closed state on restore
|
|
grid.style.opacity = "1";
|
|
const wrap = document.getElementById("menuWrap");
|
|
if (wrap) wrap.classList.remove("open");
|
|
const petal = document.getElementById("menuPetal");
|
|
if (petal) petal.style.opacity = "0";
|
|
}
|
|
});
|
|
|
|
// Team section scroll animations
|
|
const teamSection = document.querySelector('.py-32.bg-kh3-black');
|
|
const teamCards = document.querySelectorAll('.team-card');
|
|
|
|
if (teamSection) {
|
|
const teamObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
// Add floating animation to all team cards
|
|
teamCards.forEach((card, index) => {
|
|
setTimeout(() => {
|
|
card.classList.add('floating');
|
|
}, index * 150); // Stagger the start for all 16 cards
|
|
});
|
|
|
|
teamObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.3 }
|
|
);
|
|
|
|
teamObserver.observe(teamSection);
|
|
}
|
|
|
|
// Page transition functionality
|
|
function handlePageTransition(e) {
|
|
e.preventDefault();
|
|
const targetUrl = e.currentTarget.href;
|
|
const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
|
|
|
|
// Get all elements to animate out
|
|
const elementsToAnimate = [
|
|
document.querySelector('.hero-section'),
|
|
document.querySelector('.dream-design-deliver'),
|
|
document.querySelector('.mission-vision'),
|
|
document.querySelector('.values-section'),
|
|
document.querySelector('.team-section'),
|
|
document.querySelector('main')
|
|
].filter(el => el);
|
|
|
|
// Animate elements out in order
|
|
elementsToAnimate.forEach((element, index) => {
|
|
setTimeout(() => {
|
|
if (element) {
|
|
element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
|
|
}
|
|
}, index * 100);
|
|
});
|
|
|
|
// Navigate after animations complete
|
|
setTimeout(() => {
|
|
window.location.href = targetUrl;
|
|
}, elementsToAnimate.length * 100 + 600);
|
|
}
|
|
|
|
// Add event listeners for page transitions
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const transitionLinks = document.querySelectorAll('[data-trans]');
|
|
transitionLinks.forEach(link => {
|
|
link.addEventListener('click', handlePageTransition);
|
|
});
|
|
});
|
|
|
|
// Handle back/forward navigation
|
|
window.addEventListener('pageshow', function(event) {
|
|
if (event.persisted) {
|
|
// Page was loaded from cache (back/forward)
|
|
window.location.reload();
|
|
}
|
|
});
|
|
|
|
// Auto-scroll to team section after 3 seconds
|
|
setTimeout(() => {
|
|
// Scroll just slightly to hint at content below (1.1 viewport heights)
|
|
const targetScroll = window.innerHeight * 1.1;
|
|
|
|
// Create a smooth, gradual scroll animation
|
|
const startScroll = window.pageYOffset;
|
|
const distance = targetScroll - startScroll;
|
|
const duration = 4000; // 4 seconds for slower, smoother animation
|
|
let start = null;
|
|
|
|
function animateScroll(currentTime) {
|
|
if (start === null) start = currentTime;
|
|
const timeElapsed = currentTime - start;
|
|
const progress = Math.min(timeElapsed / duration, 1);
|
|
|
|
// Easing function for smooth deceleration
|
|
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
|
|
|
window.scrollTo(0, startScroll + distance * easeOutQuart);
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(animateScroll);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(animateScroll);
|
|
}, 3000);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|