Refactor 'index.html' to update logo section with new layout and add introductory text in 'projects.html' for improved user engagement. Remove category filters to simplify project display.

index.html

@@ -382,7 +382,7 @@
         >
           <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/optimized/kh3_logo_optimized.png"
@@ -392,6 +392,9 @@
               width="64"
               height="64"
             />
+            <h1 class="text-lg md:text-xl font-semibold text-white">
+              KH3 Group
+            </h1>
           </a>
         </div>
 
@@ -454,20 +457,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"

projects.html

@@ -500,45 +500,23 @@
       <!-- 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">
+            <div class="max-w-4xl mx-auto">
-              <button
+              <h2
-                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"
+                class="text-2xl md:text-3xl font-light text-white mb-4 opacity-0 animate-fade-in-up"
-                data-category="all"
+                style="animation-delay: 0.2s; animation-fill-mode: forwards"
               >
-                ALL PROJECTS
+                Browse through our past projects
-              </button>
+              </h2>
-              <button
+              <p
-                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"
+                class="text-lg text-neutral-400 leading-relaxed opacity-0 animate-fade-in-up"
-                data-category="Corporate"
+                style="animation-delay: 0.4s; animation-fill-mode: forwards"
               >
-                CORPORATE
+                Discover the diverse portfolio of inspiring spaces we've created
-              </button>
+                across Ghana. Each project represents our commitment to
-              <button
+                excellence, innovation, and transforming visions into reality.
-                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"
+              </p>
-                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>
             </div>
           </div>
 
@@ -1216,7 +1194,6 @@
     <script>
       // Projects page functionality
       let projectsData = [];
-      let currentCategory = "all";
       let currentProject = null;
       let currentImageIndex = 0;
 
@@ -1231,7 +1208,6 @@
         const elementsToAnimate = [
           document.querySelector(".hero-section"),
           document.querySelector("#projectsGrid"),
-          document.querySelector(".category-filter"),
           document.querySelector("main"),
         ].filter((el) => el);
 
@@ -1310,12 +1286,8 @@
       // Render projects
       function renderProjects() {
         const grid = document.getElementById("projectsGrid");
-        const filteredProjects =
+        // Show all projects since filters are hidden
-          currentCategory === "all"
+        const filteredProjects = projectsData;
-            ? projectsData
-            : projectsData.filter(
-                (project) => project.category === currentCategory
-              );
 
         grid.innerHTML = filteredProjects
           .map(
@@ -1513,26 +1485,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")