Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a landing page for a service that offers fake Robux. The page will serve as a marketing platform to attract users by showcasing the features and benefits of the service, leading them to take action through clear calls to action (CTAs).

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that captures attention with a catchy headline, a brief description, and a prominent CTA button.
2. **Features Overview**: A section detailing the main features of the service, including how it works, benefits, and any unique selling propositions.
3. **Testimonials**: A section showcasing user reviews and testimonials to build trust and credibility.
4. **Pricing Information**: Clear and concise pricing plans, if applicable, to inform users about any potential costs involved.
5. **Contact Form**: A simple contact form for inquiries, allowing users to reach out for more information.

## 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 with sections stacked vertically, allowing easy scrolling. The hero section at the top, followed by features, testimonials, pricing, and a contact form at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for a landing page, but can use React's built-in state if needed for form handling

## IMPLEMENTATION STEPS
1. **Set up the React project**: Use Create React App with TypeScript template.
2. **Install Tailwind CSS**: Follow the Tailwind CSS installation guide to set it up within your project.
3. **Import Inter font**: Add Inter font from Google Fonts in your index.html or through CSS imports.
4. **Create the main components**:
   - Hero Component: Include a headline, description, and CTA button.
   - Features Component: Layout features in a grid or list format with icons or illustrations.
   - Testimonials Component: Create a visually appealing layout for user reviews.
   - Pricing Component: Design pricing options clearly.
   - Contact Form Component: Include fields for user name, email, and message with a submit button.
5. **Style components using Tailwind CSS**: Apply the defined design specifications for typography, colors, and border radius.
6. **Implement responsive design**: Ensure the layout is mobile-friendly by using Tailwind's responsive utilities.
7. **Deploy the landing page**: Use a platform like Vercel or Netlify for easy deployment.

## USER EXPERIENCE
Users will land on a clean and straightforward page where they can easily navigate through sections. The hero section will immediately draw them in, followed by a clear explanation of the service's benefits. Testimonials will reinforce trust, while the contact form will provide a simple way for users to get in touch. The overall experience will emphasize ease of navigation and clarity, encouraging users to interact with the CTAs.