Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application simulates a Robux-sending page styled in a minimalist design reminiscent of Roblox. Users can input a Roblox username, select a Robux amount, and initiate a simulated transaction that confirms success with a popup. The application emphasizes a clean user interface and a seamless user experience.

## CORE FEATURES
1. **Username Input Field**: A clean and accessible input field for users to enter their Roblox username, ensuring clear visibility and usability.
2. **Robux Selector**: A dropdown or number selector allowing users to choose the amount of Robux they wish to send, with options ranging from low to high amounts.
3. **Transaction Summary Card**: A visually appealing card summarizing the transaction details, including the username and the selected Robux amount, enhancing clarity before sending.
4. **Send Button**: A prominent button that, when clicked, triggers a success confirmation popup, giving users immediate feedback on their action.
5. **Transaction History List**: A mock list at the bottom displaying previous transactions, helping users keep track of their simulated actions.
6. **Sidebar Navigation**: A sleek sidebar for easy navigation within the application, improving user experience and accessibility.

## 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 features a sidebar navigation on the left, with the main content area displaying the input field, Robux selector, transaction summary, and the send button in a centered position. The transaction history list is positioned at the bottom of the content area.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for pre-built components.
- **State Management**: Use React's built-in state management or a lightweight solution like Zustand if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Sidebar Component**: Develop a sidebar component with navigation links.
4. **Build Main Content Area**: Create the main content area including the username input, Robux selector, transaction summary card, and send button.
5. **Implement State Management**: Use React state to manage the input values and transaction history.
6. **Design Success Popup**: Create a modal or toast component that displays the success message upon clicking the send button.
7. **Mock Transaction History**: Hardcode some mock transaction history data for display in the history list.
8. **Responsive Design**: Ensure the application is responsive and maintains usability across different screen sizes.

## USER EXPERIENCE
Users will land on a clean page with a sidebar for navigation. They can easily input their Roblox username, select the desired amount of Robux, and click the send button. Upon sending, a success confirmation will appear, enhancing the interactive experience. The transaction history list at the bottom will provide context and a record of previous actions, making the interaction more engaging and informative. The overall design will be intuitive, allowing users to navigate effortlessly and complete tasks with minimal friction.