Lovable Prompt Creator - AI Prompt Generator

- ## APPLICATION OVERVIEW
This project is a web application designed to allow users to exchange virtual currency (Robux) into real currency. The primary purpose is to create a streamlined platform where users can easily understand the process, sign up, and engage with the services offered. The design will focus on minimalism and clarity to enhance user experience.

## CORE FEATURES
1. **User Registration & Authentication**: Allow users to create accounts and log in securely to access their profiles and transaction history.
2. **Robux Conversion Calculator**: A simple tool that enables users to input their Robux amount and see how much real currency they can receive.
3. **Transaction History**: Users can view a detailed history of their transactions, including dates, amounts, and statuses.
4. **Help & FAQ Section**: A resource for users to find answers to common questions about Robux conversion and the process involved.
5. **Contact Support**: A feature that allows users to submit queries or issues they encounter, facilitating direct communication with customer support.

## 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 application will feature a single-page layout with a hero section at the top, followed by the conversion calculator, transaction history, help section, and contact support area, all organized vertically with ample spacing.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Context API or Redux (as needed for managing user data and transactions)

## IMPLEMENTATION STEPS
1. **Setup Project Environment**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui components, and any necessary state management libraries (e.g., Redux).
3. **Create Basic Layout**: Develop the main layout structure using functional components, ensuring responsiveness and adherence to the specified design.
4. **Implement User Authentication**: Build user registration and login functionalities with appropriate form validation and error handling.
5. **Develop Conversion Calculator**: Create the calculator component that computes real currency values based on Robux input.
6. **Build Transaction History Component**: Implement a section to display user transaction history, utilizing state management for dynamic updates.
7. **Design Help & FAQ Section**: Organize a user-friendly FAQ section, allowing easy navigation and information retrieval.
8. **Integrate Contact Support Feature**: Develop a form for users to submit inquiries that connect to a backend service or email system.
9. **Final Testing & Deployment**: Conduct thorough testing for usability, responsiveness, and performance, followed by deployment to a hosting service.

## USER EXPERIENCE
Users will start on the landing section, where they can quickly navigate to the conversion calculator. The clear layout and straightforward design will allow them to input their Robux amount and see the conversion instantly. They can easily access their transaction history and utilize the help section for any queries. The contact support feature will provide reassurance, enabling them to reach out for assistance whenever needed. Overall, the user interactions will be seamless, focusing on efficiency and clarity in every step.