Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project will be a web application aimed at enhancing the user experience on solmarvillas.com by showcasing clusters of neighboring villas for group bookings. The application will allow users to view details about multiple neighboring villas, making it easier for potential clients to plan their stay.

## CORE FEATURES
1. **Villa Group Overview**: A dedicated page displaying multiple neighboring villas available for group bookings, including images, descriptions, and availability.
2. **Booking Details**: An interactive section where users can select a group of villas, view total pricing, and manage their booking details.
3. **Villa Comparison**: A feature that allows users to compare amenities and pricing of selected neighboring villas side by side.
4. **User Reviews & Ratings**: A section to display user-generated reviews and ratings for each villa, enhancing trust and decision-making.
5. **Contact & Inquiry Form**: A straightforward form for users to reach out for more information or special requests related to group bookings.
6. **Responsive Design**: Ensuring the application is mobile-friendly, providing a seamless experience across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout will feature a hero section at the top, followed by the villa group overview, booking details, user reviews, and a contact form. Each section will be clearly defined with ample spacing, allowing for easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux (if needed for complex state management).

## IMPLEMENTATION STEPS
1. **Project Setup**: Initialize a React project with TypeScript and install Tailwind CSS for styling.
2. **Create Components**: Develop the main components, including Hero, VillaGroupOverview, BookingDetails, UserReviews, and ContactForm.
3. **Routing**: Set up routing to navigate between different sections of the application.
4. **API Integration**: Implement API calls to fetch villa data for display on the villa group overview and booking details.
5. **State Management**: If necessary, implement Redux to manage the state across components, especially for user selections and booking details.
6. **Styling**: Apply Tailwind CSS styles according to the design specifications, ensuring responsive behavior across all devices.
7. **Testing**: Perform user testing to gather feedback on usability and make adjustments accordingly.

## USER EXPERIENCE
Users will land on a visually appealing hero section that introduces the concept of neighboring villas. They can easily navigate to the villa group overview to view available options. The booking details section will allow them to select and compare villas, enhancing their decision-making process. User reviews will build trust, and a clear contact form will facilitate inquiries, ensuring a smooth and engaging user experience. The application will be fully responsive, ensuring accessibility on both desktop and mobile devices.