Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project, "fakerobuxgift.lovable.pp," is a landing page designed to promote and offer users a simple way to generate Robux gift codes. The main purpose is to attract potential users through a clean, engaging design that highlights the benefits and features of the service while facilitating easy navigation and conversion.

## CORE FEATURES
1. **Hero Section**: A prominent introduction that captures the user's attention with a clear value proposition and a compelling call-to-action (CTA) button.
2. **Features Overview**: A succinct list of the main benefits of using the service, presented in a visually engaging format, detailing how users can earn or redeem Robux.
3. **Testimonials**: User reviews and success stories that build trust and credibility, showcasing real experiences from satisfied users.
4. **FAQ Section**: A concise set of frequently asked questions addressing common user concerns and clarifying the service's functionality.
5. **Contact Form**: A simple form enabling users to reach out for more information or support, enhancing user engagement.
6. **Newsletter Signup**: An option for users to subscribe for updates, promotions, and tips related to Robux and the platform.

## 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 main layout will feature a vertical scrolling design with sections stacked one below the other, ensuring easy navigation. Each section will be clearly defined with ample spacing to enhance readability and focus.

## 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 using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Components**:
   - Develop the Hero component, including a title, subtitle, and CTA button.
   - Build the Features section to display key benefits using cards styled with Tailwind CSS.
   - Create a Testimonials component to showcase user feedback.
   - Implement the FAQ section with accordion functionality for a clean user experience.
   - Develop a simple Contact Form component using controlled inputs.
   - Add a Newsletter Signup component that captures user emails.
4. **Style the Components**: Apply Tailwind CSS classes to achieve the minimalist design, ensuring responsiveness across devices.
5. **Optimize Performance**: Review and optimize the loading speed and mobile responsiveness of the landing page.
6. **Deploy the Landing Page**: Use a service like Vercel or Netlify to deploy the landing page for public access.

## USER EXPERIENCE
The user experience should be intuitive and straightforward, allowing visitors to quickly understand the service's benefits and take action. Users will be greeted by an inviting hero section that draws them in, followed by easily digestible information about features and user testimonials. The contact form and newsletter signup will provide avenues for engagement, while a well-structured FAQ section will help alleviate any concerns, ensuring a smooth journey through the landing page.