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

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:

<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

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

1. Copy completo en español neutral usando framework de copywriting-latam.
2. Metadata SEO + OG (app/page.tsx exporta metadata).
3. Schema.org JSON-LD para Product/Service/FAQ según tipo.
4. 2 variants de hero para A/B test (diferente angle de promesa).
5. Lista de assets faltantes que el founder debe proveer (screenshots reales, logos de clientes, testimonios con foto).
6. 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.