Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application for a medical login page, featuring an animated interaction where a doctor and patient interact as they enter the login screen. The main purpose is to provide a user-friendly and visually engaging entry point for users accessing the medical app, enhancing their experience through creative animations.

## CORE FEATURES
1. **Animated Entrance**: The login page will feature an animation where a doctor "pulls" the page into view, followed by a patient, creating an engaging introduction to the app.
2. **User Authentication**: Secure login functionality that allows users to access their medical records and appointments.
3. **Responsive Design**: The layout will be fully responsive, ensuring usability across all devices—desktops, tablets, and smartphones.
4. **Error Handling**: Clear and concise error messages for invalid logins or connection issues to improve user experience.
5. **Forgot Password Feature**: An option for users to recover their password via email, providing a seamless experience for returning users.
6. **User-Friendly Interface**: Intuitive design elements that guide the user through the login process with minimal distractions.

## 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 centered login form with ample padding, a logo at the top, and engaging animations integrated into the background to draw attention.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Components**: Develop a `Login` component that includes the login form, animation logic, and error handling.
4. **Implement Animation**: Use CSS animations or a library like Framer Motion to create the doctor and patient animation on page load.
5. **Add Authentication Logic**: Set up user authentication using a mock API or integrate with a backend service.
6. **Style Components**: Apply Tailwind CSS classes to create a minimalist aesthetic, ensuring responsiveness across devices.
7. **Error Handling**: Implement state management to handle authentication errors and display appropriate messages.
8. **Testing**: Test the application for usability, responsiveness, and functionality across various devices and browsers.

## USER EXPERIENCE
The login process will be smooth and engaging, starting with the animated entrance that captivates users. They will see clear input fields for their credentials, with helpful placeholders and labels. Upon attempting to log in, any errors will prompt immediate feedback, guiding them to correct their input. The minimalist design will ensure that users are not overwhelmed, allowing for a straightforward login experience. The application will be responsive, adapting beautifully to any screen size, ensuring accessibility for all users.