Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to ensure that menus appear accurately positioned on top of walls when clicked. The main purpose is to enhance user interaction and accuracy within the environment, providing a seamless experience for users needing precise menu placements.

## CORE FEATURES
1. **Dynamic Menu Placement**: Automatically position menus directly above walls upon clicking, ensuring users have easy access to relevant options.
2. **Interactive Wall Detection**: Utilize click detection to identify wall locations and trigger menu visibility.
3. **Responsive Design**: Ensure the application is fully responsive, providing an optimal experience across various devices and screen sizes.
4. **User Preferences**: Allow users to customize menu settings, such as visibility duration and menu style.
5. **Real-time Updates**: Implement live updates for any changes made to wall structures or menu configurations.
6. **Feedback System**: Include a mechanism for users to report inaccuracies in menu placements, improving system learning and accuracy over time.

## 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 application will feature a clean interface with a top navigation bar, a main interactive area showcasing walls, and a sidebar for menu customization options.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use Zustand or React Context API for state management of menu positions and user preferences.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Structure**: Design the main layout with a navigation bar, main interactive area, and sidebar for settings.
3. **Implement Wall Detection**: Use event listeners to detect clicks on walls and calculate menu positions.
4. **Design Menus**: Create menu components styled with Tailwind CSS that adhere to the design specifications.
5. **Integrate State Management**: Set up Zustand or Context API to manage the state of menus and user preferences.
6. **Test Responsiveness**: Ensure all components are responsive and adhere to the minimalist design principles.
7. **Implement Feedback System**: Create a simple feedback form allowing users to report issues with menu placements.

## USER EXPERIENCE
Users will interact with walls by clicking on them, which will trigger the appearance of menus directly above the clicked location. The interface will be intuitive, allowing users to customize their menu preferences easily. Users will also be able to provide feedback on any inaccuracies, ensuring continuous improvement of the application's functionality. The overall experience will focus on simplicity and efficiency, making it easy for users to achieve their tasks without unnecessary distractions.