mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
George Birikorang
a8209c7fb2
All checks were successful
continuous-integration/drone/push Build is passing
1110 lines
39 KiB
HTML
1110 lines
39 KiB
HTML
<!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>
|
|
<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 -->
|
|
<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 border-b border-white pb-1 ml-0 font-montserrat opacity-0 animate-fade-in-left"
|
|
style="
|
|
animation-delay: 0.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
>
|
|
<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 hover:text-kh3-red transition-colors 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;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<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>
|
|
|
|
<!-- 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 animate-fade-in-left"
|
|
style="animation-delay: 0.2s; animation-fill-mode: forwards"
|
|
>
|
|
<a
|
|
href="index.html"
|
|
class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
|
|
>
|
|
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
|
|
<span class="text-white text-2xl font-bold tracking-wider"
|
|
>KH3</span
|
|
>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Menu Grid -->
|
|
<div
|
|
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50 opacity-0 animate-fade-in-left"
|
|
style="animation-delay: 0.4s; animation-fill-mode: forwards"
|
|
>
|
|
<div class="cursor-pointer" id="menuToggle">
|
|
<div
|
|
class="grid grid-cols-3 gap-1 w-6 h-6"
|
|
id="menuGrid"
|
|
style="
|
|
outline: 1px solid rgba(255, 255, 255, 0.6);
|
|
outline-offset: 6px;
|
|
"
|
|
>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Text - Center -->
|
|
<div
|
|
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 opacity-0"
|
|
style="animation: fadeInScale 1s ease-out 0.6s forwards"
|
|
>
|
|
<div class="text-center">
|
|
<h1
|
|
class="text-4xl md:text-6xl font-semibold text-white animate-logo-float"
|
|
>
|
|
KH3 Group Limited
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LEFT COLUMN -->
|
|
<div
|
|
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-4 pt-8 md:p-8 md:pt-8 h-[20vh] md:h-auto shrink-0 opacity-0 animate-fade-in-left dream-design-deliver"
|
|
style="animation-delay: 0.8s; animation-fill-mode: forwards"
|
|
>
|
|
<div class="max-w-xl space-y-2 hidden md:block">
|
|
<div class="flex flex-col space-y-8">
|
|
<!-- DREAM -->
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
<div
|
|
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
|
|
></div>
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
</div>
|
|
<div class="flex items-center h-16">
|
|
<span
|
|
class="text-xs md:text-sm tracking-widest text-neutral-400"
|
|
>DREAM</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DESIGN -->
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
<div
|
|
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
|
|
></div>
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
</div>
|
|
<div class="flex items-center h-16">
|
|
<span
|
|
class="text-xs md:text-sm tracking-widest text-neutral-400"
|
|
>DESIGN</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DELIVER -->
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
<div
|
|
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
|
|
></div>
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
</div>
|
|
<div class="flex items-center h-16">
|
|
<span
|
|
class="text-xs md:text-sm tracking-widest text-neutral-400"
|
|
>DELIVER</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT COLUMN -->
|
|
<div
|
|
class="w-full md:w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden flex-1 min-h-0 md:flex-none"
|
|
style="animation-delay: 0.3s; animation-fill-mode: forwards"
|
|
>
|
|
<div class="relative h-full md:h-full">
|
|
<!-- Current Image -->
|
|
<img
|
|
id="currentImg"
|
|
src="assets/images/room.png"
|
|
alt="Sample interior fit-out by KH3"
|
|
class="absolute inset-0 w-full h-full object-cover"
|
|
/>
|
|
<!-- Next Image (hidden initially) -->
|
|
<img
|
|
id="nextImg"
|
|
src="assets/images/chair.png"
|
|
alt="Sample interior fit-out by KH3"
|
|
class="absolute inset-0 w-full h-full object-cover opacity-0"
|
|
/>
|
|
<div class="absolute inset-0 bg-black bg-opacity-20 z-10"></div>
|
|
|
|
<!-- Mobile CTA bar on image -->
|
|
<div
|
|
class="absolute left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0"
|
|
style="
|
|
animation: fadeInUp 0.8s ease-out 1.2s forwards;
|
|
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>
|
|
|
|
<!-- Why Button - Bottom Center -->
|
|
<div
|
|
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0 hidden md:block"
|
|
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
|
|
>
|
|
<a
|
|
class="inline-block uppercase tracking-wider px-5 py-2 md:px-6 md:py-3 text-sm md:text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
|
|
href="about.html"
|
|
data-trans
|
|
>
|
|
Why
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Contact Link - Bottom Right -->
|
|
<div
|
|
class="absolute bottom-8 right-8 hidden md:flex items-center space-x-3 md:space-x-4 z-20 opacity-0 animate-fade-in-right"
|
|
style="animation-delay: 1.4s; animation-fill-mode: forwards"
|
|
>
|
|
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
|
<a
|
|
href="who.html"
|
|
data-trans
|
|
class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider text-sm md:text-base"
|
|
>
|
|
WHO
|
|
</a>
|
|
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
|
</div>
|
|
</section>
|
|
</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.png" alt="KH3" class="w-16 h-16" />
|
|
<span class="text-4xl font-bold tracking-wider">KH3</span>
|
|
</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>
|
|
|
|
<style>
|
|
@keyframes fadeInScale {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-50%, 20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes pageEnter {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pageExit {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
@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.3);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInFromRight {
|
|
0% {
|
|
transform: translateX(100%) scale(1.3);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
// Top/Bottom curtain transition system
|
|
const curtainTop =
|
|
document.getElementById("pageCurtainTop") ||
|
|
(() => {
|
|
const div = document.createElement("div");
|
|
div.id = "pageCurtainTop";
|
|
div.className =
|
|
"fixed inset-x-0 top-0 h-1/2 z-50 transform -translate-y-full transition-transform duration-600 ease-in-out";
|
|
div.style.background = "linear-gradient(0deg, #b03037, #8a252a)";
|
|
document.body.appendChild(div);
|
|
return div;
|
|
})();
|
|
|
|
const curtainBottom =
|
|
document.getElementById("pageCurtainBottom") ||
|
|
(() => {
|
|
const div = document.createElement("div");
|
|
div.id = "pageCurtainBottom";
|
|
div.className =
|
|
"fixed inset-x-0 bottom-0 h-1/2 z-50 transform translate-y-full transition-transform duration-600 ease-in-out";
|
|
div.style.background = "linear-gradient(180deg, #b03037, #8a252a)";
|
|
document.body.appendChild(div);
|
|
return div;
|
|
})();
|
|
|
|
// Add entrance animation class
|
|
document.body.style.animation = "pageEnter 0.6s ease-out";
|
|
|
|
document.querySelectorAll("a[data-trans]").forEach((a) => {
|
|
a.addEventListener("click", (e) => {
|
|
const href = a.getAttribute("href");
|
|
if (!href || href.startsWith("#")) return;
|
|
e.preventDefault();
|
|
|
|
// Collect elements that had delayed entrance and fade them out in reverse order
|
|
const animatedEls = Array.from(
|
|
document.querySelectorAll('[style*="animation-delay"]')
|
|
).map((el) => {
|
|
const m = (el.getAttribute("style") || "").match(
|
|
/animation-delay:\s*([0-9.]+)s/
|
|
);
|
|
const delay = m ? parseFloat(m[1]) : 0;
|
|
return { el, delay };
|
|
});
|
|
|
|
const sorted = animatedEls
|
|
.sort((a, b) => b.delay - a.delay)
|
|
.map((item, idx) => ({ ...item, order: idx }));
|
|
|
|
sorted.forEach((item) => {
|
|
setTimeout(() => {
|
|
item.el.style.animation =
|
|
"staggerFadeOut 260ms ease-out forwards";
|
|
}, item.order * 50);
|
|
});
|
|
|
|
const totalStaggerTime = (sorted.length - 1) * 50 + 260 + 130;
|
|
|
|
setTimeout(() => {
|
|
// Crossfade + tiny zoom of the whole page (longer)
|
|
document.body.style.animation = "pageExit 900ms ease forwards";
|
|
setTimeout(() => {
|
|
location.href = href;
|
|
}, 920);
|
|
}, totalStaggerTime);
|
|
});
|
|
});
|
|
|
|
// Hide curtains and close nav just before page is cached (prevents blank back step)
|
|
window.addEventListener("pagehide", () => {
|
|
if (curtainTop) curtainTop.style.transform = "translateY(-100%)";
|
|
if (curtainBottom) curtainBottom.style.transform = "translateY(100%)";
|
|
const navEl = document.getElementById("navMenu");
|
|
const gridEl = document.getElementById("menuGrid");
|
|
if (navEl) navEl.classList.add("hidden");
|
|
if (gridEl) {
|
|
gridEl.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>`;
|
|
}
|
|
});
|
|
|
|
// Enhanced slide + zoom hero image transitions
|
|
const imgs = [
|
|
"assets/images/room.png",
|
|
"assets/images/chair.png",
|
|
"assets/images/google.png",
|
|
];
|
|
|
|
const currentImg = document.getElementById("currentImg");
|
|
const nextImg = document.getElementById("nextImg");
|
|
|
|
if (currentImg && nextImg) {
|
|
let currentIndex = 0;
|
|
let isTransitioning = false;
|
|
|
|
// Alternate slide directions for dynamic effect
|
|
const slideDirections = ["left", "right"];
|
|
let slideIndex = 0;
|
|
|
|
function performSlideZoomTransition() {
|
|
if (isTransitioning) return;
|
|
isTransitioning = true;
|
|
|
|
// Get next image index
|
|
const nextIndex = (currentIndex + 1) % imgs.length;
|
|
const slideDirection =
|
|
slideDirections[slideIndex % slideDirections.length];
|
|
slideIndex++;
|
|
|
|
// Set up next image
|
|
nextImg.src = imgs[nextIndex];
|
|
nextImg.style.opacity = "1";
|
|
|
|
// Apply animations based on slide direction
|
|
if (slideDirection === "left") {
|
|
// Current slides out left, next zooms in from right
|
|
currentImg.style.animation = "slideOutLeft 1s ease-in-out forwards";
|
|
nextImg.style.animation = "zoomInFromRight 1s ease-in-out forwards";
|
|
} else {
|
|
// Current slides out right, next zooms in from left
|
|
currentImg.style.animation =
|
|
"slideOutRight 1s ease-in-out forwards";
|
|
nextImg.style.animation = "zoomInFromLeft 1s ease-in-out forwards";
|
|
}
|
|
|
|
// After animation completes, swap the images
|
|
setTimeout(() => {
|
|
// Swap the images
|
|
currentImg.src = imgs[nextIndex];
|
|
currentImg.style.animation = "";
|
|
currentImg.style.transform = "";
|
|
currentImg.style.opacity = "1";
|
|
|
|
// Reset next image
|
|
nextImg.style.animation = "";
|
|
nextImg.style.transform = "";
|
|
nextImg.style.opacity = "0";
|
|
|
|
currentIndex = nextIndex;
|
|
isTransitioning = false;
|
|
}, 1000); // Match animation duration
|
|
}
|
|
|
|
// Start the transition cycle
|
|
setInterval(performSlideZoomTransition, 10000); // Every 10 seconds for better viewing
|
|
}
|
|
|
|
// Menu toggle functionality
|
|
const menuToggle = document.getElementById("menuToggle");
|
|
const navMenu = document.getElementById("navMenu");
|
|
const menuGrid = document.getElementById("menuGrid");
|
|
|
|
if (menuToggle && navMenu && menuGrid) {
|
|
let isMenuOpen = false;
|
|
|
|
menuToggle.addEventListener("click", () => {
|
|
if (isMenuOpen) {
|
|
// Close menu
|
|
navMenu.classList.add("hidden");
|
|
menuGrid.innerHTML = `
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
<span class="w-1 h-1 bg-white"></span>
|
|
`;
|
|
isMenuOpen = false;
|
|
} else {
|
|
// Open menu (keep button static)
|
|
navMenu.classList.remove("hidden");
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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(".dream-design-deliver"),
|
|
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();
|
|
}
|
|
});
|
|
|
|
// Loading screen with improved timing
|
|
window.addEventListener("load", () => {
|
|
const loadingScreen = document.getElementById("loadingScreen");
|
|
if (loadingScreen) {
|
|
// Show loading screen briefly, then fade out just before animations start
|
|
setTimeout(() => {
|
|
loadingScreen.style.transition = "opacity 0.3s ease-out";
|
|
loadingScreen.style.opacity = "0";
|
|
setTimeout(() => {
|
|
loadingScreen.style.display = "none";
|
|
}, 300);
|
|
}, 400); // Reduced from 1000ms to 400ms to sync with animations
|
|
}
|
|
});
|
|
|
|
// Ensure back/forward navigation (bfcache) shows a clean page
|
|
window.addEventListener("pageshow", () => {
|
|
const loadingScreen = document.getElementById("loadingScreen");
|
|
if (loadingScreen) {
|
|
loadingScreen.style.display = "none";
|
|
loadingScreen.style.opacity = "0";
|
|
}
|
|
const ct = document.getElementById("pageCurtainTop");
|
|
const cb = document.getElementById("pageCurtainBottom");
|
|
if (ct) ct.style.transform = "translateY(-100%)";
|
|
if (cb) cb.style.transform = "translateY(100%)";
|
|
|
|
// Close nav if it was left open and reset grid icon
|
|
const navMenuEl = document.getElementById("navMenu");
|
|
const menuGridEl = document.getElementById("menuGrid");
|
|
if (navMenuEl) navMenuEl.classList.add("hidden");
|
|
if (menuGridEl) {
|
|
menuGridEl.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>`;
|
|
}
|
|
});
|
|
|
|
// Menu grid animation sequence
|
|
function startMenuGridAnimation() {
|
|
const menuGrid = document.getElementById("menuGrid");
|
|
if (!menuGrid) return;
|
|
|
|
// Remove CSS animation to prevent conflicts
|
|
menuGrid.style.animation = "none";
|
|
|
|
let phase = 0;
|
|
let isEnlarged = false;
|
|
let isSpinning = true;
|
|
let isResting = false;
|
|
|
|
const animationInterval = setInterval(() => {
|
|
phase += 0.02;
|
|
|
|
if (isSpinning) {
|
|
// Spinning animation
|
|
const rotation = phase * 360;
|
|
const floatY = Math.sin(phase * 2) * 6;
|
|
const rippleScale = 1 + Math.sin(phase * 3) * 0.08;
|
|
const sizeScale = isEnlarged ? 1.5 : 1;
|
|
|
|
menuGrid.style.transform = `rotate(${rotation}deg) scale(${
|
|
rippleScale * sizeScale
|
|
}) translateY(${floatY}px)`;
|
|
|
|
// Handle color changes
|
|
const spans = menuGrid.querySelectorAll("span");
|
|
spans.forEach((span) => {
|
|
span.style.backgroundColor = isEnlarged ? "#B03037" : "#ffffff";
|
|
});
|
|
} else if (isResting) {
|
|
// Resting animation - just floating with upward ripple effect
|
|
const floatY = Math.sin(phase * 1.5) * 8;
|
|
const rippleScale = 1 + Math.sin(phase * 2) * 0.1;
|
|
|
|
menuGrid.style.transform = `scale(${rippleScale}) translateY(${floatY}px)`;
|
|
|
|
// Keep white color during rest
|
|
const spans = menuGrid.querySelectorAll("span");
|
|
spans.forEach((span) => {
|
|
span.style.backgroundColor = "#ffffff";
|
|
});
|
|
}
|
|
}, 50);
|
|
|
|
function startCycle() {
|
|
// Step 1: Default spinning for 7 seconds
|
|
isSpinning = true;
|
|
isEnlarged = false;
|
|
isResting = false;
|
|
|
|
// Step 2: After 7 seconds, change to red and bigger, spin once
|
|
setTimeout(() => {
|
|
isEnlarged = true;
|
|
|
|
// After one spin (3 seconds), go to rest
|
|
setTimeout(() => {
|
|
isEnlarged = false;
|
|
isSpinning = false;
|
|
isResting = true;
|
|
|
|
// Step 3: Rest for 7 seconds (just floating)
|
|
setTimeout(() => {
|
|
// Step 4: Start spinning again (repeat cycle)
|
|
startCycle();
|
|
}, 7000);
|
|
}, 3000);
|
|
}, 7000);
|
|
}
|
|
|
|
// Start the cycle
|
|
startCycle();
|
|
}
|
|
|
|
// Menu button animations disabled on homepage per request
|
|
|
|
// Custom cursor functionality
|
|
const customCursor = document.getElementById("customCursor");
|
|
|
|
// Hide default cursor
|
|
document.body.style.cursor = "none";
|
|
|
|
// Follow mouse movement
|
|
document.addEventListener("mousemove", (e) => {
|
|
customCursor.style.left = e.clientX - 12 + "px";
|
|
customCursor.style.top = e.clientY - 12 + "px";
|
|
});
|
|
|
|
// Menu grid hover effects
|
|
if (menuGrid) {
|
|
menuGrid.addEventListener("mouseenter", () => {
|
|
customCursor.style.borderColor = "#B03037";
|
|
customCursor.style.transform = "scale(1.5)";
|
|
customCursor.style.animation = "spin 0.5s linear infinite";
|
|
});
|
|
|
|
menuGrid.addEventListener("mouseleave", () => {
|
|
customCursor.style.borderColor = "#B03037";
|
|
customCursor.style.transform = "scale(1)";
|
|
customCursor.style.animation = "none";
|
|
});
|
|
}
|
|
|
|
// Add spin animation for cursor
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
@keyframes spin {
|
|
from { transform: scale(1.5) rotate(0deg); }
|
|
to { transform: scale(1.5) rotate(360deg); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
</script>
|
|
</body>
|
|
</html>
|