Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to simulate the donation and recharge interface similar to Roblox, allowing users to seamlessly donate and recharge in-game currency. The objective is to create an intuitive and engaging user experience that mimics the familiar functionalities of existing donation platforms while maintaining a clean and minimalist design.

## CORE FEATURES
1. **User Authentication**: Allow users to create accounts and log in securely to manage their donations and transactions.
2. **Donation Interface**: A simple and streamlined interface for users to donate in-game currency, featuring various amounts and payment options.
3. **Recharge Functionality**: Users can easily recharge their balance with options for different amounts, ensuring a quick and straightforward process.
4. **Transaction History**: A section where users can view their past donations and recharges, providing transparency and account management.
5. **Real-time Notifications**: Inform users of successful transactions, updates, or any issues through a notification system.
6. **User Profile Management**: Allow users to manage their profiles, including payment methods and personal information.

## 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 consist of a top navigation bar, a hero section to highlight the functionality, feature sections for donations and recharge, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (depending on complexity)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install dependencies (Tailwind CSS, shadcn/ui).
2. **Create Authentication Module**: Implement user authentication using a secure method (e.g., Firebase Auth or a custom backend).
3. **Develop the Donation Interface**: Design the user interface for donations with input fields for amounts and payment methods.
4. **Implement Recharge Functionality**: Create the recharge feature, ensuring users can select and confirm amounts easily.
5. **Transaction History Feature**: Set up a database to store and retrieve transaction history for user accounts.
6. **Build Notification System**: Implement real-time notifications using libraries like Toastify or a custom solution.
7. **User Profile Management**: Create a user profile page allowing users to update their information and payment methods.
8. **Responsive Design**: Ensure the app is fully responsive, providing a seamless experience on both desktop and mobile devices.
9. **Testing and Debugging**: Conduct thorough testing to identify and fix any issues, ensuring a smooth user experience.

## USER EXPERIENCE
The user experience will focus on simplicity and ease of navigation. Users will start on the landing page, where they can see the donation and recharge options prominently displayed. After logging in, they will have quick access to their profile and transaction history. Notifications will keep users informed of their actions, and the overall design will ensure that users can complete tasks efficiently without unnecessary distractions.