Add JavaScript modules for enhanced functionality and dynamic content loading

js/keyboard-nav.js

@@ -0,0 +1,54 @@
+// Keyboard navigation for service cards
+(function initKeyboardNav(){
+  let selectedIndex = -1;
+  const searchInput = document.getElementById('search-input');
+  
+  // Wait for services to load
+  const checkServicesLoaded = setInterval(() => {
+    if(window.servicesData){
+      clearInterval(checkServicesLoaded);
+      setupKeyboardNav();
+    }
+  }, 100);
+  
+  function setupKeyboardNav(){
+    const { allServices } = window.servicesData;
+    
+    const selectCard = (index) => {
+      const visibleCards = allServices.filter(card => card.style.display !== 'none');
+      if(visibleCards.length === 0) return;
+      
+      // Remove previous selection
+      visibleCards.forEach(card => card.classList.remove('selected'));
+      
+      // Update index
+      if(index < 0) index = visibleCards.length - 1;
+      if(index >= visibleCards.length) index = 0;
+      selectedIndex = index;
+      
+      // Add selection
+      visibleCards[selectedIndex].classList.add('selected');
+      visibleCards[selectedIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
+    };
+
+    document.addEventListener('keydown', (e) => {
+      if(document.activeElement === searchInput) return;
+      
+      const visibleCards = allServices.filter(card => card.style.display !== 'none');
+      
+      if(e.key === 'ArrowRight' || e.key === 'ArrowDown'){
+        e.preventDefault();
+        selectCard(selectedIndex + 1);
+      } else if(e.key === 'ArrowLeft' || e.key === 'ArrowUp'){
+        e.preventDefault();
+        selectCard(selectedIndex - 1);
+      } else if(e.key === 'Enter' && selectedIndex >= 0){
+        e.preventDefault();
+        visibleCards[selectedIndex].click();
+      } else if(e.key === 'Escape'){
+        visibleCards.forEach(card => card.classList.remove('selected'));
+        selectedIndex = -1;
+      }
+    });
+  }
+})();