Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a lightweight web application designed for Roblox users, allowing them to send visual donations effectively. The application will provide a seamless and engaging interface for users to manage their donations, enhancing the overall experience within the Roblox community.

## CORE FEATURES
1. **User Registration and Authentication**: Users can create accounts and log in securely to manage their donation settings and view donation history.
2. **Donation Sender Interface**: A user-friendly interface for sending visual donations to others, including customizable messages and visuals.
3. **Donation History**: Users can view a log of their past donations, complete with timestamps and recipient details.
4. **Custom Visuals**: Options for users to upload or select from a gallery of visuals that will accompany their donations.
5. **Responsive Design**: Optimized for both desktop and mobile devices, ensuring a smooth experience across all platforms.
6. **User Profiles**: Each user can manage their profile settings and preferences, including notification settings for donation activities.

## 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 feature a top navigation bar, a central hero section for the donation sender interface, followed by sections for features, testimonials, and a footer with contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**: Initialize a new React project with TypeScript. Install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create the Layout Structure**: Build the main layout with a top navigation bar and footer. Use Tailwind CSS for styling.
3. **Implement User Authentication**: Set up user registration and login functionality with secure authentication methods.
4. **Develop the Donation Sender Interface**: Create the main feature where users can send visual donations with customizable messages.
5. **Build the Donation History Feature**: Implement a section where users can view past donations with relevant details.
6. **Add Responsive Design Features**: Ensure that all components are responsive and functional on various screen sizes.
7. **Test the Application**: Conduct thorough testing to identify and fix any bugs or usability issues.
8. **Deploy the Application**: Prepare the app for deployment on a hosting platform.

## USER EXPERIENCE
Users will have an intuitive experience starting from the landing page, where they can register or log in. Once logged in, they will be directed to the donation sender interface, where they can easily send donations by selecting visuals and entering messages. The donation history will be accessible via a simple tab, allowing users to track their contributions effortlessly. The responsive design will ensure a fluid experience whether using a desktop or mobile device, with all essential features readily accessible.