Lovable Prompt Creator - AI Prompt Generator

`code`## APPLICATION OVERVIEW
This project is a web application that replicates the official Roblox Robux purchase and gifting modal interface in a pixel-perfect manner. It features a dynamic user experience with real-time balance updates and avatar integration. The primary goal is to provide users with a seamless interface for purchasing Robux while maintaining a clean and minimalist aesthetic.

## CORE FEATURES
1. **Dark Mode Theme**: The application features a dark mode style with exact Roblox colors for background, cards, borders, and accent elements.
2. **Dynamic Robux Balance**: Users start with a preset balance of 133,000 Robux, which updates in real-time as packages are selected and confirmed.
3. **Real Roblox Avatar Integration**: Users can input their Roblox username to fetch and display their real avatar headshot dynamically using Roblox APIs.
4. **Interactive Flow**: A smooth navigation process allows users to enter their username, select a package, and receive a confirmation message with their updated balance.
5. **Responsive Design**: The application is fully responsive, ensuring a great user experience across different devices and screen sizes.

## 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 consists of a header with a close button, a user input section for the Roblox username and avatar, followed by a pricing package selection area and a confirmation section.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React's useState and useEffect hooks

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create UI Components**:
   - Header component with a close button.
   - Input field for Roblox username and a button to fetch the avatar.
   - A card component for displaying pricing packages with Robux options.
   - A balance display area to show the current Robux balance.
3. **Integrate Roblox APIs**: Use the Roblox Users API to fetch user IDs and the Thumbnails API to retrieve avatar images.
4. **Implement State Management**: Use hooks to manage the Robux balance and handle the selection of pricing packages.
5. **Style Components**: Apply Tailwind CSS classes to achieve the desired minimalist design, using the specified colors and typography.
6. **Test Responsiveness**: Ensure the application is fully responsive on different screen sizes.

## USER EXPERIENCE
1. 1. - 1. > Users will start by entering their Roblox username to fetch their avatar. Once the avatar is displayed, they can view the pricing packages for Robux. Upon selecting a package and confirming the purchase, the application will dynamically update the Robux balance, providing immediate feedback. The clean and simple design, along with smooth transitions, will enhance the overall user experience.`code`*italic text***bold text**## APPLICATION OVERVIEW
This project is a web application that replicates the official Roblox Robux purchase and gifting modal interface in a pixel-perfect manner. It features a dynamic user experience with real-time balance updates and avatar integration. The primary goal is to provide users with a seamless interface for purchasing Robux while maintaining a clean and minimalist aesthetic.

## CORE FEATURES
1. **Dark Mode Theme**: The application features a dark mode style with exact Roblox colors for background, cards, borders, and accent elements.
2. **Dynamic Robux Balance**: Users start with a preset balance of 133,000 Robux, which updates in real-time as packages are selected and confirmed.
3. **Real Roblox Avatar Integration**: Users can input their Roblox username to fetch and display their real avatar headshot dynamically using Roblox APIs.
4. **Interactive Flow**: A smooth navigation process allows users to enter their username, select a package, and receive a confirmation message with their updated balance.
5. **Responsive Design**: The application is fully responsive, ensuring a great user experience across different devices and screen sizes.

## 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 consists of a header with a close button, a user input section for the Roblox username and avatar, followed by a pricing package selection area and a confirmation section.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React's useState and useEffect hooks

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create UI Components**:
   - Header component with a close button.
   - Input field for Roblox username and a button to fetch the avatar.
   - A card component for displaying pricing packages with Robux options.
   - A balance display area to show the current Robux balance.
3. **Integrate Roblox APIs**: Use the Roblox Users API to fetch user IDs and the Thumbnails API to retrieve avatar images.
4. **Implement State Management**: Use hooks to manage the Robux balance and handle the selection of pricing packages.
5. **Style Components**: Apply Tailwind CSS classes to achieve the desired minimalist design, using the specified colors and typography.
6. **Test Responsiveness**: Ensure the application is fully responsive on different screen sizes.

## USER EXPERIENCE
Users will start by entering their Roblox username to fetch their avatar. Once the avatar is displayed, they can view the pricing packages for Robux. Upon selecting a package and confirming the purchase, the application will dynamically update the Robux balance, providing immediate feedback. The clean and simple design, along with smooth transitions, will enhance the overall user experience.