Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed to simulate a fake Robux generator. It aims to attract users searching for Robux solutions, providing them with an engaging and straightforward interface. The application will focus on a clean, minimalist design that emphasizes user experience while maintaining a secure and straightforward flow.

## CORE FEATURES
1. **User Registration/Login**: Allow users to create an account or log in to access personalized features and track their "Robux" earned.
2. **Robux Generator**: A simulated tool that users can interact with to "generate" Robux, offering a fun and engaging experience.
3. **User Dashboard**: A simple dashboard where users can view their generated Robux, recent activities, and any available promotions.
4. **Referral Program**: Users can earn additional Robux by referring friends to the application, incentivizing sharing and engagement.
5. **FAQ Section**: A dedicated area to answer common questions and guide users about the app's features and usage.

## 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 include a top navigation bar, a hero section with a call to action, followed by the features section, user dashboard, and footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for a consistent and elegant user interface.
- **State Management**: Redux or React Context API as needed for managing user sessions and data.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Tailwind CSS**: Configure Tailwind CSS for styling by installing necessary dependencies and setting up the Tailwind configuration file.
3. **Implement Routing**: Use React Router to manage navigation between the login, dashboard, and home pages.
4. **Create UI Components**: Develop reusable components using shadcn/ui, focusing on buttons, forms, and layout structures.
5. **Develop User Authentication**: Implement user registration and login functionality, connecting to a mock backend or using local storage for user data.
6. **Build the Robux Generator**: Create the generator feature with interactive elements that simulate Robux accumulation.
7. **Set up the Dashboard**: Design the user dashboard to display user data, generated Robux, and referral progress.
8. **Create the FAQ Section**: Develop a section with common questions to enhance user understanding and engagement.

## USER EXPERIENCE
Users will first encounter a welcoming hero section with a clear call to action inviting them to either log in or start generating Robux. After logging in, users will be directed to their dashboard, where they can see their generated Robux and referral progress. The layout will ensure intuitive navigation, with easy access to features and an engaging flow that encourages users to explore and interact with the app. The minimalist design will enhance usability, making it accessible and visually appealing.

This prompt outlines a clear path to creating a functional and engaging web app that meets the user's vision while adhering to best practices in design and user experience.