Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a fully interactive web application dashboard focused on financial projections. The application will serve as a central hub for various financial analysis pages, providing users with a clean and efficient way to visualize and analyze their financial data. The dashboard will include several interactive charts and animations designed to enhance user engagement and data comprehension.

## CORE FEATURES
1. **Header Navigation**: A fixed header that routes to different sections including Comparative P&L, Weekly Projection, Fines and Bonuses, and CX View, with buttons styled according to the design specifications.
2. **Interactive Charts**: Vertical bar charts that animate smoothly from bottom to top upon loading, and horizontal bar charts that animate from left to right.
3. **Dynamic Axis Animation**: Axis lines that animate into view with a "snake-like" motion, enhancing the visual experience of the data presentation.
4. **Hover Effects on Cards**: Cards containing charts will have a hover animation, providing feedback and enhancing interactivity.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across different devices and screen sizes.
6. **User-Friendly Interface**: A minimalist design focusing on usability and clarity, allowing users to easily navigate and interpret financial data.

## 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 consist of a top navigation bar, followed by a grid layout for the charts and cards. Each card will contain an interactive chart and will be spaced evenly for clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand (specify based on the complexity of the application).

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. Install Tailwind CSS and shadcn/ui for styling.
2. **Create Header Component**: Develop a header component with navigation buttons linking to the respective routes (Comparative P&L, Weekly Projection, etc.).
3. **Design Chart Components**: Implement chart components using a chart library (like Chart.js or Recharts) to create interactive bar charts with the specified animations.
4. **Implement Animations**: Use CSS or a library like Framer Motion to create the desired animations for chart loading and card hover effects.
5. **Build Responsive Layout**: Ensure the layout is responsive by using Tailwind's utility classes and testing on various screen sizes.
6. **Testing**: Conduct usability testing to ensure all interactions work as intended and the user experience is fluid.

## USER EXPERIENCE
Users will interact with the dashboard by navigating through the header to access different financial analysis sections. Upon loading, users will see animated charts that draw their attention and provide immediate visual feedback on financial data. The hover effects on cards will encourage exploration and interaction, making the data not only accessible but engaging. The minimalist design will ensure that users can focus on the information without distractions, enhancing their overall experience.