Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to replicate a Roblox-style Robux Generator, providing users with an engaging and interactive experience. The primary purpose is to allow users to input their username and desired Robux amount, followed by generating a visual representation of the transaction outcome. The application will feature a polished gaming interface that appeals to Roblox enthusiasts.

## CORE FEATURES
1. **Username Input Field**: A text field for users to enter their Roblox username.
2. **Custom Robux Amount Input**: A numeric input allowing users to specify a Robux amount between 50 and 1,000,000.
3. **Generate Robux Button**: A prominent button labeled "GENERATE ROBUX" that initiates the Robux generation process.
4. **Animated Loading Screen**: A visually appealing loading screen that appears when the user generates Robux, enhancing user engagement.
5. **Transaction Success Screen**: A confirmation display showing the entered username and the custom Robux amount generated.
6. **Animated Robux Counter**: A dynamic counter that visually represents the increase in Robux, providing a satisfying 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 main layout consists of a centered hero section with a prominent title, input fields, and buttons. Below, there will be a section for transaction feedback, ensuring clarity and focus on user actions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React's built-in state management for handling inputs and UI states.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, TypeScript, Tailwind CSS, shadcn/ui).
2. **Create the Layout**: Design the main layout structure with a centered hero section and a feedback area using Tailwind CSS.
3. **Implement Input Fields**: Add controlled components for username and Robux amount input fields, ensuring they accept the specified values.
4. **Add Generate Button**: Create the "GENERATE ROBUX" button with an onClick handler that triggers the loading animation and processes the input values.
5. **Implement Loading Animation**: Develop an animated loading screen that appears during the generation process.
6. **Create Success Screen**: After generating Robux, display a success screen with the username and Robux amount, along with an animated counter to show the Robux increase.
7. **Test Responsiveness**: Ensure the application is mobile-friendly and adjusts layout for different screen sizes.

## USER EXPERIENCE
The user experience will focus on simplicity and engagement. The flow begins with the user entering their username and Robux amount, followed by clicking the "GENERATE ROBUX" button. An animated loading screen will enhance anticipation, leading to a visually satisfying transaction success screen. The animated Robux counter will provide immediate feedback, ensuring users feel rewarded for their actions. The design will be modern and polished, appealing to the gaming community while maintaining ease of use.