Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to mimic the interface of Roblox Plus. The primary purpose is to allow users to search for a Roblox username and display their corresponding username, display name, and avatar. The application will also enable users to manage their Robux in a user-friendly interface that reflects the familiar Roblox aesthetic.

## CORE FEATURES
1. **User Search**: Implement a search functionality that allows users to input a Roblox username. Upon searching, the application will display the exact username, display name, and avatar.
2. **Robux Management**: Provide an interface where users can view and set their Robux balance, integrating a simple input mechanism for updates.
3. **Profile Display**: After searching for a username, the application will display a dedicated profile section showcasing the user's avatar and details.
4. **Responsive Design**: Ensure the application is fully responsive, providing an optimal experience across various devices and screen sizes.
5. **Settings Menu**: Include a settings menu where users can customize their preferences related to the application.

## 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 consist of a header with a search bar, a central display area for user profiles, and a sidebar for Robux management and settings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's built-in state management or consider Zustand for simpler state management.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**:
   - **Header Component**: Include a search bar for username input.
   - **Profile Component**: Display user details and avatar.
   - **Robux Management Component**: Allow users to set their Robux balance.
   - **Settings Menu Component**: Create options for user preferences.
4. **Implement State Management**: Use React state hooks or Zustand to manage the state for user inputs and Robux settings.
5. **Style Components**: Apply Tailwind CSS styling based on design specifications, ensuring the layout is responsive.
6. **Testing**: Perform usability testing to ensure all features work correctly and the UI is intuitive.

## USER EXPERIENCE
Users will land on a clean interface with a prominent search bar in the header. They can easily input a username, triggering a search that displays the user's profile information in the central area. Users can manage their Robux through an intuitive input field, and access settings through a sidebar menu. The minimalist design ensures a seamless and enjoyable experience, allowing users to navigate effortlessly while focusing on their interactions.