Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to facilitate donations of virtual currency (fake Robux) within a Roblox-like environment. The site will focus on a clean and engaging user experience, allowing users to understand the donation process easily while capturing their interest with a visually appealing design.

## CORE FEATURES
1. **Hero Section**: A captivating introduction to the concept of donating fake Robux, with a strong call-to-action (CTA) button to encourage users to start donating.
2. **How It Works**: A simple explanation of the process for donating fake Robux, presented in a clear and concise manner.
3. **Benefits of Donating**: A section highlighting the benefits of donating fake Robux, including the impact on the Roblox community and user engagement.
4. **Testimonials**: A showcase of user reviews and experiences, enhancing credibility and encouraging new users to participate.
5. **Contact Form**: A straightforward form for users to submit inquiries or feedback, ensuring accessibility and communication.
6. **Social Proof**: Integration of social media links or follower counts to build trust and community around the platform.

## 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**: A single-page layout with sections for the hero, how it works, benefits, testimonials, contact form, and social proof, ensuring a smooth scrolling experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, as the landing page does not require complex state management.

## IMPLEMENTATION STEPS
1. **Set up the React Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Tailwind CSS**: Add Tailwind CSS to the project for styling.
3. **Create Components**:
   - Build a `Hero` component for the introduction.
   - Develop a `HowItWorks` component to explain the donation process.
   - Create a `Benefits` component to showcase reasons to donate.
   - Implement a `Testimonials` component for user reviews.
   - Set up a `ContactForm` component for inquiries.
   - Add a `SocialProof` component for credibility.
4. **Style Components**: Use Tailwind CSS classes to apply the defined design specifications, ensuring a minimalist aesthetic.
5. **Configure Routing**: Utilize React Router if necessary for potential future expansions of the site.
6. **Test Responsiveness**: Ensure that all components are responsive and function well on various screen sizes.

## USER EXPERIENCE
Users will land on a visually appealing homepage with a clear navigation structure. The hero section will draw their attention immediately, with easy access to learn more about the donation process. As they scroll through the page, they will encounter engaging content that motivates them to contribute. The testimonials will build trust, while the contact form will provide a direct line for any questions, enhancing user interaction and satisfaction.