Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that allows users to visually simulate the experience of having Robux in Roblox, using fake avatars and customizable fake Robux amounts. Users can search for any Roblox username, view their avatar, and set a desired amount of fake Robux, creating an engaging and interactive experience while emphasizing a minimalist design.

## CORE FEATURES
1. **Username Search**: Users can input any Roblox username to retrieve and display the corresponding avatar.
2. **Fake Robux Customization**: Users can set and display a customizable amount of fake Robux associated with the searched username.
3. **Avatar Display**: A visually appealing representation of the avatar will be shown to enhance the realism of the interaction.
4. **User Profiles**: Users can save their favorite searches and displayed avatars for easy access later.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across 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 search bar for username input, a central display area for avatars and fake Robux, and a footer with additional links or information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand (or React Context) for managing user data and searches.

## IMPLEMENTATION STEPS
1. **Set up the React application** using Create React App with TypeScript.
2. **Install dependencies**: Tailwind CSS, Zustand, and shadcn/ui for UI components.
3. **Create the main components**:
   - SearchBar component for username input.
   - AvatarDisplay component to show the avatar and fake Robux.
   - UserProfile component to manage saved profiles.
4. **Implement state management** using Zustand to handle user search input and saved avatars.
5. **Style components** using Tailwind CSS, ensuring to apply the specified design specifications.
6. **Test responsiveness** across different devices and screen sizes.
7. **Deploy the application** on a suitable platform like Vercel or Netlify.

## USER EXPERIENCE
Users will begin by entering a Roblox username in the search bar at the top of the page. Upon submission, the application will display the corresponding avatar along with the option to customize the fake Robux amount. Users can easily adjust the amount, and the changes will be reflected in real-time. The application will allow users to save their favorite profiles for quick access in the future, creating a smooth and engaging experience focused on minimalism and usability.