Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
GiftRobuxMobile is a minimalist web application designed to allow users to easily gift Robux (in-game currency for Roblox) to friends and family. The app focuses on a clean, user-friendly experience, providing essential features to manage gifting Robux seamlessly while ensuring a modern and engaging interface.

## CORE FEATURES
1. **User Authentication**: Secure login and registration system allowing users to create accounts and manage their profiles.
2. **Robux Gifting**: A straightforward interface for selecting the amount of Robux to gift and the recipient's username.
3. **Transaction History**: A section for users to view their past gifting transactions, including dates and amounts sent.
4. **Recipient Management**: Users can manage their list of friends or contacts to quickly select recipients for gifting.
5. **Notifications**: Real-time notifications to inform users about successful transactions, updates, and promotional offers.
6. **Responsive Design**: Optimized for both mobile and desktop devices, ensuring a seamless user experience across all platforms.

## 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 for easy access to core features, a central hero section for Robux gifting, and a sidebar for transaction history and recipient management.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing global state efficiently.

## IMPLEMENTATION STEPS
1. **Set up the React environment**: Initialize a new React project with TypeScript.
2. **Install dependencies**: Add Tailwind CSS and shadcn/ui components to the project.
3. **Create the authentication system**: Implement login and registration forms using React Hook Form for validation.
4. **Design the main layout**: Use Tailwind CSS for styling and structure the components as per the design specifications.
5. **Develop the Robux gifting feature**: Create a form for selecting Robux amounts and recipient usernames, integrating validation and error handling.
6. **Implement transaction history**: Create a component to display past transactions, fetching data from a mock API or local storage.
7. **Set up notifications**: Use a third-party library (like react-toastify) to manage user notifications.
8. **Ensure responsiveness**: Test and adjust styles for different screen sizes, ensuring a seamless experience on both mobile and desktop.

## USER EXPERIENCE
Users will start by signing up or logging into their accounts. Once authenticated, they will be greeted by a minimalist dashboard featuring a prominent gifting interface. Users can easily select a recipient and the amount of Robux to gift. Upon submission, they will receive immediate feedback through notifications confirming their transaction. The sidebar will allow users to navigate to their transaction history, where they can review their gifting activity. The overall experience is designed to be intuitive and straightforward, encouraging users to engage with the gifting process seamlessly.