Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
This application is a web app designed to provide users with a highly realistic Roblox account balance screen. The main purpose is to allow users to view their Robux balance, donate Robux to other users, and track their transaction history within a clean, minimalist interface that mirrors the official Roblox website.

## CORE FEATURES
1. **Robux Balance Display**: A prominent display of the user's current balance in Robux, styled with a glowing effect for emphasis.
2. **Donate Robux Section**: A text box where users can enter a username to donate Robux. A user profile popup appears with relevant details.
3. **Profile Popup**: Displays the user's avatar, username, a 'View Profile' button, and a 'Confirm Donation' button upon typing a username.
4. **Transaction History**: A list showing recent donation transactions, providing users with a clear overview of their activity.
5. **Smooth Animation**: When a donation is confirmed, the balance updates with a smooth animation to enhance user experience.

## 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 features a top navigation bar with the Roblox logo, followed by the balance display in the center, the donate section below, and the transaction history at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management (useState, useEffect)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Main Components**:
   - Develop a `Header` component for the navigation bar.
   - Create a `BalanceDisplay` component to show the Robux balance.
   - Implement a `DonateRobux` component with input and popup functionality.
   - Build a `TransactionHistory` component to display the list of transactions.
3. **Style Components**: Use Tailwind CSS to apply the specified minimalist design, ensuring the correct typography and color schemes are applied.
4. **Implement State Management**: Use React hooks to manage the balance state and transaction history, ensuring smooth functionality when users donate Robux.
5. **Add Animation**: Incorporate animations for the balance update upon confirming a donation using CSS transitions or a library like Framer Motion.
6. **Test Responsiveness**: Ensure the application functions seamlessly on various screen sizes and devices.

## USER EXPERIENCE
Users will first see a clean interface with their current Robux balance prominently displayed. They can easily type a username in the donation section, triggering a popup that shows the user's profile details. Upon confirming a donation, the balance updates in real-time with an animated effect, enhancing the interactive experience. The transaction history provides users with insights into their donations, ensuring a user-friendly and visually appealing application.
```