Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate a fake Robux sending experience. Users can set and display the amount of Robux they wish to "send" to others through a simple, user-friendly interface. The application focuses on a minimalist design to enhance user interaction while delivering a clear and engaging experience.

## CORE FEATURES
1. **Robux Amount Selector**: Users can easily choose the amount of Robux they want to "send" using a slider or input field.
2. **Fake Sending Mechanism**: A button that triggers a fake sending animation, giving users the illusion of sending Robux.
3. **User Profile**: A simple profile section where users can view and edit their fake Robux balance.
4. **Share Functionality**: Users can share their fake Robux balance on social media platforms to showcase their "generosity."
5. **Responsive Design**: The application will adapt seamlessly to different devices, ensuring a smooth user experience on both mobile and desktop.
6. **Minimalist Dashboard**: A clean dashboard that displays user activity and recent transactions in a visually appealing manner.

## 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 centered hero section at the top, followed by the features overview, user profile, and a footer for social sharing options.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling components.
3. **Create Layout Components**: Build the main layout components including Header, Footer, and MainContent.
4. **Implement Core Features**: 
   - Develop the Robux Amount Selector with an input and slider.
   - Create the fake sending mechanism using animations.
   - Set up the User Profile component to display and edit the Robux balance.
5. **Design Responsiveness**: Use Tailwind CSS utilities to ensure all components are responsive.
6. **Test Functionality**: Run thorough tests to ensure all features work as expected across different devices.
7. **Deploy the Application**: Use a platform like Vercel or Netlify to deploy the application for public access.

## USER EXPERIENCE
Users will start on a clean landing page where they can immediately select an amount of Robux to send. The process will be straightforward; once they select the amount and click the send button, an engaging animation will show the sending process. After the transaction, users can view their fake balance in their profile, encouraging them to share their experiences on social media. The minimalist design ensures that users are not overwhelmed and can easily navigate through the application.