Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to transform a traditional cash flow tool into an interactive, minimalist, and emotionally intelligent experience. Targeting users aged 20-45 with low financial control, the application aims to help them understand their spending habits, discover potential savings, and feel a sense of control over their finances.

## CORE FEATURES
1. **Emotional Hook Screen**: Engaging entry screen with a thought-provoking question to capture user attention and encourage exploration.
2. **Income Input**: Simple input mechanism for users to enter their salary and other income sources, with visual feedback and dynamic counting.
3. **Intelligent Expense Input**: Modular and conditional inputs for fixed and variable expenses, presented progressively to avoid overwhelming users.
4. **Real-time Visualization**: Dynamic bar displaying spending breakdown, alerting users when they exceed budgets in specific categories.
5. **Insightful Results**: Clear presentation of available monthly funds, emotional diagnostics, and powerful insights into spending leaks.
6. **Product Recommendations**: Tailored suggestions based on user’s financial situation, with clear CTAs for further engagement with Skandia’s products.

## 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**: The application will utilize a single-column layout for mobile-first design, with sections clearly defined for inputs, visualizations, and recommendations to enhance user flow and understanding.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for managing state across components.

## IMPLEMENTATION STEPS
1. **Set up the React project** with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create the initial layout** with a focus on the emotional hook screen, ensuring the design is clean and follows the minimalist aesthetic.
3. **Develop the income input component**, implementing sliders for income range and dynamic counting feature.
4. **Construct the expense input module**, ensuring it displays conditionally based on user inputs and follows a step-by-step onboarding approach.
5. **Integrate real-time visualization** with dynamic bars and alerts for category overspending, ensuring visual feedback is immediate.
6. **Build the results screen** to present available funds, emotional diagnostics, and insights clearly and engagingly.
7. **Implement product recommendation logic**, mapping user results to relevant Skandia offerings with clear CTAs.
8. **Test the application** for responsiveness and user experience, making iterative improvements based on feedback.

## USER EXPERIENCE
The application will prioritize a smooth user journey, starting from an emotionally engaging entry point, leading to simple and intuitive inputs for income and expenses. Users will receive real-time feedback as they enter data, with insights presented in a clear and non-judgmental manner. The final results will empower users with actionable insights and recommendations, creating a satisfying and enlightening financial exploration experience.