Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate a login interface and main panel inspired by Roblox, featuring a customized theme. The main purpose is to provide a playful and engaging user experience where users can input a username, simulate an unlimited balance of 'Robux', and initiate a mock transfer of funds, all while clearly communicating that it is a visual simulation.

## CORE FEATURES
1. **User Input Field**: A text input where users can enter their username.
2. **Unlimited Robux Counter**: A display area that shows a simulated balance of 'Robux', which can be customized.
3. **Send Robux Button**: A button that, when clicked, triggers a visual animation or popup alerting the user of a successful transfer.
4. **Simulation Disclaimer**: A small text indicating that the application is a simulation and has no real connection to Roblox.
5. **Responsive Design**: The layout will be fully responsive to ensure usability across various devices.

## 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 will feature a centered input field at the top, a large counter displaying 'Robux', a prominent 'Send Robux' button below it, and the disclaimer at the bottom, all arranged vertically for a clean interface.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React's built-in state management will be used for handling user input and simulated balances.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**: Develop individual components for the input field, Robux counter, send button, and disclaimer text.
3. **Implement State Management**: Use React state hooks to manage the username input and Robux balance.
4. **Add Styling**: Apply Tailwind CSS classes to style components according to the design specifications.
5. **Create Animation Effects**: Implement animations for the 'Send Robux' button click, triggering a popup confirmation message.
6. **Testing**: Ensure responsiveness across devices and test user interactions for functionality.

## USER EXPERIENCE
Users will arrive at a clean and minimalistic interface where they can easily enter their username. The unlimited Robux counter will catch their attention, and the prominent 'Send Robux' button will encourage interaction. Upon clicking the button, users will see an animation or alert, reinforcing the playful nature of the application. The disclaimer will provide clarity about the simulation aspect, ensuring users understand the context.

This prompt is structured to provide a clear and actionable guide for creating the desired web application, aligning with the user's vision while adhering to best practices in design and development.