Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate a Robux gifting experience, resembling the aesthetics and functionality of the Roblox platform. The app will provide users with a clean and simple interface to engage with, while emphasizing a minimalist design that enhances usability.

## CORE FEATURES
1. **User Registration & Authentication**: Allow users to create accounts and log in securely to access personalized features.
2. **Robux Gifting Simulation**: Provide a user-friendly interface that showcases how users can "gift" Robux, including input fields for amounts and recipient usernames.
3. **Dashboard**: A simple dashboard displaying user stats, recent activities, and potential Robux recipients.
4. **Tutorial Section**: Offer users guidance on how to use the app effectively, with tips and FAQs.
5. **Contact Support**: A contact form for users to reach out for help or inquiries regarding their experience.
6. **Responsive Design**: Ensure the application is fully responsive for optimal performance on both desktop and mobile 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 showcasing the main features, followed by a grid layout for additional features, and a footer containing contact info and links.

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

## IMPLEMENTATION STEPS
1. **Set up the project environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Configure Tailwind CSS**: Set up Tailwind CSS to work with your React application, adjusting the configuration to include the desired fonts and colors.
3. **Create the main components**:
   - Build the header with navigation links.
   - Design the hero section with a clear call-to-action (CTA).
   - Develop the dashboard to display user stats and gifting options.
   - Create the tutorial section with collapsible panels for FAQs.
   - Implement the contact support form.
4. **Implement user authentication**: Integrate authentication functionality using Firebase or a similar service to manage user accounts.
5. **Develop the gifting logic**: Create the functionality for users to "gift" Robux, ensuring clarity and ease of use.
6. **Add responsive design features**: Use Tailwind's responsive utilities to ensure the application looks great on all devices.
7. **Test the application**: Conduct usability testing to gather feedback and make necessary adjustments.

## USER EXPERIENCE
Users will start by landing on a clean homepage with a prominent CTA to register or log in. Upon logging in, they'll access their dashboard, where they can view their stats and initiate Robux gifting. The design will ensure that users can easily navigate through features, find helpful tutorials, and reach out for support. The overall experience will prioritize simplicity and clarity, making it easy for users to understand and engage with the app's offerings.