mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-10-16 19:31:47 +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
|
We treat all stake holders with politeness, dignity and civility
|
||||||
that equals the outward beauty of our environment and the
|
that equals the outward beauty of our environment and the
|
||||||
environments we create.
|
environments we create.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Empty middle column for H layout -->
|
<!-- Empty middle column for H layout -->
|
||||||
<div class="hidden md:block"></div>
|
<div class="hidden md:block"></div>
|
||||||
|
|
@ -624,8 +624,8 @@
|
||||||
deliver on our promises. If forfeiting on our word is beyond our
|
deliver on our promises. If forfeiting on our word is beyond our
|
||||||
human control; we will communicate this transparently and in
|
human control; we will communicate this transparently and in
|
||||||
good time.
|
good time.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Row 2: All three columns -->
|
<!-- Row 2: All three columns -->
|
||||||
|
|
@ -647,8 +647,8 @@
|
||||||
>
|
>
|
||||||
We our faithful to our mission and vision and that of our
|
We our faithful to our mission and vision and that of our
|
||||||
stakeholders and the organizations they represent.
|
stakeholders and the organizations they represent.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
|
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">
|
<div class="p-8 flex flex-col h-full">
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<div class="flex items-center gap-3 mb-12">
|
<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>
|
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -37,8 +37,8 @@
|
||||||
<!-- Navigation items in inverted C shape -->
|
<!-- Navigation items in inverted C shape -->
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<!-- HOME - Top -->
|
<!-- HOME - Top -->
|
||||||
<a
|
<a
|
||||||
href="index.html"
|
href="index.html"
|
||||||
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
|
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>
|
<span class="md:hidden">HOME</span>
|
||||||
|
|
@ -85,8 +85,8 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- ABOUT US - Slightly right -->
|
<!-- ABOUT US - Slightly right -->
|
||||||
<a
|
<a
|
||||||
href="about.html"
|
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"
|
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>
|
<span class="md:hidden">ABOUT US</span>
|
||||||
|
|
@ -173,8 +173,8 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- SERVICES - More right -->
|
<!-- SERVICES - More right -->
|
||||||
<a
|
<a
|
||||||
href="services.html"
|
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"
|
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>
|
<span class="md:hidden">SERVICES</span>
|
||||||
|
|
@ -349,8 +349,8 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- CONTACTS - More right -->
|
<!-- CONTACTS - More right -->
|
||||||
<a
|
<a
|
||||||
href="contact.html"
|
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"
|
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>
|
<span class="md:hidden">CONTACTS</span>
|
||||||
|
|
@ -539,7 +539,7 @@
|
||||||
>DESIGN</span
|
>DESIGN</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- DELIVER -->
|
<!-- DELIVER -->
|
||||||
<div class="flex items-center gap-6">
|
<div class="flex items-center gap-6">
|
||||||
|
|
@ -613,7 +613,7 @@
|
||||||
CONTACTS
|
CONTACTS
|
||||||
</a>
|
</a>
|
||||||
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile CTA bar: About & Contacts (centered) -->
|
<!-- Mobile CTA bar: About & Contacts (centered) -->
|
||||||
<div
|
<div
|
||||||
|
|
@ -621,14 +621,14 @@
|
||||||
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
|
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
|
||||||
>
|
>
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<a
|
<a
|
||||||
href="about.html"
|
href="about.html"
|
||||||
data-trans
|
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"
|
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
|
>About us</a
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="contact.html"
|
href="contact.html"
|
||||||
data-trans
|
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"
|
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
|
>Contacts</a
|
||||||
|
|
@ -636,7 +636,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Custom Cursor -->
|
<!-- Custom Cursor -->
|
||||||
<div
|
<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-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 { transition: transform 200ms ease, color 200ms ease; }
|
||||||
.hover-row:hover { transform: translateX(6px); color: #ffffff; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-kh3-black text-white font-montserrat">
|
<body class="bg-kh3-black text-white font-montserrat">
|
||||||
|
|
@ -151,63 +236,88 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Hero Section -->
|
<!-- Main Content -->
|
||||||
<section class="min-h-screen relative flex">
|
<main class="pt-20">
|
||||||
<!-- Left Panel - Dark Background -->
|
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
|
||||||
<div
|
<section class="relative bg-kh3-black">
|
||||||
class="w-1/3 bg-kh3-black relative z-20 flex flex-col justify-center pl-16 pt-8 md:pt-12"
|
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
|
||||||
>
|
<!-- Left dark panel -->
|
||||||
<!-- Vertical Line with Diamonds -->
|
<div class="relative bg-kh3-black flex items-center justify-center">
|
||||||
<div
|
<!-- Vertical timeline with diamonds -->
|
||||||
class="absolute left-8 top-1/2 transform -translate-y-1/2 flex flex-col items-center"
|
<div
|
||||||
>
|
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
|
||||||
<div class="w-2.5 h-2.5 bg-white transform rotate-45 mb-8"></div>
|
style="animation-delay: 1200ms; animation-fill-mode: forwards;"
|
||||||
<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 flex-1 bg-neutral-800"></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 class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
|
<div class="w-px flex-1 bg-neutral-800"></div>
|
||||||
</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 -->
|
<!-- Title with horizontal ruler -->
|
||||||
<div class="mb-8 relative">
|
<div class="pl-28 pr-6 w-full relative overflow-visible z-30">
|
||||||
<h1 class="text-4xl md:text-6xl tracking-[0.2em] font-bold text-white whitespace-nowrap ml-8 md:ml-12">
|
<div
|
||||||
OUR SERVICES
|
class="flex items-center gap-6 opacity-0 animate-fade-in-up"
|
||||||
</h1>
|
style="animation-delay: 1600ms; animation-fill-mode: forwards;"
|
||||||
</div>
|
>
|
||||||
|
<div class="flex-1 h-px bg-white"></div>
|
||||||
<!-- Subtle underline -->
|
<h1
|
||||||
<div
|
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
|
||||||
class="w-24 h-px bg-kh3-grey mt-8 opacity-0"
|
>
|
||||||
style="animation: fadeInUp 1s ease-out 1.2s forwards"
|
OUR SERVICES
|
||||||
></div>
|
</h1>
|
||||||
</div>
|
<div class="flex-1 h-px bg-white"></div>
|
||||||
|
</div>
|
||||||
<!-- Right Panel - Image Background -->
|
</div>
|
||||||
<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>
|
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
<!-- KH3 Services Sections -->
|
<!-- KH3 Services Sections -->
|
||||||
<section class="py-32 bg-kh3-black text-white">
|
<section class="py-32 bg-kh3-black text-white">
|
||||||
|
|
@ -732,5 +842,73 @@
|
||||||
if (menuGrid) menuGrid.style.transform = "none";
|
if (menuGrid) menuGrid.style.transform = "none";
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -592,6 +592,10 @@ video {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.visible {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
.static {
|
.static {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
@ -725,6 +729,10 @@ video {
|
||||||
top: 2rem;
|
top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-28 {
|
||||||
|
top: 7rem;
|
||||||
|
}
|
||||||
|
|
||||||
.-z-10 {
|
.-z-10 {
|
||||||
z-index: -10;
|
z-index: -10;
|
||||||
}
|
}
|
||||||
|
|
@ -745,6 +753,10 @@ video {
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.z-30 {
|
||||||
|
z-index: 30;
|
||||||
|
}
|
||||||
|
|
||||||
.mx-4 {
|
.mx-4 {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
|
|
@ -1203,6 +1215,22 @@ video {
|
||||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
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 {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -1333,6 +1361,10 @@ video {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overflow-visible {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
.overflow-x-hidden {
|
.overflow-x-hidden {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -1696,6 +1728,10 @@ video {
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pt-32 {
|
||||||
|
padding-top: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue