Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to allow users to easily update product images within their catalog. The application will provide a streamlined interface for managing product images, ensuring a user-friendly experience focused on efficiency and simplicity.

## CORE FEATURES
1. **User Authentication**: Secure login feature that allows users to create accounts and manage their product catalog.
2. **Product Image Management**: An intuitive interface for uploading, replacing, and deleting product images in the catalog.
3. **Preview Functionality**: Users can preview images before saving changes, ensuring the correct images are uploaded.
4. **Responsive Design**: A mobile-friendly layout that adapts seamlessly to different screen sizes for ease of access on any device.
5. **Image Optimization**: Automatic image optimization to ensure fast loading times while maintaining quality.
6. **User Support**: Access to help documentation and support for troubleshooting image management issues.

## 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 sidebar for navigation, a hero section for product image uploads, and a central content area displaying the product image gallery. The layout will be fluid, ensuring a seamless user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing global state related to product images

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App and install Tailwind CSS and shadcn/ui.
2. **Create Authentication Flow**: Implement user registration and login functionality with form validation.
3. **Develop Image Management Features**: Create components for uploading, replacing, and deleting product images, integrating previews.
4. **Implement Responsive Design**: Use Tailwind CSS to ensure the application looks good on all device sizes.
5. **Optimize Images**: Integrate a library for image optimization to enhance performance.
6. **Build the User Support Section**: Create a help section that includes documentation and FAQs.

## USER EXPERIENCE
The user experience will focus on simplicity and ease of use. Users will be able to log in to their account, navigate to the image management section through a sidebar, and easily upload or replace images with a few clicks. Preview functionality will allow users to see changes before they are finalized, ensuring satisfaction with their selections. The overall design will be clean and uncluttered, allowing users to focus on managing their product images efficiently.