Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page designed to facilitate donations of Robux, the in-game currency used in Roblox. The main purpose is to create an engaging and straightforward platform where users can easily understand how to donate Robux, the benefits of doing so, and how their contributions impact the Roblox community.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that clearly states the purpose of the page, with a compelling call-to-action (CTA) to donate Robux.
2. **How It Works**: A simple, step-by-step explanation of the donation process, including eligibility and methods for donating.
3. **Benefits of Donating**: Highlight the positive impacts of donations on the Roblox community, showcasing success stories or testimonials.
4. **Donor Recognition**: A section that acknowledges donors, fostering a sense of community and encouraging more contributions.
5. **Contact Information**: Easy access to support or questions regarding the donation process.

## 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 be a single-column structure, with each section stacked vertically for clarity. The hero section will occupy the top, followed by the how-to, benefits, donor recognition, and contact sections.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for this landing page as it is primarily informational.

## IMPLEMENTATION STEPS
1. **Set Up Project Environment**: Create a new React project with TypeScript and install Tailwind CSS and shadcn/ui for component styling.
2. **Create Layout Structure**: Develop a single-page layout with designated sections for the hero, how it works, benefits, donor recognition, and contact.
3. **Implement Hero Section**: Design a visually striking hero section with a strong CTA button styled with the primary color.
4. **Develop Content Sections**: Code the content for the how-to, benefits, and recognition sections, ensuring to use the specified typography and styling.
5. **Add Contact Information**: Include a simple contact form or contact details at the bottom of the page.
6. **Ensure Responsiveness**: Test the layout across different devices to ensure a seamless user experience.
7. **Deploy the Landing Page**: Use a suitable platform for deployment, ensuring the page is live and accessible to users.

## USER EXPERIENCE
Key user interactions will involve easily navigating through the sections of the landing page. Users should find it intuitive to understand the donation process, see the benefits of contributing, and feel encouraged to donate Robux. The clean and minimalist design will facilitate focus on the content, enhancing the user experience and promoting conversions effectively.