Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide users with a subscription-based resource management system. Users will have the option to sign up for various plans that provide credits for using the application's features. The application will utilize payment processors like Stripe and Razorpay for billing, all while maintaining a clean and minimalist UI similar to postiz.com.

## CORE FEATURES
1. **User Authentication**: Allow users to sign up, log in, and manage their profiles securely.
2. **Subscription Plans**: Offer three tiers of subscription (Free, $10/month, $15/month) with varying credits and benefits.
3. **Credit Management**: Users can view their credits, allocate them to tasks, and track usage history.
4. **Independent Task Agents**: Enabling agents to function independently without requiring support from Lovable, allowing for seamless user interactions.
5. **Payment Integration**: Implement Stripe and Razorpay for subscription payments with dynamic pricing based on billing frequency.
6. **Responsive Design**: Ensure the application is fully responsive and accessible on various devices.
7. Add Agent CLI (command line interface )feature like postiz.com, example: # Install the skill
npx skills add gitroomhq/postiz-agent

# Set your API key
export POSTIZ_API_KEY=your_api_key

# List your connected platforms
postiz integrations:list

# Create your first post
postiz posts:create \
  -c "Hello from Postiz Agent!" \
  -s "2025-01-01T12:00:00Z" \
  -i "your-integration-id"

Also find in attachment for reference. You can visit the website postiz.com for reference.

## 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 feature a top navigation bar, a hero section for promotions and key features, followed by a subscription plan comparison grid, testimonials, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux Toolkit for managing user authentication and credits.

## IMPLEMENTATION STEPS
1. **Set up Project Structure**: Create a new React app using Create React App with TypeScript template.
2. **Install Dependencies**: Add required libraries (Tailwind CSS, Redux Toolkit, etc.).
3. **Create User Authentication**: Implement login and signup functionalities using JWT for user sessions.
4. **Develop Subscription Management**: Build the UI for selecting subscription plans and integrate payment gateways (Stripe and Razorpay).
5. **Credit System**: Create a backend service that tracks user credits and task consumption.
6. **Design UI Components**: Utilize Tailwind CSS to style the components according to the specified design guidelines.
7. **Responsive Testing**: Test the application for responsiveness across different devices.

## USER EXPERIENCE
Users will start by signing up or logging in to their accounts. Once authenticated, they will be directed to their dashboard where they can select a subscription plan. The main interface will display their available credits and allow them to allocate these credits to various tasks. The user will have a seamless experience navigating through the application with a focus on usability and minimal distractions, ensuring that they can efficiently manage their tasks and subscriptions.

This structured prompt is ready for implementation in Lovable, ensuring the user's vision for a beautiful, functional, and minimalist web application is realized.