| name | landing-page-optimizer |
| description | Optimize landing pages for conversions, performance, and SEO. Use when improving landing pages, increasing conversions, or optimizing page performance. |
Landing Page Optimizer
Instructions
When optimizing landing pages:
- Audit current page (speed, UX, conversion elements)
- Identify improvement areas
- Implement optimizations
- Set up tracking
Above the Fold Checklist
Page Structure Template
<main>
{}
<section className="min-h-[80vh] flex items-center">
<div className="max-w-6xl mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center">
<div>
<Badge>New Feature</Badge>
<h1 className="text-4xl lg:text-6xl font-bold mt-4">
Main Value Proposition
</h1>
<p className="text-xl text-gray-600 mt-6">
Supporting statement that expands on the benefit
</p>
<div className="flex gap-4 mt-8">
<Button size="lg">Primary CTA</Button>
<Button size="lg" variant="outline">Secondary CTA</Button>
</div>
<div className="flex items-center gap-6 mt-8">
<div className="flex -space-x-2">
{avatars.map(a => <Avatar key={a.id} src={a.src} />)}
</div>
<p className="text-sm text-gray-600">
<strong>2,000+</strong> happy customers
</p>
</div>
</div>
<div>
<img src="/hero-image.png" alt="Product preview" />
</div>
</div>
</section>
{}
<section className="py-12 bg-gray-50">
<p className="text-center text-gray-500 mb-8">Trusted by leading companies</p>
<div className="flex justify-center gap-12 opacity-60">
{logos.map(logo => <img key={logo.name} src={logo.src} alt={logo.name} />)}
</div>
</section>
{}
<section className="py-20">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl font-bold">The Problem</h2>
<p className="text-xl text-gray-600 mt-4">
Describe the pain point your audience faces
</p>
</div>
</section>
{}
<section className="py-20 bg-gray-50">
<h2 className="text-3xl font-bold text-center">How It Works</h2>
<div className="grid md:grid-cols-3 gap-8 mt-12 max-w-6xl mx-auto">
{features.map(feature => (
<Card key={feature.title}>
<feature.icon className="w-12 h-12 text-primary-500" />
<h3 className="text-xl font-semibold mt-4">{feature.title}</h3>
<p className="text-gray-600 mt-2">{feature.description}</p>
</Card>
))}
</div>
</section>
{}
<section className="py-20">
<h2 className="text-3xl font-bold text-center">What Customers Say</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
{testimonials.map(t => (
<TestimonialCard key={t.name} {...t} />
))}
</div>
</section>
{}
<section className="py-20 bg-gray-50">
<PricingTable plans={plans} />
</section>
{}
<section className="py-20">
<h2 className="text-3xl font-bold text-center">FAQ</h2>
<Accordion items={faqs} className="max-w-3xl mx-auto mt-12" />
</section>
{}
<section className="py-20 bg-primary-600 text-white text-center">
<h2 className="text-3xl font-bold">Ready to Get Started?</h2>
<p className="text-xl opacity-90 mt-4">Join 2,000+ companies already using our product</p>
<Button size="lg" variant="secondary" className="mt-8">
Start Free Trial
</Button>
<p className="text-sm opacity-75 mt-4">No credit card required</p>
</section>
</main>
CTA Optimization
Button Best Practices
<Button>Start Free Trial</Button>
<Button>Get Started Free</Button>
<Button>Try It Free for 14 Days</Button>
<Button>Book a Demo</Button>
<Button>
Get 50% Off Today
<span className="text-sm opacity-75 block">Offer ends midnight</span>
</Button>
<div className="text-center">
<Button size="lg">Start Free Trial</Button>
<p className="text-sm text-gray-500 mt-2">
No credit card required • Cancel anytime
</p>
</div>
CTA Placement
- Hero section - Primary CTA above fold
- After features - Reinforce value
- After testimonials - Social proof boost
- Sticky header/footer - Always accessible
- Exit intent popup - Last chance
Performance Optimization
Image Optimization
import Image from 'next/image';
<Image
src="/hero.png"
alt="Product screenshot"
width={1200}
height={800}
priority // Above-fold images
placeholder="blur"
blurDataURL={blurData}
/>
<Image
src="/feature.png"
loading="lazy"
...
/>
Critical CSS
<head>
<style dangerouslySetInnerHTML={{ __html: criticalCSS }} />
<link rel="preload" href="/fonts/inter.woff2" as="font" crossOrigin="" />
</head>
Performance Targets
| Metric | Target |
|---|
| LCP | < 2.5s |
| FID/INP | < 100ms |
| CLS | < 0.1 |
| Total Size | < 1MB |
| Time to Interactive | < 3s |
SEO Optimization
Meta Tags
export const metadata = {
title: 'Product Name - Main Benefit | Brand',
description: 'Clear description with keywords. 150-160 chars.',
openGraph: {
title: 'Product Name - Main Benefit',
description: 'Description for social sharing',
images: [{ url: '/og-image.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
},
};
Structured Data
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Product Name",
"applicationCategory": "BusinessApplication",
"offers": {
"@type": "Offer",
"price": "29",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "1250"
}
})}
</script>
Conversion Tracking
const trackCTA = (ctaName: string) => {
gtag('event', 'cta_click', {
cta_name: ctaName,
page_location: window.location.href,
});
};
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
gtag('event', 'section_viewed', {
section_name: entry.target.id,
});
}
});
},
{ threshold: 0.5 }
);
document.querySelectorAll('section[id]').forEach((section) => {
observer.observe(section);
});
}, []);
A/B Testing Elements
Priority elements to test:
- Headline copy - Different value propositions
- CTA text - "Start Free" vs "Get Started" vs "Try Now"
- CTA color - High contrast options
- Hero image - Product vs people vs abstract
- Social proof placement - Above vs below fold
- Pricing display - Monthly vs annual default
- Form length - Email only vs full form
Mobile Optimization
<Button className="w-full md:w-auto h-14 text-lg">
Get Started
</Button>
<div className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t md:hidden">
<Button className="w-full">Start Free Trial</Button>
</div>
<p className="hidden md:block">
{fullDescription}
</p>
<p className="md:hidden">
{shortDescription}
</p>
Quick Wins Checklist
