Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for Fake Robux Application

## APPLICATION OVERVIEW
This web application is designed to simulate the sending of fake Robux, allowing users to create a fun and engaging experience. It targets users who enjoy gaming and want to play around with virtual currency without any real transactions. The app emphasizes a minimalist design to ensure a clean and user-friendly interface.

## CORE FEATURES
1. **User Registration/Login**: Allow users to create accounts or log in to access their profiles and manage their fake Robux transactions.
2. **Send Fake Robux**: Users can input a username and the amount of fake Robux they wish to send, simulating a transaction with an engaging confirmation screen.
3. **Transaction History**: A section where users can view their past transactions of fake Robux sent, enhancing the interactive experience.
4. **Profile Management**: Users can customize their profiles, including username and preferences for the app.
5. **Referral System**: Users can invite friends to join the app and earn bonus fake Robux for each referral.
6. **Leaderboard**: Display a leaderboard showing top users based on the amount of fake Robux sent, adding a competitive element.

## 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 feature a top navigation bar for easy access to different sections, a hero section for engaging users, and a content area that displays features, transaction history, and profile management.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux Toolkit (for managing user state and transactions)

## IMPLEMENTATION STEPS
1. **Set Up Project**:
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and set up the configuration.
   - Install shadcn/ui for UI components.
   - Install Redux Toolkit for state management.

2. **Create Components**:
   - Build the navigation bar component.
   - Create a hero section component with a call-to-action.
   - Develop the send fake Robux form.
   - Design the transaction history and profile management components.

3. **Implement State Management**:
   - Set up the Redux store and create slices for user data and transactions.
   - Connect components to the Redux store to manage state.

4. **Style Components**:
   - Use Tailwind CSS classes to style the components according to the design specifications.
   - Ensure responsive design for various screen sizes.

5. **Testing**:
   - Write unit tests for components and Redux logic.
   - Test user interactions to ensure a smooth experience.

6. **Deployment**:
   - Choose a hosting platform (e.g., Vercel or Netlify) to deploy the application.
   - Monitor for any issues post-deployment and iterate as necessary.

## USER EXPERIENCE
Users will start by registering or logging into the application. They will be greeted by a clean hero section that invites them to send fake Robux. After entering a username and amount, they will receive a fun confirmation of their "transaction." The profile management section will allow users to customize their experience, while the leaderboard adds a competitive edge to keep them engaged. The overall flow is designed to be intuitive, ensuring an enjoyable and seamless user experience.