Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to simulate a "fake Robux donor" site. The main purpose is to attract users who are interested in gaining Robux through a visually appealing and straightforward interface. The landing page will focus on engaging users with clear calls to action and highlight the benefits of using the site.

## CORE FEATURES
1. **Hero Section**: A captivating introduction that showcases the primary value proposition of the site, including a bold headline and a call-to-action (CTA) button.
2. **How It Works**: A section explaining the process of receiving Robux, presented in a simple and concise manner with icons or illustrations.
3. **Benefits**: Highlight the advantages of using the site, such as ease of use, security, and fast delivery of Robux.
4. **Testimonials**: A section featuring user testimonials to build trust and credibility.
5. **FAQ**: A frequently asked questions area to address common concerns and provide clarity about the service.
6. **Contact Information**: A section where users can reach out for support or inquiries, including a form or direct email link.

## 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 follow a single-column structure with a full-width hero section, followed by sections stacked vertically, each having clear headings and ample spacing for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this landing page but can be considered for form handling if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout Components**: Develop reusable components for the header, footer, sections (Hero, How It Works, Benefits, Testimonials, FAQ, Contact).
4. **Implement Styling**: Use Tailwind CSS to style the components according to the design specifications, ensuring responsiveness.
5. **Add Content**: Populate the components with text and images based on the core features outlined.
6. **Implement CTA**: Ensure that all CTAs are functional and lead to an appropriate action (e.g., form submissions, links to other sections).
7. **Test Responsiveness**: Check the layout on different devices and screen sizes to ensure a seamless user experience.

## USER EXPERIENCE
The user experience will be straightforward and engaging. Users will land on a visually appealing hero section that quickly conveys the site's purpose. As they scroll down, they will encounter easy-to-understand descriptions of how the service works, alongside testimonials that build trust. The FAQ section will address potential doubts, and a clear contact option will be available for any inquiries, ensuring users feel supported throughout their journey on the site.