Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to extract card images from herolabdeck.com and compile them into a printable PDF format, similar to the interface found on mtgprint.net. It will provide users with a simple and intuitive way to manage their card collections and create customized printouts.

## CORE FEATURES
1. **Image Upload**: Users can upload images of cards from their collection directly into the app.
2. **Card Extraction**: The application utilizes image processing to extract card details and images automatically from the uploaded images.
3. **PDF Compilation**: Users can compile extracted cards into a single PDF document that is formatted for printing.
4. **Preview Functionality**: A live preview feature allows users to see how their compiled PDF will look before finalizing.
5. **Download Option**: After compiling, users can download the PDF file to their device for printing.
6. **User Authentication**: Users can create accounts to save their uploaded images and previously compiled PDFs for future access.

## 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 clean header, a central section for image uploads and previews, and a footer for links and contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create Components**: Build core components such as Header, ImageUploader, PDFPreview, and Footer using functional components.
3. **Implement Image Upload**: Use an input element to allow users to upload images and handle the file selection in the ImageUploader component.
4. **Develop Card Extraction Logic**: Integrate a card extraction library or API that processes uploaded images and extracts relevant card data.
5. **PDF Generation**: Utilize a library like jsPDF to create a PDF from the extracted card data and images.
6. **User Authentication**: Implement a simple authentication system allowing users to sign up, log in, and manage their card uploads and compiled PDFs.
7. **Add Styling**: Apply Tailwind CSS classes to create a clean, minimalist design that adheres to the specified design requirements.
8. **Test Responsiveness**: Ensure that the application is responsive and works well on various devices and screen sizes.

## USER EXPERIENCE
Users will interact with the application by uploading images of their cards, which are then processed to extract details. They will see a live preview of the PDF compilation before finalizing it. The intuitive layout allows for easy navigation between uploading images, viewing previews, and downloading finished PDFs, ensuring a seamless user experience.