Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application simulates a donation panel for Robux within the Roblox platform. It aims to provide a clean and minimalist interface where users can easily understand the donation process, view available options, and make contributions seamlessly.

## CORE FEATURES
1. **Donation Options**: Users can select different amounts of Robux to donate, presented in a clear and appealing manner.
2. **User Authentication**: Users can sign in or create an account to manage their donations and track history.
3. **Transaction History**: A section where users can view their past donations, including amounts and dates.
4. **Responsive Design**: The application will be fully responsive, ensuring a smooth experience on both desktop and mobile devices.
5. **Contact Support**: An easy-to-use contact form for users to reach out for support or inquiries.

## 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 header, a main section featuring donation options and transaction history, and a footer with contact support. The main section should be divided into two columns on larger screens, with options displayed prominently.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for managing user authentication and donation data.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project using Create React App with TypeScript.
2. **Install dependencies**: Include Tailwind CSS, shadcn/ui, and any necessary state management libraries.
3. **Create the layout**: Build the header, main content area, and footer using Tailwind CSS for styling.
4. **Implement user authentication**: Set up user login and registration forms, using React Context API to manage user state.
5. **Develop donation options**: Create a component that displays selectable donation amounts, styled with Tailwind CSS.
6. **Add transaction history**: Implement a section that retrieves and displays the user's donation history.
7. **Create contact support**: Build a contact form that allows users to submit inquiries, ensuring validation and user feedback.
8. **Ensure responsiveness**: Test the application on multiple devices and adjust styles as necessary to ensure a seamless experience.

## USER EXPERIENCE
Users will arrive at a minimalist landing page where they can immediately see donation options. Upon selecting an amount, they will be prompted to log in or create an account. Once logged in, they can easily submit donations, view their transaction history, or contact support through a dedicated form. The application will prioritize a smooth and engaging user experience, ensuring that all interactions are intuitive and straightforward.