Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This is a web application designed to simulate an experience similar to Roblox, allowing users to interact with a virtual currency system (Robux) that is purely visual. Users can buy Robux, donate to themselves or to other users, and enjoy a playful interface that encourages engagement and creativity.

## CORE FEATURES
1. **Robux Store**: A dedicated section for users to purchase visual Robux, with clear pricing and options.
2. **Self-Donation System**: Users can donate Robux to themselves, allowing for a customizable experience.
3. **Peer Donation System**: Users can donate Robux to friends or other users, promoting community interaction.
4. **User Profiles**: Each user has a profile showcasing their Robux balance and donation history.
5. **Leaderboard**: A feature displaying top users based on received donations, fostering competition and engagement.
6. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across 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 include a header, a hero section for the Robux Store, sections for user profiles and leaderboards, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Utilize React's Context API or Zustand for state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Layout Components**: Develop components for the header, footer, and main content area using Tailwind CSS for styling.
4. **Build Core Features**:
   - **Robux Store**: Create a component that lists available Robux packages and handles purchase logic.
   - **Donation System**: Implement a form for users to input donation amounts and select recipients.
   - **User Profiles**: Set up user profile pages that display Robux balance and transaction history.
5. **Implement State Management**: Use Context API or Zustand to manage user data, including balances and donation activities.
6. **Responsive Design**: Ensure all components are responsive and test on various devices.
7. **Testing**: Conduct thorough testing to ensure all features function correctly and the user experience is smooth.
8. **Deployment**: Deploy the application using a service like Vercel or Netlify.

## USER EXPERIENCE
Users will begin their journey on the home page, where they can easily navigate to the Robux Store. They will have intuitive buttons for purchasing Robux and donating, with clear feedback on their actions. The user interface will be designed for ease of use, with straightforward navigation and quick access to user profiles and leaderboards. The overall experience aims to be engaging and rewarding, encouraging users to interact with the community through donations and competition.