# Conversion patterns (`conversion-patterns.md`)

Machine-readable summary: `resources/design-system/conversion-patterns.php`.

## Primary CTA hierarchy

1. **Hero CTA** — pill primary + optional secondary neutral pill.
2. **Mid-scroll reinforcement** after proof modules.
3. **Sticky CTA bar** after ~400px scroll (`components/sticky-cta-bar.blade.php`).
4. **Terminal CTA band** (often dark background) + `explore-site-section` cross-sell.

## Lead capture stack

| Layer | Mechanism |
| --- | --- |
| Form POST | `ContactController@submit` validation |
| Async telemetry | `/api/leads/*` endpoints (capture, form-started, submit) |
| Calculator | Multi-step quote builder persisting into `Lead` model fields |

### Guardrails

- Always include CSRF meta for fetch-based capture paths.
- Avoid removing `name` attributes relied upon by tracking scripts.
- Preserve phone localization arrays on contact view when extending fields.

## Trust placement

- Logos/badges near hero or immediately after opening paragraph.
- Testimonial blocks after methodology to counter skepticism post-education.

## Social proof types

| Type | Example |
| --- | --- |
| Numeric KPI | Project counts (align with org schema factual ranges) |
| Portfolio imagery | Hyphen-delimited purposeful filenames |
| Client quotes | Attribution clarity |

## Analytics & attribution

Production layout injects GA4 (`gtag.js`) plus Clarity. Retain page-level language propagation into GA config when modifying templating scaffolding.

Captured lead dimensions include URIs, referrer, coarse device/geo—do not degrade privacy promises in legal copy.

## What to avoid

| Pitfall |
| --- |
| Removing sticky CTA on long-scroll mobile templates without UX substitute |
| Conflicting competing primary accent colors besides teal ramp |
| Hardcoding webhook endpoints bypassing Laravel validation gates |