Generate high-converting landing pages from a product description. Output complete Next.js/React components with multiple section variants, proven copy frameworks, SEO optimization, and performance-first patterns. Not lorem ipsum — actual copy that converts.
Target: LCP < 1s · CLS < 0.1 · FID < 100ms
Output: TSX components + Tailwind styles + SEO meta + copy variants
Follow these steps in order for every landing page request:
marketing-skill/content-production/scripts/brand_voice_analyzer.py to get a voice profile (formality, tone, perspective). Use the profile to inform design style and copy framework selection:
Product: [name]
Tagline: [one sentence value prop]
Target audience: [who they are]
Key pain point: [what problem you solve]
Key benefit: [primary outcome]
Pricing tiers: [free/pro/enterprise or describe]
Design style: dark-saas | clean-minimal | bold-startup | enterprise
Copy framework: PAS | AIDA | BAB
| Style | Background | Accent | Cards | CTA Button |
|---|---|---|---|---|
| Dark SaaS | bg-gray-950 text-white |
violet-500/400 |
bg-gray-900 border border-gray-800 |
bg-violet-600 hover:bg-violet-500 |
| Clean Minimal | bg-white text-gray-900 |
blue-600 |
bg-gray-50 border border-gray-200 rounded-2xl |
bg-blue-600 hover:bg-blue-700 |
| Bold Startup | bg-white text-gray-900 |
orange-500 |
shadow-xl rounded-3xl |
bg-orange-500 hover:bg-orange-600 text-white |
| Enterprise | bg-slate-50 text-slate-900 |
slate-700 |
bg-white border border-slate-200 shadow-sm |
bg-slate-900 hover:bg-slate-800 text-white |
Bold Startup headings: add
font-black tracking-tightto all<h1>/<h2>elements.
PAS (Problem → Agitate → Solution)
AIDA (Attention → Interest → Desire → Action)
BAB (Before → After → Bridge)
Use this as the structural template for all hero variants. Swap layout classes, gradient direction, and image placement for split, video-bg, and minimal variants.
export function HeroCentered() {
return (
<section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
<div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
<div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
<div className="relative z-10 max-w-4xl">
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
<span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
Now in public beta
</div>
<h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
Ship faster.<br />
<span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
Break less.
</span>
</h1>
<p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
The deployment platform that catches errors before your users do.
Zero config. Instant rollbacks. Real-time monitoring.
</p>
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
Start free trial
</Button>
<Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
See how it works →
</Button>
</div>
<p className="mt-4 text-sm text-gray-500">No credit card required · 14-day free trial</p>
</div>
</section>
)
}
Map over a features array with { title, description, image, badge }. Toggle layout direction with i % 2 === 1 ? "lg:flex-row-reverse" : "". Use <Image> with explicit width/height and rounded-2xl shadow-xl. Wrap in <section className="py-24"> with max-w-6xl container.
Map over a plans array with { name, price, description, features[], cta, highlighted }. Highlighted plan gets border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20; others get border border-gray-800 bg-gray-900. Render null price as "Custom". Use <Check> icon per feature row. Layout: grid gap-8 lg:grid-cols-3.
Inject FAQPage JSON-LD via <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> inside the section. Map FAQs with { q, a } into shadcn <Accordion> with type="single" collapsible. Container: max-w-3xl.
grid-cols-1 md:grid-cols-3) or single-quote hero block with avatar, name, role, and quote text.border-t border-gray-800 separator.<title> tag: primary keyword + brand (50–60 chars)<Image> componentsValidation step: Before outputting final code, verify every checklist item above is satisfied. Fix any gaps inline — do not skip items.
| Metric | Target | Technique |
|---|---|---|
| LCP | < 1s | Preload hero image, use priority on Next/Image |
| CLS | < 0.1 | Set explicit width/height on all images |
| FID/INP | < 100ms | Defer non-critical JS, use loading="lazy" |
| TTFB | < 200ms | Use ISR or static generation for landing pages |
| Bundle | < 100KB JS | Audit with @next/bundle-analyzer |
priority prop to first <Image>
sm: prefixesmarketing-skill/content-production/scripts/brand_voice_analyzer.py) — Run before generation to establish voice profile and ensure copy consistencyproduct-team/ui-design-system/) — Generate design tokens from brand color before building the pageproduct-team/competitive-teardown/) — Competitive positioning informs landing page messaging and differentiation