Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application that replicates the Roblox gifting system. Users will be able to search for a Roblox username, view the associated player account, and send Robux. However, unlike the original system, the application will not facilitate actual Robux transfers. This web app aims to provide a streamlined user experience focused on ease of use and accessibility.

## CORE FEATURES
1. **Username Search**: Users can enter a Roblox username to retrieve the corresponding account details, displaying essential player information.
2. **Account Overview**: A detailed view of the player's account, including avatar, stats, and other relevant information.
3. **Gifting Interface**: A simple interface where users can select an amount and initiate a gift process, although the transfer will not be completed in this app.
4. **User History**: A section showing the user's past searches or interactions with the gifting system for easy access.
5. **Responsive Design**: The application will be optimized for both desktop and mobile devices, ensuring accessibility across various platforms.
6. **Contact Support**: A contact form for users to reach out for assistance or feedback regarding the app.

## 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 layout will feature a top navigation bar, a central search area for usernames, a results display section, and a footer for support and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in Context API for managing user state and searches.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript using Create React App and set up Tailwind CSS for styling.
2. **Install Dependencies**: Add necessary libraries such as shadcn/ui for UI components and any state management tools.
3. **Create Components**: Develop the main components including SearchBar, AccountOverview, GiftingInterface, and UserHistory.
4. **Implement Routing**: Use React Router to manage navigation between different views if necessary.
5. **Fetch Data**: Create functions to simulate fetching user data based on the entered username using mock data or open sources.
6. **Style Components**: Apply Tailwind CSS classes to ensure a minimalist aesthetic, using the specified primary color and typography.
7. **Testing**: Conduct user testing to gather feedback on the functionality and user experience, making adjustments as needed.
8. **Deployment**: Deploy the application to a suitable hosting platform like Vercel or Netlify.

## USER EXPERIENCE
Users will be greeted with a clean interface where they can easily input a Roblox username. Upon submission, they will see an account overview with relevant details. The gifting interface will allow users to select an amount, and although the actual transfer will not occur, it will provide a seamless experience mimicking the intended functionality. The responsive design ensures that users can access the app on any device, enhancing usability and engagement.