Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web app designed to facilitate finance-related activities while ensuring an engaging user experience. Its main purpose is to serve as a demo platform for testing user interactions with a button and a call to action in the app profile section, enabling A/B analysis for optimizing user engagement.

## CORE FEATURES
1. **Profile Section**: A dedicated area where users can view and edit their financial information, including account details and transaction history.
2. **Button Prototype A/B Test**: Two distinct button designs for the call to action, allowing users to interact and provide feedback on their preferences.
3. **Engagement Analytics Dashboard**: Visual representations of user engagement metrics to analyze the effectiveness of the button and call to action.
4. **User Feedback Form**: A simple interface for users to submit feedback on their experiences with the prototypes.
5. **Responsive Design**: Ensures accessibility and usability across various devices, including desktops, tablets, and mobile phones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist approach with a clean, simple design that emphasizes ample white space, a minimal color palette, and a strong focus on typography to create an approachable yet professional look.
- **Color Mode**: Light theme featuring dark text on light backgrounds to enhance readability and convey a serious financial tone.
- **Layout**: A single-column layout with sections clearly defined by generous spacing. The profile section should be intuitive, with the button and call to action prominently displayed for easy access.
- **Typography**: Use a sans-serif font such as Inter or Roboto for body text to ensure clarity and legibility. Headings should be bold with a larger font size to create a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design iterations while maintaining consistency.
- **UI Components**: Utilize shadcn/ui for pre-designed UI components that match the minimalist aesthetic.
- **State Management**: Use React Context API or a lightweight state management library such as Zustand for managing global app state if necessary.

## IMPLEMENTATION STEPS
1. **Set Up React App**: Initialize a new React app with TypeScript and install Tailwind CSS along with shadcn/ui components.
2. **Create Base Layout**: Design the main layout structure with a single-column format, implementing responsive design principles using Tailwind CSS.
3. **Develop Profile Section**: Build the profile section with editable fields for user data, ensuring a clean interface.
4. **Implement Button Prototypes**: Create two button components with distinct styles for A/B testing, ensuring they are visually differentiated but maintain a cohesive look.
5. **Integrate Engagement Dashboard**: Set up a simple dashboard to display analytics, utilizing visual elements like charts or graphs for clarity.
6. **Feedback Mechanism**: Implement a feedback form that captures user insights on the prototypes, ensuring ease of access from the profile section.
7. **Testing and Iteration**: Conduct user testing sessions to gather interaction data and feedback, iterating on the designs based on insights received.

## USER EXPERIENCE
Users will start by accessing the profile section, where they can view their financial information. The button prototypes will be prominently displayed, inviting users to interact with them. After engaging with the buttons, users can fill out a feedback form to express their preferences and experiences. The analytics dashboard will provide visual feedback to help the design team assess user engagement and optimize the call to action based on real user data. The responsive design will ensure that users have a seamless experience across all devices, enhancing overall usability and satisfaction.