support
19
.drone.yml
|
|
@ -9,23 +9,28 @@ steps:
|
|||
- name: website-data
|
||||
path: /host-target
|
||||
commands:
|
||||
- npm ci || npm install
|
||||
# 1. Install dependencies exactly as defined in package-lock.json
|
||||
- npm ci
|
||||
# 2. Run the build script (Tailwind + copying HTML/assets to dist/)
|
||||
- npm run build
|
||||
- cp -a . /host-target
|
||||
- chmod -R 777 /host-target
|
||||
# 3. Clear the target folder and copy ONLY the production-ready files
|
||||
# We use dist/. to copy the contents of the folder, not the folder itself
|
||||
- rm -rf /host-target/*
|
||||
- cp -a dist/. /host-target/
|
||||
- chmod -R 755 /host-target
|
||||
|
||||
- name: sync-files
|
||||
- name: verify
|
||||
image: alpine:latest
|
||||
volumes:
|
||||
- name: website-data
|
||||
path: /host-target
|
||||
commands:
|
||||
- echo "Verifying deployment structure:"
|
||||
- ls -la /host-target
|
||||
- ls -la /host-target/assets/images/
|
||||
- ls -la /host-target/assets/icons/
|
||||
- ls -la /host-target/styles/
|
||||
- echo "Deployment completed successfully"
|
||||
|
||||
volumes:
|
||||
- name: website-data
|
||||
host:
|
||||
path: /root/kh3website/data/html
|
||||
path: /root/website/data/html
|
||||
181
index.html
|
|
@ -1,181 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>KH3 - Building Inspiring Spaces</title>
|
||||
<!-- Standardized CSS Link -->
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<meta name="description"
|
||||
content="KH3 - Construction Project Management and Fit-out Services in Accra, Ghana. Building inspiring spaces since 2014." />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
|
||||
<!-- Navigation Menu (Standardized) -->
|
||||
<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">
|
||||
<div class="flex items-center gap-3 mb-12">
|
||||
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<img src="assets/images/kh3_logo.webp" alt="KH3" class="w-12 h-12" />
|
||||
</a>
|
||||
</div>
|
||||
<nav class="flex-1 relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="relative ml-8">
|
||||
<!-- Links are now vertically aligned and have no underline -->
|
||||
<div class="space-y-6">
|
||||
<a href="index.html" class="nav-link ml-0" data-anim="fade-in-left" data-anim-delay="50">
|
||||
<span class="md:hidden">HOME</span><span class="nav-link-span">H</span><span
|
||||
class="nav-link-span">O</span><span class="nav-link-span">M</span><span class="nav-link-span">E</span>
|
||||
</a>
|
||||
<a href="about.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
||||
data-anim-delay="200">
|
||||
<span class="md:hidden">WHY</span><span class="nav-link-span">W</span><span
|
||||
class="nav-link-span">H</span><span class="nav-link-span">Y</span>
|
||||
</a>
|
||||
<a href="services.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
||||
data-anim-delay="350">
|
||||
<span class="md:hidden">HOW</span><span class="nav-link-span">H</span><span
|
||||
class="nav-link-span">O</span><span class="nav-link-span">W</span>
|
||||
</a>
|
||||
<a href="projects.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
||||
data-anim-delay="550">
|
||||
<span class="md:hidden">WHAT</span><span class="nav-link-span">W</span><span
|
||||
class="nav-link-span">H</span><span class="nav-link-span">A</span><span class="nav-link-span">T</span>
|
||||
</a>
|
||||
<a href="who.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
||||
data-anim-delay="650">
|
||||
<span class="md:hidden">WHO</span><span class="nav-link-span">W</span><span
|
||||
class="nav-link-span">H</span><span class="nav-link-span">O</span>
|
||||
</a>
|
||||
<a href="contact.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
||||
data-anim-delay="750">
|
||||
<span class="md:hidden">CONTACTS</span><span class="nav-link-span">C</span><span
|
||||
class="nav-link-span">O</span><span class="nav-link-span">N</span><span
|
||||
class="nav-link-span">T</span><span class="nav-link-span">A</span><span
|
||||
class="nav-link-span">C</span><span class="nav-link-span">T</span><span class="nav-link-span">S</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Layout -->
|
||||
<div class="min-h-screen relative">
|
||||
<section class="relative h-[100svh] md:min-h-screen flex flex-col md:flex-row hero-section">
|
||||
|
||||
<!-- KH3 Logo -->
|
||||
<div class="absolute top-6 md:top-8 left-8 z-20 opacity-0" data-anim="fade-in-left" data-anim-delay="200">
|
||||
<a href="index.html"
|
||||
class="flex flex-col items-start gap-2 animate-logo-float hover:opacity-80 transition-opacity">
|
||||
<img src="assets/images/kh3_logo.webp" alt="KH3" class="w-16 h-16" />
|
||||
<h1 class="text-lg md:text-xl font-semibold text-white">KH3 Group</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Menu Toggle -->
|
||||
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
|
||||
<div class="cursor-pointer" id="menuToggle" role="button" aria-label="Toggle Navigation Menu" tabindex="0">
|
||||
<div class="relative inline-block hidden md:block" id="menuWrap">
|
||||
<div class="menu-waves" aria-hidden="true"><span class="wave"></span><span class="wave"></span><span
|
||||
class="wave"></span></div>
|
||||
<div class="menu-outline" aria-hidden="true"></div>
|
||||
<div class="relative" id="menuGrid"><img src="assets/icons/closed_petal.webp" alt="closed petal"
|
||||
class="w-6 h-6" /></div>
|
||||
<div id="menuPetal"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
|
||||
<img src="assets/icons/open_petal.webp" alt="petal" class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:hidden">
|
||||
<div class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3">
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span><span
|
||||
class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span><span
|
||||
class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span><span
|
||||
class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LEFT COLUMN -->
|
||||
<div class="w-full md:w-1/3 bg-kh3-black flex h-[20vh] md:h-auto shrink-0 opacity-0" data-anim="fade-in-left"
|
||||
data-anim-delay="800">
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN -->
|
||||
<div class="w-full md:w-2/3 relative overflow-hidden flex-1 min-h-0 md:flex-none" data-anim="fade-in-right"
|
||||
data-anim-delay="300">
|
||||
<div class="relative h-full md:h-full">
|
||||
<div class="absolute inset-0 bg-black bg-opacity-20 z-10"></div>
|
||||
<img id="currentImg" src="assets/images/room.webp" alt="Sample interior fit-out by KH3"
|
||||
class="absolute inset-0 w-full h-full object-cover" />
|
||||
<img id="nextImg" src="assets/images/chair.webp" alt="Sample interior fit-out by KH3"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-0" />
|
||||
|
||||
<!-- Mobile CTA bar on image -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0" data-anim="fade-in-up"
|
||||
data-anim-delay="1200" style="bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="about.html" data-trans=""
|
||||
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none">Why</a>
|
||||
<a href="contact.html" data-trans=""
|
||||
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none">Contacts</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0 hidden md:flex items-center gap-4"
|
||||
data-anim="fade-in-up" data-anim-delay="1200">
|
||||
<a href="about.html" data-trans="crossfade"
|
||||
class="inline-block uppercase tracking-wider px-6 py-3 text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-md animate-border-glow">
|
||||
Why KH3
|
||||
</a>
|
||||
<a href="who.html" data-trans="crossfade"
|
||||
class="inline-block uppercase tracking-wider px-6 py-3 text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-md animate-border-glow">
|
||||
Who We Are
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div data-include="components/footer.html"></div>
|
||||
|
||||
<!-- Custom Cursor -->
|
||||
<div class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50 hidden md:block"
|
||||
id="customCursor"></div>
|
||||
|
||||
<!-- Loading Screen -->
|
||||
<div class="fixed inset-0 bg-kh3-black z-50 flex items-center justify-center" id="loadingScreen">
|
||||
<div class="text-center">
|
||||
<a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
|
||||
<img src="assets/images/kh3_logo.webp" alt="KH3" class="w-16 h-16" />
|
||||
</a>
|
||||
<div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-kh3-red rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Script Files -->
|
||||
<script src="js/include.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/carousel.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -4,7 +4,10 @@
|
|||
"description": "KH3 - Building Inspiring Spaces",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
"build": "tailwindcss -i ./src/input.css -o ./styles/main.css",
|
||||
"clean": "rm -rf dist && mkdir -p dist",
|
||||
"build:css": "tailwindcss -i ./src/styles/input.css -o ./dist/styles/main.css --minify",
|
||||
"build:copy": "cp src/*.html dist/ && cp -r src/assets src/components src/data src/js dist/",
|
||||
"build": "npm run clean && npm run build:css && npm run build:copy",
|
||||
"watch": "tailwindcss -i ./src/input.css -o ./styles/main.css --watch",
|
||||
"dev": "tailwindcss -i ./src/input.css -o ./styles/main.css --watch"
|
||||
},
|
||||
|
|
@ -19,4 +22,4 @@
|
|||
],
|
||||
"author": "KH3",
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
345
services.html
|
|
@ -1,345 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>How - KH3</title>
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<meta name="description"
|
||||
content="Discover how KH3 delivers excellence in project management, commercial fit-outs, and program management." />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
|
||||
|
||||
|
||||
<!-- Navigation Menu (Standardized) -->
|
||||
<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">
|
||||
<div class="flex items-center gap-3 mb-12">
|
||||
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<img src="assets/images/kh3_logo.webp" alt="KH3" class="w-12 h-12" />
|
||||
</a>
|
||||
</div>
|
||||
<nav class="flex-1 relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="relative ml-8">
|
||||
<!-- Links are now vertically aligned and have no underline -->
|
||||
<div class="space-y-6">
|
||||
<a href="index.html" class="nav-link ml-0" data-anim="fade-in-left" data-anim-delay="50">
|
||||
<span class="md:hidden">HOME</span><span class="nav-link-span">H</span><span
|
||||
class="nav-link-span">O</span><span class="nav-link-span">M</span><span
|
||||
class="nav-link-span">E</span>
|
||||
</a>
|
||||
<a href="about.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
||||
data-anim-delay="200">
|
||||
<span class="md:hidden">WHY</span><span class="nav-link-span">W</span><span
|
||||
class="nav-link-span">H</span><span class="nav-link-span">Y</span>
|
||||
</a>
|
||||
<a href="services.html" class="nav-link ml-0" data-trans="crossfade"
|
||||
data-anim="fade-in-left" data-anim-delay="350">
|
||||
<span class="md:hidden">HOW</span><span class="nav-link-span">H</span><span
|
||||
class="nav-link-span">O</span><span class="nav-link-span">W</span>
|
||||
</a>
|
||||
<a href="projects.html" class="nav-link ml-0" data-trans="crossfade"
|
||||
data-anim="fade-in-left" data-anim-delay="550">
|
||||
<span class="md:hidden">WHAT</span><span class="nav-link-span">W</span><span
|
||||
class="nav-link-span">H</span><span class="nav-link-span">A</span><span
|
||||
class="nav-link-span">T</span>
|
||||
</a>
|
||||
<a href="who.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
||||
data-anim-delay="650">
|
||||
<span class="md:hidden">WHO</span><span class="nav-link-span">W</span><span
|
||||
class="nav-link-span">H</span><span class="nav-link-span">O</span>
|
||||
</a>
|
||||
<a href="contact.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
||||
data-anim-delay="750">
|
||||
<span class="md:hidden">CONTACTS</span><span class="nav-link-span">C</span><span
|
||||
class="nav-link-span">O</span><span class="nav-link-span">N</span><span
|
||||
class="nav-link-span">T</span><span class="nav-link-span">A</span><span
|
||||
class="nav-link-span">C</span><span class="nav-link-span">T</span><span
|
||||
class="nav-link-span">S</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Static Logo and Menu -->
|
||||
<div class="fixed top-6 left-8 z-40">
|
||||
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<img src="assets/images/kh3_logo.webp" alt="KH3" class="w-12 h-12" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Menu Toggle -->
|
||||
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
|
||||
<div class="cursor-pointer" id="menuToggle" role="button" aria-label="Toggle Navigation Menu" tabindex="0">
|
||||
<div class="relative inline-block hidden md:block" id="menuWrap">
|
||||
<div class="menu-waves" aria-hidden="true"><span class="wave"></span><span class="wave"></span><span
|
||||
class="wave"></span></div>
|
||||
<div class="menu-outline" aria-hidden="true"></div>
|
||||
<div class="relative" id="menuGrid"><img src="assets/icons/closed_petal.png" alt="closed petal"
|
||||
class="w-6 h-6" /></div>
|
||||
<div id="menuPetal"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
|
||||
<img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:hidden">
|
||||
<div class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3">
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span><span
|
||||
class="w-1 h-1 bg-white rounded-full"></span><span
|
||||
class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span><span
|
||||
class="w-1 h-1 bg-white rounded-full"></span><span
|
||||
class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span><span
|
||||
class="w-1 h-1 bg-white rounded-full"></span><span
|
||||
class="w-1 h-1 bg-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="pt-20">
|
||||
<section class="relative bg-kh3-black hero-section">
|
||||
<!-- ... The Hero Section remains unchanged ... -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
|
||||
<div class="relative bg-kh3-black flex items-center">
|
||||
<div class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
|
||||
data-anim="fade-in-up" data-anim-delay="1200">
|
||||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full"></div>
|
||||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full"></div>
|
||||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full"></div>
|
||||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||||
</div>
|
||||
<div class="pl-28 pr-6 w-full">
|
||||
<div class="flex items-center gap-6 opacity-0" data-anim="fade-in-up" data-anim-delay="1600">
|
||||
<div class="flex-1 h-px bg-white"></div>
|
||||
<h1 class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold">OUR HOW</h1>
|
||||
<div class="flex-1 h-px bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden">
|
||||
<img id="servicesCurrentImg" src="assets/images/room.webp" alt="KH3 Services"
|
||||
class="w-full h-full object-cover opacity-0 animate-[diagMaskReveal_1500ms_ease-out_300ms_forwards]" />
|
||||
<img id="servicesNextImg" src="assets/images/chair.webp" alt="KH3 Services"
|
||||
class="w-full h-full object-cover opacity-0 absolute inset-0" />
|
||||
<button id="servicesScrollArrow" aria-label="Scroll down"
|
||||
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
|
||||
data-anim="fade-in-up" data-anim-delay="1900">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<div class="w-px h-8 bg-white/70"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- NEW Service Showcase Layout -->
|
||||
<div class="space-y-24 md:space-y-32 py-24 md:py-32">
|
||||
|
||||
<!-- Service 1: Construction Project Management -->
|
||||
<section class="container mx-auto px-8 max-w-7xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
|
||||
<!-- Left Column: Description -->
|
||||
<div class="lg:sticky top-24 self-start">
|
||||
<div class="mb-8 opacity-0" data-anim="fade-in-up">
|
||||
<h2 class="text-3xl md:text-5xl font-bold tracking-wide text-white">CONSTRUCTION PROJECT
|
||||
MANAGEMENT</h2>
|
||||
<div class="w-16 h-1 bg-kh3-red mt-6"></div>
|
||||
</div>
|
||||
<div class="space-y-6 text-white/80 leading-relaxed text-lg opacity-0" data-anim="fade-in-up"
|
||||
data-anim-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.</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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: How We Help -->
|
||||
<div class="space-y-4">
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="200">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Define project objectives and scope, plan, performance requirements, standards,
|
||||
participants selection, and quality control.</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="300">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Minimize wastage and maximize value via careful procurement of labor, materials and
|
||||
equipment.</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="400">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Execute the designed project diligently by managing schedule, contracting and controlling
|
||||
costs.</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="500">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Review materials and work processes to ensure safety and quality.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service 2: Commercial Fit-Outs (Alternating Layout) -->
|
||||
<section class="container mx-auto px-8 max-w-7xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
|
||||
<!-- Right Column: How We Help (Appears on the left on large screens) -->
|
||||
<div class="space-y-4 lg:order-2">
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="200">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>In-depth stakeholder interviews to understand spatial needs (dimensions, furniture, IT,
|
||||
AV/telephony, etc.).</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="300">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Assist with outlining goals, budgets, and timelines for commercial spaces.</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="400">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Identify and present suitable real estate options.</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="500">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Design and fit-out from layout to furniture selection within budget and realistic
|
||||
timelines.</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="600">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Ensure highest value through safe and ethical procurement and construction methods.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Left Column: Description (Appears on the right on large screens) -->
|
||||
<div class="lg:sticky top-24 self-start lg:order-1">
|
||||
<div class="mb-8 opacity-0" data-anim="fade-in-up">
|
||||
<h2 class="text-3xl md:text-5xl font-bold tracking-wide text-white">COMMERCIAL FIT-OUTS &
|
||||
REFURBISHMENTS</h2>
|
||||
<div class="w-16 h-1 bg-kh3-red mt-6"></div>
|
||||
</div>
|
||||
<div class="space-y-6 text-white/80 leading-relaxed text-lg opacity-0" data-anim="fade-in-up"
|
||||
data-anim-delay="100">
|
||||
<p>Acquiring commercial retail and office space requires efficient and effective
|
||||
coordination. This includes identifying spatial needs, sourcing real estate, 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, assembling goal-focused
|
||||
creative teams to meet your needs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service 3: Program Management -->
|
||||
<section class="container mx-auto px-8 max-w-7xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
|
||||
<!-- Left Column: Description -->
|
||||
<div class="lg:sticky top-24 self-start">
|
||||
<div class="mb-8 opacity-0" data-anim="fade-in-up">
|
||||
<h2 class="text-3xl md:text-5xl font-bold tracking-wide text-white">PROGRAM MANAGEMENT</h2>
|
||||
<div class="w-16 h-1 bg-kh3-red mt-6"></div>
|
||||
</div>
|
||||
<div class="space-y-6 text-white/80 leading-relaxed text-lg opacity-0" data-anim="fade-in-up"
|
||||
data-anim-delay="100">
|
||||
<p>Managing a group of related projects in a coordinated manner 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, group, and implement a Program Management
|
||||
Strategy that works for your organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: How We Help -->
|
||||
<div class="space-y-4">
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="200">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Determining the nature of related projects and the value of grouping them through a
|
||||
detailed interview process.</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="300">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Developing a detailed Program that identifies all projects, establishes scope,
|
||||
performance standards, and controls.</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="400">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Building test models and evaluating the process and end product for fitness of purpose.
|
||||
</p>
|
||||
</div>
|
||||
<div class="service-item opacity-0" data-anim="fade-in-up" data-anim-delay="500">
|
||||
<div class="service-item-icon"><svg 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></div>
|
||||
<p>Refining the process and rolling out projects in adherence to Program and Project
|
||||
Management Principles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div data-include="components/footer.html"></div>
|
||||
|
||||
<script src="js/include.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/carousel.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 460 KiB After Width: | Height: | Size: 460 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 431 KiB After Width: | Height: | Size: 431 KiB |
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 280 KiB After Width: | Height: | Size: 280 KiB |
|
Before Width: | Height: | Size: 406 KiB After Width: | Height: | Size: 406 KiB |
|
Before Width: | Height: | Size: 448 KiB After Width: | Height: | Size: 448 KiB |
|
Before Width: | Height: | Size: 346 KiB After Width: | Height: | Size: 346 KiB |
|
Before Width: | Height: | Size: 458 KiB After Width: | Height: | Size: 458 KiB |
|
Before Width: | Height: | Size: 343 KiB After Width: | Height: | Size: 343 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 250 KiB After Width: | Height: | Size: 250 KiB |
|
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 362 KiB After Width: | Height: | Size: 362 KiB |
|
Before Width: | Height: | Size: 361 KiB After Width: | Height: | Size: 361 KiB |
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 196 KiB |
|
Before Width: | Height: | Size: 1 MiB After Width: | Height: | Size: 1 MiB |
|
Before Width: | Height: | Size: 560 KiB After Width: | Height: | Size: 560 KiB |
|
Before Width: | Height: | Size: 342 KiB After Width: | Height: | Size: 342 KiB |
|
Before Width: | Height: | Size: 914 KiB After Width: | Height: | Size: 914 KiB |
|
Before Width: | Height: | Size: 285 KiB After Width: | Height: | Size: 285 KiB |
|
Before Width: | Height: | Size: 375 KiB After Width: | Height: | Size: 375 KiB |
|
Before Width: | Height: | Size: 845 KiB After Width: | Height: | Size: 845 KiB |
|
Before Width: | Height: | Size: 510 KiB After Width: | Height: | Size: 510 KiB |
|
Before Width: | Height: | Size: 325 KiB After Width: | Height: | Size: 325 KiB |
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 241 KiB |
|
Before Width: | Height: | Size: 306 KiB After Width: | Height: | Size: 306 KiB |
|
Before Width: | Height: | Size: 280 KiB After Width: | Height: | Size: 280 KiB |
|
Before Width: | Height: | Size: 214 KiB After Width: | Height: | Size: 214 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 580 KiB After Width: | Height: | Size: 580 KiB |
|
Before Width: | Height: | Size: 662 KiB After Width: | Height: | Size: 662 KiB |
|
Before Width: | Height: | Size: 645 KiB After Width: | Height: | Size: 645 KiB |
|
Before Width: | Height: | Size: 816 KiB After Width: | Height: | Size: 816 KiB |
|
Before Width: | Height: | Size: 800 KiB After Width: | Height: | Size: 800 KiB |
|
Before Width: | Height: | Size: 556 KiB After Width: | Height: | Size: 556 KiB |
|
Before Width: | Height: | Size: 599 KiB After Width: | Height: | Size: 599 KiB |
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 202 KiB |
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 162 KiB |
|
Before Width: | Height: | Size: 123 KiB After Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 158 KiB After Width: | Height: | Size: 158 KiB |
|
Before Width: | Height: | Size: 365 KiB After Width: | Height: | Size: 365 KiB |
|
Before Width: | Height: | Size: 352 KiB After Width: | Height: | Size: 352 KiB |
|
Before Width: | Height: | Size: 390 KiB After Width: | Height: | Size: 390 KiB |
|
Before Width: | Height: | Size: 347 KiB After Width: | Height: | Size: 347 KiB |
|
Before Width: | Height: | Size: 318 KiB After Width: | Height: | Size: 318 KiB |
|
Before Width: | Height: | Size: 234 KiB After Width: | Height: | Size: 234 KiB |
BIN
src/assets/images/team/albert.webp
Normal file
|
After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 536 KiB After Width: | Height: | Size: 536 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
BIN
src/assets/images/team/libby.webp
Normal file
|
After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/team/niniwa.webp
Normal file
|
After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
BIN
src/assets/images/team/sitso.webp
Normal file
|
After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 165 KiB After Width: | Height: | Size: 165 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/team/yvan.webp
Normal file
|
After Width: | Height: | Size: 40 KiB |