# 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](https://nextjs.org/) (App Router)
*   **Styling**: [Tailwind CSS v4](https://tailwindcss.com/) (using the new `@theme` configuration)
*   **Animation**: [Framer Motion](https://www.framer.com/motion/)
*   **Icons**: [Lucide React](https://lucide.dev/)
*   **Maps**: [React Leaflet](https://react-leaflet.js.org/)
*   **Validation**: [Zod](https://zod.dev/)

## 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](https://github.com/Up-to-code/jawharat-al-binaa-template/blob/HEAD/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

1. Reproduce the smallest example from the [quick-start guide](/docs/up-to-code-jawharat-al-binaa-template/quick-start-guide).
2. Compare required configuration and dependency versions with the README.
3. 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

- [GitHub repository](https://github.com/Up-to-code/jawharat-al-binaa-template)
- [Original README](https://github.com/Up-to-code/jawharat-al-binaa-template/blob/main/README.md)
- [Issues and existing reports](https://github.com/Up-to-code/jawharat-al-binaa-template/issues)
- [Open the project website](https://jawharat-al-binaa-template.vercel.app)