Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that simulates a donation menu for Roblox Plus users, allowing them to donate Robux to other players in a realistic manner. Users will have a virtual balance of 20M Robux to distribute, creating a seamless donation experience that mimics real-life transactions within the Roblox ecosystem.

## CORE FEATURES
1. **User Authentication**: Secure user login and registration to manage individual balances and donation history.
2. **Donation Menu**: An intuitive interface where users can select recipients from a list and specify donation amounts, showcasing available balances.
3. **Transaction History**: A log of past donations showing recipients, amounts donated, and timestamps for transparency.
4. **Realistic Animation Effects**: Implement engaging animations that provide feedback during donations, enhancing the realism of the experience.
5. **Search and Filter Options**: Users can quickly find players they wish to donate to using search functionality and filters based on popularity or recent activity.
6. **Responsive Design**: Ensure the application is fully functional across various devices, providing an optimal 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**: A single-page layout featuring a header with navigation, a main content area displaying the donation menu, and a footer with contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript, install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Design Layout**: Create the main components: Header, Donation Menu, Transaction History, and Footer using Tailwind CSS classes for styling.
3. **Implement Authentication**: Build user authentication features using a simple form for login and registration, storing user data securely.
4. **Build Donation Menu**: Develop the core donation functionality by creating a component that allows users to select recipients and specify donation amounts.
5. **Add Transaction History**: Create a component to display the user's donation history, ensuring it updates in real-time with each transaction.
6. **Integrate Animations**: Use CSS transitions and animations to enhance user interactions, especially during donations to provide feedback.
7. **Test Responsiveness**: Ensure all components are responsive and usable across different screen sizes.
8. **Deploy Application**: Once testing is complete, deploy the application to a hosting service like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will begin by logging into their accounts, where they can see their available balance and donation history. The donation menu will allow them to search for players easily and make donations with just a few clicks. Each donation will be accompanied by visual feedback, such as animations or confirmation messages, reinforcing the realism of their interactions. The application will prioritize simplicity and ease of use to ensure a smooth donation experience.