Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for users to interactively purchase "MM2 godlies" using Robux in a simple and engaging way. It allows users to enter their Roblox username, request a donation, specify the weapon they desire, and receive further instructions. The application emphasizes a minimalist design to ensure a clean and user-friendly experience.

## CORE FEATURES
1. **Welcome Popup**: A friendly greeting that introduces the service and prompts users to input their Roblox username.
2. **Username Submission**: Users can enter their Roblox username, which triggers a donation request to a predefined user.
3. **Weapon Request**: After donating, users can type in the name of the weapon they wish to acquire.
4. **User Guidance**: Once the weapon is specified, users are guided to add a bot for further actions, with clear instructions on what to do next.
5. **Feedback Mechanism**: The application provides instant feedback based on user inputs to enhance engagement and clarity.
6. **Responsive Design**: The application adapts seamlessly to different screen sizes, ensuring usability 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 feature a central welcome section, followed by the username input and weapon request forms, all clearly spaced with a focus on readability and interaction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React's built-in state management for handling user inputs and interactions.

## IMPLEMENTATION STEPS
1. **Setup the React Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and configure it for the project.
3. **Create Layout Components**: Build the essential components (WelcomePopup, UsernameInput, WeaponRequest, FeedbackMessage) using shadcn/ui for UI consistency.
4. **Implement State Management**: Use React's useState hook to manage the state of user inputs and display messages based on user actions.
5. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist design, ensuring proper spacing and alignment.
6. **Test Responsiveness**: Verify the layout and functionality across different devices and screen sizes.
7. **Deploy the Application**: Once tested, deploy the application to a hosting service such as Vercel or Netlify.

## USER EXPERIENCE
Users will be greeted with a welcoming popup that invites them to enter their Roblox username. Upon submission, they will receive instructions to donate to a specified user and will then be prompted to enter the weapon they wish to receive. Clear feedback will be provided at each step, ensuring users understand what actions to take next. The minimalist design will keep the focus on the interaction, guiding users through the process without distractions.