mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 05:23:42 +00:00
Update project and index pages by modifying project filtering functionality, removing category filters, and enhancing introductory text for better user engagement.
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
38db6e6744
commit
e7d7a83c14
3 changed files with 24 additions and 78 deletions
|
|
@ -625,7 +625,7 @@
|
|||
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
|
||||
>
|
||||
<span class="text-white text-2xl font-bold drop-shadow-lg"
|
||||
>02</span
|
||||
>01</span
|
||||
>
|
||||
</div>
|
||||
|
||||
|
|
@ -689,7 +689,7 @@
|
|||
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
|
||||
>
|
||||
<span class="text-white text-2xl font-bold drop-shadow-lg"
|
||||
>01</span
|
||||
>02</span
|
||||
>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
19
index.html
19
index.html
|
|
@ -366,9 +366,12 @@
|
|||
>
|
||||
<a
|
||||
href="index.html"
|
||||
class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
|
||||
class="flex flex-col items-start gap-2 animate-logo-float hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
|
||||
<h1 class="text-lg md:text-xl font-semibold text-white">
|
||||
KH3 Group
|
||||
</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -425,20 +428,6 @@
|
|||
</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"
|
||||
|
|
|
|||
|
|
@ -500,45 +500,24 @@
|
|||
<!-- Projects Grid Section -->
|
||||
<section class="py-32 bg-kh3-black">
|
||||
<div class="container mx-auto px-8 max-w-7xl">
|
||||
<!-- Category Filters -->
|
||||
<!-- Introductory Text -->
|
||||
<div class="mb-16 text-center">
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-8">
|
||||
<button
|
||||
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300 active"
|
||||
data-category="all"
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2
|
||||
class="text-2xl md:text-3xl font-light text-white mb-4 opacity-0 animate-fade-in-up"
|
||||
style="animation-delay: 0.2s; animation-fill-mode: forwards"
|
||||
>
|
||||
ALL PROJECTS
|
||||
</button>
|
||||
<button
|
||||
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
|
||||
data-category="Corporate"
|
||||
Browse through our past projects
|
||||
</h2>
|
||||
<p
|
||||
class="text-lg text-neutral-400 leading-relaxed opacity-0 animate-fade-in-up"
|
||||
style="animation-delay: 0.4s; animation-fill-mode: forwards"
|
||||
>
|
||||
CORPORATE
|
||||
</button>
|
||||
<button
|
||||
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
|
||||
data-category="Residential"
|
||||
>
|
||||
RESIDENTIAL
|
||||
</button>
|
||||
<button
|
||||
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
|
||||
data-category="Retail"
|
||||
>
|
||||
RETAIL
|
||||
</button>
|
||||
<button
|
||||
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
|
||||
data-category="Hospitality"
|
||||
>
|
||||
HOSPITALITY
|
||||
</button>
|
||||
<button
|
||||
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
|
||||
data-category="Industrial"
|
||||
>
|
||||
INDUSTRIAL
|
||||
</button>
|
||||
Discover the diverse portfolio of inspiring spaces we've created
|
||||
across Ghana and West Africa. Each project represents our
|
||||
commitment to excellence, innovation, and transforming visions
|
||||
into reality.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1216,7 +1195,6 @@
|
|||
<script>
|
||||
// Projects page functionality
|
||||
let projectsData = [];
|
||||
let currentCategory = "all";
|
||||
let currentProject = null;
|
||||
let currentImageIndex = 0;
|
||||
|
||||
|
|
@ -1231,7 +1209,6 @@
|
|||
const elementsToAnimate = [
|
||||
document.querySelector(".hero-section"),
|
||||
document.querySelector("#projectsGrid"),
|
||||
document.querySelector(".category-filter"),
|
||||
document.querySelector("main"),
|
||||
].filter((el) => el);
|
||||
|
||||
|
|
@ -1310,12 +1287,8 @@
|
|||
// Render projects
|
||||
function renderProjects() {
|
||||
const grid = document.getElementById("projectsGrid");
|
||||
const filteredProjects =
|
||||
currentCategory === "all"
|
||||
? projectsData
|
||||
: projectsData.filter(
|
||||
(project) => project.category === currentCategory
|
||||
);
|
||||
// Show all projects since filters are hidden
|
||||
const filteredProjects = projectsData;
|
||||
|
||||
grid.innerHTML = filteredProjects
|
||||
.map(
|
||||
|
|
@ -1513,26 +1486,10 @@
|
|||
});
|
||||
}
|
||||
|
||||
// Category filter functionality
|
||||
// Initialize projects (no filters needed)
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
loadProjects();
|
||||
|
||||
// Category filter buttons
|
||||
document.querySelectorAll(".category-filter").forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
// Remove active class from all buttons
|
||||
document
|
||||
.querySelectorAll(".category-filter")
|
||||
.forEach((btn) => btn.classList.remove("active"));
|
||||
// Add active class to clicked button
|
||||
this.classList.add("active");
|
||||
|
||||
// Update current category and re-render
|
||||
currentCategory = this.dataset.category;
|
||||
renderProjects();
|
||||
});
|
||||
});
|
||||
|
||||
// Close modal functionality
|
||||
document
|
||||
.getElementById("closeModal")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue