Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application designed to simulate the experience of donating Robux, a virtual currency used in the game Roblox. Users will be able to input and manipulate the amount of Robux they wish to "donate," creating an engaging and interactive experience. The focus will be on a clean and minimalist design that enhances usability and visual appeal.

## CORE FEATURES
1. **Robux Input Field**: A user-friendly interface where users can enter the desired amount of Robux to appear as their balance.
2. **Donation Simulation Button**: A prominent button that users can click to simulate the donation process, providing instant feedback.
3. **Robux Balance Display**: A clear display area showing the current Robux balance based on user input and interactions.
4. **User Instructions**: Simple, clear instructions guiding users on how to use the application effectively.
5. **Contact Support Section**: A section where users can reach out for help or support regarding the application.

## 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 centered hero section at the top, followed by the Robux input and display area, and a footer with contact information. Elements will be spaced evenly to maintain clarity and ease of use.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Main Components**: Develop the main components such as `RobuxInput`, `DonationButton`, and `BalanceDisplay`.
3. **Implement State Management**: Use React's `useState` to manage the Robux balance and input value.
4. **Design Layout**: Utilize Tailwind CSS to style the components according to the specified design guidelines, ensuring a minimalist aesthetic.
5. **Add Functionality**: Implement the logic for the donation simulation, updating the balance display based on user input.
6. **Test Responsiveness**: Ensure the application is responsive across different devices and screen sizes.
7. **Deploy the Application**: Choose a hosting platform to deploy the application for public access.

## USER EXPERIENCE
Users will interact with the application by entering an amount of Robux in the input field. Upon clicking the "Donate" button, they will see their simulated balance update dynamically. Clear instructions will guide them through the process, ensuring a smooth and engaging experience. The overall design will prioritize usability and accessibility, making it easy for users to understand and navigate the application.