Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app that simulates a device unlocking mechanism, allowing users to input their device information and trigger a simulated company lock. The app will detect the device's phone number and present a simulated company lock interface, including a button to remove the simulated lock. Users will be charged a deposit for a key that can unlock multiple devices on the same network.

## CORE FEATURES
1. **Device Detection**: Automatically detect the device's phone number and display the corresponding company lock status.
2. **Simulated Lock Screen**: Present a visual representation of a company lock on the user's device.
3. **Unlock Button**: A prominent button that initiates the simulated unlocking process with hacking effects.
4. **Payment Integration**: Secure payment processing for a deposit fee to generate an unlock key for multiple devices.
5. **User Account Management**: Allow users to create accounts to manage their unlock keys and payment history.
6. **Notifications**: Inform users of the status of their unlock requests and payment confirmations.

## 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-page layout with a hero section at the top, followed by the device detection area, simulated lock screen, unlock button, payment section, and user account management at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux Toolkit for global state management.

## IMPLEMENTATION STEPS
1. **Set up the React App**: Initialize a new React application with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and other necessary libraries (shadcn/ui, Redux Toolkit).
3. **Create Components**: 
   - Develop the Hero component for initial user engagement.
   - Create the Device Detection component to capture and display device information.
   - Implement the Simulated Lock Screen and Unlock Button components.
   - Build the Payment Integration component to handle deposit transactions.
   - Construct the User Account Management interface.
4. **Integrate State Management**: Use Redux Toolkit to manage user data and unlock keys.
5. **Design the UI**: Apply Tailwind CSS for styling and implement the specified design specifications.
6. **Testing**: Conduct thorough testing for functionality, performance, and user experience across various devices and browsers.

## USER EXPERIENCE
Users will land on a clean and engaging interface with a clear call-to-action. They will input their device information, see a simulated lock, and have the option to unlock their device by completing a payment. Notifications will guide them through the unlocking process, ensuring a smooth and intuitive experience. The minimalist design will focus on usability, making it easy for users to navigate and complete their tasks efficiently.