Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to present a fake Roblox gifting service that allows users to simulate Robux gifting. The main purpose is to attract users through a clean, minimalist design while providing essential information about the service, encouraging engagement and conversions.

## CORE FEATURES
1. **Hero Section**: A prominent hero section that includes a catchy tagline, a brief description of the service, and a strong call-to-action (CTA) button to encourage sign-ups or further exploration.
2. **How It Works**: A section explaining the process of using the gifting service, presented in an easy-to-understand format with icons or illustrations.
3. **Testimonials**: Display user testimonials to build trust and credibility, showcasing positive feedback about the service.
4. **Frequently Asked Questions (FAQ)**: A section addressing common questions users might have about the service to alleviate concerns and enhance understanding.
5. **Contact Form**: A simple contact form for users to reach out with inquiries or feedback, enhancing user engagement and 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**: A single-column layout with sections stacked vertically, ensuring easy navigation and accessibility.

## 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 Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling components.
3. **Create the Layout**: Develop a responsive layout using Tailwind CSS classes, ensuring adherence to the minimalist design aesthetic.
4. **Build the Hero Section**: Implement the hero section with a catchy tagline and CTA button styled with the primary color.
5. **Develop Feature Sections**: Create the "How It Works" and "Testimonials" sections, using clear typography and sufficient white space to maintain readability.
6. **Add FAQ Section**: Implement a collapsible FAQ section to engage users and provide quick answers.
7. **Implement Contact Form**: Create a simple contact form with validation for user inquiries.
8. **Responsive Design**: Test the design across various screen sizes to ensure optimal user experience.

## USER EXPERIENCE
Users will land on a visually appealing hero section that captures their attention with a clear message and a prominent CTA. As they scroll, they will encounter informative sections detailing the service, supported by testimonials that enhance trust. The FAQ section will provide clarity, and the contact form will allow users to reach out seamlessly, creating an engaging and inviting user experience.