Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page designed to promote a service related to "Robux" offerings. Its main purpose is to attract users with a clean, minimalist design, providing essential information about the service, encouraging user engagement, and facilitating conversions through clear calls to action.

## CORE FEATURES
1. **Hero Section**: A prominent introduction with a compelling headline and subheadline, showcasing the main benefits of the service, paired with a strong call-to-action button.
2. **Features Overview**: A section highlighting key features of the service, presented in a clear, visually appealing manner to inform visitors of the unique aspects and benefits.
3. **Testimonials**: A section displaying user testimonials to build trust and credibility, featuring quotes from satisfied users.
4. **Contact Form**: A simple form allowing users to get in touch for more information or inquiries, enhancing engagement and potential lead collection.
5. **Call-to-Action (CTA)**: Strategically placed throughout the page to encourage users to take action, such as signing up or learning more.

## 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, ensuring easy scrolling and a clear flow of information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for a static landing page; however, consider using local state for form handling.

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript template.
2. **Install Tailwind CSS** and configure it in the project according to the Tailwind documentation.
3. **Include Inter font** in the project by adding it in the `index.html` or using Google Fonts in the Tailwind configuration.
4. **Create the main components**: 
   - Hero, Features, Testimonials, ContactForm, and CTA components.
5. **Develop the Hero Section** with a strong headline, subheadline, and CTA button styled with the primary color and rounded borders.
6. **Implement the Features Overview** section using cards that utilize the primary color for highlights and rounded corners.
7. **Add the Testimonials Section** to showcase user feedback, styled with emphasis on readability and user images (if available).
8. **Build the Contact Form** ensuring it is straightforward and visually aligned with the minimalist aesthetic.
9. **Ensure responsiveness** across devices by using Tailwind's responsive utilities.
10. **Conduct user testing** to refine the design and functionality based on feedback.

## USER EXPERIENCE
Users will encounter a seamless experience starting from the hero section, where they are greeted with a compelling value proposition. As they scroll through the features and testimonials, they will be able to see the benefits clearly laid out, further supported by social proof. The contact form at the end provides a straightforward way for users to engage further, ensuring that the entire experience is intuitive, engaging, and conversion-focused.