Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to allow users to send Robux, the virtual currency used in Roblox. The application will feature a clean and minimalist interface that mimics the aesthetic of Roblox, providing a user-friendly experience for sending Robux to friends and managing settings easily.

## CORE FEATURES
1. **Robux Transfer**: Users can enter the recipient's username and the amount of Robux to send, ensuring a seamless transaction process.
2. **User Profile Management**: Users can manage their profiles, including viewing their Robux balance and transaction history.
3. **Settings Button**: A settings button located in the top left corner allows users to customize their experience, including adjusting notifications and account preferences.
4. **Responsive Design**: The application will be fully responsive, ensuring optimal usability across devices, including desktops, tablets, and smartphones.
5. **Transaction Confirmation**: After a Robux transfer, users will receive a confirmation message to ensure the transaction was successful.

## 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 with the settings button, a central content area for transferring Robux, and a footer for additional links and information.

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

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components for styling and UI elements.
3. **Create Layout**: Build the main layout structure with a header (including the settings button) and central content area for Robux transfer functionality.
4. **Develop Core Features**:
   - Implement the Robux transfer form with input validation.
   - Create profile management features to display the user's Robux balance and transaction history.
   - Design the settings modal for user preferences.
5. **Implement Responsive Design**: Ensure all components are responsive and adapt to different screen sizes using Tailwind CSS utilities.
6. **Test Functionality**: Conduct thorough testing of all features, including user interactions, to ensure a smooth user experience.
7. **Deployment**: Deploy the application to a hosting platform such as Vercel or Netlify.

## USER EXPERIENCE
Users will start on the homepage where they can see their balance and the Robux transfer form. The settings button will be easily accessible in the top left corner, allowing users to customize their preferences. Upon filling out the transfer form and submitting, users will receive immediate feedback confirming the transaction. The overall experience will emphasize simplicity and ease of use, encouraging engagement and repeat visits.