mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
George Birikorang
f52b5e4614
All checks were successful
continuous-integration/drone/push Build is passing
736 lines
34 KiB
HTML
736 lines
34 KiB
HTML
<!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-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
|
||
id="navMenu"
|
||
>
|
||
<div class="p-8 flex flex-col h-full">
|
||
<!-- Logo -->
|
||
<div class="flex items-center gap-3 mb-12">
|
||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
||
</div>
|
||
|
||
<!-- Navigation Links - Inverted C Layout -->
|
||
<nav class="flex-1 relative">
|
||
<div class="absolute inset-0 flex items-center">
|
||
<div class="relative ml-8">
|
||
<!-- Navigation items in inverted C shape -->
|
||
<div class="space-y-6">
|
||
<!-- HOME - Top -->
|
||
<a
|
||
href="index.html"
|
||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.05s; animation-fill-mode: forwards; animation-duration: 0.3s;">HOME</a>
|
||
|
||
<!-- ABOUT US - Slightly right -->
|
||
<a
|
||
href="about.html"
|
||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.2s; animation-fill-mode: forwards; animation-duration: 0.3s;">ABOUT US</a>
|
||
|
||
<!-- SERVICES - More right -->
|
||
<a
|
||
href="services.html"
|
||
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.35s; animation-fill-mode: forwards; animation-duration: 0.3s;">SERVICES</a>
|
||
|
||
<!-- PROJECTS - Most right -->
|
||
<a
|
||
href="projects.html"
|
||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
|
||
|
||
<!-- CONTACTS - More right -->
|
||
<a
|
||
href="contact.html"
|
||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.75s; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
|
||
</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>
|