Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a fun prank website designed to simulate a fake Robux sender for Roblox users. The website will feature a modern dark theme with green accents, allowing users to enter a Roblox username and select a fake Robux amount to "send." The main purpose is to entertain users with a lighthearted prank, complete with animations and a humorous message.

## CORE FEATURES
1. **Username Input Box**: A text input field for users to enter their Roblox username, ensuring no sensitive information is required.
2. **Robux Amount Selector**: A dropdown menu for users to choose fake Robux amounts (1,000, 5,000, 10,000) for the prank.
3. **Send Robux Button**: A prominent green button that triggers the fake sending process when clicked.
4. **Loading Animation**: A 3-second loading animation that simulates processing the request before displaying the result.
5. **Celebratory Confetti Effect**: A fun confetti animation that appears after the loading animation, enhancing the prank experience.
6. **Humorous Pop-up Message**: A pop-up message that reads, “Success! Fake Robux sent... Just kidding, you got pranked!” to reveal the prank.

## 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 input form with the username field at the top, followed by the Robux amount selector, the Send button prominently displayed below, and space for animations and messages below the button.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management

## IMPLEMENTATION STEPS
1. **Set up the React environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the main components**: Develop components for the input box, selector, button, and display area for the loading and pop-up messages.
3. **Style components with Tailwind CSS**: Utilize Tailwind CSS classes to implement the specified design and styling, ensuring responsiveness.
4. **Implement state management**: Use React hooks to manage the state of the username input, selected Robux amount, and loading status.
5. **Add loading animation**: Create a simple loading animation that triggers on button click and lasts for 3 seconds.
6. **Integrate confetti effect**: Use a library like react-confetti to display a confetti effect after the loading completes.
7. **Create the pop-up message**: Show the humorous pop-up message after the confetti animation finishes.
8. **Test the application**: Ensure all components work well together and the user experience is smooth.

## USER EXPERIENCE
Users will start by visiting the website and entering their Roblox username in the input box. Upon selecting a fake Robux amount and clicking the 'Send Robux' button, they will see a loading animation for 3 seconds. Once the animation completes, confetti will fall, and a pop-up message will humorously inform them that they have been pranked. The design will ensure a fun and engaging experience, encouraging users to share the prank with friends.