From e7d7a83c14073a2d461c6aea73fe8537badf2b1e Mon Sep 17 00:00:00 2001
From: George Birikorang <george.fleef@gmail.com>
Date: Fri, 19 Sep 2025 20:26:04 -0700
Subject: [PATCH] Update project and index pages by modifying project filtering
 functionality, removing category filters, and enhancing introductory text for
 better user engagement.

---
 about.html    |  4 +--
 index.html    | 19 +++----------
 projects.html | 79 ++++++++++++---------------------------------------
 3 files changed, 24 insertions(+), 78 deletions(-)

diff --git a/about.html b/about.html
index 231e398..b63e2cb 100644
--- a/about.html
+++ b/about.html
@@ -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>
 
diff --git a/index.html b/index.html
index d19b1bf..79bf467 100644
--- a/index.html
+++ b/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"
diff --git a/projects.html b/projects.html
index 71e1280..e02bfcf 100644
--- a/projects.html
+++ b/projects.html
@@ -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")