georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: change menu nav names

Browse source
This commit is contained in:
George Birikorang 2025-08-29 18:42:22 -04:00
parent 1c9a335d26
commit 1d80addd7a
8 changed files with 2452 additions and 700 deletions
Download patch file Download diff file Expand all files Collapse all files

752
about.html
View file

@ -24,10 +24,12 @@
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<!-- 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" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</a>
</div>
<!-- Navigation Links - Inverted C Layout -->
@ -127,8 +129,8 @@
</a>
<!-- HOW - More right -->
<a
href="services.html"
<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;
@ -217,6 +219,47 @@
>
</a>
<!-- WHO - New position -->
<a
href="who.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.65s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<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"
@ -415,11 +458,11 @@
</button>
</div>
</div>
</section>
</section>
<!-- Dream Design Deliver Section -->
<section class="py-20 bg-kh3-black text-white relative dream-design-deliver">
<div class="container mx-auto px-8 max-w-6xl">
<div class="container mx-auto px-8 max-w-6xl">
<div class="text-center">
<!-- Elegant horizontal layout -->
<div
@ -434,7 +477,7 @@
DREAM
</h2>
<div class="w-2 h-2 bg-kh3-red rounded-full"></div>
</div>
</div>
<!-- DESIGN -->
<div class="flex items-center space-x-3">
@ -444,7 +487,7 @@
DESIGN
</h2>
<div class="w-2 h-2 bg-kh3-red rounded-full"></div>
</div>
</div>
<!-- DELIVER -->
<div class="flex items-center space-x-3">
@ -453,15 +496,15 @@
>
DELIVER
</h2>
</div>
</div>
</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>
</div>
</section>
@ -512,10 +555,10 @@
>Enterprise Group Limited</span
>.
</p>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
<!-- Mission & Vision Section -->
<section class="py-32 bg-kh3-grey text-kh3-black mission-vision">
@ -560,7 +603,7 @@
<span class="text-white text-2xl font-bold drop-shadow-lg"
>01</span
>
</div>
</div>
<!-- Title with text glow -->
<h2
@ -580,8 +623,8 @@
>
Out of the ordinary the Extraordinary that inspires the
world.
</p>
</div>
</p>
</div>
</div>
</div>
@ -624,7 +667,7 @@
<span class="text-white text-2xl font-bold drop-shadow-lg"
>02</span
>
</div>
</div>
<!-- Title with text glow -->
<h2
@ -669,8 +712,8 @@
<div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
style="animation: fadeInUp 1s ease-out 2.6s forwards"
>
<div
>
<div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse"
></div>
<h3
@ -690,11 +733,11 @@
<!-- Empty middle column for H layout -->
<div class="hidden md:block"></div>
<div
<div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
style="animation: fadeInUp 1s ease-out 3s forwards"
>
<div
>
<div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse"
></div>
<h3
@ -710,7 +753,7 @@
human control; we will communicate this transparently and in
good time.
</p>
</div>
</div>
</div>
<!-- Row 2: All three columns -->
@ -735,11 +778,11 @@
</p>
</div>
<div
<div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
style="animation: fadeInUp 1s ease-out 3.4s forwards"
>
<div
>
<div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse"
></div>
<h3
@ -772,9 +815,9 @@
>
We are committed to delivering exceptional results in every area
of our operations.
</p>
</div>
</p>
</div>
</div>
<!-- Row 3: First and Third columns only -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-16">
@ -827,568 +870,7 @@
</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-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="mt-20" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;">
<!-- 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>
<!-- Footer -->
@ -1396,14 +878,14 @@
<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"
/>
<a href="index.html" class="flex items-center gap-3 mb-6 hover:opacity-80 transition-opacity">
<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>
</a>
<p class="text-neutral-300 leading-relaxed">
Building inspiring spaces through innovative construction and
design solutions.
@ -1413,7 +895,7 @@
<h3 class="text-xl font-semibold mb-6">Quick Links</h3>
<ul class="space-y-3">
<li>
<a
<a
href="index.html"
class="text-neutral-300 hover:text-white transition-colors"
>Home</a
@ -1470,15 +952,15 @@
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="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_dark.png"
alt="KH3"
class="w-16 h-16"
/>
<span class="text-4xl font-bold tracking-wider">KH3</span>
</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>
@ -2146,31 +1628,7 @@
}
});
// 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) {
@ -2184,7 +1642,6 @@
document.querySelector('.dream-design-deliver'),
document.querySelector('.mission-vision'),
document.querySelector('.values-section'),
document.querySelector('.team-section'),
document.querySelector('main')
].filter(el => el);
@ -2218,6 +1675,35 @@
window.location.reload();
}
});
// Auto-scroll to content 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>