mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
feat: add services page
This commit is contained in:
parent
e53db02cfd
commit
bc95267aa4
8 changed files with 2661 additions and 398 deletions
597
about.html
597
about.html
|
|
@ -11,10 +11,7 @@
|
|||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@600;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet"
|
||||
|
|
@ -29,9 +26,9 @@
|
|||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links - Inverted C Layout -->
|
||||
<nav class="flex-1 relative">
|
||||
|
|
@ -43,8 +40,8 @@
|
|||
<a
|
||||
href="index.html"
|
||||
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"
|
||||
style="
|
||||
animation-delay: 0.05s;
|
||||
|
|
@ -53,7 +50,7 @@
|
|||
"
|
||||
>H</span
|
||||
>
|
||||
<span
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.075s;
|
||||
|
|
@ -83,8 +80,8 @@
|
|||
</a>
|
||||
|
||||
<!-- ABOUT US - Slightly right -->
|
||||
<a
|
||||
href="about.html"
|
||||
<a
|
||||
href="about.html"
|
||||
class="block text-white text-lg font-medium border-b border-white pb-1 ml-6 font-montserrat"
|
||||
>
|
||||
<span
|
||||
|
|
@ -162,8 +159,8 @@
|
|||
</a>
|
||||
|
||||
<!-- SERVICES - More right -->
|
||||
<a
|
||||
href="services.html"
|
||||
<a
|
||||
href="services.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
|
||||
>
|
||||
<span
|
||||
|
|
@ -400,7 +397,7 @@
|
|||
|
||||
<!-- PARTNERS - Back to left -->
|
||||
<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"
|
||||
>
|
||||
<span
|
||||
|
|
@ -478,44 +475,45 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<header
|
||||
class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/90 backdrop-blur-sm"
|
||||
>
|
||||
<div
|
||||
class="container mx-auto px-8 py-4 flex justify-between items-center"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a href="index.html" class="flex items-center gap-3">
|
||||
<img
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
<span class="text-white text-xl font-bold tracking-wider">KH3</span>
|
||||
</a>
|
||||
<!-- Static Logo and Menu -->
|
||||
<div class="fixed top-6 left-8 z-40">
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
<span
|
||||
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
|
||||
>KH3</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Grid -->
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<!-- 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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="pt-20">
|
||||
|
|
@ -536,7 +534,7 @@
|
|||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||||
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
|
||||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title with horizontal ruler -->
|
||||
<div class="pl-28 pr-6 w-full">
|
||||
|
|
@ -544,15 +542,15 @@
|
|||
class="flex items-center gap-6 opacity-0"
|
||||
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
|
||||
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
|
||||
>
|
||||
ABOUT US
|
||||
</h1>
|
||||
<div class="flex-1 h-px bg-neutral-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 h-px bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right image panel -->
|
||||
|
|
@ -590,108 +588,459 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section class="py-20 bg-white text-kh3-black">
|
||||
<!-- Dream Design Deliver Section -->
|
||||
<section class="py-20 bg-kh3-black text-white relative">
|
||||
<div class="container mx-auto px-8 max-w-6xl">
|
||||
<div class="text-center">
|
||||
<h2
|
||||
class="text-4xl font-bold mb-12 opacity-0"
|
||||
<!-- Elegant horizontal layout -->
|
||||
<div
|
||||
class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 0.8s forwards"
|
||||
>
|
||||
OUR STORY
|
||||
</h2>
|
||||
<div class="text-lg leading-relaxed space-y-6 max-w-4xl mx-auto">
|
||||
<p
|
||||
class="opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1s forwards"
|
||||
>
|
||||
BASED IN ACCRA, GHANA, KH3 WAS ESTABLISHED IN
|
||||
<span class="text-kh3-red font-semibold">2014</span> TO CATER
|
||||
FOR THE CONSTRUCTION PROJECT MANAGEMENT NEEDS OF COMMERCIAL
|
||||
CLIENTS. WITH A GROWING REPUTATION FOR QUALITY, ATTENTION TO
|
||||
DETAIL AND THE UPMOST
|
||||
<span class="text-kh3-red font-semibold">PROFESSIONALISM</span>,
|
||||
KH3 EXPANDED INTO COMPREHENSIVE DESIGN AND FIT-OUT SERVICES.
|
||||
</p>
|
||||
<!-- DREAM -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<h2
|
||||
class="text-3xl md:text-4xl font-bold tracking-wider text-white"
|
||||
>
|
||||
DREAM
|
||||
</h2>
|
||||
<div class="w-2 h-2 bg-kh3-red rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- DESIGN -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<h2
|
||||
class="text-3xl md:text-4xl font-bold tracking-wider text-white"
|
||||
>
|
||||
DESIGN
|
||||
</h2>
|
||||
<div class="w-2 h-2 bg-kh3-red rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- DELIVER -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<h2
|
||||
class="text-3xl md:text-4xl font-bold tracking-wider text-white"
|
||||
>
|
||||
DELIVER
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subtle underline -->
|
||||
<div
|
||||
class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1.2s forwards"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Introduction Section -->
|
||||
<section class="py-32 bg-white text-kh3-black">
|
||||
<div class="container mx-auto px-8 max-w-5xl">
|
||||
<div class="text-center">
|
||||
<div class="text-xl leading-relaxed space-y-8 max-w-4xl mx-auto">
|
||||
<p
|
||||
class="opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1.2s forwards"
|
||||
>
|
||||
THIS MEANT MORE CONTROL OVER THE END-TO-END PROCESS, MAINTAINING
|
||||
<span class="text-kh3-red font-semibold">HIGH STANDARDS</span>
|
||||
FROM START TO FINISH AND ENSURING THAT THE ORIGINAL
|
||||
SPECIFICATION COULD BE MET AND EXCEEDED. TODAY, KH3 WORKS WITH A
|
||||
BROAD SPECTRUM OF CLIENTS, EXPANDING INTO NEW MARKETS WHILST
|
||||
HANDLING THE ENTIRE PROCESS FROM DESIGN TO THE FINAL FINISH.
|
||||
KH3 is Ghana's leading Construction Project Management Firm with
|
||||
a focus on Interior Design and Fit-out. Founded in
|
||||
<span class="text-kh3-red font-semibold">2014</span> by a highly
|
||||
motivated team, KH3 is committed to being the standard of
|
||||
business excellence in Africa.
|
||||
</p>
|
||||
<p
|
||||
class="opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1.4s forwards"
|
||||
>
|
||||
Our turnkey approach provides our clients with a single point of
|
||||
contact. This liberates them to refocus on their core business.
|
||||
Results: Exceptional projects completed within budget and on
|
||||
time!
|
||||
</p>
|
||||
<p
|
||||
class="opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1.6s forwards"
|
||||
>
|
||||
Our forward thinking, highly sort after network of
|
||||
professionals, artisans, suppliers and subcontractors, makeup
|
||||
the power house that is the KH3 team.
|
||||
</p>
|
||||
<p
|
||||
class="opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1.8s forwards"
|
||||
>
|
||||
Guided by our core values of Beauty, Integrity, Loyalty,
|
||||
Diligence, Excellence, Resilience and Studiousness, our team has
|
||||
executed over 20,000 square meters of office space for
|
||||
international and national brands such as
|
||||
<span class="text-kh3-red font-semibold">Google</span>,
|
||||
<span class="text-kh3-red font-semibold">Align</span>,
|
||||
<span class="text-kh3-red font-semibold">DBG</span> and
|
||||
<span class="text-kh3-red font-semibold"
|
||||
>Enterprise Group Limited</span
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Values Section -->
|
||||
<section class="py-20 bg-neutral-100 text-kh3-black">
|
||||
<div class="container mx-auto px-8 max-w-6xl">
|
||||
<div class="text-center mb-16">
|
||||
<!-- Mission & Vision Section -->
|
||||
<section class="py-32 bg-kh3-grey text-kh3-black">
|
||||
<div class="container mx-auto px-8 max-w-7xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
|
||||
<!-- Mission Card -->
|
||||
<div class="relative group">
|
||||
<!-- Decorative elements -->
|
||||
<div
|
||||
class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
<div
|
||||
class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
|
||||
<div
|
||||
class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float"
|
||||
>
|
||||
<!-- Glossy overlay -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl"
|
||||
></div>
|
||||
|
||||
<!-- Animated border glow -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
></div>
|
||||
|
||||
<!-- Floating particles -->
|
||||
<div
|
||||
class="absolute top-4 right-4 w-2 h-2 bg-kh3-red/60 rounded-full animate-pulse"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-6 left-6 w-1 h-1 bg-kh3-red/40 rounded-full animate-ping"
|
||||
></div>
|
||||
|
||||
<div class="relative text-center">
|
||||
<!-- Icon/Number with glow -->
|
||||
<div
|
||||
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
|
||||
>
|
||||
<span class="text-white text-2xl font-bold drop-shadow-lg"
|
||||
>01</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Title with text glow -->
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg group-hover:text-shadow-lg transition-all duration-300"
|
||||
>
|
||||
MISSION
|
||||
</h2>
|
||||
|
||||
<!-- Animated divider -->
|
||||
<div
|
||||
class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500"
|
||||
></div>
|
||||
|
||||
<!-- Content with hover effect -->
|
||||
<p
|
||||
class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300"
|
||||
>
|
||||
Out of the ordinary the Extraordinary that inspires the
|
||||
world.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vision Card -->
|
||||
<div class="relative group">
|
||||
<!-- Decorative elements -->
|
||||
<div
|
||||
class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
<div
|
||||
class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
|
||||
<div
|
||||
class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float"
|
||||
>
|
||||
<!-- Glossy overlay -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl"
|
||||
></div>
|
||||
|
||||
<!-- Animated border glow -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
></div>
|
||||
|
||||
<!-- Floating particles -->
|
||||
<div
|
||||
class="absolute top-6 left-4 w-1.5 h-1.5 bg-kh3-red/50 rounded-full animate-pulse"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-4 right-6 w-1 h-1 bg-kh3-red/30 rounded-full animate-ping"
|
||||
></div>
|
||||
|
||||
<div class="relative text-center">
|
||||
<!-- Icon/Number with glow -->
|
||||
<div
|
||||
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
|
||||
>
|
||||
<span class="text-white text-2xl font-bold drop-shadow-lg"
|
||||
>02</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Title with text glow -->
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg group-hover:text-shadow-lg transition-all duration-300"
|
||||
>
|
||||
VISION
|
||||
</h2>
|
||||
|
||||
<!-- Animated divider -->
|
||||
<div
|
||||
class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500"
|
||||
></div>
|
||||
|
||||
<!-- Content with hover effect -->
|
||||
<p
|
||||
class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300"
|
||||
>
|
||||
We will be the standard of global business excellence in
|
||||
Africa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Values Section -->
|
||||
<section class="py-32 bg-white text-kh3-black">
|
||||
<div class="container mx-auto px-8 max-w-6xl">
|
||||
<div class="text-center mb-20">
|
||||
<h2
|
||||
class="text-4xl font-bold mb-6 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1.4s forwards"
|
||||
class="text-5xl md:text-7xl font-bold mb-16 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 2.4s forwards"
|
||||
>
|
||||
OUR VALUES
|
||||
VALUES
|
||||
</h2>
|
||||
<p
|
||||
class="text-lg text-neutral-600 max-w-2xl mx-auto opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1.6s forwards"
|
||||
</div>
|
||||
|
||||
<!-- Row 1: 3 columns -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-16 mb-16">
|
||||
<div
|
||||
class="text-center opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 2.6s forwards"
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
<div
|
||||
class="text-center opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1.8s forwards"
|
||||
style="animation: fadeInUp 1s ease-out 2.8s forwards"
|
||||
>
|
||||
<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>
|
||||
<h3 class="text-xl font-semibold mb-4">QUALITY</h3>
|
||||
<p class="text-neutral-600">
|
||||
We maintain the highest standards in every project, ensuring
|
||||
excellence from conception to completion.
|
||||
<h3 class="text-2xl font-semibold mb-6">Integrity</h3>
|
||||
<p class="text-lg text-neutral-600 leading-relaxed">
|
||||
We stay true to our word. We will do what we say we will do, and
|
||||
deliver on our promises. If forfeiting on our word is beyond our
|
||||
human control; we will communicate this transparently and in
|
||||
good time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-center opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 3s forwards"
|
||||
>
|
||||
<div
|
||||
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
||||
></div>
|
||||
<h3 class="text-2xl font-semibold mb-6">Loyalty</h3>
|
||||
<p class="text-lg text-neutral-600 leading-relaxed">
|
||||
We our faithful to our mission and vision and that of our
|
||||
stakeholders and the organizations they represent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: 1 column (middle) -->
|
||||
<div class="flex justify-center mb-16">
|
||||
<div
|
||||
class="text-center opacity-0 max-w-md"
|
||||
style="animation: fadeInUp 1s ease-out 3.2s forwards"
|
||||
>
|
||||
<div
|
||||
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
||||
></div>
|
||||
<h3 class="text-2xl font-semibold mb-6">Studiousness</h3>
|
||||
<p class="text-lg text-neutral-600 leading-relaxed">
|
||||
We are committed to learning and advancing our services,
|
||||
products, and tools to best serve our stakeholders.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 3: 3 columns -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-16">
|
||||
<div
|
||||
class="text-center opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 3.4s forwards"
|
||||
>
|
||||
<div
|
||||
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
||||
></div>
|
||||
<h3 class="text-2xl font-semibold mb-6">Diligence</h3>
|
||||
<p class="text-lg text-neutral-600 leading-relaxed">
|
||||
We give our utmost attention to all our projects. We do this in
|
||||
earnest and with precision.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-center opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 3.6s forwards"
|
||||
>
|
||||
<div
|
||||
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
|
||||
></div>
|
||||
<h3 class="text-2xl font-semibold mb-6">Excellence</h3>
|
||||
<p class="text-lg text-neutral-600 leading-relaxed">
|
||||
We are committed to delivering exceptional results in every area
|
||||
of our operations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-center opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 2s forwards"
|
||||
style="animation: fadeInUp 1s ease-out 3.8s forwards"
|
||||
>
|
||||
<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>
|
||||
<h3 class="text-xl font-semibold mb-4">PROFESSIONALISM</h3>
|
||||
<p class="text-neutral-600">
|
||||
Our team approaches every project with dedication, expertise,
|
||||
and unwavering commitment to our clients.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-center opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 2.2s forwards"
|
||||
>
|
||||
<div
|
||||
class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45"
|
||||
></div>
|
||||
<h3 class="text-xl font-semibold mb-4">INNOVATION</h3>
|
||||
<p class="text-neutral-600">
|
||||
We continuously evolve our methods and embrace new technologies
|
||||
to deliver cutting-edge solutions.
|
||||
<h3 class="text-2xl font-semibold mb-6">Resilience</h3>
|
||||
<p class="text-lg text-neutral-600 leading-relaxed">
|
||||
In the face of daunting challenges, setbacks and failures; we
|
||||
learn and document lessons, bounce back and persist in the
|
||||
pursuit of goals, targets, objectives and deadlines. We do this
|
||||
with focused optimism.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section class="py-32 bg-kh3-black text-white">
|
||||
<div class="container mx-auto px-8 max-w-7xl">
|
||||
<div class="text-center mb-20">
|
||||
<!-- Main Title -->
|
||||
<h2 class="text-6xl md:text-8xl font-bold mb-8">
|
||||
<span class="text-white">KH3</span>
|
||||
<span class="text-kh3-red">TEAM</span>
|
||||
</h2>
|
||||
|
||||
<!-- Subtitle with line -->
|
||||
<div class="flex items-center justify-center mb-8">
|
||||
<div class="w-16 h-px bg-white"></div>
|
||||
<span class="text-white text-xl font-medium mx-4 tracking-wider"
|
||||
>MEET THE KH3 TEAM</span
|
||||
>
|
||||
<div class="w-16 h-px bg-white"></div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p
|
||||
class="text-xl md:text-2xl text-white/80 max-w-4xl mx-auto leading-relaxed tracking-wide"
|
||||
>
|
||||
WE'RE AN EVER-EXPANDING FAMILY OF DESIGN AND CONSTRUCTION
|
||||
CRAFTSMEN AND PROJECT MANAGEMENT EXPERTS WHO BELIEVE IN DELIVERING
|
||||
HIGH QUALITY SOLUTIONS.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Team Members Grid -->
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 mt-20"
|
||||
>
|
||||
<!-- Team Member 1 -->
|
||||
<div class="group relative">
|
||||
<div
|
||||
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
|
||||
>
|
||||
<div
|
||||
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
|
||||
>
|
||||
<span class="text-4xl text-white/60">👤</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-white mb-2">
|
||||
Team Member
|
||||
</h3>
|
||||
<p class="text-kh3-red font-medium">Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Member 2 -->
|
||||
<div class="group relative">
|
||||
<div
|
||||
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
|
||||
>
|
||||
<div
|
||||
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
|
||||
>
|
||||
<span class="text-4xl text-white/60">👤</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-white mb-2">
|
||||
Team Member
|
||||
</h3>
|
||||
<p class="text-kh3-red font-medium">Design Specialist</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Member 3 -->
|
||||
<div class="group relative">
|
||||
<div
|
||||
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
|
||||
>
|
||||
<div
|
||||
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
|
||||
>
|
||||
<span class="text-4xl text-white/60">👤</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-white mb-2">
|
||||
Team Member
|
||||
</h3>
|
||||
<p class="text-kh3-red font-medium">Construction Lead</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
|
|
@ -705,8 +1054,8 @@
|
|||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
<span class="text-2xl font-bold tracking-wider">KH3</span>
|
||||
</div>
|
||||
<span class="text-2xl font-bold tracking-wider">KH3</span>
|
||||
</div>
|
||||
<p class="text-neutral-300 leading-relaxed">
|
||||
Building inspiring spaces through innovative construction and
|
||||
design solutions.
|
||||
|
|
@ -718,21 +1067,21 @@
|
|||
<li>
|
||||
<a
|
||||
href="index.html"
|
||||
class="text-neutral-300 hover:text-white transition-colors"
|
||||
class="text-neutral-300 hover:text-white transition-colors"
|
||||
>Home</a
|
||||
>
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
<a
|
||||
href="about.html"
|
||||
class="text-neutral-300 hover:text-white transition-colors"
|
||||
class="text-neutral-300 hover:text-white transition-colors"
|
||||
>About Us</a
|
||||
>
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
<a
|
||||
href="projects.html"
|
||||
class="text-neutral-300 hover:text-white transition-colors"
|
||||
class="text-neutral-300 hover:text-white transition-colors"
|
||||
>Projects</a
|
||||
>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue