Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application allows users to simulate sending Robux, providing a customizable interface where they can specify the amount of Robux they have, the amount they wish to send, and the recipient's username. It focuses on a clean and user-friendly experience, ideal for demonstration or entertainment purposes.

## CORE FEATURES
1. **User Input Form**: A straightforward form where users can enter their Robux balance, specify the amount they wish to send, and input the recipient's username.
2. **Robux Calculation**: Real-time feedback on the balance after the simulated transaction, ensuring users can see the effect of their actions.
3. **Transaction History**: A simple log that displays previous simulated transactions, maintaining a record of user activities during the session.
4. **Customizable Settings**: Options to adjust the display settings, such as font size and color themes, enhancing user experience.
5. **Responsive Design**: The application will adapt seamlessly to different screen sizes, ensuring usability on both desktop and mobile 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 layout will consist of a centered input form at the top, followed by a transaction history section below. The buttons will be prominently displayed, with ample spacing to enhance readability and interaction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management (useState and useEffect)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui library for styling and UI components.
3. **Create Components**: 
   - Build a `RobuxForm` component for user input.
   - Create a `TransactionHistory` component to log transactions.
   - Develop a `FeedbackDisplay` component to show real-time balance updates.
4. **Implement State Management**: Use React's useState to manage user inputs and transaction history.
5. **Style the Application**: Apply Tailwind CSS classes to achieve the minimalist design, using the specified primary color and typography.
6. **Test Responsiveness**: Ensure the application works well on different devices by testing various screen sizes.

## USER EXPERIENCE
Users will interact with a simple form where they can input their Robux balance, the amount to send, and the recipient's username. Upon submission, the application will instantly update their balance and display a message confirming the transaction. Users can view their transaction history below the form, providing a comprehensive overview of their simulated activity. The minimalist design ensures a smooth and enjoyable experience, focusing on clarity and ease of use.