Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
GiftRobuxMobile is a web application designed to facilitate the gifting of Robux, the in-game currency for Roblox. This minimalist application provides a user-friendly interface that allows users to easily manage their gifting transactions, ensuring a modern and engaging experience.

## CORE FEATURES
1. **User Authentication**: Secure login and registration system for users to create accounts and manage their profiles.
2. **Robux Gifting**: An intuitive interface for users to select the amount of Robux to gift and the recipient's username.
3. **Transaction History**: A dedicated section for users to view their past transactions, including dates and amounts sent.
4. **Recipient Management**: Functionality for users to manage a list of friends or contacts for quick recipient selection.
5. **Notifications**: Real-time alerts to inform users about successful transactions 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 features 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 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 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 welcomed by a minimalist dashboard featuring a prominent gifting interface. Users can easily select a recipient and the amount of Robux to gift. Upon submission, immediate feedback will be provided through notifications confirming their transaction. The sidebar facilitates navigation to their transaction history, where they can review their gifting activity. The overall experience is designed to be intuitive and straightforward, encouraging engagement with the gifting process seamlessly.