Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Robux Sender Simulation is an interactive web application designed to mimic sending Robux in a fun and engaging way, appealing to Roblox users. It features a sleek gaming UI with a dark charcoal background, vibrant green accents, and smooth animations to enhance user experience.

## CORE FEATURES
1. **Username Input**: A text field allowing users to enter the recipient's Roblox username for the simulation.
2. **Robux Amount Selector**: A grid of buttons displaying common Robux amounts (400, 800, 1700, 4500, 10000) accompanied by a custom Robux icon placeholder.
3. **Send Button**: A prominent green button labeled "Send Robux" to initiate the transfer simulation.
4. **Animated Transfer Simulation**: A multi-phase loading sequence that includes:
   - Phase 1: "Connecting to Roblox servers..." with a loading spinner.
   - Phase 2: "Verifying username [entered_name]..."
   - Phase 3: "Transferring [amount] Robux..." featuring a progress bar.
   - Phase 4: A success message indicating "Simulation Complete! [amount] Robux sent to [entered_name] successfully."
5. **Disclaimer Footer**: A clear statement at the bottom stating, "This is a frontend simulator for demonstration purposes only. No real Robux are transferred."

## 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 feature a centered form with the username input at the top, followed by the Robux amount selector, the send button, and the loading animation area, all responsive to various screen sizes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management or context API for handling state across components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install required dependencies, including Tailwind CSS and shadcn/ui components.
2. **Create Layout**: Design the main layout structure using Tailwind CSS for responsiveness, placing the input fields and buttons centrally.
3. **Implement Username Input**: Create a text input component for users to enter the Roblox username.
4. **Design Robux Amount Selector**: Create a grid of buttons for Robux amounts, each displaying the amount and a placeholder icon.
5. **Add Send Button**: Implement the "Send Robux" button, styling it with the primary color and rounded borders.
6. **Develop Animation Logic**: Use state management to handle the phases of the transfer simulation, incorporating Framer Motion for smooth transitions.
7. **Create Footer**: Add a disclaimer footer at the bottom of the application.
8. **Testing and Debugging**: Test the application for any bugs and ensure all features work as intended, especially the animations and user inputs.

## USER EXPERIENCE
The application will offer a seamless user experience where users can easily input a username, select an amount of Robux, and initiate the simulation with a clear visual feedback process. Each interaction will be accompanied by smooth animations and transitions, ensuring users feel engaged throughout their experience. The minimalist design will keep the focus on functionality while maintaining an appealing aesthetic.