Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to allow users to compare banking products by inputting links to various financial product pages or PDFs. It will analyze the features of each product, summarize them in an easily understandable manner, and provide insights on which product is better suited for the user’s needs, making financial decisions accessible for non-experts.

## CORE FEATURES
1. **Product Comparison**: Users can input multiple URLs or upload screenshots of banking products. The app will extract key features and compare them side-by-side.
2. **User-Friendly Explanations**: The application will provide clear, jargon-free summaries of each product’s features and benefits.
3. **Save and Share Comparisons**: Users can save their comparisons and share them with others via email or social media.
4. **Bookmarking Functionality**: Allows users to bookmark their favorite products for quick access.
5. **Responsive Design**: The app will be fully responsive, ensuring a seamless experience across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design focusing on a clean, simple layout with ample white space to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds to maintain clarity and reduce eye strain.
- **Layout**: A two-column layout for product comparisons, with a sidebar for inputting links/screenshots and the main area displaying the comparison results. Navigation will be straightforward, with a header for branding and utility.
- **Typography**: Use a modern sans-serif font (e.g., Roboto or Open Sans) for body text and headers, ensuring a clear hierarchy with larger, bolder fonts for titles and subtitles.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for rapid styling and responsive design capabilities.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable UI components.
- **State Management**: Use React’s Context API for state management to handle user inputs and comparison data efficiently.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize the React application with TypeScript and Tailwind CSS.
2. **Design Layout**: Create the main layout structure, including the header, sidebar for inputs, and main content area for displaying comparisons.
3. **Build Input Components**: Develop components for users to input URLs and upload screenshots. Implement validation for inputs.
4. **Implement Comparison Logic**: Write functions to fetch and extract data from provided URLs and compare the features of banking products.
5. **Create Summary Component**: Develop a component that summarizes the comparison results with user-friendly explanations.
6. **Add Bookmarking Feature**: Implement functionality to save and retrieve bookmarked products.
7. **Ensure Responsiveness**: Test and refine the app’s design for various devices and screen sizes.

## USER EXPERIENCE
Upon entering the application, users will be greeted by a simple interface where they can input links or upload screenshots of banking products. After submission, they will see a comparison table that highlights the key features of each product. Clear, concise explanations will accompany the comparisons, allowing users to understand their options without needing technical financial knowledge. Users can bookmark products they like, making it easy to revisit them later, and share their findings effortlessly with friends or family. The responsive design ensures that the application is accessible on both desktop and mobile devices, providing a consistent experience across all platforms.