Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to offer users a simple and engaging interface for interacting with virtual currency (Robux) gift functionalities. The application aims to provide an intuitive user experience while maintaining minimalist aesthetics, ensuring that users can easily navigate and access the key features without distractions.

## CORE FEATURES
1. **User Registration and Login**: Secure user authentication allowing users to create accounts, log in, and manage their profiles.
2. **Robux Gift Generation**: A feature that generates virtual Robux gift codes for users, providing a straightforward interface for code retrieval.
3. **Transaction History**: Users can view their past gift transactions, including details such as date, amount, and status of each gift.
4. **Referral System**: Encourages users to invite friends to join the platform, rewarding them with additional gift codes or bonuses.
5. **Contact Support**: A dedicated section for users to reach out for assistance, including a form for inquiries and FAQs.

## 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 consist of a top navigation bar, a large hero section for key messaging and CTAs, followed by feature sections, testimonials, and a footer with contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and Tailwind CSS.
2. **Install Dependencies**: Install required libraries including shadcn/ui and any state management libraries.
3. **Create Basic Structure**: Set up the main layout with a navigation bar, hero section, and footer.
4. **Develop Core Features**:
   - Implement user registration and login functionalities.
   - Create the Robux gift generation feature with backend integration.
   - Build the transaction history page to display past transactions.
   - Implement the referral system logic and UI.
   - Design the contact support section with a form.
5. **Styling**: Apply Tailwind CSS classes to create the minimalist design, ensuring responsiveness across devices.
6. **Testing**: Conduct thorough testing for all features, ensuring smooth user interactions and fixing any bugs.
7. **Deployment**: Prepare the application for deployment on a platform like Vercel or Netlify.

## USER EXPERIENCE
The application will prioritize user-friendly interactions, allowing users to navigate easily between sections. Key flows include seamless registration and login processes, effortless generation of Robux gift codes, and straightforward access to transaction histories. The minimalist design will enhance usability, ensuring users can focus on their tasks without being overwhelmed by clutter. Responsive design principles will ensure a consistent experience across desktop and mobile devices.