Lovable Prompt Creator - AI Prompt Generator

`code`code`## APPLICATION OVERVIEW
The project is a web application designed for purchasing virtual currency similar to Roblox's "Robux," referred to here as "Rolux." It aims to provide users with a simple interface to buy Rolux while ensuring a secure and efficient transaction process. The application will focus on a clean, minimalist design that enhances the user experience by providing straightforward navigation and clear calls to action.

## CORE FEATURES
1. **User Authentication**: Secure login and registration system to ensure user accounts are protected.
2. **Purchasing System**: A streamlined interface for users to select and purchase Rolux using various payment methods.
3. **Transaction History**: Users can view their past transactions, including amounts purchased and dates.
4. **Support Center**: A help section where users can find FAQs and contact support for assistance.
5. **Responsive Design**: An interface that adapts to different screen sizes, ensuring usability across devices.

## 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 consist of a top navigation bar, a hero section with a call-to-action, followed by the features section, transaction history, and a footer with the support center.

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

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React application with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the authentication module**: Implement user registration and login functionalities using Firebase or another authentication service.
3. **Build the purchasing interface**: Design a component where users can select Rolux amounts and proceed to checkout.
4. **Implement transaction history**: Create a dashboard view where users can see their purchase history.
5. **Develop the support center**: Create a FAQ section and a contact form for user inquiries.
6. **Optimize for responsiveness**: Ensure that all components are responsive and adapt to different screen sizes using Tailwind CSS.

## USER EXPERIENCE
Users will first encounter a welcoming hero section that clearly states the purpose of the application and provides a prominent call-to-action button to purchase Rolux. After logging in, users can easily navigate through the purchasing options, view their transaction history, and access support if needed. The overall experience will be designed to minimize friction, allowing users to complete purchases swiftly while feeling secure about their transactions.