Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application allows users to input an alphanumeric vehicle plate number (e.g., ABC-XYZ) and retrieve detailed information about the driver, including their photo, name, criminal background, and travel history on ride-sharing platforms like Uber, Cabify, and inDrive. The app will analyze the data to provide a safety rating for the driver, indicating whether they are safe, moderately risky, or highly risky.

## CORE FEATURES
1. **Plate Number Input**: An intuitive input field for users to enter the vehicle plate number.
2. **Driver Information Display**: A section that shows the driver's photo, name, and any criminal history.
3. **Travel History**: A summary of trips made by the driver on various platforms, including ratings and comments.
4. **Safety Rating**: A visual alert system that categorizes drivers into safe, moderate risk, or high risk, using color-coded indicators.
5. **Sample Data Simulation**: Two predefined vehicle plates to test: one representing a safe driver and another representing a risky driver.

## 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**: A single-column layout with a prominent hero section at the top, followed by input fields, results display, and safety rating, ensuring easy navigation and clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Local state management using React hooks.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**:
   - Develop an `InputField` component for vehicle plate number entry.
   - Create a `DriverInfo` component to display driver details.
   - Implement a `SafetyRating` component to show the risk level with color indicators.
4. **Simulate Data**: Create a mock data file with two vehicle plates (one safe, one risky) and set up the logic to display based on user input.
5. **Styling**: Utilize Tailwind CSS classes to achieve the minimalist design and apply the specified color and typography.
6. **Testing**: Conduct user testing with the provided vehicle plates to ensure functionality and user experience.

## USER EXPERIENCE
Users will arrive at a clean landing page with a prominent input field where they can enter a vehicle plate number. Upon submission, the app will display the driver's information, including a photo and any relevant history. The safety rating will be clearly visible, highlighted in color to indicate the risk level, enhancing the user’s ability to make informed decisions quickly. The overall flow is straightforward, encouraging quick interaction and easy comprehension of the displayed information.