Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to promote a platform for creating and redeeming Robux visual gifts. The purpose of the landing page is to engage users, explain the service's benefits, and drive conversions through clear calls to action.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with a captivating headline, subheading, and a prominent call-to-action button encouraging users to learn more or sign up.
2. **How It Works**: A brief explanation of the process involved in creating and redeeming Robux visual gifts, using simple icons and concise text.
3. **Features Overview**: Highlight key features such as user-friendly interface, customizable gift options, and instant delivery.
4. **Testimonials**: Showcase user feedback and success stories to build trust and credibility.
5. **Call to Action**: An engaging section prompting users to start their journey, with clear instructions on signing up or creating a gift.
6. **Contact Information**: A simple form for users to get in touch with inquiries 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 consist of a single-page scroll design with sections stacked vertically, including a hero area at the top, followed by features, testimonials, 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 this landing page.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Create a new React app using Create React App with TypeScript template.
2. **Install Tailwind CSS**: Follow the official Tailwind CSS installation guide to integrate it into the project.
3. **Add Google Fonts**: Include the Inter font in your project by linking to it in the `index.html` file or importing it in your CSS.
4. **Create the layout components**: Build reusable components for the hero section, features list, testimonials, and contact form using Tailwind CSS for styling.
5. **Implement routing (if necessary)**: Use React Router for navigation, although this landing page is primarily a single-page design.
6. **Test responsiveness**: Ensure the layout adapts nicely across different screen sizes using Tailwind CSS's responsive utilities.

## USER EXPERIENCE
Users will land on a visually appealing hero section with a clear value proposition. As they scroll down, they will encounter easy-to-understand information about how the service works, followed by features that emphasize the platform's strengths. User testimonials will provide social proof, and a prominent call to action will guide them towards signing up. The contact section will offer a straightforward way for users to reach out for further information, enhancing user engagement and satisfaction.