git:20260225.309ae7a to git:20260608.d82d20f

14 added, 314 removed. Audit B to A.

---

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:

- 1. **Audit current page** (speed, UX, conversion elements)

- 2. **Identify improvement areas**

- 3. **Implement optimizations**

- 4. **Set up tracking**

- ## Above the Fold Checklist

- - [ ] **Clear headline** - Value proposition in <5 seconds

- - [ ] **Supporting subheadline** - Expand on benefit

- - [ ] **Hero image/video** - Relevant, high-quality

- - [ ] **Primary CTA** - Contrasting color, action-oriented

- - [ ] **Social proof** - Logos, ratings, testimonials

- - [ ] **No navigation distractions** - Minimal or hidden nav

- ## Page Structure Template

- ```tsx

- // Optimal landing page structure

- <main>

- {/* 1. Hero Section */}

- <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>

- <img src="/hero-image.png" alt="Product preview" />

- </div>

- </section>

- {/* 2. Social Proof - Logos */}

- <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>

- {/* 3. Problem/Solution */}

- <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>

- {/* 4. Features/Benefits */}

- <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>

- {/* 5. Testimonials */}

- <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>

- {/* 6. Pricing (if applicable) */}

- <section className="py-20 bg-gray-50">

- <PricingTable plans={plans} />

- </section>

- {/* 7. FAQ */}

- <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>

- {/* 8. Final CTA */}

- <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

- ```tsx

- // Good CTAs

- <Button>Start Free Trial</Button>

- <Button>Get Started Free</Button>

- <Button>Try It Free for 14 Days</Button>

- <Button>Book a Demo</Button>

- // Add urgency/value

- <Button>

- Get 50% Off Today

- <span className="text-sm opacity-75 block">Offer ends midnight</span>

- </Button>

- // Reduce friction

- <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

- 1. **Hero section** - Primary CTA above fold

- 2. **After features** - Reinforce value

- 3. **After testimonials** - Social proof boost

- 4. **Sticky header/footer** - Always accessible

- 5. **Exit intent popup** - Last chance

- ## Performance Optimization

- ### Image Optimization

- ```tsx

- // Next.js Image component

- import Image from 'next/image';

- <Image

- src="/hero.png"

- alt="Product screenshot"

- width={1200}

- height={800}

- priority // Above-fold images

- placeholder="blur"

- blurDataURL={blurData}

- />

- // Lazy load below-fold images

- <Image

- src="/feature.png"

- loading="lazy"

- ...

- />

- ```

- ### Critical CSS

- ```tsx

- // Inline critical styles for above-fold

- <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

- ```tsx

- // app/layout.tsx or pages/_app.tsx

- 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

- ```tsx

- <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

- ```tsx

- // Google Analytics 4 events

- const trackCTA = (ctaName: string) => {

- gtag('event', 'cta_click', {

- cta_name: ctaName,

- page_location: window.location.href,

- });

- };

- // Track scroll depth

- 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:

- 1. **Headline copy** - Different value propositions

- 2. **CTA text** - "Start Free" vs "Get Started" vs "Try Now"

- 3. **CTA color** - High contrast options

- 4. **Hero image** - Product vs people vs abstract

- 5. **Social proof placement** - Above vs below fold

- 6. **Pricing display** - Monthly vs annual default

- 7. **Form length** - Email only vs full form

- ## Mobile Optimization

- ```tsx

- // Thumb-friendly CTAs

- <Button className="w-full md:w-auto h-14 text-lg">

- Get Started

- </Button>

+ Audit and optimize a landing page across conversion, performance, and SEO.

- // Sticky mobile CTA

- <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>

+ ## Contents

- // Reduce content on mobile

- <p className="hidden md:block">

- {fullDescription}

- </p>

- <p className="md:hidden">

- {shortDescription}

- </p>

- ```

+ - `references/checklists.md` — above-the-fold and quick-wins checklists

+ - `references/page-structure.md` — optimal eight-section page layout

+ - `references/cta-optimization.md` — CTA copy, friction reduction, placement

+ - `references/performance.md` — image/CSS optimization, Core Web Vitals targets, mobile

+ - `references/seo-and-tracking.md` — meta tags, structured data, GA4 tracking, A/B tests

- ## Quick Wins Checklist

+ ## Workflow

- - [ ] Headline communicates value in 5 seconds

- - [ ] CTA button is high contrast and above fold

- - [ ] Page loads in under 3 seconds

- - [ ] Social proof visible above fold

- - [ ] Mobile-optimized with thumb-friendly CTAs

- - [ ] No broken images or links

- - [ ] Forms have minimal required fields

- - [ ] Trust badges near CTAs (security, guarantees)

- - [ ] Clear pricing (no hidden fees messaging)

- - [ ] Testimonials include photos and titles

+ 1. Audit the current page for speed, UX, and conversion elements. Score the above-the-fold area against `references/checklists.md`.

+ 2. Validate the page layout against the eight-section template in `references/page-structure.md`; flag missing or out-of-order sections.

+ 3. Optimize CTAs using `references/cta-optimization.md` — sharpen copy, reduce friction, and place CTAs at each high-intent point.

+ 4. Optimize performance per `references/performance.md`; meet the Core Web Vitals targets and apply mobile patterns.

+ 5. Apply SEO and tracking from `references/seo-and-tracking.md` — meta tags, structured data, and GA4 conversion events.

+ 6. Run the quick-wins checklist in `references/checklists.md` and queue prioritized A/B tests.