Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application that allows users to buy hyper-personalized custom agents or pre-configured agents. The platform will provide an intuitive interface for users to explore different agent options, customize their preferences, and complete purchases seamlessly.

## CORE FEATURES
1. **User Authentication**: Allow users to create accounts, log in, and manage their profiles for a personalized experience.
2. **Agent Marketplace**: A catalog showcasing available agents, both customizable and pre-configured, with detailed descriptions and pricing.
3. **Customization Tool**: An interactive feature enabling users to personalize agents according to their specific needs and preferences.
4. **Shopping Cart**: A cart system that allows users to add agents, review their selections, and proceed to checkout.
5. **Order History**: A user dashboard for tracking past orders and managing current purchases.
6. **Support Center**: A dedicated area for FAQs, customer support inquiries, and resources on using the agents effectively.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and a strong emphasis on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds for a fresh and approachable aesthetic.
- **Layout**: The main layout will feature a top navigation bar for easy access to different sections, a hero section showcasing featured agents, a grid layout for the marketplace, and a user dashboard section. Ample spacing will be utilized to create a sense of openness.
- **Typography**: Use a modern sans-serif font for body text (e.g., Helvetica or Open Sans) and a bold variant for headings to establish a clear hierarchy. Maintain consistent font sizes and weights for headers and body text to ensure readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for strong typing and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design and responsive layouts.
- **UI Components**: Utilize shadcn/ui for pre-built UI components that align with the minimalist design ethos.
- **State Management**: Consider using React Context or Zustand for managing global state across the application.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Authentication System**:
   - Implement user sign-up and login functionality.
   - Set up user profile management.
3. **Develop the Agent Marketplace**:
   - Build a marketplace component that fetches and displays agents.
   - Implement filtering and sorting options for user convenience.
4. **Integrate Customization Tool**: 
   - Design and implement the customization interface allowing users to personalize agents.
5. **Set Up Shopping Cart and Checkout Process**:
   - Develop cart functionality to add/remove agents and manage quantities.
   - Create a secure checkout process with payment integration.
6. **Build User Dashboard**:
   - Create an interface for users to view their order history and manage their purchases.
7. **Implement Support Center**:
   - Include a section for FAQs and customer support contact options.

## USER EXPERIENCE
Users will navigate the platform through a clear navigation bar, landing on the marketplace where they can browse agents. Upon selecting an agent, they will be directed to a detailed view with customization options. Users can easily add agents to their cart and proceed to checkout. After purchase, users can access their dashboard to view their order history and manage their account. The overall experience will prioritize simplicity and efficiency, ensuring users can interact with the application effortlessly and receive support when needed.