Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
This web application provides a user-friendly platform for converting personal photos into customized paint-by-numbers artworks. Tailored for Indian users, it utilizes a credit-based monetization model, allowing users to seamlessly generate and download their unique artworks without the need for subscriptions.

# CORE FEATURES
1. **Photo Upload & Conversion**: Users can upload their photos (portrait, couple, family, or pet), triggering an automated process that converts the image into clean black-and-white line art suitable for paint-by-numbers kits.
   
2. **Color Mapping & Legend Generation**: The system generates a numbered color palette with 15-25 colors, including each color's unique number, name, hex value, and RGB value, which is displayed alongside the artwork.

3. **Credit-Based Monetization**: Users operate on a pay-per-credit model where each generated image costs one credit. Additional credits can be purchased, and regeneration or group images incur extra charges.

4. **User Authentication**: Users can log in using Google accounts, which automatically creates a user profile, grants initial credits, and displays remaining credits prominently within the UI.

5. **Download Options**: Users can download their artworks in PNG and PDF formats, along with a print-ready color legend sheet, optimized for A4 and A3 printing.

6. **Transaction Management**: Users can view their credit transactions, including a ledger of credits used and purchased, ensuring transparency in credit consumption.

# DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design focused on a cozy, warm, and premium art-studio aesthetic. The interface incorporates soft neutral backgrounds in cream, beige, and pastel tones with rounded card designs and gentle shadows to create a calming atmosphere.
  
- **Color Mode**: Light theme featuring dark text on light backgrounds for optimal readability and a clean appearance.

- **Layout**: The main layout consists of a single-column structure with a clear hierarchy of information, centered around the primary user actions: uploading photos, viewing previews, and managing credits. Cards for features will be spaced evenly to avoid clutter.

- **Typography**: Use a clean and readable font such as 'Inter' or 'Roboto' for body text and a bolder variant for headings. Maintain a clear hierarchy with larger font sizes for titles and slightly smaller sizes for body text.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building interactive user interfaces.
  
- **Styling**: Tailwind CSS for utility-first styling, ensuring responsive and easily maintainable designs.

- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.

- **State Management**: Implement React Context or Zustand for global state management to handle user authentication, credit tracking, and image processing states.

# IMPLEMENTATION STEPS
1. **Set Up React Project**: Initialize the project using Create React App with TypeScript.
   
2. **Integrate Tailwind CSS**: Configure Tailwind CSS with PostCSS to enable utility classes throughout the project.
   
3. **Develop Authentication Module**: Implement Google login using Firebase Authentication to manage user accounts and credits.

4. **Build Image Upload Component**: Create a component for photo uploads with file validation (max 5MB) and auto-resizing functionality.

5. **Implement Image Processing Logic**: Develop the backend service to handle image conversion, ensuring the output meets core generation requirements (clean line art, closed shapes, etc.).

6. **Create Credit System**: Design and implement a credit management system, including purchasing options and transaction logging using Razorpay API.

7. **Design UI Components**: Use Tailwind CSS to style components like the landing page, credit display, image preview, and download buttons, ensuring a consistent minimalist aesthetic.

8. **Test User Flows**: Conduct thorough testing of all user interactions, including uploading images, credit deductions, and download processes to identify and fix any issues.

# USER EXPERIENCE
The user journey begins on the landing page, where users are greeted with a warm, inviting design that clearly explains the product's benefits. Upon clicking “Try Free,” users are redirected to the Google login where their account is created and a free credit is granted. After successfully uploading an image, users will see a credit check, and if sufficient credits are available, the system generates a preview of the paint-by-numbers artwork. Users can then download their creations, and if credits are low, gentle prompts will encourage them to purchase additional credits, maintaining a smooth and transparent user experience.