Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive web application for Lumé Telehealth, a doctor-led Australian telehealth clinic. The application aims to provide a premium, mobile-first experience that allows users to easily book consultations, access services, and navigate their health journey through a clean and minimal interface.

## CORE FEATURES
1. **Home Page**: A welcoming hero section with a strong call-to-action (CTA) for booking consultations, showcasing quick access to core services.
2. **Services Overview**: A detailed overview of available services, presented with clean cards that highlight key features and benefits.
3. **Booking Flow**: A streamlined booking system that guides users through selecting appointment types, available time slots, and entering necessary details.
4. **Patient Registration**: An intuitive registration and intake form designed to capture essential patient information while providing a smooth user experience.
5. **New Patient Journey**: An interactive, scroll-scrubbed visualization that guides new patients through the process of engaging with Lumé Telehealth.
6. **Testimonials & Trust Indicators**: A section dedicated to showcasing patient testimonials and trust metrics to enhance credibility and foster trust in the service.

## 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 sticky navigation bar, a hero section, followed by a grid of service cards, patient journey visualization, testimonials, and a final CTA section.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Vite with TypeScript. Install Tailwind CSS and configure it in the project.
2. **Create Core Components**:
   - Develop the **Header** component with sticky navigation links.
   - Design the **Hero** component featuring the main message and booking CTA.
   - Implement the **ServicesOverview** component to display service cards using Tailwind for styling.
3. **Implement Booking Flow**:
   - Build the **BookingFlow** component to handle appointment selection and user input.
   - Create the **RegistrationForm** component for patient intake, ensuring accessibility.
4. **Develop Interactive Features**:
   - Create the **NewPatientJourney** component with scroll-scrubbed animations to guide users through the patient journey.
   - Add the **Testimonials** section with a grid layout for displaying patient feedback.
5. **Enhance User Experience**:
   - Implement responsive design practices to ensure usability across devices.
   - Incorporate smooth scroll and transitions using Framer Motion for a polished feel.
6. **Testing and Quality Assurance**:
   - Conduct thorough testing across different devices and browsers.
   - Optimize performance by using hooks to manage state and animations efficiently.

## USER EXPERIENCE
Users will land on a welcoming home page featuring a compelling hero section that encourages them to book a consultation. They can easily navigate through various services offered, view testimonials, and understand the patient journey through interactive visuals. The booking flow is designed to be straightforward, ensuring that patients can register and book appointments with minimal friction. The overall experience is refined, focusing on clarity, ease of use, and aesthetic appeal, aligning with the premium, minimalist vision of Lumé Telehealth.
## NEW FEATURE PROMPT: Liquid Glass Component Set for Lumé Telehealth

### Feature Overview
To enhance the user interface of the Lumé Telehealth application, we are introducing a "Liquid Glass" component set. This feature will provide a visually engaging backdrop and interactive elements that align with the existing minimalist design ethos. The Liquid Glass components will integrate seamlessly into the current application, elevating the aesthetic while maintaining user experience.

### Components to be Developed
1. **Nav Bar**: A liquid glass-styled navigation bar that remains consistent with the sticky navigation paradigm already implemented. The navbar will feature background styles of `bg-white/10` to `bg-white/20`, with rounded edges and a backdrop blur effect to create depth and elegance.

2. **Toggle Switch**: An interactive toggle switch component with a shimmering cursor effect on hover. This will allow users to switch between light and dark modes easily, maintaining consistency with the existing UI's white and dark mode support.

3. **Feature Card**: A card-style component with iridescent gradient borders and shadow effects that will be used to highlight specific services or features on the Services Overview page. The hover state will include a scale effect (scale-105) for a dynamic feel.

4. **Tab Menu**: A tabbed navigation component that will introduce an engaging way to switch between different sections of the patient journey or service details, enhancing the usability of the New Patient Journey section.

### Design Specifications
- **Visual Style**: All components will utilize a minimalist approach, featuring a clean and simple design with ample white space. The components will incorporate the Inter font with a spacing of -6 for consistency with existing text.
- **Micro-Interactions**: Components will include a ripple click effect for buttons and switches, along with a shimmer cursor effect to enhance user engagement and provide feedback on interactions.
- **Modes**: Support for both light and dark themes will be built in, ensuring accessibility and visual appeal across different user preferences.

### Technical Requirements
- **Framework**: The Liquid Glass component set will be built using React and TypeScript, consistent with the existing tech stack.
- **Styling**: Tailwind CSS will be utilized for styling, ensuring that all components adhere to the existing design patterns and responsiveness principles.
- **UI Components**: Components will be designed using the shadcn/ui library for consistency with existing UI elements.

### Integration Points
- **Home Page**: The new Nav Bar will replace the existing navigation component, providing a modern touch while maintaining functionality.
- **Services Overview**: The Feature Card will be added to the existing service cards, allowing for additional information or highlights on specific offerings.
- **New Patient Journey**: The Tab Menu will be integrated into the New Patient Journey component, enhancing the navigation experience for users as they scroll through their health journey.

### Implementation Steps
1. **Develop Liquid Glass Components**: Create the Nav Bar, Toggle Switch, Feature Card, and Tab Menu adhering to the outlined design specifications and interactions.
2. **Integrate into Existing UI**: Replace the existing Nav Bar with the Liquid Glass variant and enhance the Services Overview and New Patient Journey sections with the new components.
3. **Test Micro-Interactions**: Ensure that all micro-interactions (scale effects, ripple clicks, shimmer effects) function properly and enhance user experience without detracting from the application’s clarity and usability.
4. **Quality Assurance**: Conduct thorough testing across devices to ensure that the new components blend seamlessly with the existing application and respond appropriately in both light and dark modes.

### Expected Outcome
The addition of the Liquid Glass component set will elevate the aesthetic and interactive quality of the Lumé Telehealth application. Users will enjoy a more visually engaging experience that feels intuitive and cohesive with the overall design ethos of the application, contributing to a premium telehealth service experience.

## New Feature Overview
Integrate a real-time chat component within the Lumé Telehealth application to enhance patient engagement and communication. This feature will allow users to receive instant updates on messages related to their consultations or inquiries, significantly improving the overall user experience.

## Features
1. **Real-Time Messaging**: Implement a chat component that subscribes to changes in the messages table, allowing users to receive updates instantly as new messages are inserted.
2. **Smooth UI Transitions**: New messages will appear with a smooth fade-in effect, ensuring a refined and polished user experience consistent with the application’s minimalist design.
3. **Mobile Optimization**: The chat component will support mobile views, featuring a fixed input bar at the bottom of the screen, allowing users to send messages seamlessly while browsing on their devices.

## Design
- **UI Components**: Utilize existing UI components from the shadcn/ui library to maintain visual consistency with the application. The chat component will include:
  - A scrollable message area to display chat history.
  - A fixed input bar for users to type and send messages.
- **Color Palette**: The chat background will follow the existing light theme, using ample white space, with dark text for readability.
- **Typography**: Continue to use Inter from Google Fonts for all text within the chat interface, maintaining a uniform typography style across the application.
- **Component Placement**: The chat component will be accessible from the main navigation bar, positioned prominently on the home page and services overview, allowing users to initiate conversations easily.

## Technical Requirements
- **Framework**: Extend the existing React with TypeScript application.
- **Real-Time Updates**: Use a websocket or a polling mechanism to subscribe to the messages table in the backend, ensuring real-time data fetching.
- **State Management**: Leverage the existing React Context API for managing the chat state, allowing for global access to chat messages.
- **Styling**: Continue using Tailwind CSS for styling the chat component, ensuring that it integrates seamlessly with the existing design patterns.

## Implementation Steps
1. **Create Chat Component**: Develop a new `ChatComponent` that includes:
   - A message display area for showing past messages.
   - An input field at the bottom for typing new messages, styled to match existing input fields.
   - Implement functionality to handle message submission and display.
2. **Integrate Real-Time Functionality**:
   - Set up a subscription to the messages table in the backend to listen for new messages.
   - Update the component state with new messages and trigger the smooth fade-in animation for new entries.
3. **Responsive Design**: Ensure the chat component is fully responsive, with a fixed input bar that adjusts correctly on mobile devices.
4. **Testing**: Conduct thorough testing to ensure that real-time updates work flawlessly across various devices and that the chat component maintains visual consistency with the rest of the application.

## User Experience
Users will now have access to a real-time chat feature that enhances their interaction with Lumé Telehealth. The chat component will be easily accessible from the main navigation, allowing users to engage with staff or other patients effortlessly. The smooth fade-in of new messages will ensure that the chat experience remains fluid and cohesive, aligning perfectly with the overall premium, minimalist vision of the application.

This feature will not only improve communication but also foster a sense of community and support among users, enhancing their overall health journey with Lumé Telehealth.