Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a simple and engaging platform for users to acquire and manage Robux in Roblox. Its primary goal is to provide a user-friendly interface where users can easily navigate through features related to earning and managing Robux, thus enhancing their gaming experience.

## CORE FEATURES
1. **User Registration & Login**: Enables users to create an account and securely log in to manage their Robux transactions.
2. **Robux Balance Display**: Shows users their current Robux balance in real-time, with updates following any transactions.
3. **Robux Earning Options**: Provides various methods for users to earn Robux, including surveys, offers, and referral programs.
4. **Transaction History**: Displays a detailed history of the user's Robux transactions, including earnings and expenditures.
5. **Support & FAQs**: Offers a section for user support, providing answers to frequently asked questions and a contact form for further assistance.
6. **Profile Management**: Allows users to update their account details, preferences, and security settings.

## 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 header with navigation links, a hero section for key features, a section for user earnings, and a footer with support links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux (or React's Context API if preferred).

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React application with TypeScript using Create React App or Vite.
2. **Install necessary dependencies**: Include Tailwind CSS for styling, shadcn/ui for UI components, and Redux for state management if required.
3. **Create the main layout components**: Develop the header, footer, and main content areas using functional components.
4. **Implement routing**: Use React Router for navigation between different sections of the application.
5. **Build core features**:
   - Set up user authentication with registration and login forms.
   - Create components for displaying the user's Robux balance and transaction history.
   - Develop the Robux earning options with interactive elements.
6. **Design the UI**: Apply Tailwind CSS classes to style components according to the design specifications, ensuring the layout is responsive.
7. **Testing**: Conduct thorough testing of all features to ensure functionality and user experience are optimal.

## USER EXPERIENCE
Users will start on a welcoming homepage where they can quickly log in or register. Once logged in, they will see their Robux balance prominently displayed, with easy access to options for earning more Robux. The interface will guide users through their transaction history and provide helpful resources in the support section. The overall experience will emphasize clarity, simplicity, and ease of use, with a focus on responsive design for mobile and desktop users.