mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
George Birikorang
1d80addd7a
All checks were successful
continuous-integration/drone/push Build is passing
1298 lines
53 KiB
HTML
1298 lines
53 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>How - 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; }
|
||
|
||
/* Diagonal mask reveal for hero image */
|
||
@keyframes diagMaskReveal {
|
||
0% {
|
||
opacity: 0;
|
||
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
|
||
transform: scale(1.03);
|
||
}
|
||
55% {
|
||
opacity: 1;
|
||
/* Sharper diagonal (more vertical edge) */
|
||
clip-path: polygon(82% 0, 100% 0, 100% 100%, 64% 100%);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||
}
|
||
}
|
||
|
||
/* Arrow pulse animation */
|
||
@keyframes arrowPulse {
|
||
0%, 100% {
|
||
transform: translateY(0);
|
||
opacity: 0.7;
|
||
}
|
||
50% {
|
||
transform: translateY(10px);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.animate-arrowPulse {
|
||
animation: arrowPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
/* Ensure horizontal lines are visible and extend beyond container */
|
||
.flex-1.h-px.bg-white {
|
||
min-width: 0;
|
||
flex: 1 1 0%;
|
||
}
|
||
|
||
/* Slide transition animations for image carousel */
|
||
@keyframes slideOutLeft {
|
||
0% {
|
||
transform: translateX(0) scale(1);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translateX(-100%) scale(0.8);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes slideOutRight {
|
||
0% {
|
||
transform: translateX(0) scale(1);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translateX(100%) scale(0.8);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes zoomInFromLeft {
|
||
0% {
|
||
transform: translateX(-100%) scale(1.2);
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
transform: translateX(0) scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes zoomInFromRight {
|
||
0% {
|
||
transform: translateX(100%) scale(1.2);
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
transform: translateX(0) scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* Page transition animations */
|
||
@keyframes staggerFadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-20px) scale(0.95);
|
||
}
|
||
}
|
||
|
||
/* Hero section class for targeting */
|
||
.hero-section {
|
||
/* This class will be added to the hero section for targeting */
|
||
}
|
||
</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">
|
||
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
||
</a>
|
||
</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;
|
||
"
|
||
data-trans="crossfade"
|
||
>
|
||
<span class="md:hidden">HOME</span>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.05s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>H</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.075s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>O</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.1s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>M</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.125s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>E</span
|
||
>
|
||
</a>
|
||
|
||
<!-- WHY - 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;
|
||
"
|
||
data-trans="crossfade"
|
||
>
|
||
<span class="md:hidden">WHY</span>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.2s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>W</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.225s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>H</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.25s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>Y</span
|
||
>
|
||
</a>
|
||
|
||
<!-- HOW - 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;
|
||
"
|
||
>
|
||
<span class="md:hidden">HOW</span>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.35s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>H</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.375s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>O</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.4s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>W</span
|
||
>
|
||
</a>
|
||
|
||
<!-- WHAT - 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;
|
||
"
|
||
data-trans="crossfade"
|
||
>
|
||
<span class="md:hidden">WHAT</span>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.55s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>W</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.575s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>H</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.6s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>A</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.625s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>T</span
|
||
>
|
||
</a>
|
||
|
||
<!-- WHO - New position -->
|
||
<a
|
||
href="who.html"
|
||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
||
style="
|
||
animation-delay: 0.65s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.3s;
|
||
"
|
||
data-trans="crossfade"
|
||
>
|
||
<span class="md:hidden">WHO</span>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.65s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>W</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.675s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>H</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.7s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>O</span
|
||
>
|
||
</a>
|
||
|
||
<!-- CONTACTS - More right -->
|
||
<a
|
||
href="contact.html"
|
||
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;
|
||
"
|
||
data-trans="crossfade"
|
||
>
|
||
<span class="md:hidden">CONTACTS</span>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.75s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>C</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.775s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>O</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.8s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>N</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.825s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>T</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.85s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>A</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.875s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>C</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.9s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>T</span
|
||
>
|
||
<span
|
||
class="hidden md:inline"
|
||
style="
|
||
animation-delay: 0.925s;
|
||
animation-fill-mode: forwards;
|
||
animation-duration: 0.15s;
|
||
"
|
||
>S</span
|
||
>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Static Logo and Menu (copied from about.html) -->
|
||
<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_dark.png"
|
||
alt="KH3"
|
||
class="w-12 h-12"
|
||
/>
|
||
<span
|
||
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
|
||
>KH3</span
|
||
>
|
||
</a>
|
||
</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>
|
||
|
||
<!-- Main Content -->
|
||
<main class="pt-20">
|
||
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
|
||
<section class="relative bg-kh3-black hero-section">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
|
||
<!-- Left dark panel -->
|
||
<div class="relative bg-kh3-black flex items-center justify-center">
|
||
<!-- Vertical timeline with diamonds -->
|
||
<div
|
||
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
|
||
style="animation-delay: 1200ms; animation-fill-mode: forwards;"
|
||
>
|
||
<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 class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
|
||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
|
||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||
</div>
|
||
|
||
<!-- Title with horizontal ruler -->
|
||
<div class="pl-28 pr-6 w-full relative overflow-visible z-30">
|
||
<div
|
||
class="flex items-center gap-6 opacity-0 animate-fade-in-up"
|
||
style="animation-delay: 1600ms; animation-fill-mode: forwards;"
|
||
>
|
||
<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>
|
||
|
||
<!-- Right image panel -->
|
||
<div class="relative overflow-hidden pt-32 z-10">
|
||
<!-- Current image -->
|
||
<img
|
||
id="servicesCurrentImg"
|
||
src="assets/images/room.png"
|
||
alt="KH3 Services"
|
||
class="w-full h-full object-cover opacity-0 absolute inset-0"
|
||
style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
|
||
/>
|
||
<!-- Next image (for transitions) -->
|
||
<img
|
||
id="servicesNextImg"
|
||
src="assets/images/chair.png"
|
||
alt="KH3 Services"
|
||
class="w-full h-full object-cover opacity-0 absolute inset-0"
|
||
/>
|
||
<!-- Down arrow prompt -->
|
||
<button
|
||
id="servicesScrollArrow"
|
||
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0 animate-fade-in-up"
|
||
style="animation-delay: 1900ms; animation-fill-mode: forwards;"
|
||
>
|
||
<span class="text-xs tracking-widest mb-2">SCROLL</span>
|
||
<svg
|
||
class="w-5 h-5 animate-arrowPulse"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M19 9l-7 7-7-7"
|
||
/>
|
||
</svg>
|
||
<div class="w-px h-8 bg-white/70"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 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" id="serviceDetails">
|
||
<!-- 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
|
||
const menuToggle = document.getElementById("menuToggle");
|
||
const navMenu = document.getElementById("navMenu");
|
||
const menuGrid = document.getElementById("menuGrid");
|
||
|
||
if (menuToggle && navMenu && menuGrid) {
|
||
let isMenuOpen = false;
|
||
let closeBtnEl = null;
|
||
|
||
menuToggle.addEventListener("click", () => {
|
||
if (isMenuOpen) {
|
||
// Close menu
|
||
navMenu.classList.add("hidden");
|
||
if (closeBtnEl) {
|
||
closeBtnEl.remove();
|
||
closeBtnEl = null;
|
||
}
|
||
isMenuOpen = false;
|
||
} else {
|
||
// Open menu
|
||
navMenu.classList.remove("hidden");
|
||
// Keep the grid icon as is, don't transform to X
|
||
menuGrid.innerHTML = `
|
||
<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>
|
||
`;
|
||
|
||
// Place red X close button at the bottom of the menu panel
|
||
closeBtnEl = document.createElement("button");
|
||
closeBtnEl.setAttribute("aria-label", "Close navigation");
|
||
closeBtnEl.className =
|
||
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
|
||
closeBtnEl.innerHTML = `
|
||
<svg class="w-6 h-6" 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>
|
||
`;
|
||
navMenu.appendChild(closeBtnEl);
|
||
closeBtnEl.addEventListener("click", () => {
|
||
navMenu.classList.add("hidden");
|
||
if (closeBtnEl) {
|
||
closeBtnEl.remove();
|
||
closeBtnEl = null;
|
||
}
|
||
isMenuOpen = false;
|
||
});
|
||
isMenuOpen = true;
|
||
}
|
||
});
|
||
|
||
// Close menu when clicking outside
|
||
document.addEventListener("click", (e) => {
|
||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||
navMenu.classList.add("hidden");
|
||
if (closeBtnEl) {
|
||
closeBtnEl.remove();
|
||
closeBtnEl = null;
|
||
}
|
||
isMenuOpen = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Page transition functionality
|
||
function handlePageTransition(e) {
|
||
e.preventDefault();
|
||
const targetUrl = e.currentTarget.href;
|
||
const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
|
||
|
||
// Get all elements to animate out
|
||
const elementsToAnimate = [
|
||
document.querySelector('.hero-section'),
|
||
document.querySelector('main')
|
||
].filter(el => el);
|
||
|
||
// Animate elements out in order
|
||
elementsToAnimate.forEach((element, index) => {
|
||
setTimeout(() => {
|
||
if (element) {
|
||
element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
|
||
}
|
||
}, index * 100);
|
||
});
|
||
|
||
// Navigate after animations complete
|
||
setTimeout(() => {
|
||
window.location.href = targetUrl;
|
||
}, elementsToAnimate.length * 100 + 600);
|
||
}
|
||
|
||
// Add event listeners for page transitions
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const transitionLinks = document.querySelectorAll('[data-trans]');
|
||
transitionLinks.forEach(link => {
|
||
link.addEventListener('click', handlePageTransition);
|
||
});
|
||
});
|
||
|
||
// Handle back/forward navigation
|
||
window.addEventListener('pageshow', function(event) {
|
||
if (event.persisted) {
|
||
// Page was loaded from cache (back/forward)
|
||
window.location.reload();
|
||
}
|
||
});
|
||
|
||
// Auto-scroll to content after 3 seconds
|
||
setTimeout(() => {
|
||
// Scroll just slightly to hint at content below (1.1 viewport heights)
|
||
const targetScroll = window.innerHeight * 1.1;
|
||
|
||
// Create a smooth, gradual scroll animation
|
||
const startScroll = window.pageYOffset;
|
||
const distance = targetScroll - startScroll;
|
||
const duration = 4000; // 4 seconds for slower, smoother animation
|
||
let start = null;
|
||
|
||
function animateScroll(currentTime) {
|
||
if (start === null) start = currentTime;
|
||
const timeElapsed = currentTime - start;
|
||
const progress = Math.min(timeElapsed / duration, 1);
|
||
|
||
// Easing function for smooth deceleration
|
||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||
|
||
window.scrollTo(0, startScroll + distance * easeOutQuart);
|
||
|
||
if (progress < 1) {
|
||
requestAnimationFrame(animateScroll);
|
||
}
|
||
}
|
||
|
||
requestAnimationFrame(animateScroll);
|
||
}, 3000);
|
||
</script>
|
||
<script src="js/main.js"></script>
|
||
<script>
|
||
// Services page image carousel
|
||
const servicesImgs = [
|
||
"assets/images/room.png",
|
||
"assets/images/chair.png",
|
||
"assets/images/google.png"
|
||
];
|
||
|
||
const servicesCurrentImg = document.getElementById("servicesCurrentImg");
|
||
const servicesNextImg = document.getElementById("servicesNextImg");
|
||
|
||
if (servicesCurrentImg && servicesNextImg) {
|
||
let currentIndex = 0;
|
||
let isTransitioning = false;
|
||
|
||
// Alternate slide directions for dynamic effect
|
||
const slideDirections = ["left", "right"];
|
||
let slideIndex = 0;
|
||
|
||
function performServicesSlideZoomTransition() {
|
||
if (isTransitioning) return;
|
||
isTransitioning = true;
|
||
|
||
// Get next image index
|
||
const nextIndex = (currentIndex + 1) % servicesImgs.length;
|
||
const slideDirection = slideDirections[slideIndex % slideDirections.length];
|
||
slideIndex++;
|
||
|
||
// Set up next image
|
||
servicesNextImg.src = servicesImgs[nextIndex];
|
||
servicesNextImg.style.opacity = "1";
|
||
|
||
// Apply animations based on slide direction
|
||
if (slideDirection === "left") {
|
||
// Current slides out left, next zooms in from right
|
||
servicesCurrentImg.style.animation = "slideOutLeft 1s ease-in-out forwards";
|
||
servicesNextImg.style.animation = "zoomInFromRight 1s ease-in-out forwards";
|
||
} else {
|
||
// Current slides out right, next zooms in from left
|
||
servicesCurrentImg.style.animation = "slideOutRight 1s ease-in-out forwards";
|
||
servicesNextImg.style.animation = "zoomInFromLeft 1s ease-in-out forwards";
|
||
}
|
||
|
||
// After animation completes, swap the images
|
||
setTimeout(() => {
|
||
// Swap the images
|
||
servicesCurrentImg.src = servicesImgs[nextIndex];
|
||
servicesCurrentImg.style.animation = "";
|
||
servicesCurrentImg.style.transform = "";
|
||
servicesCurrentImg.style.opacity = "1";
|
||
|
||
// Reset next image
|
||
servicesNextImg.style.animation = "";
|
||
servicesNextImg.style.transform = "";
|
||
servicesNextImg.style.opacity = "0";
|
||
|
||
currentIndex = nextIndex;
|
||
isTransitioning = false;
|
||
}, 1000); // Match animation duration
|
||
}
|
||
|
||
// Start the transition cycle after initial diagonal reveal
|
||
setTimeout(() => {
|
||
setInterval(performServicesSlideZoomTransition, 10000); // Every 10 seconds
|
||
}, 2000); // Wait for initial diagonal reveal to complete
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|