Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate the process of sending virtual currency (Robux) to users. The application will allow users to input a username and send a fictional amount of Robux. It focuses on a clean, minimalist design to provide a straightforward user experience.

## CORE FEATURES
1. **User Input Panel**: A simple form where users can enter the recipient's username and the amount of Robux to send.
2. **Send Robux Simulation**: A button that triggers the simulated sending of Robux, providing feedback to the user.
3. **Transaction Feedback**: Notifications that confirm the successful sending of Robux or display error messages for invalid inputs.
4. **History Log**: A section that displays recent transactions for users to keep track of their simulated activities.
5. **Responsive Design**: Optimized for both desktop and mobile views to ensure accessibility across 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 consists of a header with the app title, followed by the user input panel centrally placed on the page, a feedback area below the input, and a history log section at the bottom.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**:
   - Develop a `UserInputPanel` component for user inputs.
   - Create a `FeedbackNotification` component for displaying transaction status.
   - Implement a `TransactionHistory` component to log simulated transactions.
4. **Set Up Routing**: If necessary, configure routing with React Router (though this may be a single-page app).
5. **Implement State Management**: Use React's state hooks to manage the input values and transaction history.
6. **Style Components**: Apply Tailwind CSS classes to style components according to the design specifications.
7. **Test Application**: Ensure all components function as expected and are responsive across various devices.

## USER EXPERIENCE
Users will interact with the application by entering a username and an amount of Robux in the input panel. Upon clicking the send button, a notification will confirm the transaction or alert the user if there is an error. The transaction history will update to reflect recent activities, allowing users to see their simulated transactions. The minimalist design ensures users can navigate the application easily without distractions.