Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application that simulates the process of donating Robux in Roblox, utilizing the new Roblox Plus features. The application will provide users with a clean, intuitive interface to engage with the donation simulation, aiming to enhance user interaction and experience within the Roblox ecosystem.

## CORE FEATURES
1. **Robux Donation Simulation**: Users can simulate donating Robux to various in-game items or avatars, providing a fun and engaging experience.
2. **User Profiles**: Allow users to create and manage profiles, enabling them to track their simulated donations and preferences.
3. **Donation History**: A feature that logs past simulated donations, allowing users to review their activity over time.
4. **Interactive Tutorials**: Step-by-step guides that help users understand how to donate Robux effectively, enhancing user engagement.
5. **Community Feed**: A section where users can share their experiences and tips about Robux donations, fostering a community around the application.
6. **Responsive Design**: Ensures that the application is fully functional on various devices, providing a seamless experience across desktops, tablets, and phones.

## 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 top navigation bar, a hero section showcasing the donation simulation, followed by features, testimonials, and a footer with contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up the React Project**: Create a new React application using Create React App with TypeScript support.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create the Layout**: Develop the main layout structure including the navigation bar, hero section, features section, and footer.
4. **Develop Core Features**:
   - Implement the donation simulation feature.
   - Set up user profile creation and management functionalities.
   - Create the donation history log using local storage or a simple backend.
   - Integrate interactive tutorials using modals or popups.
   - Build the community feed feature where users can share experiences.
5. **Add Responsive Design**: Ensure all components are responsive by using Tailwind's utility classes.
6. **Testing**: Perform thorough testing of all features across different devices and browsers.

## USER EXPERIENCE
Users will start by visiting the landing page, where they are greeted with a clear call to action to start the donation simulation. They can navigate through the application using the top navigation bar, access their profiles, view donation history, and check out community interactions. The design will focus on simplicity and ease of use, ensuring that users can quickly understand how to engage with the donation simulation and access tutorials. The application will also be responsive, allowing users to seamlessly interact with the features on any device.