Use and adapt jawharat-al-binaa-template

Use the documented interfaces and source layout for jawharat-al-binaa-template. The sections below retain the README’s examples and configuration details.

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.

Tech Stack

Framework: Next.js 14 (App Router)
Styling: Tailwind CSS v4 (using the new @theme configuration)
Animation: Framer Motion
Icons: Lucide React
Maps: React Leaflet
Validation: Zod

Design Philosophy

The design system prioritises a "Crisp White" aesthetic with Teal (#008080) and Sunset Orange (#FF5733) accents. The UI is optimised for readability and visual hierarchy, ensuring a luxury feel across all devices.

Developed by Nicola Berry

Commands in the root manifest

The captured package.json declares the following scripts. Run them from the directory containing that manifest.

Command	Script
`npm run dev`	`next dev`
`npm run build`	`next build`
`npm run start`	`next start`
`npm run lint`	`eslint`

Troubleshoot a local change

Reproduce the smallest example from the quick-start guide.
Compare required configuration and dependency versions with the README.
Check the linked issue tracker for the same error. Include the command, runtime version, and relevant error when reporting a problem; omit credentials.

Source and help

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.

Command

Script

npm run dev

next dev

npm run build

next build

npm run start

next start

npm run lint

eslint