Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to help users select the optimal date, time, location, and number of players for their activities while providing a comparison tool similar to Skyscanner. Users can easily search for available options and receive a comprehensive comparison to make informed decisions.

## CORE FEATURES
1. **Date and Time Selector**: An intuitive interface allowing users to select their preferred date and time for the activity.
2. **Location Input**: Users can enter their desired location to find relevant options based on their geographical preference.
3. **Player Count Selection**: A feature enabling users to specify the number of players participating in the activity to tailor the search results.
4. **Search Comparison Tool**: A powerful search feature that aggregates and compares various activity options based on user input, presenting results in a clear, usable format.
5. **User-Friendly Results Display**: An organized layout showcasing the comparison of options with essential details for easy decision-making.
6. **Responsive Design**: A mobile-friendly layout ensuring an optimal user experience across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, emphasizing usability and clarity.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: A single-column layout that guides users through the selection process, with clear sections for each input field followed by the search results area.
- **Typography**: Use a modern sans-serif font for headings (e.g., Montserrat) and a legible serif or sans-serif font for body text (e.g., Roboto), ensuring a clear hierarchy with bold headings and regular body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and type-safe application.
- **Styling**: Tailwind CSS for utility-first styling, ensuring a consistent and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Consider using React Context or Zustand for managing application state efficiently.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React application using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Main Components**:
   - **DateTimeSelector**: Component for selecting the date and time.
   - **LocationInput**: Input field for entering the desired location.
   - **PlayerCountSelector**: Component for selecting the number of players.
   - **SearchButton**: Button to trigger the search functionality.
   - **ResultsDisplay**: Component to show the comparison results.
4. **Implement State Management**: Use React Context or Zustand to manage inputs and search results state.
5. **Design the Layout**: Apply Tailwind CSS classes to achieve a clean and responsive layout.
6. **Connect the Search Functionality**: Implement logic to fetch and compare activity options based on user inputs.
7. **Test the Application**: Ensure all features work seamlessly and the design is responsive across different devices.
8. **Deploy the Application**: Use services like Vercel or Netlify for easy deployment.

## USER EXPERIENCE
Users will interact with the application by selecting their preferred date, time, location, and number of players through intuitive input fields. After entering their criteria, they will click the search button to view a comparison of available options. The results will be displayed in a user-friendly format, emphasizing clarity and easy navigation, allowing users to make informed choices quickly. The responsive design ensures that the experience is consistent on both desktop and mobile devices, enhancing overall usability.