Key Features

1. Immersive User Experience

• Auto-Scroll Carousel: Property cards feature a custom-built image carousel that automatically glides (right-to-left) on hover, providing a seamless preview without user clicks.
• Gesture Controls: Fully touch-responsive cards allow users to swipe through images manually.
• Micro-Interactions: Hovering over pricing reveals a detailed cost breakdown (total for 3 nights + fees), demonstrating complex state derivation.

2. Advanced Map Integration

• Dynamic Mapping: Integrated Leaflet maps that dynamically load to avoid Server-Side Rendering (SSR) issues.
• Two-Way Sync: A sophisticated interaction where hovering over a property card highlights its corresponding pin on the map, and vice-versa.

3. App-Like Transitions

• Shared Element Transitions: Utilises Framer Motion's layoutId to create a "magic move" effect, seamlessly transitioning images from the listing grid to the details page hero section.
• Staggered Animations: Elements enter the viewport with orchestrated, GPU-accelerated animations for a premium feel.

4. Smart Search & Validation

• Intelligent Forms: The search bar includes date logic (preventing check-out before check-in) and a custom guest counter with maximum occupancy limits.
• Robust Validation: Powered by Zod and React Hook Form to ensure data integrity and provide real-time feedback.