Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to optimize images of clothing for e-commerce and advertising purposes. Users will be able to upload their images, convert them into optimized formats, manage their credits for conversions, and view their gallery of converted images. The app will feature a clean and minimalist design to enhance user experience.

## CORE FEATURES
1. **User Authentication**: Users can register and log in using Supabase for secure access to their accounts.
2. **Image Upload and Conversion**: A dashboard where users can upload clothing images and initiate the conversion process, consuming credits for each conversion.
3. **Credit System**: Users can purchase credits to use for image conversions, with each conversion deducting a specified number of credits from their account balance.
4. **Gallery of Converted Images**: A dedicated section where users can view all their converted images, allowing easy access and management.
5. **Pricing Page**: A page detailing the credit pricing and providing an option for users to purchase credits.
6. **Confirmation of Purchase**: After a user buys credits, they should receive a confirmation page summarizing their transaction.

## 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 on the landing page, a dashboard with clear sections for image upload, gallery, and credit management, and a footer with links to the pricing page and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing user state and credit transactions.

## IMPLEMENTATION STEPS
1. Set up the project with Create React App using TypeScript.
2. Install the necessary dependencies: Tailwind CSS, Supabase, and shadcn/ui.
3. Create the authentication flow using Supabase by setting up user registration and login components.
4. Develop the main dashboard where users can upload images. Ensure the image upload functionality is connected to the conversion process.
5. Implement the credit system, allowing users to purchase credits and manage their balance.
6. Build the gallery section to display all converted images, ensuring it is visually appealing and user-friendly.
7. Create the pricing page detailing credit costs and integrate a payment processor for credit purchases.
8. Test the application for responsiveness and usability across various devices and browsers.

## USER EXPERIENCE
Users will begin on the landing page, where they can register or log in. Once logged in, they will access their dashboard to upload images. The credit system will be transparent, displaying current balance and conversion costs. After conversions, users can easily navigate to their gallery to view results. The pricing page will provide a clear overview of credit options, ensuring a smooth purchasing experience. The minimalist design will enhance usability, making interactions intuitive and straightforward.