Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web app designed to verify the functionality of various action buttons, including section checks, imports, exports, and creation functionalities. Its main purpose is to ensure that each button performs the correct action as specified, providing users with a seamless experience and addressing any issues where buttons may not function correctly.

## CORE FEATURES
1. **Button Functionality Verification**: A core feature that allows users to click on buttons to check if they perform the intended actions as described in the epic.
2. **Error Notifications**: If a button does not perform the correct action, users will receive immediate feedback, including notifications of any errors or issues that need addressing.
3. **Action Logging**: A feature that logs each button action, providing users with a history of clicks and actions taken for troubleshooting and audits.
4. **User Feedback Mechanism**: An integrated feedback system where users can report issues or suggest improvements related to button functionalities.
5. **Dashboard Overview**: A centralized dashboard that displays the status of each button (active, inactive, error) for easy monitoring and management.

## 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 be a single-page dashboard with a top navigation bar, a central action area for button checks, and a sidebar for logging and feedback. Each section will be clearly delineated with ample white space to maintain a clean look.

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

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create the layout structure**: Develop the main layout with a top navigation bar and sidebar for logs and feedback. Ensure the layout adheres to the minimalist design approach.
3. **Implement button components**: Create reusable button components using Tailwind CSS, applying the specified border radius and primary color.
4. **Develop the functionality verification system**: Implement logic to handle button clicks and verify if actions are executed correctly, including error handling to notify users of any issues.
5. **Integrate action logging**: Set up a logging system to capture each button action and display it in the sidebar for user reference.
6. **Feedback mechanism**: Design and implement a feedback form that allows users to report issues or suggest improvements, linking it to the action logging system.
7. **Testing and debugging**: Conduct thorough testing to ensure all buttons function correctly and that notifications are displayed as intended. Debug any issues that arise.
8. **Deploy the application**: Once thoroughly tested, deploy the application to a suitable hosting platform for user access.

## USER EXPERIENCE
Users will interact with the application primarily through the dashboard, where they can click on buttons to verify functionality. Each click will either trigger the intended action or display an error notification if something is wrong. The action logging provides users with transparency regarding what actions have been taken, while the feedback mechanism encourages user engagement and continuous improvement. The minimalist design ensures an intuitive experience, allowing users to focus on functionality without distractions.