Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page that aims to attract users interested in acquiring Robux, the virtual currency for Roblox. The primary goal is to convert visitors through engaging content and a clear call-to-action that emphasizes the benefits of obtaining Robux.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a catchy tagline and an eye-catching call-to-action button to prompt users to take immediate action.
2. **Benefits Section**: A concise description of the advantages of obtaining Robux, highlighting how it enhances the gaming experience.
3. **Testimonials**: A section showcasing user testimonials to build trust and credibility among potential users.
4. **How It Works**: A simple, clear explanation of the process to acquire Robux, enhancing user understanding and confidence.
5. **FAQ Section**: Answers to common questions to address user concerns and provide additional information about Robux.
6. **Contact Form**: A straightforward contact form for 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 will follow a vertical stack, with sections clearly defined. The hero section will be at the top, followed by benefits, testimonials, how it works, FAQ, and a contact form.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the Layout**: Develop the main layout structure with a header and footer, ensuring responsiveness for various screen sizes.
3. **Build the Hero Section**: Design the hero section with a prominent title, subtitle, and call-to-action button styled with Tailwind CSS.
4. **Implement Benefits Section**: Create a visually appealing section that lists the benefits of Robux, using icons for better engagement.
5. **Add Testimonials**: Implement a carousel or grid layout for user testimonials, ensuring it is visually distinct from other sections.
6. **Explain How It Works**: Build a simple step-by-step guide section with graphical elements to enhance understanding.
7. **Create the FAQ Section**: Develop an accordion-style FAQ section to keep the design clean and organized.
8. **Construct the Contact Form**: Implement a contact form at the bottom of the page, ensuring it is easy to fill out and submit.
9. **Final Styling**: Review the overall design, ensuring consistency in spacing, typography, and color usage throughout the page.
10. **Test Responsiveness**: Conduct thorough testing across different devices to ensure optimal user experience and accessibility.

## USER EXPERIENCE
Key user interactions include clicking the call-to-action button in the hero section, scrolling through benefits and testimonials, expanding FAQs for more information, and submitting the contact form. The design will emphasize ease of navigation and clarity, making it simple for users to find the information they need and take action quickly. The minimalist design will ensure that users are not overwhelmed, keeping their focus on the primary goal of acquiring Robux.