Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a web application for "Creator Business OS," a high-converting SaaS landing page designed to help creators and agencies optimize their revenue streams through comprehensive reporting and analytics. The platform aims to offer clarity and control over financial data, facilitating smarter decision-making for its users.

## CORE FEATURES
- **Revenue Dashboard**: A centralized view displaying all income streams and performance metrics for both creators and agencies.
- **Income Streams Breakdown**: Detailed insights into various revenue sources to help users understand where their money comes from.
- **Content Performance Insights**: Analysis of content effectiveness linked to revenue generation, providing actionable feedback.
- **AI Insights & Alerts**: Proactive notifications and suggestions derived from AI analysis to optimize revenue and minimize risks.
- **Portfolio Management**: For agencies, a comprehensive view of all creators, including performance benchmarking and reporting tools.
- **Customizable Report Builder**: Enables users to create tailored reports for brands, improving transparency and collaboration.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design characterized by clean, simple aesthetics with ample white space. The focus will be on typography and essential UI elements to enhance user experience.
- **Color Mode**: A light theme featuring dark text on light backgrounds to ensure readability and a modern appearance.
- **Layout**: The landing page will be divided into clearly defined sections including a hero, features, pricing, testimonials, and FAQs, all structured to guide the user seamlessly through the information.
- **Typography**: Use a sans-serif font for clarity and modernity, with a clear hierarchy (e.g., larger headers for titles, medium-sized text for subtitles, and smaller text for body content).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling and responsive design capabilities
- **UI Components**: Utilize shadcn/ui for pre-built, customizable UI components
- **State Management**: Implement React Context API for global state management as needed

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize the React project with TypeScript and install Tailwind CSS.
2. **Create Components**: Develop reusable components for the hero section, feature lists, pricing tables, testimonials, and FAQs.
3. **Implement Routing**: Use React Router for navigation between different sections and maintain a smooth user experience.
4. **Build the Layout**: Structure the landing page using Flexbox and Grid layouts to ensure responsiveness across devices.
5. **Integrate State Management**: Set up Context API for managing user interactions and dynamic data, such as pricing and CTAs.
6. **Add API Integration**: If necessary, implement API calls for fetching user data or analytics insights.
7. **Test Responsiveness**: Ensure all components are responsive and function seamlessly across various screen sizes.

## USER EXPERIENCE
Users will interact with the platform via a streamlined UI that guides them through understanding their revenue and analytics. Key flows include:
- Signing up for a free trial through the primary CTA in the hero section.
- Navigating to the problem and solution sections to grasp the value proposition.
- Exploring detailed product highlights tailored for creators and agencies.
- Accessing the pricing section to choose the plan that best fits their needs, with clear CTAs for starting free or booking a demo.
- Reviewing FAQs to address any concerns before making a decision, ensuring a confident purchase experience.

This comprehensive design and development plan provides a clear pathway to creating a functional, minimalist application that resonates with the target audience while maintaining a focus on outcomes and clarity.