Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web and mobile application designed to enhance the user experience of a cash flow management tool, focusing on visual clarity and actionable insights. It aims to help users understand their financial habits, enabling them to take control of their spending and savings without guilt. The application emphasizes minimalism and user engagement, ultimately transforming financial confusion into actionable clarity.

## CORE FEATURES
1. **Interactive Donut Chart**: A central visual element that displays savings, fixed expenses, and variable expenses, allowing users to see their financial distribution at a glance.
2. **Financial Health Bar**: A comparative bar that shows the user’s spending against recommended benchmarks (50/30/20 rule), highlighting areas for improvement without using aggressive colors.
3. **Dynamic Insights**: Personalized insights based on user data to inform them of their spending behaviors and suggest actionable steps.
4. **Emotional Storytelling**: Narrative blocks that translate financial data into relatable insights, motivating users based on their savings levels.
5. **Clear Activation Steps**: Recommendations related to Skandia products tailored to the user's financial situation, presented in simple terms.
6. **Call-to-Action Buttons**: Prominent buttons to encourage users to start a savings plan or connect with an advisor, facilitating immediate action.

## 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**: #00c83c (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**: A single-column layout with the interactive donut chart at the top, followed by the financial health bar, dynamic insights, emotional storytelling section, activation steps, and clear call-to-action buttons at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing user data and insights

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or a similar tool.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project for styling and UI elements.
3. **Create Components**: Develop components for the donut chart, health bar, insights, storytelling section, and CTAs.
4. **Implement State Management**: Set up state management to handle user data, insights, and interactivity for the donut chart and health bar.
5. **Design Layout**: Structure the main layout to follow the specified design and ensure responsiveness across devices.
6. **Testing**: Conduct user testing sessions to collect feedback on usability and clarity, making adjustments as necessary.

## USER EXPERIENCE
The user journey begins with an engaging introduction to their financial data through the interactive donut chart, providing immediate visual feedback. As users hover or tap on segments, they receive detailed information about their spending. The financial health bar offers a quick comparison against benchmarks, while personalized insights guide them toward better financial habits. Emotional storytelling reinforces the user's relationship with their finances, and clear CTAs encourage them to take actionable steps based on their current financial situation, ensuring a seamless and uplifting experience.