---
name: cro-patterns
description: When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions." Includes both strategic framework and Next.js/shadcn UI implementation patterns. For signup flows, see signup-flow-cro. For forms, see form-cro. For popups, see popup-cro.
metadata:
  version: 2.0.0
---

# CRO Patterns

You are a conversion rate optimization expert. Your goal is to analyze marketing pages and provide actionable recommendations plus implementation patterns.

## Initial Assessment

**Check for product marketing context first:**
If `.agents/product-marketing-context.md` exists, read it before asking questions.

Before providing recommendations, identify:

1. **Page Type**: Homepage, landing page, pricing, feature, blog, about, other
2. **Primary Conversion Goal**: Sign up, request demo, purchase, subscribe, download, contact sales
3. **Traffic Context**: Where are visitors coming from? (organic, paid, email, social)

---

## La Formula della Conversione

```
Conversione = Motivazione × Valore Percepito × Fiducia
              ─────────────────────────────────────────
              Frizione × Ansia
```

**Per aumentare le conversioni:**
- ↑ Motivazione: Parla ai pain point reali
- ↑ Valore Percepito: Mostra benefici tangibili
- ↑ Fiducia: Social proof, garanzie, trasparenza
- ↓ Frizione: Semplifica form, riduci step
- ↓ Ansia: Gestisci obiezioni, risk reversal

---

## CRO Analysis Framework

Analyze the page across these dimensions, in order of impact:

### 1. Value Proposition Clarity (Highest Impact)

**Check for:**
- Can a visitor understand what this is and why they should care within 5 seconds?
- Is the primary benefit clear, specific, and differentiated?
- Is it written in the customer's language (not company jargon)?

**Common issues:**
- Feature-focused instead of benefit-focused
- Too vague or too clever (sacrificing clarity)
- Trying to say everything instead of the most important thing

### 2. Headline Effectiveness

**Strong headline patterns:**
- Outcome-focused: "Get [desired outcome] without [pain point]"
- Specificity: Include numbers, timeframes, or concrete details
- Social proof: "Join 10,000+ teams who..."

### 3. CTA Placement, Copy, and Hierarchy

- Is there one clear primary action?
- Is it visible without scrolling?
- Does button copy communicate value, not just action?
  - Weak: "Submit," "Sign Up," "Learn More"
  - Strong: "Start Free Trial," "Get My Report," "See Pricing"

### 4. Visual Hierarchy and Scannability

- Can someone scanning get the main message?
- Are the most important elements visually prominent?
- Is there enough white space?

### 5. Trust Signals and Social Proof

- Customer logos (especially recognizable ones)
- Testimonials (specific, attributed, with photos)
- Case study snippets with real numbers
- Review scores and counts

### 6. Objection Handling

- Address: Price/value concerns, "Will this work for me?", implementation difficulty
- Address through: FAQ sections, guarantees, comparison content

### 7. Friction Points

- Too many form fields
- Unclear next steps
- Confusing navigation
- Mobile experience issues

---

## Pattern UI ad Alta Conversione

### 1. Hero Section Patterns

#### Pattern: Split Hero (Visual + Form)

```
┌─────────────────────────────────────────────┐
│  [HEADLINE]              │   ┌─────────┐   │
│  [Subheadline]           │   │  FORM   │   │
│                          │   │ Email   │   │
│  • Benefit 1             │   │ [CTA]   │   │
│  • Benefit 2             │   └─────────┘   │
│  • Benefit 3             │                  │
└─────────────────────────────────────────────┘
```

**Quando usarlo**: Lead generation, newsletter, free trial
**Conversion lift**: +15-25% vs hero senza form above-the-fold

#### Pattern: Video Hero

**Quando usarlo**: Prodotti complessi che richiedono spiegazione
**Stat**: Video aumenta tempo on-page del 88%

---

### 2. Social Proof Patterns

#### Pattern: Logo Bar con Numeri

```tsx
<section className="py-8 border-y bg-muted/30">
  <div className="container">
    <div className="flex flex-col items-center gap-6">
      <p className="text-sm text-muted-foreground">
        Trusted by <strong>2,847</strong> engineering teams worldwide
      </p>
      <div className="flex flex-wrap justify-center gap-8 items-center opacity-60 grayscale hover:grayscale-0 transition-all">
        <Logo1 />
        <Logo2 />
        <Logo3 />
      </div>
    </div>
  </div>
</section>
```

#### Pattern: Testimonial Card con Metriche

```tsx
<Card className="p-6 max-w-md">
  <div className="flex gap-4 items-start">
    <Avatar>
      <AvatarImage src="/testimonial-1.jpg" />
    </Avatar>
    <div>
      <p className="text-sm font-medium">Marco Rossi</p>
      <p className="text-xs text-muted-foreground">CTO @ FinTech Corp</p>
    </div>
  </div>
  <div className="mt-4 p-3 bg-primary/5 rounded-lg">
    <p className="text-2xl font-bold text-primary">+312%</p>
    <p className="text-xs text-muted-foreground">conversion rate improvement</p>
  </div>
  <blockquote className="mt-4 text-sm italic">
    "In 4 settimane abbiamo triplicato le conversioni."
  </blockquote>
</Card>
```

#### Pattern: Real-Time Social Proof

```tsx
// Notifica acquisto recente
<div className="fixed bottom-4 left-4 z-50">
  <Card className="p-3 animate-slide-up">
    <p className="text-sm">
      🎉 <strong>Marco da Milano</strong> ha appena acquistato il piano Pro
    </p>
    <p className="text-xs text-muted-foreground">2 minuti fa</p>
  </Card>
</div>
```

---

### 3. Form Optimization Patterns

#### Pattern: Multi-Step Form

Riduce la percezione di complessità. **Stat**: +86% completion rate.

```tsx
const steps = [
  { field: 'email', label: "Qual è la tua email?", type: 'email' },
  { field: 'company', label: "Nome della tua azienda", type: 'text' },
  { field: 'role', label: "Il tuo ruolo", type: 'select' },
]

<form className="space-y-6">
  {/* Progress bar */}
  <div className="flex gap-1">
    {steps.map((_, i) => (
      <div key={i} className={cn("h-1 flex-1 rounded", i <= currentStep ? "bg-primary" : "bg-muted")} />
    ))}
  </div>

  <div className="py-8">
    <label className="text-2xl font-medium block mb-4">{steps[currentStep].label}</label>
    <Input type={steps[currentStep].type} className="text-lg h-14" autoFocus />
  </div>

  <div className="flex justify-between">
    <Button variant="ghost" onClick={prevStep}>Indietro</Button>
    <Button onClick={nextStep}>
      {currentStep === steps.length - 1 ? 'Invia' : 'Continua'}
    </Button>
  </div>
</form>
```

#### Pattern: Inline Validation con Feedback Positivo

```tsx
<div className="space-y-2">
  <Label>Email aziendale</Label>
  <div className="relative">
    <Input
      type="email"
      value={email}
      onChange={handleEmail}
      className={cn(isValid && "border-green-500 focus:ring-green-500")}
    />
    {isValid && <CheckCircle className="absolute right-3 top-3 w-5 h-5 text-green-500" />}
  </div>
  {isValid && <p className="text-sm text-green-600">✓ Perfetto! Ti invieremo l'accesso a questa email.</p>}
</div>
```

---

### 4. Pricing Patterns

#### Pattern: Pricing con Anchoring

```tsx
<div className="grid md:grid-cols-3 gap-8">
  {/* Anchor alto */}
  <PricingCard name="Enterprise" price="€4,997" period="/mese" features={['Tutto illimitato', 'Team dedicato']} />

  {/* Target (evidenziato) */}
  <PricingCard
    name="Pro"
    price="€997"
    period="/mese"
    featured={true}
    badge="Most Popular"
    savings="Risparmia €48,000/anno vs Enterprise"
  />

  {/* Entry */}
  <PricingCard name="Starter" price="€297" period="/mese" features={['3 progetti', 'Support email']} />
</div>
```

#### Pattern: Pricing Toggle (Monthly/Annual)

```tsx
<div className="flex items-center justify-center gap-4 mb-8">
  <span className={!isAnnual ? 'font-bold' : 'text-muted-foreground'}>Mensile</span>
  <Switch checked={isAnnual} onCheckedChange={setIsAnnual} />
  <span className={isAnnual ? 'font-bold' : 'text-muted-foreground'}>
    Annuale
    <Badge variant="secondary" className="ml-2">-20%</Badge>
  </span>
</div>

<div className="text-center">
  <span className="text-5xl font-bold">€{isAnnual ? '797' : '997'}</span>
  <span className="text-muted-foreground">/mese</span>
  {isAnnual && <p className="text-sm text-green-600 mt-1">Risparmi €2,400/anno</p>}
</div>
```

---

### 5. CTA Patterns

#### Pattern: Sticky CTA Mobile

```tsx
<div className={cn(
  "fixed bottom-0 left-0 right-0 p-4 bg-background border-t z-50",
  "transform transition-transform duration-300",
  showStickyCTA ? "translate-y-0" : "translate-y-full",
  "md:hidden"
)}>
  <Button className="w-full" size="lg">
    Inizia Gratis — Nessuna carta richiesta
  </Button>
</div>
```

#### Pattern: CTA con Social Proof Inline

```tsx
<div className="flex flex-col items-center gap-3">
  <Button size="lg">
    Unisciti a 2,847 team
    <ArrowRight className="ml-2" />
  </Button>
  <div className="flex items-center">
    <div className="flex -space-x-2">
      <Avatar className="w-8 h-8 border-2 border-background" />
      <Avatar className="w-8 h-8 border-2 border-background" />
      <Avatar className="w-8 h-8 border-2 border-background" />
    </div>
    <span className="ml-3 text-sm text-muted-foreground">+127 iscritti questa settimana</span>
  </div>
</div>
```

---

### 6. Exit Intent Pattern

```tsx
useEffect(() => {
  const handleMouseLeave = (e: MouseEvent) => {
    if (e.clientY <= 0 && !hasShownExit) {
      setShowExitPopup(true)
      setHasShownExit(true)
    }
  }
  document.addEventListener('mouseleave', handleMouseLeave)
  return () => document.removeEventListener('mouseleave', handleMouseLeave)
}, [])
```

---

### 7. Trust Signals

#### Pattern: Garanzia Prominente

```tsx
<Card className="p-6 border-2 border-primary/20 bg-primary/5">
  <div className="flex items-start gap-4">
    <div className="p-3 bg-primary/10 rounded-full">
      <ShieldCheck className="w-8 h-8 text-primary" />
    </div>
    <div>
      <h3 className="font-bold text-lg">Garanzia 30 Giorni</h3>
      <p className="text-muted-foreground mt-1">
        Se non sei soddisfatto al 100%, ti rimborsiamo completamente.
        Nessuna domanda. Nessun rischio.
      </p>
    </div>
  </div>
</Card>
```

---

## Output Format

Structure recommendations as:

### Quick Wins (Implement Now)
Easy changes with likely immediate impact.

### High-Impact Changes (Prioritize)
Bigger changes that require more effort but will significantly improve conversions.

### Test Ideas
Hypotheses worth A/B testing rather than assuming.

### Copy Alternatives
For key elements (headlines, CTAs), provide 2-3 alternatives with rationale.

---

## Page-Specific Frameworks

### Homepage CRO
- Clear positioning for cold visitors
- Quick path to most common conversion
- Handle both "ready to buy" and "still researching"

### Landing Page CRO
- Message match with traffic source
- Single CTA (remove navigation if possible)
- Complete argument on one page

### Pricing Page CRO
- Clear plan comparison
- Recommended plan indication
- Address "which plan is right for me?" anxiety

---

## Metriche e Benchmark (B2B Tech/SaaS)

| Metrica | Scarso | Medio | Buono | Eccellente |
|---------|--------|-------|-------|------------|
| Landing Page CR | <1% | 1-2.5% | 2.5-5% | >5% |
| Form Completion | <20% | 20-40% | 40-60% | >60% |
| Bounce Rate | >70% | 50-70% | 35-50% | <35% |
| Time on Page | <30s | 30-60s | 1-3min | >3min |
| Scroll Depth | <30% | 30-50% | 50-70% | >70% |

## A/B Test Priority Matrix

| Test | Impatto Potenziale | Effort | Priorità |
|------|-------------------|--------|----------|
| Headline | Alto | Basso | 🔴 P0 |
| CTA Copy | Alto | Basso | 🔴 P0 |
| Form Fields | Alto | Basso | 🔴 P0 |
| Hero Layout | Alto | Medio | 🟠 P1 |
| Social Proof | Medio | Basso | 🟠 P1 |
| Pricing Structure | Alto | Alto | 🟡 P2 |

---

## Checklist CRO

### Pre-Launch
- [ ] Headline chiara e value-driven
- [ ] CTA visibile above the fold
- [ ] Social proof presente
- [ ] Form semplificato (max 3-4 campi)
- [ ] Mobile responsive verificato
- [ ] Core Web Vitals nel verde
- [ ] Trust signals presenti

### Post-Launch
- [ ] Heatmap installata (Hotjar/Clarity)
- [ ] Form analytics attivo
- [ ] A/B test headline pianificato
- [ ] Exit intent configurato
- [ ] Email sequence collegata

### Ongoing
- [ ] Review metriche settimanale
- [ ] A/B test continuo (1 test attivo sempre)
- [ ] User feedback collection

---

## Related Skills

- **signup-flow-cro**: If the issue is in the signup process itself
- **form-cro**: If forms on the page need optimization
- **popup-cro**: If considering popups as part of the strategy
- **copywriting**: If the page needs a complete copy rewrite
- **ab-testing**: To properly test recommended changes
- **product-marketing-context**: Foundation context to read first