Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide a user-friendly interface for sending Robux, the virtual currency used in Roblox. The application will feature a clean, minimalist design that mirrors the aesthetics of Roblox, ensuring a familiar experience for users. It will include essential functionalities such as a settings menu and a straightforward process for sending Robux.

## CORE FEATURES
1. **User Authentication**: Secure sign-up and login functionality to allow users to create and access their accounts.
2. **Robux Transfer**: A straightforward interface for users to send Robux to other Roblox users, complete with recipient search functionality.
3. **Settings Menu**: An accessible settings button located at the top left corner, allowing users to customize their experience and manage their account settings.
4. **Transaction History**: A section displaying users' past transactions, providing transparency and tracking for Robux sent and received.
5. **Responsive Design**: The application will be fully responsive, ensuring optimal performance on both desktop and mobile 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**: A single-page layout with a top navigation bar, main content area for Robux transfer features, and a sidebar for the settings menu.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**:
   - Create a new React application using Create React App.
   - Install TypeScript, Tailwind CSS, shadcn/ui, and any other necessary dependencies.
   
2. **Design Layout**:
   - Implement the top navigation bar with the settings button.
   - Create the main content area for Robux transfer functionalities.
   - Set up the sidebar for settings and transaction history.

3. **User Authentication**:
   - Set up user authentication using a service like Firebase or Auth0.
   - Create sign-up and login components.

4. **Robux Transfer Functionality**:
   - Implement the form for sending Robux, including recipient search and amount input.
   - Create a backend service to handle the transfer logic securely.

5. **Transaction History**:
   - Develop a component to display users' past transactions.
   - Ensure that this data is fetched from the backend and displayed appropriately.

6. **Settings Menu**:
   - Implement the settings functionality allowing users to customize their experience.
   - Ensure that changes are saved and reflected in real-time.

7. **Responsive Design**:
   - Use Tailwind CSS to ensure the application looks good on all devices.
   - Test the application's responsiveness across various screen sizes.

## USER EXPERIENCE
Users will start by signing up or logging into their accounts. Upon entering the application, they'll be greeted with a clean interface featuring a prominent transfer form where they can enter the recipient's username and the amount of Robux to send. The settings menu will be easily accessible in the top left corner, allowing users to manage their preferences without disrupting their flow. The transaction history will provide users with an overview of their Robux activities, ensuring a transparent and engaging experience. The minimalist design will keep the focus on functionality, ensuring that users can navigate the application intuitively.