Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a minimalist landing page titled "100 robux" designed to attract users interested in Roblox's virtual currency. Its primary aim is to provide information about acquiring Robux, showcase its benefits, and encourage user engagement through clear calls to action.

## CORE FEATURES
1. **Hero Section**: An engaging introduction that captures the essence of "100 robux" with a compelling tagline and a prominent call-to-action button.
2. **Benefits Overview**: A section highlighting the advantages of using Robux, such as enhancing gameplay and purchasing exclusive items.
3. **How It Works**: A simple explanation of the process for acquiring Robux, presented in an easy-to-understand format with visual icons.
4. **Testimonials**: User reviews and feedback that build trust and credibility, showcasing real experiences from satisfied customers.
5. **Contact Information**: A section for users to reach out with questions or feedback, including a simple contact form.
6. **FAQs**: A dedicated area addressing common questions about Robux to assist users in understanding the product better.

## 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-page layout organized into sections: Hero, Benefits, How It Works, Testimonials, FAQs, and Contact. Each section will be clearly defined with ample spacing and a consistent design.

## 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 the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Structure**: Build the main layout with sections for Hero, Benefits, How It Works, Testimonials, FAQs, and Contact.
3. **Implement Hero Section**: Add a background image or color, a catchy tagline, and a call-to-action button styled with the primary color.
4. **Develop Benefits Section**: Use cards or icons to represent the key benefits of Robux, making sure to maintain the minimalist design.
5. **Add How It Works Section**: Provide a simple three-step process with visual aids to explain how users can get Robux.
6. **Incorporate Testimonials**: Fetch or hardcode user testimonials, ensuring they are visually appealing and trustworthy.
7. **Create FAQs Section**: List common questions and answers with accordion functionality for a clean user experience.
8. **Contact Section**: Implement a contact form that captures user inquiries, styled in line with the overall design scheme.
9. **Test for Responsiveness**: Ensure all sections are responsive and maintain usability across different devices.

## USER EXPERIENCE
The user journey begins with an eye-catching hero section that draws users in, followed by an informative breakdown of Robux's benefits. Users can easily navigate through the page to learn how to acquire Robux, see real user testimonials, and have their questions answered in the FAQs. The contact section provides a seamless way for users to engage further, making the overall experience straightforward and engaging.