Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
This project is a web application designed to simulate a "Fake Robux Send" service. Users will be able to search for Roblox usernames, which will display the corresponding avatar and display name. The application focuses on providing a fun and engaging experience while maintaining a minimalist and clean design aesthetic.

# CORE FEATURES
1. **Username Search**: A search bar that allows users to input a Roblox username, displaying the username, avatar image, and display name.
2. **Avatar Display**: Visually appealing representation of the searched username's avatar.
3. **Display Name Retrieval**: Displays the display name associated with the searched username.
4. **Responsive Design**: Fully functional and visually appealing on both desktop and mobile devices.
5. **Minimalist Interface**: A clean and simple UI that emphasizes usability and quick access to features.

# 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**: A single-page layout featuring a large search bar at the top, followed by sections displaying the username, avatar, and a footer with contact information and links.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management (useState and useEffect) for simplicity.

# IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**:
   - **SearchBar Component**: For user input of Roblox usernames.
   - **UserDisplay Component**: To show the username, avatar, and display name.
4. **Implement API Calls**: Create functions to fetch user data based on the username input.
5. **Handle State**: Use React state to manage the input and fetched user data.
6. **Style the Application**: Apply Tailwind CSS classes based on the design specifications provided.
7. **Test Responsiveness**: Ensure the application functions well on various screen sizes and devices.

# USER EXPERIENCE
Users will land on a clean and simple interface with a prominent search bar at the top. Upon entering a Roblox username, the application will display the corresponding avatar and display name directly below the search bar. The minimalist design ensures quick access to information, with smooth transitions and a focus on user interaction. Users can easily perform multiple searches without navigation clutter, enhancing the overall experience.