Landing Page Generator

Description

Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user ask...

What this skill does

1. 1Analyzes existing brand content to extract a voice profile — formality, tone, perspective — and maps it to a design style and copy framework before writing a single line.
2. 2Writes all headline and body copy using the selected framework (PAS, AIDA, or BAB) before generating any component code.
3. 3Generates complete Next.js/React TSX sections in order: Hero, Features, Pricing, FAQ, Testimonials, CTA, Footer — each with Tailwind class sets and structural patterns.
4. 4Validates the output against an SEO checklist covering title tag, meta description, OG image, H1, structured data, canonical URL, and Core Web Vitals targets before delivery.
5. 5Outputs copy-paste-ready components with performance targets: LCP under 1 second, CLS under 0.1, and bundle under 100KB JS.

When to use

• A campaign or product needs a conversion-optimized landing page and no design system is in place yet.
• A static marketing page needs to be replaced with a component-based page designed to convert a specific audience.
• You need multiple landing page variants to A/B test different copy frameworks or design styles.
• A new product or feature is launching and needs a page that matches the ad traffic source and audience.

Frequently asked questions