--- name: conversion-patterns description: Conversion rate optimization (CRO) patterns for Next.js applications including CTA design, landing page layouts, trust signals, form optimization, pricing tables, and A/B testing. Use when building landing pages, optimizing CTAs, adding social proof, or improving conversion funnels. allowed-tools: Read, Write, Edit, Grep, Glob, Bash --- # Conversion Patterns **Purpose:** Implement proven conversion rate optimization patterns for Next.js applications to maximize signups, sales, and engagement. **Activation Triggers:** - Building landing pages - Optimizing call-to-action buttons - Adding social proof elements - Creating pricing tables - Implementing lead capture forms - A/B testing setup - Conversion tracking implementation **Key Resources:** - `templates/hero-section.tsx` - High-converting hero patterns - `templates/cta-components.tsx` - CTA button variants - `templates/pricing-table.tsx` - Pricing comparison table - `templates/testimonials.tsx` - Social proof components - `examples/landing-page-structure.md` - Complete landing page example ## Conversion Psychology ### Core Principles 1. **Clarity Over Cleverness** - Clear value proposition in 5 seconds 2. **Reduce Anxiety** - Trust signals, guarantees, social proof 3. **Create Urgency** - Time-limited offers, scarcity (ethical) 4. **Remove Friction** - Minimal form fields, clear CTAs ### Conversion Hierarchy ``` Attention → Interest → Desire → Action (AIDA) ↓ ↓ ↓ ↓ Hero Features Proof CTA ``` ## Hero Section Patterns ### Pattern 1: Benefit-Focused Hero ```typescript // components/marketing/HeroSection.tsx import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { ArrowRight, Star } from 'lucide-react' export function HeroSection() { return (

{/* Background gradient */}

{/* Social Proof Badge */} Rated #1 by 50,000+ users {/* Main Headline - Benefit Focused */}

Build Websites That{' '} Convert

{/* Subheadline - How It Works */}

AI-powered tools that help you create high-converting landing pages in minutes, not days. No coding required.

{/* CTA Buttons */}

{/* Trust Signals */}

✓ No credit card required ✓ 14-day free trial ✓ Cancel anytime

) } ``` ### Pattern 2: Problem-Agitation Hero ```typescript export function ProblemAgitationHero() { return (

{/* Problem Statement */}

Tired of landing pages that don't convert?

{/* Agitation */}

Stop Losing Customers to{' '} Bad Design

{/* Solution */}

Our AI analyzes 100,000+ high-converting pages to build landing pages that actually work.

) } ``` ## CTA Component Patterns ### Primary CTA with Social Proof ```typescript // components/marketing/CTAWithProof.tsx interface CTAProps { text: string userCount: number avatars: string[] } export function CTAWithProof({ text, userCount, avatars }: CTAProps) { return (

{/* Social Proof */}

{avatars.slice(0, 4).map((src, i) => (

))}

Join {userCount.toLocaleString()}+ users

) } ``` ### Sticky Mobile CTA ```typescript // components/marketing/StickyCTA.tsx 'use client' import { useState, useEffect } from 'react' import { Button } from '@/components/ui/button' export function StickyCTA({ text = 'Get Started' }) { const [show, setShow] = useState(false) useEffect(() => { const handleScroll = () => { setShow(window.scrollY > 500) } window.addEventListener('scroll', handleScroll) return () => window.removeEventListener('scroll', handleScroll) }, []) if (!show) return null return (

) } ``` ## Pricing Table Patterns ### Three-Tier Pricing ```typescript // components/marketing/PricingTable.tsx const plans = [ { name: 'Starter', price: { monthly: 29, yearly: 24 }, description: 'Perfect for individuals', features: ['5 projects', '10GB storage', 'Email support'], cta: 'Start Free Trial', popular: false, }, { name: 'Pro', price: { monthly: 79, yearly: 66 }, description: 'For growing teams', features: [ 'Unlimited projects', '100GB storage', 'Priority support', 'Advanced analytics', 'Custom domains', ], cta: 'Start Free Trial', popular: true, }, { name: 'Enterprise', price: { monthly: 199, yearly: 166 }, description: 'For large organizations', features: [ 'Everything in Pro', 'Unlimited storage', 'Dedicated support', 'Custom integrations', 'SLA guarantee', 'SSO & SAML', ], cta: 'Contact Sales', popular: false, }, ] export function PricingTable() { const [yearly, setYearly] = useState(false) return (

{/* Header */}

Simple, Transparent Pricing

Start free. Upgrade when you need more.

{/* Billing Toggle */}

Monthly Yearly Save 20%

{/* Pricing Cards */}

{plans.map((plan) => ( {plan.popular && ( Most Popular )} {plan.name} {plan.description}

${yearly ? plan.price.yearly : plan.price.monthly} /month {yearly && (

billed annually

)}

{feature}

))}

{/* Guarantee */}

30-day money-back guarantee. No questions asked.

) } ``` ## Social Proof Patterns ### Logo Cloud ```typescript // components/marketing/LogoCloud.tsx export function LogoCloud() { const logos = [ { name: 'Google', src: '/logos/google.svg' }, { name: 'Microsoft', src: '/logos/microsoft.svg' }, { name: 'Amazon', src: '/logos/amazon.svg' }, { name: 'Meta', src: '/logos/meta.svg' }, { name: 'Netflix', src: '/logos/netflix.svg' }, ] return (

Trusted by teams at the world's best companies

{logos.map((logo) => (

))}

) } ``` ### Testimonial Cards ```typescript // components/marketing/Testimonials.tsx interface Testimonial { quote: string author: string title: string company: string avatar: string rating: number } export function TestimonialCard({ testimonial }: { testimonial: Testimonial }) { return ( {/* Rating */}

{[...Array(5)].map((_, i) => ( ))}

{/* Quote */}

"{testimonial.quote}"

{/* Author */}

{testimonial.author}

{testimonial.title}, {testimonial.company}

) } ``` ## Form Optimization ### Multi-Step Lead Form ```typescript // components/marketing/MultiStepForm.tsx 'use client' import { useState } from 'react' export function MultiStepForm() { const [step, setStep] = useState(1) const totalSteps = 3 return ( Get Started {/* Progress Bar */}

{[...Array(totalSteps)].map((_, i) => (

))}

Step {step} of {totalSteps}

{step === 1 && (

Work Email

)} {step === 2 && (

Full Name

Company

)} {step === 3 && (

Team Size

)}

By continuing, you agree to our Terms and Privacy Policy

Your data is secure

) } ``` ## Urgency Patterns ### Countdown Timer ```typescript // components/marketing/CountdownTimer.tsx 'use client' import { useState, useEffect } from 'react' interface CountdownProps { endDate: Date label?: string } export function CountdownTimer({ endDate, label = 'Offer ends in' }: CountdownProps) { const [timeLeft, setTimeLeft] = useState(calculateTimeLeft()) function calculateTimeLeft() { const difference = +endDate - +new Date() if (difference <= 0) return null return { days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / 1000 / 60) % 60), seconds: Math.floor((difference / 1000) % 60), } } useEffect(() => { const timer = setInterval(() => { setTimeLeft(calculateTimeLeft()) }, 1000) return () => clearInterval(timer) }, [endDate]) if (!timeLeft) return null return (

{label}

{Object.entries(timeLeft).map(([unit, value]) => (

{String(value).padStart(2, '0')}

{unit}

))}

) } ``` ## A/B Testing ### Simple A/B Hook ```typescript // hooks/useABTest.ts 'use client' import { useEffect, useState } from 'react' export function useABTest(testName: string): 'A' | 'B' { const [variant, setVariant] = useState<'A' | 'B'>('A') useEffect(() => { // Check localStorage for existing assignment const stored = localStorage.getItem(`ab_${testName}`) if (stored === 'A' || stored === 'B') { setVariant(stored) return } // Assign randomly const assigned = Math.random() < 0.5 ? 'A' : 'B' localStorage.setItem(`ab_${testName}`, assigned) setVariant(assigned) // Track assignment (GA4, etc.) if (typeof window.gtag !== 'undefined') { window.gtag('event', 'experiment_assignment', { experiment_name: testName, variant: assigned, }) } }, [testName]) return variant } // Usage function CTASection() { const variant = useABTest('cta_text_2024') return ( ) } ``` ## Conversion Checklist ```bash # Run conversion audit ./scripts/conversion-audit.sh # Checks: # ✓ Primary CTA above fold # ✓ CTA text is action-oriented # ✓ Trust signals present (logos, testimonials) # ✓ Social proof with numbers # ✓ Form has minimal fields # ✓ Mobile CTA visible # ✓ Pricing has "Most Popular" # ✓ Money-back guarantee visible # ✓ FAQ addresses objections ```

conversion-patterns

Install this skill

Comments