mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
fix: matches our services hero with about us hero
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
f52b5e4614
commit
2595c7571e
5 changed files with 288 additions and 394 deletions
12
about.html
12
about.html
|
|
@ -599,8 +599,8 @@
|
|||
We treat all stake holders with politeness, dignity and civility
|
||||
that equals the outward beauty of our environment and the
|
||||
environments we create.
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty middle column for H layout -->
|
||||
<div class="hidden md:block"></div>
|
||||
|
|
@ -624,8 +624,8 @@
|
|||
deliver on our promises. If forfeiting on our word is beyond our
|
||||
human control; we will communicate this transparently and in
|
||||
good time.
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: All three columns -->
|
||||
|
|
@ -647,8 +647,8 @@
|
|||
>
|
||||
We our faithful to our mission and vision and that of our
|
||||
stakeholders and the organizations they represent.
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
|
||||
|
|
|
|||
32
index.html
32
index.html
|
|
@ -26,7 +26,7 @@
|
|||
<div class="p-8 flex flex-col h-full">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-3 mb-12">
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -37,8 +37,8 @@
|
|||
<!-- Navigation items in inverted C shape -->
|
||||
<div class="space-y-6">
|
||||
<!-- HOME - Top -->
|
||||
<a
|
||||
href="index.html"
|
||||
<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"
|
||||
>
|
||||
<span class="md:hidden">HOME</span>
|
||||
|
|
@ -85,8 +85,8 @@
|
|||
</a>
|
||||
|
||||
<!-- ABOUT US - Slightly right -->
|
||||
<a
|
||||
href="about.html"
|
||||
<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"
|
||||
>
|
||||
<span class="md:hidden">ABOUT US</span>
|
||||
|
|
@ -173,8 +173,8 @@
|
|||
</a>
|
||||
|
||||
<!-- SERVICES - More right -->
|
||||
<a
|
||||
href="services.html"
|
||||
<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"
|
||||
>
|
||||
<span class="md:hidden">SERVICES</span>
|
||||
|
|
@ -349,8 +349,8 @@
|
|||
</a>
|
||||
|
||||
<!-- CONTACTS - More right -->
|
||||
<a
|
||||
href="contact.html"
|
||||
<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"
|
||||
>
|
||||
<span class="md:hidden">CONTACTS</span>
|
||||
|
|
@ -539,7 +539,7 @@
|
|||
>DESIGN</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DELIVER -->
|
||||
<div class="flex items-center gap-6">
|
||||
|
|
@ -613,7 +613,7 @@
|
|||
CONTACTS
|
||||
</a>
|
||||
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile CTA bar: About & Contacts (centered) -->
|
||||
<div
|
||||
|
|
@ -621,14 +621,14 @@
|
|||
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<a
|
||||
href="about.html"
|
||||
<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"
|
||||
>About us</a
|
||||
>
|
||||
<a
|
||||
href="contact.html"
|
||||
<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
|
||||
|
|
@ -636,7 +636,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Cursor -->
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,320 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Accra Corporate Tower - KH3 | Building Inspiring Spaces</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A state-of-the-art corporate headquarters featuring modern workspace design, sustainable materials, and cutting-edge technology integration."
|
||||
/>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="css/animations.css" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body class="dark-gothic-mode">
|
||||
<!-- Navigation Menu Overlay -->
|
||||
<nav class="nav-overlay" id="navOverlay">
|
||||
<div class="nav-content">
|
||||
<div class="nav-header">
|
||||
<div class="logo">
|
||||
<img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
|
||||
<span class="logo-text">KH3</span>
|
||||
</div>
|
||||
<button class="nav-close" id="navClose">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="projects.html">Projects</a>
|
||||
<a href="services.html">Services</a>
|
||||
<a href="approach.html">Approach</a>
|
||||
<a href="careers.html">Careers</a>
|
||||
<a href="news.html">News</a>
|
||||
<a href="brands.html">Brands</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
<div class="nav-footer">
|
||||
<div class="contact-info">
|
||||
<p>Accra, Ghana</p>
|
||||
<p>+233 20 123 4567</p>
|
||||
<p>info@kh3.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<div class="header-content">
|
||||
<div class="logo">
|
||||
<img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
|
||||
<span class="logo-text">KH3</span>
|
||||
</div>
|
||||
<div class="menu-toggle" id="menuToggle">
|
||||
<div class="grid-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="project-detail-main">
|
||||
<!-- Project Hero -->
|
||||
<section class="project-hero">
|
||||
<div class="container">
|
||||
<div class="project-hero-content">
|
||||
<div class="project-hero-text">
|
||||
<div class="project-category">Corporate</div>
|
||||
<h1 class="project-title">Accra Corporate Tower</h1>
|
||||
<p class="project-location">Accra, Ghana</p>
|
||||
</div>
|
||||
<div class="project-hero-image">
|
||||
<img
|
||||
src="images/projects/accra-corporate-tower-cover.jpg"
|
||||
alt="Accra Corporate Tower"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Project Content -->
|
||||
<section class="project-content">
|
||||
<div class="container">
|
||||
<div class="project-layout">
|
||||
<!-- Project Meta Panel -->
|
||||
<aside class="project-meta-panel">
|
||||
<div class="meta-panel-content">
|
||||
<h3>Project Details</h3>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Type</span>
|
||||
<span class="meta-value">Corporate</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Client</span>
|
||||
<span class="meta-value"
|
||||
>Ghana Investment Promotion Centre</span
|
||||
>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Project Location</span>
|
||||
<span class="meta-value">Accra, Ghana</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Type of Work</span>
|
||||
<span class="meta-value">Turnkey Design & Fit-out</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Size</span>
|
||||
<span class="meta-value">2,500 sq m</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Year</span>
|
||||
<span class="meta-value">2023</span>
|
||||
</div>
|
||||
<div class="meta-cta">
|
||||
<a href="contact.html" class="btn-primary"
|
||||
>Start a Similar Project</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Project Body -->
|
||||
<div class="project-body">
|
||||
<div class="project-summary">
|
||||
<h2>Project Overview</h2>
|
||||
<p>
|
||||
A state-of-the-art corporate headquarters featuring modern
|
||||
workspace design, sustainable materials, and cutting-edge
|
||||
technology integration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="project-story">
|
||||
<div class="story-section">
|
||||
<h3>The Challenge</h3>
|
||||
<p>
|
||||
Create a prestigious corporate environment that reflects
|
||||
Ghana's economic growth while incorporating sustainable
|
||||
design principles.
|
||||
</p>
|
||||
</div>
|
||||
<div class="story-section">
|
||||
<h3>Our Approach</h3>
|
||||
<p>
|
||||
Implemented modular workspace design with natural lighting,
|
||||
local materials, and flexible meeting spaces.
|
||||
</p>
|
||||
</div>
|
||||
<div class="story-section">
|
||||
<h3>The Outcome</h3>
|
||||
<p>
|
||||
Delivered a 2,500 sqm premium office space that increased
|
||||
employee productivity by 40% and achieved LEED
|
||||
certification.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Gallery -->
|
||||
<div class="project-gallery">
|
||||
<h3>Project Gallery</h3>
|
||||
<div class="gallery-grid">
|
||||
<div class="gallery-item">
|
||||
<img
|
||||
src="images/projects/accra-corporate-tower-1.jpg"
|
||||
alt="Corporate Tower Interior"
|
||||
/>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<img
|
||||
src="images/projects/accra-corporate-tower-2.jpg"
|
||||
alt="Modern Workspace"
|
||||
/>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<img
|
||||
src="images/projects/accra-corporate-tower-3.jpg"
|
||||
alt="Meeting Rooms"
|
||||
/>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<img
|
||||
src="images/projects/accra-corporate-tower-4.jpg"
|
||||
alt="Reception Area"
|
||||
/>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<img
|
||||
src="images/projects/accra-corporate-tower-5.jpg"
|
||||
alt="Collaborative Spaces"
|
||||
/>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<img
|
||||
src="images/projects/accra-corporate-tower-6.jpg"
|
||||
alt="Building Exterior"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Related Projects -->
|
||||
<section class="related-projects">
|
||||
<div class="container">
|
||||
<h2>Related Projects</h2>
|
||||
<div class="related-projects-grid">
|
||||
<div class="project-card">
|
||||
<div
|
||||
class="project-card-image"
|
||||
style="
|
||||
background-image: url('images/projects/takoradi-office-cover.jpg');
|
||||
"
|
||||
>
|
||||
<div class="project-card-overlay"></div>
|
||||
</div>
|
||||
<div class="project-card-content">
|
||||
<div class="project-card-category">Corporate</div>
|
||||
<h3 class="project-card-title">Takoradi Office Complex</h3>
|
||||
<p class="project-card-location">Takoradi, Ghana</p>
|
||||
<a
|
||||
href="project-takoradi-office-complex.html"
|
||||
class="project-card-link"
|
||||
>View Project</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<div
|
||||
class="project-card-image"
|
||||
style="
|
||||
background-image: url('images/projects/kumasi-library-cover.jpg');
|
||||
"
|
||||
>
|
||||
<div class="project-card-overlay"></div>
|
||||
</div>
|
||||
<div class="project-card-content">
|
||||
<div class="project-card-category">Education</div>
|
||||
<h3 class="project-card-title">Kumasi University Library</h3>
|
||||
<p class="project-card-location">Kumasi, Ghana</p>
|
||||
<a
|
||||
href="project-kumasi-university-library.html"
|
||||
class="project-card-link"
|
||||
>View Project</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<div
|
||||
class="project-card-image"
|
||||
style="
|
||||
background-image: url('images/projects/tema-hotel-cover.jpg');
|
||||
"
|
||||
>
|
||||
<div class="project-card-overlay"></div>
|
||||
</div>
|
||||
<div class="project-card-content">
|
||||
<div class="project-card-category">Hospitality</div>
|
||||
<h3 class="project-card-title">Tema Harbor Hotel</h3>
|
||||
<p class="project-card-location">Tema, Ghana</p>
|
||||
<a
|
||||
href="project-tema-harbor-hotel.html"
|
||||
class="project-card-link"
|
||||
>View Project</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo">
|
||||
<img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
|
||||
<span class="logo-text">KH3</span>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="projects.html">Projects</a>
|
||||
<a href="services.html">Services</a>
|
||||
<a href="careers.html">Careers</a>
|
||||
<a href="privacy.html">Privacy Policy</a>
|
||||
<a href="terms.html">Terms of Service</a>
|
||||
</div>
|
||||
<div class="footer-copyright">© 2024 KH3. All rights reserved.</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -592,6 +592,10 @@ video {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
|
|
@ -725,6 +729,10 @@ video {
|
|||
top: 2rem;
|
||||
}
|
||||
|
||||
.top-28 {
|
||||
top: 7rem;
|
||||
}
|
||||
|
||||
.-z-10 {
|
||||
z-index: -10;
|
||||
}
|
||||
|
|
@ -745,6 +753,10 @@ video {
|
|||
z-index: 50;
|
||||
}
|
||||
|
||||
.z-30 {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
|
|
@ -1203,6 +1215,22 @@ video {
|
|||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1333,6 +1361,10 @@ video {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-visible {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -1696,6 +1728,10 @@ video {
|
|||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pt-32 {
|
||||
padding-top: 8rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue