Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a Full Cycle Performance Dashboard designed for agencies to visualize and measure their performance across various stages of the business process. The dashboard will provide insights into lead generation, sales management, operational efficiency, and financial performance, allowing users to track and optimize their agency's performance effectively.

## CORE FEATURES
1. **Lead Engine**
   - Track opportunities generated through different channels (agency, word-of-mouth, platforms, referrals).
   - Analyze cost per opportunity based on internal effort.

2. **Gestión Comercial (Sales Management)**
   - Monitor contact rates and levels of interest from leads.
   - Schedule and track meetings with potential clients.
   - Measure closing rates for sales.

3. **Operación y Servicio (Operations and Service)**
   - Display contractual progress as a percentage of completion.
   - Track execution times for projects.
   - Record rework incidents or service issues.

4. **Economics**
   - Calculate profit margins for each project.
   - Display revenue generated through specific ventures.
   - Analyze return on investment (ROI) per user/project.

5. **Loop**
   - Track the percentage of clients referred.
   - Measure the average time from lead acquisition to closure and successful case outcomes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasize a clean and simple design with ample white space, a minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds for optimal readability.
- **Layout**: A single-page layout featuring a horizontal navigation bar at the top, with sections dedicated to each core feature. Use card layouts to visually separate each feature area.
- **Typography**: Use a sans-serif font like Inter or Roboto for a modern look, with a clear hierarchy (e.g., headings in bold, subheadings in regular weight).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and a robust application structure.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design iterations.
- **UI Components**: Utilize shadcn/ui for pre-built, accessible components to enhance the user interface.
- **State Management**: Use React Context or Zustand for managing application state efficiently.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout Components**: Develop reusable components for the navigation bar, feature cards, and footer.
4. **Implement Core Features**: Build out each feature section, integrating charts and metrics as needed for data visualization.
5. **Set Up State Management**: Implement state management using React Context or Zustand to handle data across components.
6. **Responsive Design**: Ensure the application is fully responsive, adjusting layouts for different screen sizes.

## USER EXPERIENCE
Users will interact with the dashboard through a streamlined interface that allows for quick navigation between sections. Key user flows include:
- **Lead Monitoring**: Users can easily view and analyze lead generation metrics, with options to filter by channel.
- **Sales Tracking**: Sales personnel can schedule meetings and track their conversion rates in real-time.
- **Operational Insights**: Users can quickly assess project progress and identify potential issues through visual indicators.
- **Economic Analysis**: Decision-makers can view financial performance metrics to inform strategy and investment decisions.

This application is designed to provide a seamless user experience, offering valuable insights into performance while maintaining a clean and minimalist interface.