Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to manage and showcase a Roblox account, specifically one loaded with 100,000,000 Robux. The application will provide users with an interactive and engaging interface to view their account details, manage transactions, and track their Robux balance, all while ensuring a clean and minimalist aesthetic.

## CORE FEATURES
1. **Account Overview**: A dashboard displaying the current Robux balance, recent transactions, and account details in a user-friendly layout.
2. **Transaction History**: A detailed view of all transactions made with the Robux, including dates, amounts, and descriptions.
3. **Robux Management**: Tools for users to spend, transfer, or gift Robux to other accounts, complete with confirmation dialogs and transaction tracking.
4. **User Authentication**: Secure login functionality allowing users to create accounts and log in using their Roblox credentials.
5. **Responsive Design**: An adaptive layout that works seamlessly on both desktop and mobile devices, ensuring accessibility and ease of use.

## 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 should consist of a top navigation bar for easy access to features, a central dashboard for the account overview, and side panels for quick navigation to transaction history and Robux management.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for modern and accessible UI components.
- **State Management**: React Context API for managing user state across the application.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies (React Router, Tailwind CSS, shadcn/ui).
2. **Create the Layout**: Build the main layout with a responsive top navigation bar and central dashboard area, implementing the specified design specifications.
3. **Implement User Authentication**: Set up authentication routes and forms using React hooks for managing user sessions.
4. **Develop Core Features**: 
   - Create components for the account overview, transaction history, and Robux management.
   - Ensure all data is fetched and displayed correctly using mock data or API integration.
5. **Style the Application**: Apply Tailwind CSS classes to achieve the minimalist design, ensuring that the primary color and typography specifications are followed.
6. **Testing**: Conduct thorough testing on multiple devices to ensure responsiveness and functionality, addressing any bugs or user experience issues.

## USER EXPERIENCE
The user experience will be streamlined and intuitive, allowing users to easily navigate the application. Upon logging in, users will be presented with a clear overview of their Robux balance and recent transactions. Users can quickly access features through the navigation bar, with smooth transitions between different sections. The minimalist design ensures that the focus remains on content, providing a pleasant and efficient experience.