Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a minimalist landing page for a fake Robux gift app. The primary purpose of the application is to attract users with a clean and simple design, promoting the idea of receiving Robux gifts through an engaging user experience. The landing page will focus on conversion by highlighting key features and encouraging visitors to take action.

## CORE FEATURES
1. **Hero Section**: An engaging introduction to the app with a catchy headline, a brief description, and a prominent call-to-action (CTA) button encouraging users to "Get Started" or "Claim Your Robux".
2. **Features Overview**: A section outlining the main benefits of the app, such as "Easy to Use", "Fast Delivery", and "Secure Transactions", each with a brief description and relevant icons.
3. **Testimonials**: A carousel of user testimonials to build trust and credibility, showcasing positive experiences from users who have "received" Robux.
4. **FAQ Section**: A concise FAQ addressing common queries about the app, including security concerns and how to redeem Robux.
5. **Contact Form**: A simple contact form for users to reach out for support or inquiries, including fields for name, email, and message.
6. **Footer**: A footer with links to social media, terms of service, and privacy policy.

## 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 structured with a full-width hero section at the top, followed by a two-column features section, a testimonials carousel, an FAQ accordion, and a contact form at the bottom, ensuring a clear flow and easy navigation.

## 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 React Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling components.
3. **Create the Layout**: Develop the main layout structure using Tailwind CSS classes to ensure responsiveness.
4. **Build the Hero Section**: Implement the hero section with a bold headline, brief description, and a prominent CTA button styled with the primary color.
5. **Develop Features Section**: Create a grid layout for the features overview, using icons and text to describe each feature.
6. **Implement Testimonials**: Set up a carousel component to display user testimonials with fade animations.
7. **Add FAQ Section**: Create an accordion component for the FAQ section to allow users to expand and collapse answers.
8. **Design Contact Form**: Build a contact form with input validation and a submit button styled according to the design specifications.
9. **Footer Implementation**: Add a footer section with links and social media icons.
10. **Testing**: Conduct thorough testing to ensure all components are functional and responsive on different devices.

## USER EXPERIENCE
Users will land on a visually appealing page that clearly presents the app's value proposition. They will be guided through the features, see testimonials that build trust, and have the opportunity to ask questions through the FAQ section or contact form. The intuitive layout and clear CTAs will encourage users to engage with the app and explore further, creating a seamless user journey from arrival to action.