support/kh3_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/kh3_website.git synced 2026-07-02 06:23:44 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: add services page

Browse source
This commit is contained in:
George Birikorang 2025-08-27 04:21:31 -04:00
parent e53db02cfd
commit bc95267aa4
8 changed files with 2661 additions and 398 deletions
Download patch file Download diff file Expand all files Collapse all files

597
about.html
View file

@ -11,10 +11,7 @@
/> />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@600;800&display=swap"
rel="stylesheet"
/>
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet" rel="stylesheet"
@ -29,9 +26,9 @@
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-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> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div> </div>
<!-- Navigation Links - Inverted C Layout --> <!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative"> <nav class="flex-1 relative">
@ -43,8 +40,8 @@
<a <a
href="index.html" href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
> >
<span <span
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.05s; animation-delay: 0.05s;
@ -53,7 +50,7 @@
" "
>H</span >H</span
> >
<span <span
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.075s; animation-delay: 0.075s;
@ -83,8 +80,8 @@
</a> </a>
<!-- ABOUT US - Slightly right --> <!-- ABOUT US - Slightly right -->
<a <a
href="about.html" href="about.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-6 font-montserrat" class="block text-white text-lg font-medium border-b border-white pb-1 ml-6 font-montserrat"
> >
<span <span
@ -162,8 +159,8 @@
</a> </a>
<!-- SERVICES - More right --> <!-- SERVICES - More right -->
<a <a
href="services.html" href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
> >
<span <span
@ -400,7 +397,7 @@
<!-- PARTNERS - Back to left --> <!-- PARTNERS - Back to left -->
<a <a
href="brands.html" href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
> >
<span <span
@ -478,44 +475,45 @@
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
</div> </div>
</div> </div>
<!-- Header --> <!-- Static Logo and Menu -->
<header <div class="fixed top-6 left-8 z-40">
class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/90 backdrop-blur-sm" <div class="flex items-center gap-3">
> <img
<div src="assets/images/kh3_logo_dark.png"
class="container mx-auto px-8 py-4 flex justify-between items-center" alt="KH3"
> class="w-12 h-12"
<!-- Logo --> />
<a href="index.html" class="flex items-center gap-3"> <span
<img class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
src="assets/images/kh3_logo_dark.png" >KH3</span
alt="KH3" >
class="w-12 h-12" </div>
/> </div>
<span class="text-white text-xl font-bold tracking-wider">KH3</span>
</a>
<!-- Menu Grid --> <!-- Menu Toggle with Transparent Background -->
<div class="cursor-pointer" id="menuToggle"> <div class="fixed top-6 right-8 z-40">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid"> <div
<span class="w-1 h-1 bg-white"></span> class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
<span class="w-1 h-1 bg-white"></span> id="menuToggle"
<span class="w-1 h-1 bg-white"></span> >
<span class="w-1 h-1 bg-white"></span> <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></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>
</div>
</header>
<!-- Main Content --> <!-- Main Content -->
<main class="pt-20"> <main class="pt-20">
@ -536,7 +534,7 @@
<div class="w-px flex-1 bg-neutral-800"></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-2.5 h-2.5 bg-white transform rotate-45"></div>
<div class="w-px flex-1 bg-neutral-800"></div> <div class="w-px flex-1 bg-neutral-800"></div>
</div> </div>
<!-- Title with horizontal ruler --> <!-- Title with horizontal ruler -->
<div class="pl-28 pr-6 w-full"> <div class="pl-28 pr-6 w-full">
@ -544,15 +542,15 @@
class="flex items-center gap-6 opacity-0" class="flex items-center gap-6 opacity-0"
style="animation: fadeInUp 800ms ease-out 1600ms forwards" style="animation: fadeInUp 800ms ease-out 1600ms forwards"
> >
<div class="flex-1 h-px bg-neutral-700"></div> <div class="flex-1 h-px bg-white"></div>
<h1 <h1
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold" class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
> >
ABOUT US ABOUT US
</h1> </h1>
<div class="flex-1 h-px bg-neutral-700"></div> <div class="flex-1 h-px bg-white"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Right image panel --> <!-- Right image panel -->
@ -590,108 +588,459 @@
</div> </div>
</section> </section>
<!-- About Section --> <!-- Dream Design Deliver Section -->
<section class="py-20 bg-white text-kh3-black"> <section class="py-20 bg-kh3-black text-white relative">
<div class="container mx-auto px-8 max-w-6xl"> <div class="container mx-auto px-8 max-w-6xl">
<div class="text-center"> <div class="text-center">
<h2 <!-- Elegant horizontal layout -->
class="text-4xl font-bold mb-12 opacity-0" <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" style="animation: fadeInUp 1s ease-out 0.8s forwards"
> >
OUR STORY <!-- DREAM -->
</h2> <div class="flex items-center space-x-3">
<div class="text-lg leading-relaxed space-y-6 max-w-4xl mx-auto"> <h2
<p class="text-3xl md:text-4xl font-bold tracking-wider text-white"
class="opacity-0" >
style="animation: fadeInUp 1s ease-out 1s forwards" DREAM
> </h2>
BASED IN ACCRA, GHANA, KH3 WAS ESTABLISHED IN <div class="w-2 h-2 bg-kh3-red rounded-full"></div>
<span class="text-kh3-red font-semibold">2014</span> TO CATER </div>
FOR THE CONSTRUCTION PROJECT MANAGEMENT NEEDS OF COMMERCIAL
CLIENTS. WITH A GROWING REPUTATION FOR QUALITY, ATTENTION TO <!-- DESIGN -->
DETAIL AND THE UPMOST <div class="flex items-center space-x-3">
<span class="text-kh3-red font-semibold">PROFESSIONALISM</span>, <h2
KH3 EXPANDED INTO COMPREHENSIVE DESIGN AND FIT-OUT SERVICES. class="text-3xl md:text-4xl font-bold tracking-wider text-white"
</p> >
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 <p
class="opacity-0" class="opacity-0"
style="animation: fadeInUp 1s ease-out 1.2s forwards" style="animation: fadeInUp 1s ease-out 1.2s forwards"
> >
THIS MEANT MORE CONTROL OVER THE END-TO-END PROCESS, MAINTAINING KH3 is Ghana's leading Construction Project Management Firm with
<span class="text-kh3-red font-semibold">HIGH STANDARDS</span> a focus on Interior Design and Fit-out. Founded in
FROM START TO FINISH AND ENSURING THAT THE ORIGINAL <span class="text-kh3-red font-semibold">2014</span> by a highly
SPECIFICATION COULD BE MET AND EXCEEDED. TODAY, KH3 WORKS WITH A motivated team, KH3 is committed to being the standard of
BROAD SPECTRUM OF CLIENTS, EXPANDING INTO NEW MARKETS WHILST business excellence in Africa.
HANDLING THE ENTIRE PROCESS FROM DESIGN TO THE FINAL FINISH. </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> </p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Values Section --> <!-- Mission & Vision Section -->
<section class="py-20 bg-neutral-100 text-kh3-black"> <section class="py-32 bg-kh3-grey text-kh3-black">
<div class="container mx-auto px-8 max-w-6xl"> <div class="container mx-auto px-8 max-w-7xl">
<div class="text-center mb-16"> <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 <h2
class="text-4xl font-bold mb-6 opacity-0" class="text-5xl md:text-7xl font-bold mb-16 opacity-0"
style="animation: fadeInUp 1s ease-out 1.4s forwards" style="animation: fadeInUp 1s ease-out 2.4s forwards"
> >
OUR VALUES VALUES
</h2> </h2>
<p </div>
class="text-lg text-neutral-600 max-w-2xl mx-auto opacity-0"
style="animation: fadeInUp 1s ease-out 1.6s forwards" <!-- 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"
> >
The principles that guide everything we do <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> </p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<div <div
class="text-center opacity-0" class="text-center opacity-0"
style="animation: fadeInUp 1s ease-out 1.8s forwards" style="animation: fadeInUp 1s ease-out 2.8s forwards"
> >
<div <div
class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45" class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
></div> ></div>
<h3 class="text-xl font-semibold mb-4">QUALITY</h3> <h3 class="text-2xl font-semibold mb-6">Integrity</h3>
<p class="text-neutral-600"> <p class="text-lg text-neutral-600 leading-relaxed">
We maintain the highest standards in every project, ensuring We stay true to our word. We will do what we say we will do, and
excellence from conception to completion. 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> </p>
</div> </div>
<div <div
class="text-center opacity-0" class="text-center opacity-0"
style="animation: fadeInUp 1s ease-out 2s forwards" style="animation: fadeInUp 1s ease-out 3.8s forwards"
> >
<div <div
class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45" class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
></div> ></div>
<h3 class="text-xl font-semibold mb-4">PROFESSIONALISM</h3> <h3 class="text-2xl font-semibold mb-6">Resilience</h3>
<p class="text-neutral-600"> <p class="text-lg text-neutral-600 leading-relaxed">
Our team approaches every project with dedication, expertise, In the face of daunting challenges, setbacks and failures; we
and unwavering commitment to our clients. learn and document lessons, bounce back and persist in the
</p> pursuit of goals, targets, objectives and deadlines. We do this
</div> with focused optimism.
<div
class="text-center opacity-0"
style="animation: fadeInUp 1s ease-out 2.2s forwards"
>
<div
class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45"
></div>
<h3 class="text-xl font-semibold mb-4">INNOVATION</h3>
<p class="text-neutral-600">
We continuously evolve our methods and embrace new technologies
to deliver cutting-edge solutions.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</section> </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> </main>
<!-- Footer --> <!-- Footer -->
@ -705,8 +1054,8 @@
alt="KH3" alt="KH3"
class="w-12 h-12" class="w-12 h-12"
/> />
<span class="text-2xl font-bold tracking-wider">KH3</span> <span class="text-2xl font-bold tracking-wider">KH3</span>
</div> </div>
<p class="text-neutral-300 leading-relaxed"> <p class="text-neutral-300 leading-relaxed">
Building inspiring spaces through innovative construction and Building inspiring spaces through innovative construction and
design solutions. design solutions.
@ -718,21 +1067,21 @@
<li> <li>
<a <a
href="index.html" href="index.html"
class="text-neutral-300 hover:text-white transition-colors" class="text-neutral-300 hover:text-white transition-colors"
>Home</a >Home</a
> >
</li> </li>
<li> <li>
<a <a
href="about.html" href="about.html"
class="text-neutral-300 hover:text-white transition-colors" class="text-neutral-300 hover:text-white transition-colors"
>About Us</a >About Us</a
> >
</li> </li>
<li> <li>
<a <a
href="projects.html" href="projects.html"
class="text-neutral-300 hover:text-white transition-colors" class="text-neutral-300 hover:text-white transition-colors"
>Projects</a >Projects</a
> >
</li> </li>

BIN
assets/images/contact.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

388
contact.html
View file

@ -25,22 +25,22 @@
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl" class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu" id="navMenu"
> >
<div class="p-8 pt-12 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-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> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div> </div>
<!-- Navigation Links - Inverted C Layout --> <!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative"> <nav class="flex-1 relative">
<div class="absolute inset-0 flex items-start"> <div class="absolute inset-0 flex items-center">
<div class="relative ml-8"> <div class="relative ml-8">
<!-- Navigation items in inverted C shape --> <!-- Navigation items in inverted C shape -->
<div class="space-y-6"> <div class="space-y-6">
<!-- HOME - Top --> <!-- HOME - Top -->
<a <a
href="index.html" href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
> >
<span <span
@ -82,8 +82,8 @@
</a> </a>
<!-- ABOUT US - Slightly right --> <!-- ABOUT US - Slightly right -->
<a <a
href="about.html" href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
> >
<span <span
@ -161,8 +161,8 @@
</a> </a>
<!-- SERVICES - More right --> <!-- SERVICES - More right -->
<a <a
href="services.html" href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
> >
<span <span
@ -399,7 +399,7 @@
<!-- PARTNERS - Back to left --> <!-- PARTNERS - Back to left -->
<a <a
href="brands.html" href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
> >
<span <span
@ -482,20 +482,24 @@
</div> </div>
</div> </div>
<!-- Header --> <!-- Static Logo and Menu -->
<header <div class="fixed top-8 left-8 z-40">
class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/80 backdrop-blur-sm"
>
<div class="container mx-auto px-8">
<div class="flex justify-between items-center py-6">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" /> <img
<span class="text-white text-2xl font-bold tracking-wider" 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 >KH3</span
> >
</div> </div>
</div>
<!-- Menu Toggle -->
<div class="fixed top-8 right-8 z-40">
<div class="cursor-pointer" id="menuToggle"> <div class="cursor-pointer" id="menuToggle">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid"> <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>
@ -508,84 +512,148 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</header>
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center"> <section class="relative h-screen flex items-center justify-center">
<div <!-- Background Image -->
class="absolute inset-0 bg-gradient-to-br from-kh3-black/80 to-kh3-black/60" <div class="absolute inset-0">
<img
src="assets/images/contact.png"
alt="Office Background"
class="w-full h-full object-cover"
/>
<div class="absolute inset-0 bg-black/40"></div>
</div>
<!-- Main Content -->
<div class="relative z-10 text-center w-full">
<div class="flex items-center gap-8 mb-6 max-w-6xl mx-auto">
<div
class="flex-1 h-1 bg-white opacity-0"
style="
min-width: 100px;
animation: fadeInLeft 1s ease-out 0.3s forwards;
"
></div>
<h1
class="text-6xl md:text-8xl font-bold whitespace-nowrap px-8 opacity-0"
style="animation: maskRevealCenter 1.2s ease-out 0.6s forwards"
>
CONTACT US
</h1>
<div
class="flex-1 h-1 bg-white opacity-0"
style="
min-width: 100px;
animation: fadeInRight 1s ease-out 0.3s forwards;
"
></div> ></div>
<div class="relative z-10 text-center"> </div>
<h1 class="text-6xl md:text-8xl font-bold mb-6 masked-reveal"> <div
CONTACT US class="text-xl md:text-2xl text-white tracking-widest opacity-0"
</h1> style="animation: fadeInUp 1s ease-out 0.9s forwards"
<div class="text-xl md:text-2xl text-neutral-300 tracking-widest"> >
LET'S DISCUSS YOUR PROJECT LET'S DISCUSS YOUR PROJECT
</div> </div>
</div> </div>
<div
class="absolute inset-0 bg-gradient-to-b from-transparent to-kh3-black"
></div>
</section> </section>
<!-- Contact Section --> <!-- Contact Section -->
<section class="py-20 bg-white text-kh3-black"> <section class="relative min-h-screen flex items-center">
<div class="container mx-auto px-8 max-w-6xl"> <!-- Background Image with Overlay -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> <div class="absolute inset-0">
<div class="space-y-8"> <img
<h2 class="text-4xl font-bold">GET IN TOUCH</h2> src="assets/images/contact.png"
<p class="text-lg leading-relaxed text-neutral-600"> alt="Office Background"
class="w-full h-full object-cover transform scale-y-[-1]"
/>
<div class="absolute inset-0 bg-black/60"></div>
</div>
<!-- Content Container -->
<div class="relative z-10 w-full">
<div class="container mx-auto px-8 max-w-7xl">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Left Column - Contact Information -->
<div class="text-white space-y-8">
<!-- Title -->
<h2
class="text-5xl md:text-6xl font-bold text-white opacity-0 hover:scale-105 transition-transform duration-300"
style="animation: titleBounce 3s ease-out 2.7s forwards"
>
GET IN TOUCH
</h2>
<!-- Description -->
<p
class="text-lg leading-relaxed text-white/80 opacity-0 hover:text-white transition-colors duration-500"
style="animation: fadeInUp 1s ease-out 3.1s forwards"
>
Ready to start your next project? We'd love to hear from you. Fill Ready to start your next project? We'd love to hear from you. Fill
out the form and we'll get back to you within 24 hours. out the form and we'll get back to you within 24 hours.
</p> </p>
<div class="space-y-8"> <!-- Contact Details -->
<div class="flex items-start space-x-4"> <div class="space-y-6">
<div class="text-3xl">📍</div> <div
class="flex items-start space-x-4 opacity-0"
style="animation: fadeInUp 1s ease-out 3.3s forwards"
>
<div class="text-kh3-red text-2xl">📍</div>
<div> <div>
<h3 class="text-xl font-semibold mb-2">Address</h3> <h3 class="text-xl font-semibold mb-2 text-white">Address</h3>
<p class="text-neutral-600">Accra, Ghana<br />Main Office</p> <p class="text-white/80">
</div> 29 Labone Crescent, Accra<br />Accra - Ghana
</div>
<div class="flex items-start space-x-4">
<div class="text-3xl">📞</div>
<div>
<h3 class="text-xl font-semibold mb-2">Phone</h3>
<p class="text-neutral-600">
+233 20 123 4567<br />+233 24 123 4567
</p> </p>
</div> </div>
</div> </div>
<div class="flex items-start space-x-4"> <div
<div class="text-3xl">✉️</div> class="flex items-start space-x-4 opacity-0"
style="animation: fadeInUp 1s ease-out 3.5s forwards"
>
<div class="text-kh3-red text-2xl">📞</div>
<div> <div>
<h3 class="text-xl font-semibold mb-2">Email</h3> <h3 class="text-xl font-semibold mb-2 text-white">Phone</h3>
<p class="text-neutral-600"> <p class="text-white/80">+233 30 396 9970</p>
info@kh3.com<br />projects@kh3.com </div>
</p> </div>
<div
class="flex items-start space-x-4 opacity-0"
style="animation: fadeInUp 1s ease-out 3.7s forwards"
>
<div class="text-kh3-red text-2xl">✉️</div>
<div>
<h3 class="text-xl font-semibold mb-2 text-white">Email</h3>
<p class="text-white/80">Info@KH3group.com</p>
</div> </div>
</div> </div>
<div class="flex items-start space-x-4"> <div
<div class="text-3xl">🕒</div> class="flex items-start space-x-4 opacity-0"
style="animation: fadeInUp 1s ease-out 3.9s forwards"
>
<div class="text-kh3-red text-2xl">🕒</div>
<div> <div>
<h3 class="text-xl font-semibold mb-2">Business Hours</h3> <h3 class="text-xl font-semibold mb-2 text-white">Business Hours</h3>
<p class="text-neutral-600"> <p class="text-white/80">
Monday - Friday<br />8:00 AM - 6:00 PM Monday - Friday<br />9:00 AM - 6:00 PM
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-neutral-50 p-8 rounded-lg"> <!-- Right Column - Contact Form -->
<div
class="bg-white p-8 rounded-lg shadow-xl opacity-0"
style="animation: fadeInUp 1s ease-out 2.9s forwards"
>
<form class="space-y-6" id="contactForm"> <form class="space-y-6" id="contactForm">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div> <div>
<label for="name" class="block text-sm font-semibold mb-2" <label for="name" class="block text-sm font-semibold mb-2 text-gray-800"
>Full Name *</label >Full Name *</label
> >
<input <input
@ -593,12 +661,12 @@
id="name" id="name"
name="name" name="name"
required required
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
/> />
</div> </div>
<div> <div>
<label for="email" class="block text-sm font-semibold mb-2" <label for="email" class="block text-sm font-semibold mb-2 text-gray-800"
>Email Address *</label >Email Address *</label
> >
<input <input
@ -606,42 +674,42 @@
id="email" id="email"
name="email" name="email"
required required
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
/> />
</div> </div>
<div> <div>
<label for="phone" class="block text-sm font-semibold mb-2" <label for="phone" class="block text-sm font-semibold mb-2 text-gray-800"
>Phone Number</label >Phone Number</label
> >
<input <input
type="tel" type="tel"
id="phone" id="phone"
name="phone" name="phone"
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
/> />
</div> </div>
<div> <div>
<label for="company" class="block text-sm font-semibold mb-2" <label for="company" class="block text-sm font-semibold mb-2 text-gray-800"
>Company</label >Company</label
> >
<input <input
type="text" type="text"
id="company" id="company"
name="company" name="company"
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
/> />
</div> </div>
<div> <div>
<label for="service" class="block text-sm font-semibold mb-2" <label for="service" class="block text-sm font-semibold mb-2 text-gray-800"
>Service Interest</label >Service Interest</label
> >
<select <select
id="service" id="service"
name="service" name="service"
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
> >
<option value="">Select a service</option> <option value="">Select a service</option>
<option value="design">Interior Design</option> <option value="design">Interior Design</option>
@ -654,13 +722,13 @@
</div> </div>
<div> <div>
<label for="budget" class="block text-sm font-semibold mb-2" <label for="budget" class="block text-sm font-semibold mb-2 text-gray-800"
>Project Budget</label >Project Budget</label
> >
<select <select
id="budget" id="budget"
name="budget" name="budget"
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
> >
<option value="">Select budget range</option> <option value="">Select budget range</option>
<option value="under-100k">Under 100K GHS</option> <option value="under-100k">Under 100K GHS</option>
@ -672,7 +740,7 @@
</div> </div>
<div> <div>
<label for="message" class="block text-sm font-semibold mb-2" <label for="message" class="block text-sm font-semibold mb-2 text-gray-800"
>Project Details *</label >Project Details *</label
> >
<textarea <textarea
@ -680,43 +748,90 @@
name="message" name="message"
rows="6" rows="6"
required required
placeholder="Tell us about your project, requirements, timeline, and any specific needs..." placeholder="Tell us about your project, requirements, and any specific needs..."
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none text-gray-900"
></textarea> ></textarea>
</div> </div>
<button <button
type="submit" type="submit"
class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2" class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2 font-semibold"
> >
<span>Send Message</span> <span>Send Message</span>
<span>→</span> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button> </button>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<!-- Scroll Down Prompt -->
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2">
<button
id="contactScrollArrow"
class="flex items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
style="animation: fadeInUp 800ms ease-out 4.5s 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>
</section> </section>
<!-- Map Section --> <!-- Map Section -->
<section class="py-20 bg-kh3-black text-white"> <section class="py-20 bg-kh3-black text-white">
<div class="container mx-auto px-8 max-w-6xl"> <div class="container mx-auto px-8 max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-16">FIND US</h2> <h2
<div class="bg-neutral-800 rounded-lg p-12 text-center"> class="text-4xl font-bold text-center mb-16 opacity-0"
style="animation: fadeInUp 1s ease-out 2.4s forwards"
>
FIND US
</h2>
<div class="bg-kh3-grey/20 rounded-lg p-12 text-center">
<div class="max-w-5xl mx-auto"> <div class="max-w-5xl mx-auto">
<h3 class="text-2xl font-bold mb-4">Accra, Ghana</h3> <h3
<p class="text-neutral-300 leading-relaxed mb-6"> class="text-2xl font-bold mb-4 opacity-0"
style="animation: fadeInUp 1s ease-out 2.6s forwards"
>
Accra, Ghana
</h3>
<p
class="text-kh3-grey leading-relaxed mb-6 opacity-0"
style="animation: fadeInUp 1s ease-out 2.8s forwards"
>
Our main office is located in the heart of Accra, easily Our main office is located in the heart of Accra, easily
accessible from all major areas. accessible from all major areas.
</p> </p>
<div class="text-kh3-red font-semibold"> <div
<span>📍 5.5600° N, 0.2057° W</span> class="text-kh3-red font-semibold opacity-0"
style="animation: fadeInUp 1s ease-out 3s forwards"
>
<span>📍 29 Labone Crescent, Accra, Ghana</span>
</div> </div>
<!-- Embedded Map --> <!-- Embedded Map -->
<div <div
class="mt-10 w-full overflow-hidden rounded-lg" class="mt-10 w-full overflow-hidden rounded-lg opacity-0"
style="aspect-ratio: 4 / 3" style="
aspect-ratio: 4 / 3;
animation: fadeInUp 1s ease-out 3.2s forwards;
"
> >
<iframe <iframe
title="KH3 Office Location Map" title="KH3 Office Location Map"
@ -742,7 +857,11 @@
class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0" class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0"
> >
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" /> <img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
class="w-12 h-12"
/>
<span class="text-2xl font-bold tracking-wider">KH3</span> <span class="text-2xl font-bold tracking-wider">KH3</span>
</div> </div>
<div class="flex space-x-8"> <div class="flex space-x-8">
@ -779,6 +898,93 @@
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 0.5;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 0.5;
transform: translateX(0);
}
}
@keyframes arrowPulse {
0% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
100% {
transform: translateY(0);
}
}
.animate-arrowPulse {
animation: arrowPulse 1.2s ease-in-out infinite;
}
@keyframes titleBounce {
0% {
opacity: 0;
transform: translateY(-50px) scale(0.5);
}
20% {
opacity: 1;
transform: translateY(20px) scale(1.1);
}
40% {
transform: translateY(-10px) scale(0.95);
}
60% {
transform: translateY(5px) scale(1.02);
}
80% {
transform: translateY(-2px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes maskRevealCenter {
0% {
clip-path: inset(0 50% 0 50%);
opacity: 0;
}
100% {
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
@keyframes maskReveal { @keyframes maskReveal {
0% { 0% {
clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);
@ -905,7 +1111,7 @@
} }
}); });
// Auto-scroll to contact section after 2 seconds with custom smooth animation // Auto-scroll to contact section after 2.5 seconds with custom smooth animation
setTimeout(() => { setTimeout(() => {
const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section
if (contactSection) { if (contactSection) {
@ -938,7 +1144,7 @@
requestAnimationFrame(animation); requestAnimationFrame(animation);
} }
}, 2000); }, 2500);
</script> </script>
</body> </body>
</html> </html>

27
index.html
View file

@ -11,10 +11,7 @@
/> />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@600;800&display=swap"
rel="stylesheet"
/>
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet" rel="stylesheet"
@ -29,7 +26,7 @@
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-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> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div> </div>
@ -40,8 +37,8 @@
<!-- Navigation items in inverted C shape --> <!-- Navigation items in inverted C shape -->
<div class="space-y-6"> <div class="space-y-6">
<!-- HOME - Top --> <!-- HOME - Top -->
<a <a
href="index.html" href="index.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat" class="block text-white text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
> >
<span <span
@ -83,8 +80,8 @@
</a> </a>
<!-- ABOUT US - Slightly right --> <!-- ABOUT US - Slightly right -->
<a <a
href="about.html" href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
> >
<span <span
@ -162,8 +159,8 @@
</a> </a>
<!-- SERVICES - More right --> <!-- SERVICES - More right -->
<a <a
href="services.html" href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
> >
<span <span
@ -320,8 +317,8 @@
</a> </a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
> >
<span <span
@ -400,7 +397,7 @@
<!-- PARTNERS - Back to left --> <!-- PARTNERS - Back to left -->
<a <a
href="brands.html" href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
> >
<span <span
@ -580,7 +577,7 @@
>DESIGN</span >DESIGN</span
> >
</div> </div>
</div> </div>
<!-- DELIVER --> <!-- DELIVER -->
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">

578
partners.html Normal file
View file

@ -0,0 +1,578 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Partners - KH3</title>
<link rel="stylesheet" href="styles/main.css" />
<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">
<!-- Navigation Menu -->
<div
id="navMenu"
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
>
<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 -->
<a
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
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="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="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 -->
<a
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES -->
<a
href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
<span
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="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="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="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="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="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="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 -->
<a
href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS -->
<a
href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PARTNERS - Active -->
<a
href="partners.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div>
</nav>
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
style="animation-delay: 0.4s; animation-fill-mode: forwards"
>
<div class="cursor-pointer" id="menuToggle">
<div
class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
id="menuGrid"
>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div>
</div>
</div>
<!-- Main Content -->
<main class="pt-20">
<!-- Hero Section -->
<section class="min-h-screen flex items-center justify-center">
<div class="text-center">
<h1 class="text-6xl md:text-8xl font-bold mb-8 tracking-wider">
PARTNERS
</h1>
<div class="w-32 h-px bg-kh3-red mx-auto mb-8"></div>
<p class="text-2xl md:text-3xl text-neutral-300 mb-12 tracking-wide">
COMING SOON
</p>
<p class="text-lg text-neutral-400 max-w-2xl mx-auto leading-relaxed">
We're working on something amazing. Our network of trusted partners
and collaborations will be available soon.
</p>
</div>
</section>
</main>
<script src="js/main.js"></script>
<script>
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
menuGrid.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-5 h-5 text-kh3-red" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
`;
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
isMenuOpen = false;
}
});
}
</script>
</body>
</html>

718
projects.html
View file

@ -3,192 +3,576 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Projects - KH3 | Building Inspiring Spaces</title> <title>Projects - KH3</title>
<meta <link rel="stylesheet" href="styles/main.css" />
name="description" <link rel="preconnect" href="https://fonts.googleapis.com" />
content="Explore KH3's portfolio of construction and project management projects across Ghana. Corporate, Education, Hospitality, and Retail projects." <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/animations.css" />
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
</head> </head>
<body class="dark-gothic-mode"> <body class="bg-kh3-black text-white font-montserrat">
<!-- Navigation Menu Overlay --> <!-- Navigation Menu -->
<nav class="nav-overlay" id="navOverlay"> <div
<div class="nav-content"> id="navMenu"
<div class="nav-header"> class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
<div class="logo"> >
<img src="images/kh3_logo.png" alt="KH3" class="logo-image" /> <div class="p-8 flex flex-col h-full">
<span class="logo-text">KH3</span> <!-- Logo -->
</div> <div class="flex items-center gap-3 mb-12">
<button class="nav-close" id="navClose"> <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span></span> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
<span></span>
</button>
</div>
<div class="nav-links">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="projects.html" aria-current="page">Projects</a>
<a href="services.html">Services</a>
<a href="approach.html">Approach</a>
<a href="careers.html">Careers</a>
<a href="news.html">News</a>
<a href="brands.html">Brands</a>
<a href="contact.html">Contact</a>
</div>
<div class="nav-footer">
<div class="contact-info">
<p>Accra, Ghana</p>
<p>+233 20 123 4567</p>
<p>info@kh3.com</p>
</div>
</div> </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 -->
<a
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
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="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="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 -->
<a
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES -->
<a
href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
<span
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="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="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="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="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="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="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 - Active -->
<a
href="projects.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS -->
<a
href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PARTNERS -->
<a
href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div> </div>
</nav> </nav>
<!-- Page Header --> <!-- Menu Grid -->
<header class="page-header"> <div
<div class="container"> class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
<div class="header-content"> style="animation-delay: 0.4s; animation-fill-mode: forwards"
<div class="logo"> >
<img src="images/kh3_logo.png" alt="KH3" class="logo-image" /> <div class="cursor-pointer" id="menuToggle">
<span class="logo-text">KH3</span> <div
</div> class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
<div class="menu-toggle" id="menuToggle"> id="menuGrid"
<div class="grid-icon"> >
<span></span> <span class="w-1 h-1 bg-white"></span>
<span></span> <span class="w-1 h-1 bg-white"></span>
<span></span> <span class="w-1 h-1 bg-white"></span>
<span></span> <span class="w-1 h-1 bg-white"></span>
<span></span> <span class="w-1 h-1 bg-white"></span>
<span></span> <span class="w-1 h-1 bg-white"></span>
<span></span> <span class="w-1 h-1 bg-white"></span>
<span></span> <span class="w-1 h-1 bg-white"></span>
<span></span> <span class="w-1 h-1 bg-white"></span>
</div> </div>
</div> </div>
</div> </div>
</div>
</header>
<!-- Main Content --> <!-- Main Content -->
<main> <main class="pt-20">
<!-- Hero Section --> <!-- Hero Section -->
<section class="hero-section"> <section class="min-h-screen flex items-center justify-center">
<div class="container"> <div class="text-center">
<div class="hero-content"> <h1 class="text-6xl md:text-8xl font-bold mb-8 tracking-wider">
<h1 class="hero-title">Our Projects</h1> PROJECTS
<p class="hero-subtitle"> </h1>
Discover our portfolio of construction and project management <div class="w-32 h-px bg-kh3-red mx-auto mb-8"></div>
excellence across Ghana <p class="text-2xl md:text-3xl text-neutral-300 mb-12 tracking-wide">
</p> COMING SOON
</div> </p>
</div> <p class="text-lg text-neutral-400 max-w-2xl mx-auto leading-relaxed">
</section> We're working on something amazing. Our portfolio of completed
projects will be available soon.
<!-- Projects Filter Section --> </p>
<section class="projects-filter-section">
<div class="container">
<div class="filter-container">
<div
class="filter-group"
role="tablist"
aria-label="Project categories"
>
<button
class="pill"
data-filter="All"
aria-pressed="true"
role="tab"
>
All Projects
</button>
<button
class="pill"
data-filter="Corporate"
aria-pressed="false"
role="tab"
>
Corporate
</button>
<button
class="pill"
data-filter="Education"
aria-pressed="false"
role="tab"
>
Education
</button>
<button
class="pill"
data-filter="Hospitality"
aria-pressed="false"
role="tab"
>
Hospitality
</button>
<button
class="pill"
data-filter="Retail"
aria-pressed="false"
role="tab"
>
Retail
</button>
</div>
</div>
</div>
</section>
<!-- Projects Grid Section -->
<section class="projects-grid-section">
<div class="container">
<div class="projects-grid" id="projectsGrid">
<!-- Projects will be loaded here via JavaScript -->
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<div class="cta-content">
<h2>Ready to Start Your Project?</h2>
<p>Let's discuss how KH3 can bring your vision to life</p>
<a href="contact.html" class="btn-primary">Get in Touch</a>
</div>
</div> </div>
</section> </section>
</main> </main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
<span class="logo-text">KH3</span>
</div>
<div class="footer-links">
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
<a href="projects.html">Projects</a>
<a href="services.html">Services</a>
<a href="careers.html">Careers</a>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</div>
<div class="footer-copyright">© 2024 KH3. All rights reserved.</div>
</div>
</div>
</footer>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/projects.js"></script> <script>
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
menuGrid.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-5 h-5 text-kh3-red" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
`;
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
isMenuOpen = false;
}
});
}
</script>
</body> </body>
</html> </html>

747
services.html Normal file
View file

@ -0,0 +1,747 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Services - KH3</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
kh3: {
black: "#212829",
red: "#B03037",
grey: "#8E9089",
white: "#FFFFFF",
},
},
fontFamily: {
montserrat: ["Montserrat", "sans-serif"],
},
animation: {
"fade-in-up": "fadeInUp 1s ease-out forwards",
"fade-in-left": "fadeInLeft 1s ease-out forwards",
"fade-in-right": "fadeInRight 1s ease-out forwards",
"logo-float": "logoFloat 3s ease-in-out infinite",
},
keyframes: {
fadeInUp: {
"0%": { opacity: "0", transform: "translateY(30px)" },
"100%": { opacity: "1", transform: "translateY(0)" },
},
fadeInLeft: {
"0%": { opacity: "0", transform: "translateX(-30px)" },
"100%": { opacity: "1", transform: "translateX(0)" },
},
fadeInRight: {
"0%": { opacity: "0", transform: "translateX(30px)" },
"100%": { opacity: "1", transform: "translateX(0)" },
},
logoFloat: {
"0%, 100%": { transform: "translateY(0px)" },
"50%": { transform: "translateY(-10px)" },
},
},
},
},
};
</script>
<style>
body {
font-family: "Montserrat", sans-serif;
}
/* Scroll reveal utility */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
/* Interactive hover embellishments */
.hover-card { transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease; }
.hover-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.hover-row { transition: transform 200ms ease, color 200ms ease; }
.hover-row:hover { transform: translateX(6px); color: #ffffff; }
</style>
</head>
<body class="bg-kh3-black text-white font-montserrat">
<!-- Navigation Menu (copied from about.html) -->
<div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
<div class="absolute inset-0 flex items-center">
<div class="relative ml-8">
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>HOME</a>
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
>ABOUT US</a>
<!-- SERVICES - More right -->
<a
href="services.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-12 font-montserrat"
>SERVICES</a>
<!-- PROJECTS - Most right -->
<a
href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>PROJECTS</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
>CONTACTS</a>
<!-- PARTNERS - Back to left -->
<a
href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>PARTNERS</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<!-- Static Logo and Menu (copied from about.html) -->
<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>
<!-- Hero Section -->
<section class="min-h-screen relative flex">
<!-- Left Panel - Dark Background -->
<div
class="w-1/3 bg-kh3-black relative z-20 flex flex-col justify-center pl-16 pt-8 md:pt-12"
>
<!-- Vertical Line with Diamonds -->
<div
class="absolute left-8 top-1/2 transform -translate-y-1/2 flex flex-col items-center"
>
<div class="w-2.5 h-2.5 bg-white transform rotate-45 mb-8"></div>
<div class="w-px h-32 bg-neutral-800 mb-8"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45 mb-8"></div>
<div class="w-px h-32 bg-neutral-800 mb-8"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
</div>
<!-- Title with horizontal ruler -->
<div class="mb-8 relative">
<h1 class="text-4xl md:text-6xl tracking-[0.2em] font-bold text-white whitespace-nowrap ml-8 md:ml-12">
OUR SERVICES
</h1>
</div>
<!-- Subtle underline -->
<div
class="w-24 h-px bg-kh3-grey mt-8 opacity-0"
style="animation: fadeInUp 1s ease-out 1.2s forwards"
></div>
</div>
<!-- Right Panel - Image Background -->
<div class="w-2/3 relative z-10 h-full min-h-[90vh]">
<div
class="absolute left-0 right-0 top-20 md:top-28 bottom-0 bg-cover bg-center"
style="background-image: url('assets/images/room.png')"
>
<div class="absolute inset-0 bg-black/60"></div>
</div>
<!-- Scroll Prompt -->
<div
class="absolute bottom-10 left-4 flex flex-col items-center text-white/60"
>
<span class="text-sm mb-2">Scroll</span>
<div class="animate-pulse">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
</div>
</section>
<!-- KH3 Services Sections -->
<section class="py-32 bg-kh3-black text-white">
<div class="container mx-auto px-8 max-w-7xl">
<div class="mb-20 reveal" data-delay="0">
<h2 class="text-4xl md:text-6xl font-bold tracking-wide">CONSTRUCTION PROJECT MANAGEMENT</h2>
<div class="w-16 h-1 bg-kh3-red mt-6"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 hover-card rounded-lg">
<div class="space-y-6 text-white/85 leading-relaxed text-base md:text-lg reveal" data-delay="100">
<p>Construction projects can give you a headache and present numerous concerns that can keep you up at night. Details ranging from how to assess and select consultants or contractors to challenges with traffic impact assessments or soil tests. Construction projects can be even more challenging if construction or interior fit-out are not your core business.</p>
<p>At KH3, we know it is in our interest and yours, to reduce these challenges to a minimum by providing the expertise required to complete your project successfully and on time.</p>
<!-- KPIs (count-up) -->
<div class="grid grid-cols-3 gap-6 pt-4">
<div class="text-center reveal" data-delay="160">
<div class="text-3xl md:text-4xl font-extrabold text-white"><span class="counter" data-to="100" data-suffix="+">0</span></div>
<div class="text-sm text-kh3-grey mt-1">Projects</div>
</div>
<div class="text-center reveal" data-delay="200">
<div class="text-3xl md:text-4xl font-extrabold text-white"><span class="counter" data-to="20000" data-suffix="+">0</span></div>
<div class="text-sm text-kh3-grey mt-1">Sqm Delivered</div>
</div>
<div class="text-center reveal" data-delay="240">
<div class="text-3xl md:text-4xl font-extrabold text-white"><span class="counter" data-to="95" data-suffix="%">0</span></div>
<div class="text-sm text-kh3-grey mt-1">On‑time</div>
</div>
</div>
</div>
<div class="space-y-4 text-kh3-grey text-base reveal" data-delay="150">
<div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Define project objectives and scope, plan, performance requirements, standards, participants selection, and quality control.</p></div>
<div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Minimize wastage and maximize value via careful procurement of labor, materials and equipment.</p></div>
<div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Execute the designed project diligently by managing schedule, contracting and controlling costs.</p></div>
<div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Review materials and work processes to ensure safety and quality.</p></div>
</div>
</div>
</div>
</section>
<section class="py-32 bg-gradient-to-b from-kh3-black to-[#1b2021] text-white">
<div class="container mx-auto px-8 max-w-7xl">
<div class="mb-20 reveal" data-delay="0">
<h2 class="text-4xl md:text-6xl font-bold tracking-wide">COMMERCIAL FIT-OUTS & REFURBISHMENTS</h2>
<div class="w-16 h-1 bg-kh3-red mt-6"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 hover-card rounded-lg">
<div class="space-y-6 text-white/85 leading-relaxed text-base md:text-lg reveal" data-delay="100">
<!-- Blueprint SVG line draw accent -->
<svg class="w-full max-w-xl text-kh3-red" viewBox="0 0 600 120" fill="none" stroke="currentColor" stroke-width="2">
<path class="blueprint" d="M10 110 H590 M10 10 H300 M300 10 V60 M300 60 H500" stroke-dasharray="1000" stroke-dashoffset="1000"></path>
</svg>
<p>Acquiring commercial retail and office space requires efficient and effective coordination of highly demanding processes. These include identifying spatial needs, sourcing existing real estate to meet those needs, and designing and constructing the space in line with your corporate values and brand.</p>
<p>KH3 manages these processes for you with an integrated system. We acquire in-depth knowledge of your culture, systems, people, and goals and assemble goal-focused creative teams to meet your needs and requirements.</p>
</div>
<div class="space-y-4 text-kh3-grey text-base reveal" data-delay="150">
<div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>In-depth stakeholder interviews to understand spatial needs (dimensions, furniture, IT, AV/telephony, mechanical, electrical, branding).</p></div>
<div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Assist with outlining goals, budgets, and timelines for commercial spaces.</p></div>
<div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Identify and present suitable real estate options.</p></div>
<div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Design and fit-out from layout to furniture selection within budget and realistic timelines.</p></div>
<div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Ensure highest value through safe and ethical procurement and construction methods.</p></div>
</div>
</div>
</div>
</section>
<section class="py-32 bg-kh3-black text-white">
<div class="container mx-auto px-8 max-w-7xl">
<div class="mb-20 reveal" data-delay="0">
<h2 class="text-4xl md:text-6xl font-bold tracking-wide">PROGRAM MANAGEMENT</h2>
<div class="w-16 h-1 bg-kh3-red mt-6"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 hover-card rounded-lg">
<div class="space-y-6 text-white/85 leading-relaxed text-base md:text-lg reveal" data-delay="100">
<p>There are immense benefits of managing a group of related projects in a coordinated manner. Grouping projects into a Program yields economies of scale, implements standards, establishes a corporate look-and-feel and delivers flexibility and efficiencies.</p>
<p>Our roll-out process reduces inefficiencies, delivers flexibility, reduces cost and sets your organization apart. We help identify projects that should be grouped as a Program, determine individual projects that should be included, and outline and implement a Program Management Strategy.</p>
</div>
<div class="space-y-6 text-kh3-grey text-base">
<!-- Expanding horizontal timeline -->
<div class="relative pb-4 reveal" data-delay="120">
<div class="absolute bottom-0 left-0 h-[2px] w-0 bg-kh3-red/70 timeline-line -z-10"></div>
<ul class="relative grid gap-6 md:grid-cols-3">
<li class="relative z-10 hover-row">
<div class="w-2 h-2 bg-kh3-red rounded-full mb-2"></div>
<p>Discovery & grouping value via interviews</p>
</li>
<li class="relative z-10 hover-row">
<div class="w-2 h-2 bg-kh3-red rounded-full mb-2"></div>
<p>Define scope, standards, resources, controls</p>
</li>
<li class="relative z-10 hover-row">
<div class="w-2 h-2 bg-kh3-red rounded-full mb-2"></div>
<p>Test, evaluate, refine and roll out</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 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>
<!-- Services Overview (hidden) -->
<section class="py-32 bg-white hidden">
<!-- Construction Project Management -->
<section
id="construction"
class="service-detail min-h-screen bg-kh3-black flex items-center"
>
<div class="container mx-auto px-8 max-w-7xl">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Left Content -->
<div class="space-y-8">
<div class="flex items-center mb-8">
<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>
<h2 class="text-5xl md:text-7xl font-bold text-white mb-8">
CONSTRUCTION PROJECT MANAGEMENT
</h2>
<div class="w-24 h-px bg-kh3-red mb-8"></div>
<div class="space-y-6 text-white/80">
<p class="text-xl leading-relaxed">
Construction projects can give you a headache and present
numerous concerns that can keep you up at night. Details
ranging from how to assess and select consultants or
contractors to challenges with traffic impact assessments or
soil tests. Construction projects can be even more challenging
if construction or interior fit-out are not your core
business.
</p>
<p class="text-xl leading-relaxed">
At KH3, we know it is in our interest and yours, to reduce
these challenges to a minimum by providing the expertise
required to complete your project successfully and on time.
</p>
</div>
</div>
<!-- Right Content -->
<div class="space-y-8">
<h3 class="text-3xl font-bold text-white mb-8">HOW WE HELP</h3>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
We work with you to define your project objectives and
scope, lay out a project plan, define performance
requirements and standards, select project participants, and
set quality control standards.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
We minimize wastage and maximize value through the careful
procurement of labor, materials, and equipment.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
We execute the designed project diligently by carefully
managing the project schedule, contracting, and also
controlling costs.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
We consistently review materials and work processes to
ensure safety and quality.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Commercial Fit-outs -->
<section
id="fitouts"
class="service-detail min-h-screen bg-kh3-black flex items-center"
>
<div class="container mx-auto px-8 max-w-7xl">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Left Content -->
<div class="space-y-8">
<div class="flex items-center mb-8">
<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>
<h2 class="text-5xl md:text-7xl font-bold text-white mb-8">
COMMERCIAL FIT-OUTS & REFURBISHMENTS
</h2>
<div class="w-24 h-px bg-kh3-red mb-8"></div>
<div class="space-y-6 text-white/80">
<p class="text-xl leading-relaxed">
Acquiring and designing commercial spaces can be a complex
process that requires efficient coordination between various
stakeholders. From understanding spatial requirements to
managing budgets and timelines, the process demands expertise
and attention to detail.
</p>
<p class="text-xl leading-relaxed">
At KH3, we provide an integrated system that leverages our
in-depth knowledge and goal-focused teams to deliver
exceptional commercial fit-out and refurbishment services.
</p>
</div>
</div>
<!-- Right Content -->
<div class="space-y-8">
<h3 class="text-3xl font-bold text-white mb-8">HOW WE HELP</h3>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
In-depth interviews with stakeholders to understand spatial
needs and requirements including space dimensions,
furniture, IT, audio-visual, telephony, mechanical,
electrical, and branding.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
Assistance with outlining goals, budget, and timelines for
commercial spaces.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
Identification and presentation of suitable real estate
options.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
Design and fit-out services, from layout to furniture
selection, within budget and realistic timelines.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
Commitment to highest value for money through safe and
ethical procurement and construction methods.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Program Management -->
<section
id="program"
class="service-detail min-h-screen bg-kh3-black flex items-center"
>
<div class="container mx-auto px-8 max-w-7xl">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Left Content -->
<div class="space-y-8">
<div class="flex items-center mb-8">
<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>
<h2 class="text-5xl md:text-7xl font-bold text-white mb-8">
PROGRAM MANAGEMENT
</h2>
<div class="w-24 h-px bg-kh3-red mb-8"></div>
<div class="space-y-6 text-white/80">
<p class="text-xl leading-relaxed">
Managing related projects like bank branches or customer
service outlets in a coordinated manner can achieve economies
of scale, implement standards, establish a corporate
look-and-feel, and deliver flexibility and efficiencies that
would not be possible if each project was managed
individually.
</p>
<p class="text-xl leading-relaxed">
Our roll-out process reduces inefficiencies, delivers
flexibility, reduces costs, and helps organizations stand out.
We can identify, group, and implement a Program Management
Strategy that works for your organization.
</p>
</div>
</div>
<!-- Right Content -->
<div class="space-y-8">
<h3 class="text-3xl font-bold text-white mb-8">HOW WE HELP</h3>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
Determining the nature of related projects and the value of
grouping them through a detailed interview process.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
Developing a detailed Program that identifies all projects,
establishes scope, performance standards, resource
requirements, and controls.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
Building test models and evaluating the process and end
product for fitness of purpose.
</p>
</div>
<div class="flex items-start space-x-4">
<div
class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
></div>
<p class="text-white/80 text-lg leading-relaxed">
Refining the process and rolling out projects in adherence
to Program and Project Management Principles.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Back to Services Button -->
<div id="backButton" class="hidden fixed bottom-8 right-8 z-40">
<button
onclick="hideService()"
class="bg-kh3-red text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors"
>
Back to Services
</button>
</div>
<script>
// Service navigation
function showService(serviceId) {
document.getElementById("serviceDetails").classList.remove("hidden");
document.getElementById("backButton").classList.remove("hidden");
// Hide all service details
document.querySelectorAll(".service-detail").forEach((detail) => {
detail.classList.add("hidden");
});
// Show selected service
document.getElementById(serviceId).classList.remove("hidden");
// Smooth scroll to service
document
.getElementById(serviceId)
.scrollIntoView({ behavior: "smooth" });
}
function hideService() {
document.getElementById("serviceDetails").classList.add("hidden");
document.getElementById("backButton").classList.add("hidden");
// Scroll back to top
window.scrollTo({ top: 0, behavior: "smooth" });
}
// Scroll reveal observer for service sections
(function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const el = entry.target;
const delay = parseInt(el.getAttribute('data-delay') || '0', 10);
setTimeout(() => el.classList.add('in'), delay);
// Count-up for KPIs
el.querySelectorAll?.('.counter').forEach((c) => {
const to = parseInt(c.getAttribute('data-to') || '0', 10);
const suffix = c.getAttribute('data-suffix') || '';
let start = 0;
const duration = 1000;
const startTime = performance.now();
const step = (now) => {
const p = Math.min((now - startTime) / duration, 1);
const val = Math.floor(start + (to - start) * p);
c.textContent = val.toLocaleString() + suffix;
if (p < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
});
// Blueprint stroke animation
el.querySelectorAll?.('.blueprint').forEach((p) => {
p.style.transition = 'stroke-dashoffset 1400ms ease-out';
p.style.strokeDashoffset = '0';
});
// Expand the timeline connector
const line = el.querySelector?.('.timeline-line');
if (line) {
line.style.transition = 'width 900ms cubic-bezier(0.22,1,0.36,1)';
line.style.width = '100%';
}
observer.unobserve(el);
}
});
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
})();
// Menu toggle functionality (copied behavior from about.html)
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
menuGrid.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-5 h-5 text-kh3-red" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
`;
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
isMenuOpen = false;
}
});
// Ensure grid icon is static (no custom animation transforms)
if (menuGrid) menuGrid.style.transform = "none";
}
</script>
</body>
</html>

4
tailwind.config.js
View file

@ -6,8 +6,10 @@ module.exports = {
extend: { extend: {
colors: { colors: {
kh3: { kh3: {
black: "#212629", black: "#212829",
red: "#B03037", red: "#B03037",
grey: "#8E9089",
white: "#FFFFFF",
gold: "#b8860b", gold: "#b8860b",
darkGold: "#8b6914", darkGold: "#8b6914",
lightGold: "#daa520", lightGold: "#daa520",