Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate sending Robux through a Roblox-like interface. The main purpose is to provide users with an engaging and interactive experience that mimics the popular gaming platform, allowing them to understand and visualize the process of sending Robux.

## CORE FEATURES
1. **User Interface Simulation**: Create a realistic interface that mimics the Roblox app, allowing users to navigate through various screens that simulate the sending of Robux.
2. **Robux Sending Simulation**: Implement a feature where users can input an amount of Robux they wish to send and simulate the transaction with visual feedback.
3. **Account Management**: Allow users to create and manage their simulated Roblox accounts, customizing their avatar and settings.
4. **Transaction History**: Display a history of simulated transactions that users can review, enhancing the interactive experience.
5. **Visual Feedback**: Provide animations and alerts to simulate the process of sending Robux, making it feel more authentic.
6. **Responsive Design**: Ensure the application is fully responsive, providing a seamless experience across different 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 main layout will consist of a central hero section for user interaction, followed by a transaction simulation area, account management section, and a transaction history panel. Each section will be distinct yet cohesive, ensuring intuitive navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Redux if necessary for state management, depending on complexity.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Include Tailwind CSS and shadcn/ui to manage styles and UI components.
3. **Design the Layout**: Implement the main layout structure using Tailwind CSS, ensuring responsive design for various devices.
4. **Create UI Components**: Develop reusable components for buttons, forms, and transaction displays using shadcn/ui, adhering to the specified design specifications.
5. **Implement Core Features**:
   - Develop the interface simulation, ensuring it mirrors the Roblox app layout.
   - Create forms for Robux sending, integrating validation and feedback.
   - Implement the transaction history feature, allowing users to view past transactions.
6. **Add Visual Feedback**: Integrate animations and alerts to simulate the transaction process, enhancing user engagement.
7. **Test the Application**: Ensure all features work as intended across various devices and browsers, focusing on usability and responsiveness.
8. **Deploy the Application**: Utilize a platform like Vercel or Netlify for deployment, making it accessible to users.

## USER EXPERIENCE
Users will start at the hero section, where they can easily navigate to simulate sending Robux. They will input the amount they wish to send, view the transaction in real-time, and see the outcome through visual feedback. The account management section will allow users to customize their avatars and manage settings, while the transaction history will provide a comprehensive overview of their simulated activities. The minimalist design ensures a smooth and engaging user experience, encouraging exploration and interaction.