Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to simulate a fake Robux donation website, focusing on a minimalist aesthetic that emphasizes clean design and user engagement. The main purpose is to attract visitors, present features, and encourage them to engage with the site, all while maintaining a simple and straightforward user experience.

## CORE FEATURES
1. **Hero Section**: A prominent introductory area with an engaging tagline and a call-to-action button that invites visitors to learn more or participate.
2. **How It Works**: A section explaining the fake donation process in a clear, concise manner, using simple language and icons to enhance understanding.
3. **Testimonials**: A section featuring fictional testimonials to create a sense of community and trust around the service being offered.
4. **Benefits**: Highlight the advantages of using the site, such as ease of use and accessibility, with engaging visuals and brief descriptions.
5. **Call to Action (CTA)**: A clear and compelling CTA encouraging visitors to take action, such as “Start Donating Now” or “Join the Community.”
6. **Contact Information**: A simple contact form allowing users to reach out for more information or support.

## 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 should be a single-column format with a fixed header, followed by the hero section, features sections, testimonials, a CTA, and a footer with contact information.

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

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React application using Create React App with TypeScript.
2. **Install Tailwind CSS**: Follow the Tailwind CSS installation guide to integrate it into your React application.
3. **Create components**:
   - Build the `Hero` component to include the main tagline and CTA button.
   - Develop the `HowItWorks` component to explain the donation process visually.
   - Create a `Testimonials` component to display fictional user feedback.
   - Construct a `Benefits` component to highlight key advantages.
   - Develop the `CTA` component to prompt user engagement.
   - Create a `Contact` component with a simple form.
4. **Style components**: Use Tailwind CSS to apply the defined design specifications (colors, typography, spacing, and border radius).
5. **Responsive design**: Ensure the layout is responsive, adjusting elements for different screen sizes.
6. **Testing**: Conduct thorough testing to ensure all components work correctly and the design is consistent across devices.

## USER EXPERIENCE
The user experience will focus on simplicity and clarity. Users will land on the page and immediately see the engaging hero section, prompting them to learn more. As they scroll, they will encounter sections that explain the service, showcase fictional testimonials, and highlight benefits, all leading up to a strong call to action. The contact form will provide an easy way for users to reach out, enhancing their interaction with the site. The minimalist design will ensure that users are not overwhelmed, facilitating a smooth navigation experience.