Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a web application that serves as an intelligent agent to assist users in selling or renting their properties. The application will utilize a webhook that connects to n8n, allowing it to send user inquiries and receive responses seamlessly. The focus will be on providing a user-friendly experience while efficiently handling property-related queries.

## CORE FEATURES
1. **User Interface for Property Queries**: A clean and intuitive interface where users can input their questions regarding property sales or rentals.
2. **Webhook Integration with n8n**: A robust backend setup that connects with n8n to process user inquiries and fetch relevant responses.
3. **Response Display**: A dynamic feature that showcases the agent's responses in real time, ensuring users receive immediate assistance.
4. **User Feedback Mechanism**: An option for users to rate the helpfulness of responses, allowing for continuous improvement of the agent’s capabilities.
5. **Help Center**: A dedicated section providing users with FAQs and guides on how to use the agent effectively.
6. **Contact Support**: A feature that enables users to directly reach out for additional assistance if their queries are not resolved.

## 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 consist of a header section for navigation, a central query input area, a response display area, and a footer for additional links and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context or Zustand (as needed)

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Initialize a new React project with TypeScript support.
2. **Install Dependencies**: Add necessary packages such as Tailwind CSS, shadcn/ui, and any state management libraries.
3. **Create Component Structure**: Develop key components including Header, QueryInput, ResponseDisplay, Feedback, and HelpCenter.
4. **Implement Webhook Logic**: Set up the webhook integration to communicate with n8n. Ensure data is sent and received correctly.
5. **Design Layout**: Use Tailwind CSS to style components according to the design specifications, ensuring responsiveness across devices.
6. **Testing**: Conduct thorough testing of the application to ensure all features function as intended and that the user experience is smooth.
7. **Deploy Application**: Once testing is complete, deploy the application to a hosting service.

## USER EXPERIENCE
Users will interact with the application by entering their property-related questions into a designated input field. Upon submission, the application will send the query to the n8n webhook, and users will receive a response displayed in real time. Users can provide feedback on the responses they receive, and they will have access to a help center for additional support. The overall experience will be designed to be straightforward and efficient, catering to users seeking quick and reliable assistance in their property transactions.