Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to promote and facilitate gifting Robux, aiming to create a seamless experience for users looking to send Robux as gifts. The page will emphasize simplicity, clarity, and user engagement to drive conversions.

## CORE FEATURES
1. **Hero Section**: An eye-catching hero area with a strong headline, a brief description of the gifting service, and a prominent call-to-action button encouraging users to get started.
2. **How It Works**: A straightforward explanation of the gifting process, outlining the steps users need to take to send Robux to others.
3. **Benefits**: A section highlighting the advantages of using the gifting service, such as convenience, speed, and security.
4. **Testimonials**: User testimonials to build trust and credibility, showcasing positive experiences from those who have used the service.
5. **FAQ Section**: Answers to common questions regarding Robux gifting, helping to alleviate user concerns and encourage sign-ups.
6. **Contact Form**: A simple contact form for users to reach out with inquiries or support requests.

## 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 be a single-column format with sections stacked vertically, featuring a large hero area at the top, followed by the How It Works, Benefits, Testimonials, FAQ, and Contact Form sections.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not necessary for a landing page, but Context API can be used for managing form data if needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui for components.
2. **Create the Layout**: Develop a main layout component that includes sections for the hero, features, testimonials, FAQ, and contact form.
3. **Build the Hero Section**: Design the hero area with a strong headline, a brief description, and a call-to-action button styled with the primary color.
4. **Add Sections**: Implement the How It Works, Benefits, Testimonials, and FAQ sections, ensuring they are visually distinct and easy to read.
5. **Implement the Contact Form**: Create a simple contact form using controlled components for user submissions.
6. **Style Components**: Use Tailwind CSS classes to style all components according to the specified design guidelines.
7. **Test Responsiveness**: Ensure the landing page is fully responsive on various devices and screen sizes.
8. **Deploy the Landing Page**: Use a service like Vercel or Netlify for deployment.

## USER EXPERIENCE
The landing page will provide an intuitive experience where users can quickly understand the gifting process. Interaction flows will be straightforward, guiding users from the hero section to the benefits and FAQs, with easy navigation back to the contact form. Clear calls-to-action will encourage users to engage with the service, and the minimalist design will ensure that users remain focused on the content without distraction.