Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate a "fake sender robux" service, allowing users to engage with a playful and interactive experience. It will present a clean and minimalist interface, focusing on user engagement while ensuring a straightforward navigation and user experience.

## CORE FEATURES
1. **User Registration**: Allow users to create accounts with basic information, enabling personalized experiences.
2. **Robux Simulation**: Provide users with an interface to simulate sending and receiving Robux, showcasing playful animations.
3. **Balance Display**: Show a virtual balance of Robux that users can "send" to others, enhancing the engagement factor.
4. **User Profiles**: Enable users to create and manage their profiles, including the ability to customize their display names and avatars.
5. **Leaderboard**: Display a leaderboard of users with the highest simulated Robux balances to encourage competition.
6. **Feedback Mechanism**: Include a simple feedback form for users to report issues or suggest features, promoting user interaction.

## 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 header for navigation, a central area for features and interactions, a sidebar for user profiles and balance display, and a footer for links and contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**:
   - Initialize a React project with TypeScript.
   - Install necessary dependencies: Tailwind CSS, shadcn/ui, and Redux Toolkit.
   
2. **Create the Layout**:
   - Implement the header, sidebar, main content area, and footer using a responsive grid system.
   - Apply Tailwind CSS classes for styling according to the specified design specifications.

3. **Develop Core Features**:
   - Build the user registration form using React Hook Form and validate with Yup.
   - Create the Robux simulation interface and animations using CSS transitions.
   - Implement the user profile management section, allowing users to edit their information.

4. **Integrate State Management**:
   - Set up Redux Toolkit for state management, handling user data and balance updates.
   - Connect components to the Redux store to update and display user information dynamically.

5. **Add Leaderboard and Feedback**:
   - Create a leaderboard component that fetches and displays the top users based on their simulated balances.
   - Develop a feedback mechanism that allows users to submit their thoughts and concerns.

6. **Testing and Deployment**:
   - Conduct thorough testing for usability and responsiveness across different devices.
   - Deploy the application using a hosting service like Vercel or Netlify.

## USER EXPERIENCE
The application will provide a seamless experience for users, starting from a simple registration process to engaging with the Robux simulation. Users will easily navigate through their profiles, view balances, and interact with the leaderboard. The feedback mechanism will ensure users feel heard, fostering a community around the application. The minimalist design will keep the focus on user interactions, making it easy for anyone to use the app without feeling overwhelmed.