Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves developing a web application that compares two healthcare websites, asktia.com and athenahealth.com, and generates a unique theme for a client website. The application will feature a dashboard for backend management and will focus on delivering a clean, minimalist user experience while providing essential comparison features.

## CORE FEATURES
1. **Website Comparison Tool**: A feature that allows users to input URLs and receive comparative analytics on design, functionality, and user engagement metrics.
2. **Theme Generator**: An interactive tool that helps users create a unique theme based on the comparisons, allowing customization of colors, fonts, and layout styles.
3. **User Authentication**: Secure sign-up and login functionality to manage user preferences and saved themes.
4. **Dashboard**: A comprehensive admin panel that displays user data, saved themes, and analytics from previous comparisons.
5. **Feedback System**: Users can provide feedback on generated themes, helping to refine and improve the theme generation process.
6. **Responsive Design**: Ensure the application is fully functional across all devices, providing a seamless user experience.

## 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 consist of a header, a hero section for the comparison tool, a sidebar for navigation, and a main content area for the dashboard with cards for each feature.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (as needed)

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Build the main layout including header, sidebar, and content area using Tailwind CSS for styling.
3. **Develop Core Features**: 
   - Implement the website comparison tool functionality, allowing users to input and analyze URLs.
   - Create the theme generator interface with options for customization.
   - Set up user authentication with a secure login and registration process.
   - Build the dashboard to display user data and analytics.
4. **Style Components**: Apply the minimalist design specifications with Tailwind CSS, ensuring all components meet the visual style.
5. **Implement Feedback System**: Add the ability for users to submit feedback on themes and store this data.
6. **Testing and Optimization**: Test the application for responsiveness and usability across devices, making necessary adjustments.

## USER EXPERIENCE
Users will interact with a straightforward interface, starting from the hero section where they can input website URLs for comparison. Once the analysis is complete, they will be directed to the theme generator, where they can customize their theme preferences. The dashboard will provide a centralized area for managing their themes and viewing past comparisons. The responsive design ensures that all features are accessible on any device, enhancing the overall user experience.