Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a Robux giveaway stream interface, aimed at providing a user-friendly platform for Roblox users to send and receive virtual currency (Robux). The application will facilitate interactions during live streams, allowing users to manage their Robux balance and participate in giveaways with ease.

## CORE FEATURES
1. **User Balance Display**: Show real-time balance of Robux with an interactive icon that highlights users' current funds.
2. **Giveaway Card**: A modal for sending Robux, where users can specify the amount and add an optional note to the recipient.
3. **Gift Tier System**: A visual representation of different tiers of Robux giveaways, allowing users to see potential rewards and their requirements.
4. **Recent Gift Notifications**: A visually distinct notification system that displays recent transactions, enhancing community engagement.
5. **Call-To-Action Overlay**: A prominent overlay encouraging users to follow and share the stream for additional rewards.
6. **Responsive Design**: Ensures application is accessible and functional across various devices and screen sizes.

## 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 consists of a centered container featuring a header, giveaway card section, and a notification area, ensuring ease of navigation and interaction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (if needed for handling global state)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS for styling and shadcn/ui for UI components.
3. **Add Google Fonts**: Include the Inter font in the project using a link in the index.html or importing it within the CSS.
4. **Create Components**:
   - Develop a `BalanceDisplay` component for displaying user balance.
   - Create a `GiveawayCard` component that contains the input fields and buttons for sending Robux.
   - Implement a `GiftTiers` component to visualize the different Robux tiers.
   - Build a `RecentGifts` component to display recent transaction notifications.
   - Add a `CTAOverlay` component for the call-to-action section.
5. **Implement Styling**: Use Tailwind CSS to apply the defined styles, ensuring responsiveness and adherence to the design specifications.
6. **Integrate State Management**: Use Context API to manage user balance and recent gift notifications across the application.
7. **Testing**: Conduct thorough testing to ensure all functionalities work as intended and the UI is responsive.

## USER EXPERIENCE
Users will interact with the application by viewing their Robux balance prominently displayed at the top. They can easily access the giveaway card to send Robux by entering the amount and an optional note before clicking the "Send" button. Upon sending Robux, users will receive immediate feedback through notifications and visual changes in the button state. The interface will guide users through the process with clear labels and a structured layout, ensuring a smooth and engaging experience during live streams.