---
name: landing-page-latam
description: Diseña y genera landing pages de conversión usando Next.js 14+ App Router, Tailwind CSS y shadcn/ui, optimizadas para audiencia LATAM en español. Cubre arquitectura de secciones (hero, social proof, oferta, FAQ, CTA), Core Web Vitals (LCP <1s, CLS <0.1), métodos de pago locales (Stripe, MercadoPago, Culqi, Yape, PSE), y dolarización de precios. Use cuando el usuario diga "crea una landing page", "redesign de mi homepage", "página de ventas para [producto]", "landing para mi curso/SaaS", o necesite TSX listo para producción.
---

# Landing Page LATAM

Landing pages que convierten para founders LATAM. No "wow" — convierten. Stack default: Next.js 14+ App Router + TypeScript + Tailwind + shadcn/ui. Optimizado para Core Web Vitals porque Google penaliza en LATAM tan duro como en US.

## Cuándo activarte

- "Crea una landing para..."
- "Redesign de mi homepage"
- "Página de ventas para mi [curso/SaaS/servicio]"
- Usuario te muestra una landing actual con mala conversión
- Lanzamiento de producto/feature

## Diagnóstico antes de codear

Exigir siempre:

1. **ICP exacto** (no "PyMEs" — "PyMEs peruanas de logística con 5-50 empleados que facturan SUNAT").
2. **Awareness stage** (Schwartz). Determina la arquitectura de secciones.
3. **Promesa única medible**. Si no la tienes → al skill `copywriting-latam` primero.
4. **Tipo de oferta**: SaaS subscription / curso one-time / consultoría high-ticket / waitlist / lead magnet gratis.
5. **Tráfico esperado**: cold (ads) / warm (email/social) / hot (referidos). Cambia drásticamente el copy y la longitud.
6. **Métodos de pago necesarios** (ver tabla LATAM abajo).
7. **Branding existente**: colores, fuentes, tono. Si no hay → propone 2 opciones.

Sin ICP + promesa + awareness, **no escribas TSX**. Es perder tiempo.

## Arquitectura por tipo

### SaaS B2B (cold traffic)
```
1. Hero                    — headline + subhead + CTA primario + screenshot del producto
2. Logos de clientes       — solo si reconocibles. Si no, skip.
3. Problema agitado        — 3 puntos de dolor en lenguaje del ICP
4. Solución (3 features)   — qué hace, no cómo
5. Demo / loom embed       — opcional pero alto valor
6. Casos con números       — "X resultado en Y tiempo" con foto + nombre
7. Pricing                 — 3 tiers max, USD primario
8. FAQ                     — objeciones #1, #2, #3 contestadas
9. CTA final               — refuerzo del CTA primario
```

### Curso / Infoproducto
```
1. Hero (promesa + transformación)
2. Para quién es / para quién NO es
3. Lo que vas a aprender (módulos)
4. El instructor (autoridad)
5. Testimonios de alumnos con resultados
6. Lo que recibes (value stack visual)
7. Pricing + garantía
8. FAQ
9. Bonus + urgencia
10. CTA final
```

### Waitlist / Pre-launch
```
1. Hero (curiosidad + 1 CTA: tu email)
2. Qué es (3-4 frases máximo)
3. Por qué importa ahora
4. Quiénes ya están en la lista (logos / countercount)
5. Form prominente
```

### Consultoría / Servicios high-ticket
```
1. Hero (resultado específico + para quién)
2. Casos con métricas duras
3. El proceso (3-5 pasos)
4. Quién soy / por qué confiar
5. CTA aplicar (calendly o form de calificación, NUNCA pricing)
```

**Regla LATAM**: high-ticket NO muestra precio. Genera fricción y descalifica al tire-kicker.

## Pago: específico para LATAM

| País | Métodos críticos | Cómo integrar |
|------|------------------|---------------|
| México | Tarjeta, OXXO, SPEI | Stripe + Conekta o MercadoPago |
| Argentina | Tarjeta, MercadoPago, transferencia | MercadoPago Checkout Pro |
| Brasil | Pix, boleto, tarjeta | Stripe (Pix soportado 2025+) o Iugu |
| Perú | Yape, Plin, tarjeta, transferencia | Culqi o Izipay |
| Chile | Webpay, tarjeta, transferencia | Transbank / Khipu |
| Colombia | PSE, tarjeta, Nequi, Bancolombia QR | Wompi o ePayco |
| LATAM general USD | Tarjeta | Stripe + Paddle (MoR para impuestos) |

**Default recomendado para SaaS LATAM B2B**: Stripe (USD) con fallback a MercadoPago por país. Para B2C bajo ticket: MercadoPago primario.

## Hero: el 80/20 de la landing

Estructura:
```tsx
<section className="min-h-[88vh] flex items-center px-6 lg:px-12">
  <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
    <div>
      <p className="text-sm uppercase tracking-wide text-muted-foreground">
        {/* Categoría: "Plataforma de cobranza" "Curso de marketing IA" */}
      </p>
      <h1 className="text-5xl lg:text-7xl font-bold tracking-tight mt-3">
        {/* Headline — promesa específica medible */}
      </h1>
      <p className="text-xl text-muted-foreground mt-6 max-w-xl">
        {/* Subhead — para quién, en qué tiempo, sin qué fricción */}
      </p>
      <div className="flex gap-4 mt-8">
        <Button size="lg">{/* CTA primario */}</Button>
        <Button size="lg" variant="ghost">{/* CTA secundario opcional */}</Button>
      </div>
      <p className="text-sm text-muted-foreground mt-4">
        {/* Trust line: "Usado por 200+ founders LATAM" o "Gratis · sin tarjeta" */}
      </p>
    </div>
    <div>
      {/* Screenshot, loom, ilustración. Nunca placeholder genérico. */}
    </div>
  </div>
</section>
```

**Reglas:**
- Hero altura mínima 88vh, no full screen (deja afford para scroll).
- CTA primario es **un solo color de alto contraste**.
- Trust line debajo del CTA — quita fricción.
- Imagen lado derecho **debe mostrar el producto en uso**, no ilustración stock.

## Core Web Vitals (no negociable)

Targets:
- **LCP < 1.0s** (no 2.5s — apunta a top 10%)
- **CLS < 0.05**
- **INP < 200ms**
- **TBT < 100ms**

Cómo:

1. **Imágenes**: `next/image` siempre. `priority={true}` solo en hero. WebP/AVIF. Definir `width`/`height` para evitar CLS.
2. **Fuentes**: `next/font` con `display: 'swap'`. Subset a `latin-ext` si usas tildes/ñ.
3. **JS**: server components por default. `'use client'` solo donde necesites interactividad real.
4. **Embeds**: nunca cargues YouTube/Vimeo directo en hero. Usa lite-youtube-embed o screenshot + lazy load on click.
5. **Tracking**: GA4 + Meta Pixel cargan después de interacción del usuario, no en `<head>`. Usa Partytown si necesitas más scripts.
6. **CSS**: Tailwind purgea solo. Sin CSS-in-JS pesado tipo styled-components.

## Componentes obligatorios

### Social proof
- Logos: grayscale `opacity-60` hover `opacity-100`. Máximo 6 visibles, scroll si más.
- Testimonios: foto + nombre + cargo + empresa + handle (link a su X/LinkedIn = legitima).
- Métricas: "$2.3M procesados" > "Procesamos mucho". Números específicos.

### Pricing
- 3 tiers max. Highlight uno (no necesariamente el del medio — el que quieras vender).
- USD primario para >$50 USD. Local para <$50.
- "Cobrado anualmente" con toggle mensual/anual (default anual con 20% descuento).
- CTA por tier: "Empezar gratis" / "Reservar demo" / "Hablar con ventas" según ticket.
- Sin "Contact us" en pricing público — perdiste el lead. Excepto enterprise >$10K MRR.

### FAQ
- 5-7 preguntas. Top objeciones reales del ICP.
- Si tu producto requiere config técnica, FAQ debe contestar "¿cuánto tarda implementar?".
- Schema.org FAQPage para AI search (ver skill `ai-seo-latam`).

## Anti-patterns

1. **Hero genérico con ilustración stock**. → Screenshot real del producto en uso.
2. **3 CTAs primarios en hero**. → Uno solo. Uno.
3. **"Get started for free"** sin contexto. → "Empezar gratis — sin tarjeta de crédito".
4. **Modal popup en cold traffic en <10s**. → Mínimo 30s o scroll del 50%.
5. **Carrusel de testimonios auto-play**. → Estático con grid. Carruseles bajan engagement y CWV.
6. **Cookie banner agresivo** que tapa el hero. → Tira bottom, dismissible, no tapa el CTA.
7. **Footer con 47 links** en una landing de conversión. → Footer mínimo. Links importantes solo.
8. **"Únete a la familia"** "Bienvenido a bordo" — cringe.

## Tracking esencial

```tsx
// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XXXXX" />
    </html>
  )
}
```

Eventos a trackear sin negociar:
- `hero_cta_click`
- `pricing_view` (scroll a sección)
- `pricing_cta_click` (con tier)
- `faq_open` (con pregunta)
- `form_submit`
- `form_error`

Heatmaps: Microsoft Clarity (gratis, GDPR-safe) > Hotjar para empezar.

## Output esperado

Cuando completes una landing:

1. **Estructura completa** en archivos:
   - `app/page.tsx` (server component, importa secciones)
   - `components/sections/hero.tsx`, `social-proof.tsx`, `features.tsx`, etc.
   - `components/ui/*` de shadcn ya instalados
2. **Copy completo** en español neutral usando framework de `copywriting-latam`.
3. **Metadata SEO + OG** (`app/page.tsx` exporta `metadata`).
4. **Schema.org JSON-LD** para Product/Service/FAQ según tipo.
5. **2 variants de hero** para A/B test (diferente angle de promesa).
6. **Lista de assets faltantes** que el founder debe proveer (screenshots reales, logos de clientes, testimonios con foto).
7. **Comando de instalación** completo: `npx create-next-app + shadcn init + componentes específicos`.

Nunca entregues una landing sin variants de hero ni lista de assets faltantes.