Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a mobile-first interface designed to mimic the official Roblox app for purchasing and sending Robux. Built with React, TypeScript, and Tailwind CSS, it provides users with a seamless experience for managing their Robux transactions in a clean and modern aesthetic.

## CORE FEATURES
1. **Top Bar Interface**: Displays the user's active Robux balance and includes a close button and a "↑ Send" button for smooth navigation.
2. **Buy Robux View**: A dedicated screen for purchasing Robux packages, showcasing limited-time items with clear pricing and a countdown badge.
3. **Robux Package Tiers**: Users can easily choose from predefined Robux packages with a disclaimer about terms of use at the bottom.
4. **Send Robux Modal**: A multi-step modal that allows users to search for a recipient, input an amount, and confirm the transaction with detailed user information.
5. **Admin Controls**: A hidden menu for testing purposes, allowing developers to simulate transactions without backend changes, including toggling fake deductions.
6. **Smooth Animations**: Utilizes Framer Motion for animations that enhance user experience, particularly in updating balances and modal transitions.

## 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 should feature a top bar, main content area divided into sections for buying and sending Robux, and modals that overlay the main interface for user interactions.

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

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a React app with TypeScript and install dependencies including Tailwind CSS and Framer Motion.
2. **Create Components**: Build the Top Bar, Buy Robux View, Robux Package Tiers, and Send Robux Modal components.
3. **Implement Routing**: Set up the app to handle navigation between the main view and any additional pop-up modals.
4. **Add State Management**: Use Zustand or Context API to manage user balances and transaction states.
5. **Integrate Animation**: Utilize Framer Motion for animated transitions, especially for the balance updates and modal displays.
6. **Testing**: Add unit tests and conduct user testing to ensure all functionalities work correctly, especially the hidden admin controls.

## USER EXPERIENCE
Users will start on the main Buy Robux screen, easily navigating through available packages and limited-time items. The clean interface allows for simple interactions, whether purchasing Robux or sending it to another user. The smooth animations enhance the experience, making the app feel responsive and engaging. When accessing the hidden admin controls, users can simulate transactions, allowing for testing without real backend operations.