fix: matches our services hero with about us hero
This commit is contained in:
parent
f52b5e4614
commit
2595c7571e
5 changed files with 288 additions and 394 deletions
282
services.html
282
services.html
|
|
@ -64,6 +64,91 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-kh3-black text-white font-montserrat">
|
||||
|
|
@ -151,63 +236,88 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-screen relative flex">
|
||||
<!-- Left Panel - Dark Background -->
|
||||
<div
|
||||
class="w-1/3 bg-kh3-black relative z-20 flex flex-col justify-center pl-16 pt-8 md:pt-12"
|
||||
>
|
||||
<!-- Vertical Line with Diamonds -->
|
||||
<div
|
||||
class="absolute left-8 top-1/2 transform -translate-y-1/2 flex flex-col items-center"
|
||||
>
|
||||
<div class="w-2.5 h-2.5 bg-white transform rotate-45 mb-8"></div>
|
||||
<div class="w-px h-32 bg-neutral-800 mb-8"></div>
|
||||
<div class="w-2.5 h-2.5 bg-white transform rotate-45 mb-8"></div>
|
||||
<div class="w-px h-32 bg-neutral-800 mb-8"></div>
|
||||
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<main class="pt-20">
|
||||
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
|
||||
<section class="relative bg-kh3-black">
|
||||
<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="mb-8 relative">
|
||||
<h1 class="text-4xl md:text-6xl tracking-[0.2em] font-bold text-white whitespace-nowrap ml-8 md:ml-12">
|
||||
OUR SERVICES
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Subtle underline -->
|
||||
<div
|
||||
class="w-24 h-px bg-kh3-grey mt-8 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 1.2s forwards"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel - Image Background -->
|
||||
<div class="w-2/3 relative z-10 h-full min-h-[90vh]">
|
||||
<div
|
||||
class="absolute left-0 right-0 top-20 md:top-28 bottom-0 bg-cover bg-center"
|
||||
style="background-image: url('assets/images/room.png')"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/60"></div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll Prompt -->
|
||||
<div
|
||||
class="absolute bottom-10 left-4 flex flex-col items-center text-white/60"
|
||||
>
|
||||
<span class="text-sm mb-2">Scroll</span>
|
||||
<div class="animate-pulse">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<!-- 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 SERVICES
|
||||
</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">
|
||||
|
|
@ -732,5 +842,73 @@
|
|||
if (menuGrid) menuGrid.style.transform = "none";
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue