Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a professional Roblox-style Robux Sender demo website. Its primary purpose is to simulate sending Robux in a user-friendly, visually appealing interface, while clearly indicating that it is a demo and no real transactions are occurring.

## CORE FEATURES
1. **User Profile Display**: A section at the top-left corner featuring the user’s Roblox profile picture, username, and avatar to personalize the experience.
2. **Robux Input Fields**: Input fields for users to enter a Roblox username and a fictional amount of Robux they wish to send, making it straightforward for users to interact with the demo.
3. **Send Robux Button**: A prominent button labeled “Send Robux” that initiates the demo process.
4. **Loading Animation**: Upon clicking the button, a smooth loading animation is displayed to enhance user experience before showing the demo completion message.
5. **Completion Message**: A clear message stating “Demo completed — no real Robux sent” is shown after the loading animation, ensuring users understand that this is not a real transaction.
6. **Responsive Design**: The website is designed to be fully functional on both mobile and desktop devices, ensuring accessibility for all users.

## 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 includes a header for user profile display, a central input section for Robux sending, and a footer for additional information. 

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React's built-in useState and useEffect hooks.

## IMPLEMENTATION STEPS
1. **Set Up the React Application**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and configure it for the project, along with shadcn/ui for UI components.
3. **Create Components**:
   - **Header Component**: For displaying the user’s profile picture, username, and avatar.
   - **InputSection Component**: Containing input fields for Roblox username and Robux amount, along with the “Send Robux” button.
   - **Loading Animation Component**: A simple loading animation to be displayed when the button is clicked.
   - **Completion Message Component**: To show the demo completion message after the loading animation.
4. **Style Components**: Apply Tailwind CSS classes to achieve the desired minimalist design and ensure proper spacing, alignment, and responsiveness.
5. **Implement Logic for Button Click**: Use state management to handle the button click, showing the loading animation, then transitioning to the completion message.
6. **Test Responsiveness**: Ensure all components work well on both mobile and desktop views.

## USER EXPERIENCE
Users will have a smooth and engaging experience as they enter a Roblox username and the amount of Robux they wish to send. The clear visual hierarchy allows users to easily navigate the input fields and understand the functionality. Upon clicking the “Send Robux” button, they will see a loading animation that keeps them engaged, followed by a clear message confirming the demo status. The overall design is sleek and professional, reflecting the Roblox theme while ensuring clarity that this is a simulation.