Refactor templates to utilize AlpineJS for state management and interactions, replacing custom JavaScript. Updated navigation links for parks and rides, streamlined mobile filter functionality, and enhanced advanced search features. Removed legacy JavaScript code for improved performance and maintainability.

templates/home.html

@@ -333,47 +333,8 @@
   </div>
 </section>
 
-<!-- Enhanced JavaScript for Interactions -->
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  // Enable HTMX view transitions globally
-  htmx.config.globalViewTransitions = true;
-  
-  // Add staggered animations to elements
-  const animatedElements = document.querySelectorAll('.slide-in-up');
-  animatedElements.forEach((el, index) => {
-    el.style.animationDelay = `${index * 0.1}s`;
-  });
-  
-  // Parallax effect for hero background elements
-  window.addEventListener('scroll', () => {
-    const scrolled = window.pageYOffset;
-    const parallaxElements = document.querySelectorAll('.hero .absolute');
-    
-    parallaxElements.forEach((el, index) => {
-      const speed = 0.5 + (index * 0.1);
-      el.style.transform = `translateY(${scrolled * speed}px)`;
-    });
-  });
-  
-  // Intersection Observer for reveal animations
-  const observerOptions = {
-    threshold: 0.1,
-    rootMargin: '0px 0px -50px 0px'
-  };
-  
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        entry.target.classList.add('fade-in');
-      }
-    });
-  }, observerOptions);
-  
-  // Observe all cards for reveal animations
-  document.querySelectorAll('.card, .card-feature, .card-park, .card-ride').forEach(card => {
-    observer.observe(card);
-  });
-});
-</script>
+<!-- HTMX + AlpineJS Implementation (NO Custom JavaScript) -->
+<div x-data="homePageAnimations" x-init="init()">
+  <!-- Animation triggers handled by AlpineJS -->
+</div>
 {% endblock %}