Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Roblux Plus is a web application designed as a highly realistic Roblox-style dashboard that facilitates the transfer of Robux among users. The main purpose of the application is to simulate the process of transferring Robux, providing users with a professional gaming platform experience while ensuring that no sensitive information is collected.

## CORE FEATURES
1. **User Authentication**: Secure login system that verifies the identity of users before allowing access to the dashboard.
2. **Robux Balance Display**: A prominent display of the user's current Robux balance, updated in real time.
3. **Transfer Amount Input**: A field for users to input the amount of Robux they wish to transfer, complete with validation checks.
4. **Username Verification**: A dedicated field for users to input the recipient's username, ensuring accurate transaction processing.
5. **Transfer Status Tracker**: A visual tracker that updates users on the status of their transfer, with system messages indicating each stage of the process.
6. **Transaction Simulation**: A feature that simulates the transfer process using fictional data, ensuring that users understand it's a simulation.

## 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 header with the application title, a central area displaying the balance and transfer forms, and a footer with contact information. The interface will be organized into clearly defined sections for easy navigation.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using create-react-app.
2. **Install Dependencies**: Install Tailwind CSS and configure it according to the documentation.
3. **Create Components**:
   - Build a Header component for navigation.
   - Create a BalanceDisplay component to show the user's current Robux balance.
   - Develop a TransferForm component that includes input fields for the transfer amount and recipient username.
   - Implement a TransferStatus component to track and display the status messages.
4. **Add State Management**: Use the React Context API to manage user balance and transfer status across components.
5. **Simulate Transactions**: Develop a function to handle the transfer logic, including simulated delays and status updates.
6. **Style Components**: Apply Tailwind CSS classes to achieve the desired minimalist aesthetic, ensuring responsiveness across devices.
7. **Test Functionality**: Conduct thorough testing to ensure all features work as expected, including edge cases for transfers.

## USER EXPERIENCE
Key user interactions will include logging in to the application, viewing their current Robux balance, inputting transfer details, and receiving feedback through the transfer status tracker. Users will appreciate the clean design and intuitive interface, which allows them to navigate the application with ease and understand that transactions are simulated without any real-world implications. The application will provide a seamless experience, enhancing user engagement and satisfaction.