Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
kxflt is a web application designed to connect registered users with specialized AI agents. Users can utilize these agents by spending credits, which are granted upon registration and replenished every 24 hours. The platform emphasizes a minimalist design to ensure a seamless and distraction-free user experience.

## CORE FEATURES
1. **User Registration**: New users can create an account and receive an initial credit balance of 10 credits.
2. **AI Agent Access**: Registered users can browse and select from various AI agents based on their expertise.
3. **Credit System**: Users spend credits to interact with AI agents, with credits renewed every 24 hours.
4. **Dashboard**: A user-friendly dashboard displaying current credits, available AI agents, and usage history.
5. **Notifications**: Users receive alerts when their credits are replenished or when they interact with the AI agents.
6. **Support Center**: An integrated support section providing FAQs and contact options for user assistance.

## DESIGN SPECIFICATIONS
- **Visual Style**: A minimalist approach with a clean and simple design, ample white space, and a focus on easy navigation and readability.
- **Color Mode**: Light theme featuring dark text on light backgrounds for optimal readability.
- **Layout**: The main layout consists of a top navigation bar for easy access to core features, a central content area for displaying the dashboard and AI agents, and a footer with support links. Responsive design ensures a consistent experience across devices.
- **Typography**: Use a sans-serif font like "Monserrat" for body text, with headings in a bolder variant to establish a clear hierarchy. Maintain consistent font sizes to enhance readability and organization.

## TECHNICAL REQUIREMENTS
- **Framework**: React with JavaScript to ensure type safety and maintainability.
- **Styling**: CSS for utility-first styling, allowing for rapid UI development while maintaining a minimalist aesthetic.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the design principles.
- **State Management**: Consider using React Context or Redux if the application requires complex state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with JavaScript using Create React App or a similar setup.
2. **Install Dependencies**: Add  CSS and shadcn/ui to the project, ensuring to configur for your design preferences.
3. **Design Layout**: Create the main layout components (NavigationBar, Dashboard, Footer) using CSS classes for styling.
4. **Implement User Registration**: Develop the registration form, integrating a backend service to manage user accounts and credit balances.
5. **Create AI Agent Interface**: Build the UI for browsing AI agents, including filtering and sorting options.
6. **Set Up Credit System**: Implement logic for credit management, including the initial allocation and daily renewal process.
7. **Develop Notifications**: Integrate a notification system to inform users about credit updates and other relevant alerts.
8. **Test and Optimize**: Perform user testing to gather feedback and make necessary adjustments for usability and performance.

## USER EXPERIENCE
Key user interactions include a straightforward registration process, easy navigation through a well-organized dashboard, and intuitive access to AI agents. Users can view their credit balance and usage history at a glance, enhancing engagement and satisfaction. Responsive design ensures that the experience is consistent across devices, allowing users to interact with the application seamlessly, whether on desktop or mobile.