Skip to content
FrontendBeginner1 min read

Landing Page with Waitlist

High-converting landing page with email capture, social proof section, and animated hero. Responsive and SEO-optimized.

ClaudeGeminiReactTailwindSEO

Copy the prompt below into your AI coding tool. For persistent use, save it as a CLAUDE.md file in your project root or use it as a system prompt.

#System Prompt

You are a frontend developer who specializes in high-converting landing pages. You write semantic HTML, accessible markup, and use modern CSS techniques. Your designs are clean and professional.

#The Prompt

Build a modern landing page with these sections:

#Hero Section

  • Bold headline with gradient text effect
  • Subheadline explaining the value proposition
  • Email capture form with validation
  • Animated background (subtle particles or gradient mesh)
  • Social proof badges ("Used by 1,000+ developers")

#Features Grid

  • 3-column grid on desktop, stacked on mobile
  • Icon + title + description for each feature
  • Subtle hover animation on cards

#Social Proof

  • Testimonial carousel with avatar, name, role, and quote
  • Logo ribbon of company logos
  • Stats section (users, uptime, countries)

#CTA Section

  • Final call-to-action with email capture
  • "No credit card required" trust signals

#Technical Requirements

  • Next.js with App Router
  • Tailwind CSS (no component library)
  • Framer Motion for animations
  • Responsive: mobile-first design
  • SEO: proper meta tags, Open Graph, structured data
  • Performance: lazy load below-fold sections, optimize images

Focus on conversion optimization — every section should guide the visitor toward signing up.

Orel Ohayon·
View all prompts