Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to facilitate subscription sales and integrate with Abacatepay for processing Pix payments. The platform aims to provide a seamless user experience for both customers and administrators, allowing for easy subscription management and payment processing.

## CORE FEATURES
1. **Subscription Management**: Users can easily create, view, and manage their subscriptions, with options to upgrade or downgrade plans as needed.
2. **Payment Processing**: Integration with Abacatepay to handle Pix transactions securely and efficiently.
3. **User Authentication**: Secure user login and registration process to protect user data and subscription information.
4. **Dashboard**: An admin dashboard for users to track their subscriptions, payment history, and manage account settings.
5. **Responsive Design**: A fully responsive layout that adjusts to different screen sizes for optimal viewing on mobile and desktop devices.
6. **Customer Support**: A contact form and FAQs section to assist users with any issues or inquiries regarding their subscriptions.

## 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 with a clear call-to-action, followed by features in card format, a testimonial section, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API for managing application state as needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript. Install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create the Layout**: Develop the main layout structure, including the navigation bar, hero section, features section, and footer.
3. **Implement User Authentication**: Set up authentication routes and forms for user login and registration.
4. **Integrate Abacatepay**: Implement the payment processing logic using Abacatepay’s API for handling Pix transactions.
5. **Build the Dashboard**: Create the admin dashboard where users can manage their subscriptions and view payment history.
6. **Add Responsive Design**: Ensure all components are responsive and function well on various devices by using Tailwind CSS utilities.
7. **Testing**: Conduct thorough testing of all features, including subscription management and payment processing to ensure a smooth user experience.
8. **Deployment**: Prepare the application for production and deploy it on a suitable hosting platform.

## USER EXPERIENCE
The user experience focuses on simplicity and ease of use. Users will be greeted by a clear hero section that encourages them to sign up or log in. Once authenticated, they will have a straightforward dashboard where they can manage their subscriptions and payments. The entire process, from signing up to making a payment, will be streamlined to minimize friction and enhance user satisfaction.