Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Robuxgift.loveable.app is a minimalist web application designed to provide users with a straightforward platform to manage and acquire Robux, the virtual currency for Roblox. The app focuses on enhancing user experience with a clean interface and easy navigation, enabling users to efficiently access and manage their Robux gifts.

## CORE FEATURES
1. **User Registration & Authentication**: Allows users to create accounts and securely log in to manage their Robux.
2. **Robux Balance Overview**: A dashboard feature that displays the user's current Robux balance, transaction history, and gift options.
3. **Robux Gift Options**: Users can select from various gift options to send or receive Robux, with clear descriptions and values.
4. **Transaction Management**: Users can view and manage their transactions, including sending and receiving gifts, with a simple and intuitive interface.
5. **Support & FAQs**: A dedicated section for user support and frequently asked questions, ensuring users can find help easily.

## 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 structure includes a hero section with a welcome message, followed by key features, user testimonials, and a clear call-to-action (CTA) button. The dashboard will feature cards for balance overview and transactions, arranged in a grid layout for easy access.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context or Zustand (optional, depending on complexity)

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create the Folder Structure**: Organize the project into components, pages, and styles for maintainability.
4. **Build the Authentication Flow**: Implement user registration and login functionality using React Context for state management.
5. **Develop the Dashboard**: Create the main dashboard component to display the Robux balance, gift options, and transaction history.
6. **Implement Transaction Management**: Develop the functionality for users to send and receive gifts, including transaction history.
7. **Design the UI**: Apply Tailwind CSS to style components according to the specified design specifications.
8. **Create the Support Section**: Implement the FAQ and support section to assist users.
9. **Test the Application**: Conduct thorough testing to ensure functionality and user experience.
10. **Deploy the Application**: Prepare the app for deployment on a suitable platform.

## USER EXPERIENCE
Users will experience a streamlined interface with easy navigation through the main features. Upon logging in, they will be greeted with a clear overview of their Robux balance and recent transactions. The minimalist design will guide users effortlessly to the Robux gift options and support sections, ensuring they can manage their gifts without confusion. Responsive design will ensure a seamless experience across devices, maintaining accessibility and usability.