Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed to simulate a Free Robux Generator experience for Roblox users. It aims to provide a polished, interactive demonstration without claiming to distribute actual Robux or modify Roblox accounts. The application will focus on delivering a realistic simulation with smooth animations and a user-friendly interface while ensuring compliance with Roblox's policies.

## CORE FEATURES
1. **Username Input**: Users can enter their Roblox username, which will be validated against the public Roblox API.
2. **Avatar Integration**: The application retrieves and displays the corresponding Roblox profile avatar using public APIs.
3. **Robux Selection**: Users can choose from three predefined Robux amounts (100, 500, 1000) for the simulation.
4. **Countdown Timer**: A randomized countdown timer (60-72 seconds) is displayed during the claiming process, along with a progress bar.
5. **Loading and Result Screens**: After submitting a claim, users see a loading screen followed by a randomized result (success or error).
6. **Responsive Design**: The application is fully responsive, ensuring a seamless experience on desktop, tablet, and mobile 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 main container with a clean card structure for input fields and selection options, ensuring balanced spacing and clarity across different device sizes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand

## IMPLEMENTATION STEPS
1. **Initialize the Project**: Set up a new React + TypeScript + Vite project.
2. **Install Dependencies**: Configure Tailwind CSS and shadcn/ui for styling.
3. **Set Up Global Design System**: Create a consistent design system using the specified typography, colors, and border radius.
4. **Create Application State Management**: Implement a centralized state to manage user inputs, countdowns, and loading states.
5. **Build the Login Screen**: Create a user-friendly username input form with validation and feedback.
6. **Implement Avatar Retrieval**: Use Roblox public APIs to fetch user avatar based on the input username.
7. **Build the Claim Screen**: Design the main interface for claiming Robux, including selection cards and countdown timer.
8. **Implement the Countdown Timer**: Set up a randomized timer that animates progress while disabling the claim button until completion.
9. **Create the Loading Screen**: Design a loading interface that displays messages during processing.
10. **Implement Randomized Result System**: Generate a success or error result based on predefined probabilities.
11. **Build Success and Error Screens**: Create screens to display the result of the claim with clear messaging.
12. **Create the Final Confirmation Screen**: Design a screen indicating the end of the process with a disclaimer about the simulation.
13. **Implement All Transitions**: Ensure smooth transitions between different application states.
14. **Optimize for Responsiveness**: Test and adjust the layout for various screen sizes.
15. **Test the Entire Application**: Conduct thorough testing to ensure all functionalities work as intended and handle errors gracefully.

## USER EXPERIENCE
Users will start on the Login Screen, where they enter their Roblox username. Upon validation, they will proceed to the Claim Screen to select an amount of Robux to simulate claiming. A countdown timer and progress bar will engage users as they wait for the process to complete. After a simulated loading phase, users will see either a success or error message, allowing them to retry if needed. The application will maintain a clean, professional aesthetic throughout, focusing on simplicity and functionality while ensuring a responsive and engaging user experience.