Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for a SaaS platform featuring a dual navigation system tailored for two user roles: Super Admin and Merchant Portal. The application emphasizes clarity, minimalism, and logical grouping to enhance user experience while providing robust features for both internal and client-facing tasks.

## CORE FEATURES
1. **Super Admin Dashboard**: Central hub for Super Admins featuring key metrics, activity feed, and an overview of system performance.
2. **Leads Management**: A comprehensive section to manage leads, including all leads, pipeline stages, and lead sources.
3. **Partners Management**: Tools for managing partners, including agencies, sales reps, and performance tracking.
4. **Clients (Merchants) Overview**: Access to all merchants, onboarding status, and account activity.
5. **Access Management**: Control user roles and permissions to ensure secure and efficient access to the application.
6. **Merchant Portal Dashboard**: A client-facing summary view that displays recent transactions and key financial information.

## 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 layout will feature a sidebar navigation for Super Admins and a top navigation for the Merchant Portal. Dropdown menus will be utilized for sub-sections, ensuring clear section separation. Icons will accompany labels for improved readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for rapid UI development
- **UI Components**: shadcn/ui for pre-built, customizable UI components
- **State Management**: Redux for managing application state if required

## IMPLEMENTATION STEPS
1. **Set Up 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 Navigation Components**: Develop the sidebar for Super Admins and the top navigation for the Merchant Portal, ensuring dropdown functionality for sub-menus.
4. **Build Core Pages**: Create the core pages including the Dashboard, Leads Management, Partners Management, and Client Overview for Super Admins, and the Merchant Dashboard, Transactions, and Support for the Merchant Portal.
5. **Implement State Management**: Set up Redux or Context API for managing state across the application if needed.
6. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist design, focusing on spacing, typography, and responsive layouts.
7. **Testing**: Conduct usability testing with users in each role to gather feedback and make necessary adjustments.
8. **Deploy Application**: Deploy the application using a platform like Vercel or Netlify.

## USER EXPERIENCE
Users will navigate through a structured and intuitive interface with clear visual hierarchy. Super Admins will easily manage leads, partners, and clients from a centralized dashboard, while Merchants will have quick access to their transaction history and support tools. The use of icons alongside text will enhance understanding, and the overall design will ensure high readability and accessibility, creating a seamless user experience reminiscent of Stripe and Shopify interfaces.