Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based Human-Machine Interface (HMI) for a 2030 autonomous vehicle featuring the **CUPRA SENSES** system. It aims to provide users with an intuitive and immersive experience as they interact with the vehicle’s autonomous capabilities, allowing them to select travel experiences, adjust settings, and receive feedback seamlessly throughout their journey.

## CORE FEATURES
1. **Home/Map Screen**: A large map display showing the current location, destination, and estimated time of arrival (ETA) with quick access to CUPRA SENSES activation and settings.
2. **SENSES Activation Flow**: Users can activate the CUPRA SENSES through suggestions, manual activation, or voice commands, with a minimalistic trigger interface.
3. **Experience Selection Hub**: Users choose their desired travel experience (Relaxed, Focused, Energizing) with additional options for automatic or personalized moods.
4. **Active Experience Management**: A central screen that displays the current mode, intensity controls, and quick settings for light, aroma, haptics, and sound during the journey.
5. **Route Context Overlays**: Real-time notifications regarding route conditions, such as curves or traffic, adjusting the experience accordingly.
6. **User Profiles and Multi-User Support**: Ability to manage different user profiles, each with personalized preferences and limited controls for rear-seat passengers.

## DESIGN SPECIFICATIONS
- **Visual Style**: Premium dark aesthetic with carbon and black backgrounds, accented with controlled copper and reddish tones. UI elements should be clean, tense, and performance-oriented with thin lines and subtle diagonals.
- **Color Mode**: A light theme with dark text on light backgrounds to enhance readability and reduce glare.
- **Layout**: A main central screen (1920x720) with a minimalistic wireframe layout, focusing on essential information and controls. Optional screens for a status cluster (1080x1920) and rear seat displays (1920x1080) should maintain consistent aesthetics and usability.
- **Typography**: Use condensed, impactful fonts for headings and technical microcopy for instructions, ensuring a hierarchy that guides the user’s attention effectively.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust application structure and type safety.
- **Styling**: Tailwind CSS for flexible and responsive styling.
- **UI Components**: Utilize shadcn/ui for pre-designed UI components that align with the desired aesthetics.
- **State Management**: Consider using Redux or Context API for managing user state and preferences effectively.

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Initialize a new project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project.
3. **Create Layout Components**: Develop main layout components for the Home/Map screen, activation triggers, experience hub, and active experience management screens.
4. **Implement State Management**: Integrate Redux or Context API to manage user states, preferences, and session data.
5. **Design Wireframes**: Create wireframes for each screen, ensuring the layout adheres to the visual specifications outlined.
6. **Develop Responsive Design**: Ensure all components are responsive and adapt to different screen sizes and orientations.

## USER EXPERIENCE
Key interactions involve a streamlined two-touch maximum for activating or adjusting settings, emphasizing voice commands for hands-free operation. The application should provide contextual feedback throughout the journey, such as real-time adjustments to the SENSES experience based on route conditions. Users can easily switch between modes, manage their preferences, and receive quick summaries upon arrival at their destination. Each interaction should feel premium and intuitive, keeping user engagement at the forefront.