Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that simulates a simplified Roblox menu interface. Users can view a balance of 10 million Robux and have the capability to send Robux to any Roblox user. The app focuses on a clean, intuitive design that enhances user interaction without the need for gaming functionalities.

## CORE FEATURES
1. **Robux Balance Display**: A clear display showing the user's balance of 10 million Robux.
2. **User Search Functionality**: A search bar to find and select any Roblox user to whom the Robux can be sent.
3. **Send Robux Feature**: An input field to specify the amount of Robux to send, with validation to ensure it does not exceed the balance.
4. **Transaction History**: A simple list displaying recent transactions, including the recipient's username and the amount sent.
5. **Responsive Design**: The app will be fully responsive, ensuring usability across different devices.

## 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 consists of a header displaying the Robux balance, a central search bar for user input, and a transaction history section below, all arranged in a single-column format for easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React Context API for managing the Robux balance and transaction history.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**:
   - Create a `Header` component to display the Robux balance.
   - Develop a `SearchBar` component for user input.
   - Implement a `SendRobux` component with an input field for entering the amount.
   - Build a `TransactionHistory` component to list recent transactions.
3. **Manage State**: Set up React Context to manage the balance of Robux and transaction history across components.
4. **Implement Functionality**:
   - Write logic to handle sending Robux, updating the balance, and storing transactions.
   - Ensure input validation to prevent sending more Robux than available.
5. **Style Components**: Apply Tailwind CSS classes according to the design specifications, ensuring a minimalist aesthetic.
6. **Responsive Design**: Test the application on various devices and screen sizes to ensure usability.

## USER EXPERIENCE
Users will land on a straightforward interface displaying their Robux balance prominently at the top. The search bar will allow them to easily find other Roblox users. Upon entering an amount in the send field and clicking the send button, users will receive a confirmation of the transaction, and the history will update accordingly. The design will ensure a smooth and engaging experience, encouraging users to interact without distraction.