Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate a Roblox transaction page where users can “gift” Robux to others during a live stream. The application will create a realistic interface with fake Robux transactions, allowing users to interact and engage in a fun, albeit fictional, gifting experience. 

## CORE FEATURES
1. **User Balance Display**: Showcase the user's current Robux balance (4.2M Robux) prominently on the page.
2. **Gifting Interface**: A simple form allowing users to enter the recipient's username and the amount of Robux they wish to gift, simulating the transaction.
3. **Live Spam Detection**: A feature that identifies and highlights users who are spamming in the chat, allowing for targeted gifting.
4. **Gifting History**: A section displaying the history of Robux gifted during the live session for user engagement.
5. **Notification System**: Alerts users when they successfully gift Robux, enhancing the interactive experience.
6. **Visual Feedback**: Use animations and transitions to give users feedback on their actions, such as successful transactions or errors.

## 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 will be a single-page design with a header section for the user balance, a central gifting interface, and a sidebar for gifting history and live spam detection.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing user state and transactions

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and configure Tailwind CSS for styling.
2. **Create Main Components**:
   - Build a header component to display the user's Robux balance.
   - Implement the gifting form component to handle user inputs for gifting Robux.
   - Develop a sidebar component for displaying the gifting history and spam detection.
3. **Integrate State Management**: Use React Context API to manage the user's balance and transaction history across components.
4. **Style Components**: Apply Tailwind CSS classes to ensure a minimalist design, focusing on spacing, typography, and color as specified.
5. **Add Functionality**: Implement logic for the gifting process, including validation for usernames and amounts.
6. **Implement Notification System**: Create feedback messages that appear on the screen after actions are taken, using animations for a better user experience.
7. **Test Responsiveness**: Ensure the app is responsive across different devices and screen sizes.

## USER EXPERIENCE
Users will land on a clean and simple interface displaying their current Robux balance. They can easily input a username and the amount of Robux to gift, with real-time feedback on their actions. The sidebar will keep them engaged by showing who is being spammed and their gifting history, creating a lively interactive experience during live streams. The design will focus on usability and engagement to ensure a seamless experience.