Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate the distribution of Robux, the in-game currency for Roblox. Users will be able to select various nominal amounts of Robux to distribute, up to a total of 500,000 Robux. The application will also include a feature for entering a username to send the Robux, enhancing user engagement and interaction.

## CORE FEATURES
1. **Robux Selection**: Users can choose from a variety of nominal amounts (e.g., 100, 500, 1000 Robux) to distribute.
2. **Total Robux Management**: A feature to manage and display a total amount of 500,000 Robux available for distribution.
3. **Username Input**: A dedicated input field for users to enter the Roblox username to whom the Robux will be sent.
4. **Distribution Confirmation**: A confirmation dialog that summarizes the transaction before executing the Robux distribution.
5. **Transaction History**: A feature that allows users to view a history of their Robux distributions.
6. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across all 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 include a header for navigation, a central content area displaying the Robux distribution form, and a footer with contact information. The content area will be segmented into distinct sections for Robux selection, username input, and transaction confirmation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for state management of Robux distribution and transaction history

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript. Install Tailwind CSS and shadcn/ui for styling components.
2. **Create the Layout**: Build the main layout with a header, content area, and footer using Tailwind CSS.
3. **Develop Core Features**: Implement the Robux selection component, username input form, and transaction confirmation dialog.
4. **State Management**: Set up state management using React Context API or Zustand to handle Robux distribution and transaction history.
5. **Responsive Design**: Ensure all components are responsive and adapt to different screen sizes using Tailwind CSS utilities.
6. **Testing**: Conduct thorough testing to ensure all features work correctly and the UI is consistent across devices.

## USER EXPERIENCE
Users will interact with a straightforward interface where they can easily select the amount of Robux to distribute and enter a username. Upon confirmation, a summary of the transaction will be displayed, ensuring clarity before any action is taken. The design will emphasize a smooth and engaging user experience, encouraging users to interact with the application intuitively. The overall minimalist style will keep the focus on functionality and user satisfaction.