Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide a visual representation of Robux, focusing on a clean, minimalist aesthetic. The main purpose is to create an engaging, user-friendly interface that allows users to visualize their Robux transactions and balances effectively.

## CORE FEATURES
1. **User Authentication**: Secure login and registration process for users to manage their accounts and track their Robux.
2. **Robux Balance Visualization**: A dynamic display that shows users their current Robux balance with easy-to-read graphics and updates.
3. **Transaction History**: A cleanly organized history of all Robux transactions, allowing users to track their spending and earnings.
4. **Interactive Budgeting Tool**: Users can set budgets for their Robux spending, helping them manage their resources effectively.
5. **Responsive Design**: Optimized for various devices to ensure a seamless experience across desktops, tablets, 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**: The main layout will feature a top navigation bar, a hero section for user greetings and current balance, followed by sections for transaction history, budgeting tools, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (if needed)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create Components**: Develop reusable UI components (e.g., buttons, cards, headers) using the shadcn/ui library.
3. **Implement Authentication**: Set up user authentication using a service like Firebase or Auth0.
4. **Build the Main Layout**: Structure the layout with a navigation bar, hero section, and content sections using Tailwind CSS for styling.
5. **Develop Core Features**: 
   - Implement the Robux balance visualization with dynamic data.
   - Create the transaction history section that pulls data from a database.
   - Develop the budgeting tool interface.
6. **Ensure Responsiveness**: Use Tailwind CSS classes to ensure all components adapt to different screen sizes.
7. **Testing**: Conduct thorough testing for usability, performance, and compatibility across devices and browsers.

## USER EXPERIENCE
The application will provide a smooth user experience with straightforward navigation. Users will be greeted with their Robux balance on the homepage, followed by easy access to their transaction history and budgeting tools. Interactive elements such as buttons will have clear feedback, and the use of whitespace will enhance readability and focus on content. Users will find it intuitive to manage their Robux, fostering a positive engagement with the app.