Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a high-conversion, responsive landing page for a "Productized Design Service" aimed at startups. This web application will showcase the service's benefits, pricing, and portfolio while providing a seamless user experience that encourages potential customers to engage with the service.

## CORE FEATURES
1. **Sticky Navbar**: A fixed navigation bar that includes a logo, links to key sections (Benefits, Services, Pricing, FAQ), and buttons for Login and Book a Call.
2. **Hero Section**: A prominent introduction featuring a bold headline, a subheadline, and call-to-action buttons to View Plans and See Portfolio, along with a strip of trusted company logos.
3. **Value Proposition**: A bento grid layout with three key benefits presented as cards, highlighting features such as Slack integration, fast turnaround times, and top-tier quality.
4. **Comparison Section**: An interactive "Us vs Them" table that contrasts the service's strengths against traditional hiring options, visually emphasizing the unique advantages of the agency.
5. **Pricing Section**: Clear pricing plans (Standard and Pro) that detail features, with a visible "Pause/Cancel anytime" badge to enhance user confidence.
6. **FAQ Section**: An interactive accordion for frequently asked questions, allowing users to easily find information about service delivery and satisfaction guarantees.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, subtle borders, and a focus on typography to convey professionalism.
- **Color Mode**: Light theme with dark text on light backgrounds, utilizing a "Zinc" or "Slate" color palette complemented by vibrant "Electric Violet" or "Royal Blue" accents.
- **Layout**: The main structure is a single-page layout with distinct sections for navigation, hero content, value propositions, comparisons, services, portfolio, pricing, FAQs, and footer, ensuring a smooth scroll experience.
- **Typography**: Use "Inter" or "Plus Jakarta Sans" for all text elements, with a clear hierarchy for headlines, subheadlines, body text, and buttons.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling and responsive design
- **UI Components**: Utilize shadcn/ui for interactive components such as buttons, cards, and accordions
- **State Management**: Redux or Context API (as needed for managing global state)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install dependencies including Tailwind CSS and shadcn/ui.
2. **Create Navbar Component**: Implement a sticky navbar with logo and navigation links, integrating buttons for Login and Book a Call.
3. **Design Hero Section**: Construct the hero section with a large headline, subheadline, and buttons, alongside a trust strip for company logos.
4. **Develop Value Proposition Section**: Create a bento grid layout for value proposition cards, ensuring each card has the appropriate icons and information.
5. **Build Comparison Table**: Set up the comparison section with a table layout, highlighting the agency's advantages.
6. **Implement Services and Portfolio Sections**: Design sections for service capabilities and recent work, utilizing grid layouts for visual appeal.
7. **Create Pricing Section**: Develop pricing cards that outline features and include a cancellation badge.
8. **Set Up FAQ Section**: Implement an accordion for FAQs using shadcn/ui components to allow for expandable questions and answers.
9. **Design Footer**: Create a minimalist footer that includes copyright information and social media links.
10. **Add Interactivity**: Implement hover effects on buttons and cards, ensuring all elements are mobile-responsive with appropriate padding and font sizes.

## USER EXPERIENCE
Users will initiate their journey on the landing page through a clear and engaging hero section, directing them to explore services and pricing. The sticky navbar ensures easy navigation across sections, while the visually appealing layout and interactive components guide users through their options. The responsive design ensures a seamless experience across devices, enhancing the likelihood of conversion through strategic placement of calls-to-action and informative content.