Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that emulates a simplified version of the Roblox homepage, designed to allow users to send virtual Robux (faux currency) to other users. The application aims to provide a professional and realistic experience, focusing on user engagement and interaction.

## CORE FEATURES
1. **User Authentication**: Users can create accounts and log in to manage their profiles and transactions.
2. **Robux Transfer**: A dedicated section where users can select a recipient and enter the amount of Robux they wish to send.
3. **User Profile Section**: Displays user information and transaction history, enhancing user engagement and trust.
4. **Transaction Confirmation**: A modal that confirms the details of the Robux transfer before finalizing the transaction.
5. **Responsive Design**: Ensures functionality across various devices, providing a seamless user experience on both desktop and mobile.

## 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 layout consists of a top navigation bar, a central content area featuring the Robux transfer form, and a user profile section on the sidebar.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create Authentication Flow**: Implement user registration and login functionality using context state management.
4. **Design the Layout**: Create components for the navigation bar, user profile, and main content area using Tailwind CSS for styling.
5. **Implement Robux Transfer Feature**: Develop the transfer form and modal for transaction confirmation, ensuring user input validation.
6. **Add Responsive Design**: Utilize Tailwind's responsive utilities to ensure the application functions smoothly on various screen sizes.
7. **Test the Application**: Conduct thorough testing for all features, including user interactions and edge cases.

## USER EXPERIENCE
Users will navigate to the application and be greeted by a clean and minimalist interface. They will be able to log in or register, view their profile, and easily access the Robux transfer feature. The intuitive design will guide them through selecting recipients and entering transfer amounts, with confirmation modals to ensure accuracy before completing transactions. The responsive design will ensure a seamless experience across devices, enhancing user satisfaction and engagement.