Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web app designed to compare banking products by allowing users to input links to various bank websites. It will analyze the features of different financial products, such as high-yield savings accounts, and present a clear, understandable comparison to help users make informed decisions without requiring technical financial knowledge.

## CORE FEATURES
1. **Product Comparison Input**: Users can enter multiple URLs of banking products to initiate a comparison.
2. **Automated Feature Extraction**: The app scrapes essential features (e.g., interest rates, fees, terms) from the provided links to generate a detailed comparison.
3. **Plain Language Explanations**: The app translates complex financial jargon into simple, digestible language for users.
4. **Side-by-Side Comparison View**: A visual presentation that displays the extracted features of each product side-by-side for easy comparison.
5. **User Ratings and Reviews**: Users can leave feedback on the accuracy and helpfulness of the comparisons, which helps improve the service.
6. **Save and Share Comparisons**: Users can save their comparisons for later reference or share them via links or social media.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and legibility.
- **Layout**: A single-column layout for mobile responsiveness, with headers for each section (Input, Comparison, Explanation) and clear call-to-action buttons.
- **Typography**: Use a modern sans-serif font like "Roboto" for body text and "Montserrat" for headings to maintain a clean and professional look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and scalable application.
- **Styling**: Tailwind CSS for utility-first styling that allows for rapid design changes while maintaining consistency.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design approach.
- **State Management**: Implement React Context API or Zustand for managing global state across the application.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and Tailwind CSS.
2. **Create Basic Components**: Develop components for input forms, comparison display, and explanations.
3. **Implement Scraping Logic**: Use a library (e.g., Axios or Fetch API) to retrieve data from user-provided URLs and extract product features.
4. **Design Layout**: Apply Tailwind CSS classes to create a clean, responsive layout based on the design specifications.
5. **Implement State Management**: Set up global state to manage the input data, comparison results, and user feedback.
6. **Add User Interaction Features**: Integrate functionality for ratings, saving comparisons, and sharing options.
7. **Testing**: Conduct user testing to ensure the app is intuitive and the comparisons are accurate.
8. **Deployment**: Deploy the app using a platform like Vercel or Netlify for easy access.

## USER EXPERIENCE
Users will interact with the app by entering URLs into a simple input form. Once they submit the links, they will see a loading state while the app scrapes and processes the data. After the comparison is generated, users can view the results in a side-by-side format, accompanied by plain language explanations making it easy to understand. They can rate their experience and save or share their comparisons seamlessly, ensuring a smooth and engaging experience tailored to non-expert users.