refactor: Adjust HTML/CSS across content pages for a more cohesive UX

src/scripts/gallery-carousel.js

@@ -71,6 +71,20 @@ const updateProductList = (category) => {
   const productList = document.getElementById("product-list");
   if (!productList) return console.error("Element with ID 'product-list' not found.");
 
+  // Remove active class from all buttons
+  document.querySelectorAll(".categories ul li").forEach(li => {
+    li.classList.remove('active');
+  });
+
+  // Add active class to the button for the current category
+  document.querySelectorAll(".cat-btn").forEach(button => {
+    const url = new URL(button.href);
+    const btnCategory = url.searchParams.get('category');
+    if (btnCategory === category) {
+      button.parentElement.classList.add('active');
+    }
+  });
+
   selectedProducts = allProducts.filter(product => product.category === category);
   currentIndex = 0;
 
@@ -129,4 +143,4 @@ document.addEventListener('DOMContentLoaded', () => {
       updateProductList(defaultCategory);
     })
     .catch(err => console.error('Problem fetching products:', err));
-});
+});