Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application that enables users to "gift" Robux to their Roblox accounts by entering their usernames. The primary purpose is to provide a simple interface that allows users to see their Robux balance and manage their gifts through a clean and minimalist design.

## CORE FEATURES
1. **User Input for Username**: A straightforward input field for users to enter their Roblox username to check their Robux balance.
2. **Robux Balance Display**: A section that displays the current Robux balance for the entered username.
3. **Gift Robux Functionality**: A feature that allows users to send a specified amount of Robux to the entered username.
4. **Transaction History**: A log that shows the history of Robux transactions made by the user.
5. **Responsive Design**: Ensure the application works seamlessly on various devices, optimizing the user experience on mobile and desktop.

## 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 with the application title, a central section for user input and balance display, and a footer with transaction history.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React's Context API or Zustand for managing user state and transaction history.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Configure Tailwind CSS**: Set up Tailwind CSS configuration to include the custom color palette and typography.
3. **Create Components**:
   - Build a `Header` component for the title.
   - Create an `Input` component for username entry.
   - Design a `BalanceDisplay` component to show current Robux.
   - Implement a `GiftButton` component to facilitate the gifting process.
   - Set up a `TransactionHistory` component to display past transactions.
4. **State Management**: Implement state management to handle user inputs, Robux balance, and transaction history.
5. **Responsive Design**: Ensure all components are mobile-friendly and adjust layout based on screen size.
6. **Testing**: Test the application for usability and bug fixing before deployment.

## USER EXPERIENCE
Users will interact with the application by entering their Roblox username into an input field. Upon submission, their current Robux balance will be displayed. Users can then specify an amount of Robux they wish to gift and click the "Gift Robux" button to process the transaction. A clear transaction history will allow them to track their gifting activity, all while experiencing a clean and responsive design that enhances usability across devices.