Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
The "Pasaporte Kia" is a mobile-first web application designed to certify the life and future resale value of Kia vehicles. It provides users with a streamlined experience to access their vehicle's official history and battery health, ensuring transparency and trust in the Kia brand. The application offers a simple, engaging interface that allows users to understand their car's value in just three taps.

# CORE FEATURES
1. **Dashboard (Inicio)**: Displays the vehicle image, name, battery percentage, and a highlighted card showing the guaranteed value, encouraging users to explore further.
2. **Pasaporte Feature**: Main screen with a circular status indicator and key metrics about the vehicle's value, battery health, and remaining warranty, alongside actionable checklists for maintaining vehicle status.
3. **Guaranteed Value Details**: A visual graph comparing the guaranteed value with market estimates, including an interactive slider to simulate changes in mileage and its impact on the vehicle's value.
4. **Battery Health Overview**: Detailed insights into the vehicle's battery state of health, historical data, and compatibility verification with Kia Connect.
5. **Verified History Timeline**: A chronological timeline of significant events related to the vehicle, with a focus on verified updates and maintenance, enhancing transparency.
6. **Transfer Passport Flow**: A simple 3-step process for transferring the vehicle's warranty and history to a new owner, complete with QR code generation for easy sharing.

# 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 application will be structured with a mobile-first approach, featuring a prominent header with vehicle imagery, a tab bar for navigation, and organized sections for each feature to ensure clarity and accessibility.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Router for navigation and Framer Motion for animations.

# IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize the React project with TypeScript, install Tailwind CSS, shadcn/ui, and other necessary dependencies.
2. **Design Layout**: Create the main layout structure, including header, tab navigation, and page sections for each feature.
3. **Implement Features**: 
   - Build the Dashboard with vehicle data and quick action buttons.
   - Develop the Pasaporte feature screen with status indicators and metrics cards.
   - Create the Guaranteed Value detail screen with graphs and sliders.
   - Set up the Battery Health Overview and Verified History Timeline screens.
   - Create the Transfer Passport flow with QR code functionality.
4. **Add Routing**: Use React Router to manage navigation between screens seamlessly.
5. **Integrate Animations**: Utilize Framer Motion for smooth transitions and visual effects.
6. **Test Responsiveness**: Ensure the application is fully responsive and functional on both mobile and desktop devices.

# USER EXPERIENCE
Users will interact with the application through a clean interface designed for quick access to important vehicle information. Key interactions will include tapping on the dashboard to view detailed vehicle metrics, swiping through the feature tabs, and engaging with the interactive elements like sliders to simulate vehicle value based on mileage. The overall focus will be on clarity, ease of use, and ensuring that users can effortlessly access the information they need about their Kia vehicle.