🎨

Responsive Landing Page Builder

Generate a complete, conversion-optimized landing page

prompt template
Create a complete landing page for: [PRODUCT_OR_SERVICE]

**Target audience:** [WHO_IS_THIS_FOR]
**Primary CTA:** [WHAT_SHOULD_VISITORS_DO]
**Tone:** [professional / playful / technical / minimalist]

Build the page with these sections:
1. **Hero** — headline, subhead, CTA button, optional hero image/illustration placeholder
2. **Social proof** — logos, testimonials, or stats
3. **Features** — 3-4 key benefits with icons
4. **How it works** — 3-step process
5. **Pricing** (if applicable) — clean comparison cards
6. **FAQ** — 4-5 common questions with expandable answers
7. **Final CTA** — closing statement with action button

Technical requirements:
- Next.js App Router with TypeScript
- Tailwind CSS for all styling
- Smooth scroll between sections
- Mobile-responsive (test at 375px, 768px, 1280px)
- Semantic HTML with proper heading hierarchy
- Dark mode support using CSS variables

Output each section as a separate component, plus the main page file that composes them.

How to Use This Prompt

  1. 1Copy the prompt template above
  2. 2Paste into claude
  3. 3Replace [bracketed placeholders] with your specific project details
  4. 4Iterate on the AI output to refine and customize the results