Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a Robux gifter platform that allows users to enter their Roblox username, view their profile avatar, select an amount of Robux to send, and confirm the transaction with a visual confirmation message. The focus is on providing a simple and efficient user experience for gifting Robux while maintaining a clean and minimalist design.

## CORE FEATURES
1. **Username Input**: A field for users to enter their Roblox username, which will fetch and display their profile avatar.
2. **Avatar Display**: Once the username is submitted, the corresponding Roblox avatar will be shown to confirm the identity of the user.
3. **Robux Selection**: Users can select the desired amount of Robux they wish to gift from a dropdown list.
4. **Confirmation Message**: After selecting the Robux amount and submitting the request, a confirmation message will be displayed, stating that the Robux has been sent, accompanied by a check logo.
5. **Responsive Design**: The application will be fully responsive, ensuring a smooth experience across various 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 will feature a centered form on the page, with the username input field at the top, followed by the avatar display, Robux selection dropdown, and a final submit button. The confirmation message will appear below the main content upon successful submission.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management using hooks

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**:
   - Build a `UsernameInput` component for the username entry.
   - Create an `AvatarDisplay` component that fetches and displays the user's avatar based on the username.
   - Develop a `RobuxSelector` component for selecting the amount of Robux to gift.
   - Implement a `ConfirmationMessage` component to show the success message after sending Robux.
4. **Implement State Management**: Use React hooks (useState, useEffect) to manage the input values and confirmation state.
5. **Style Components**: Apply Tailwind CSS to all components, ensuring adherence to the design specifications.
6. **Test Functionality**: Ensure that the avatar correctly displays based on username input and that the confirmation message appears after submission.

## USER EXPERIENCE
Users will be greeted with a simple landing page featuring an input field for their Roblox username. Upon entering their username, the application will display their avatar below the input. Users will then select the amount of Robux to send and click the submit button. After processing, a confirmation message will appear, indicating the successful transaction with a check logo, providing a clear and satisfying user interaction. The application will be responsive, allowing for seamless usage on both mobile and desktop devices.