Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for Image Conversion Web Application

## APPLICATION OVERVIEW
This application is a web platform designed for users to convert images of clothing into optimized formats suitable for e-commerce and advertisements. The app includes user authentication, a dashboard for image uploads and conversions, a credit system for usage, and a gallery for viewing converted images.

## CORE FEATURES
1. **User Registration/Login**: Users can create accounts and log in using Supabase for authentication.
2. **Private Dashboard**: A dedicated area where users can upload images and access conversion tools.
3. **Credit System**: Users can purchase credits, which are consumed with each image conversion.
4. **Image Gallery**: A curated gallery displaying all converted images for easy access.
5. **Pricing Page**: A page where users can view pricing plans and confirm their purchases.

## 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 includes a hero section on the landing page, followed by features, a pricing section, and a contact form, all structured for ease of navigation and clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: [Specify if needed, e.g., Redux or React Context].

## IMPLEMENTATION STEPS
1. **Set Up the Project**:
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and shadcn/ui for styling components.

2. **Create Authentication Flow**:
   - Implement user registration and login using Supabase authentication.
   - Set up routes for protected and public pages.

3. **Develop the Dashboard**:
   - Create a private dashboard where users can upload images.
   - Integrate the image conversion functionality and connect it to the credit system.

4. **Implement the Credit System**:
   - Set up a mechanism for users to purchase credits.
   - Ensure each image conversion deducts the appropriate number of credits.

5. **Build the Image Gallery**:
   - Create a gallery component that fetches and displays all converted images.

6. **Design the Pricing Page**:
   - Develop a page displaying various pricing plans and allow users to confirm their purchases.

7. **Optimize for User Experience**:
   - Ensure the application is responsive and user-friendly.
   - Test all functionalities for performance and usability.

## USER EXPERIENCE
Key user interactions will include seamless registration and login, easy image uploads with drag-and-drop functionality, straightforward navigation through the dashboard, and a clear display of credits and pricing options. The design will prioritize clarity and ease of use, ensuring that users can effortlessly convert images and manage their accounts.