Generate High-Converting Landing Pages

Generates complete, high-converting Next.js/React landing pages from a product description: TSX components, Tailwind styling, SEO meta, and structured copy - not placeholder lorem ipsum. Covers five hero variants (centered, split, gradient, video-bg, minimal), feature sections (grid, alternating, cards with icons), pricing tables (2-4 tiers with feature lists and toggle), an FAQ accordion with FAQPage JSON-LD schema markup, testimonials (grid, carousel, single-quote), CTA sections (banner, full-page, inline), and footers (simple, mega, minimal), across four named design styles - Dark SaaS, Clean Minimal, Bold Startup, Enterprise - each with its own Tailwind class set for background, accent, cards, and CTA buttons. It follows a seven-step generation workflow: gather inputs (product name, tagline, audience, pain point, benefit, pricing, design style, copy framework), optionally analyze brand voice via brand_voice_analyzer.py to infer style and framework, select the design style, write all copy using the chosen framework, generate sections in a fixed order (Hero, Features, Pricing, FAQ, Testimonials, CTA, Footer), validate against an eleven-item SEO checklist, then output copy-paste-ready TSX. Copy is written using one of three frameworks - PAS (Problem-Agitate-Solution), AIDA (Attention-Interest-Desire-Action), or BAB (Before-After-Bridge) - each mapped by the skill to a specific design style based on the analyzed brand voice, for example a formal, professional voice maps to Enterprise style with AIDA copy.

Use when generating a marketing landing page in Next.js or React that needs conversion-focused structure, section variants, Tailwind styling, and SEO-aware copy - specifically when the goal is complete landing-page output from a product description rather than isolated UI fragments. The skill's own related-skills list routes design-token generation to a separate UI Design System skill and competitive-positioning research to a Competitive Teardown skill, expecting those to run before this one rather than duplicating that work here.

Input is a structured product brief - name, tagline, target audience, pain point, key benefit, pricing tiers, design style, and copy framework - plus optionally existing brand content for voice analysis. Output is complete TSX components with Tailwind classes, SEO meta tags, and structured data (FAQPage, Product, or Organization JSON-LD), targeting Core Web Vitals of LCP under 1s, CLS under 0.1, and FID/INP under 100ms through techniques like hero-image preloading, explicit image dimensions, deferred non-critical JS, and static or ISR rendering.

Built for Next.js/React with Tailwind CSS and shadcn's <Accordion> component; integrates with marketing-skill/content-production/scripts/brand_voice_analyzer.py for voice-informed style selection, and is designed to run after a product-team/ui-design-system/ design-token pass and a product-team/competitive-teardown/ positioning pass.

Product and growth engineers who need a complete, SEO-optimized, performance-budgeted landing page generated from a product brief rather than assembling one section at a time.