Diseno Web Marketing

---
name: diseno-web-marketing
description: Webs de marketing y landing pages - hero, propuesta de valor, prueba social, características, página de precios, FAQ, llamadas a la acción y footer. Úsala al diseñar una landing, web de producto, página de precios o de lanzamiento.
license: MIT
metadata:
  apolo:
    version: 1.0.0
    autor: DMN / APOLO
    disparadores: [landing, landing page, página web, web de producto, home page, hero, página de precios, pricing, precios, footer, cta, llamada a la acción, lanzamiento, waitlist]
---

# Landing pages y webs de producto

Una landing tiene **un objetivo** (registrarse, descargar, comprar, apuntarse a la lista). Cada sección empuja hacia él.

## Orden que funciona
1. **Hero** (lo que se ve sin hacer scroll):
   - **Titular**: el beneficio para el cliente, en ~6–10 palabras ("Cierra tus facturas en 5 minutos", no "La plataforma líder de…").
   - Subtítulo de 1–2 líneas: qué es y para quién.
   - **CTA principal** con verbo concreto ("Empieza gratis") y una nota de fricción baja debajo ("Sin tarjeta · 2 min").
   - Imagen o vídeo **del producto real** (captura o mockup), no fotos de stock.
   - Opcional: CTA secundario ("Ver demo", estilo contorno).
2. **Prueba social** temprana: logos de clientes, valoración ("4,8 ★ en 2.300 reseñas") o una cifra creíble.
3. **Problema → solución:** 3 beneficios con icono, título corto y una frase. Habla de resultados, no de funciones.
4. **Características en detalle:** bloques alternos de imagen y texto (zigzag), uno por idea, con capturas reales.
5. **Testimonios** con nombre, cargo, foto y un resultado concreto.
6. **Precios** (o un enlace a ellos).
7. **FAQ:** las 5–8 objeciones reales (precio, seguridad, cancelación, migración), en acordeón.
8. **CTA final** que repite la acción principal.
9. **Footer.**

## Página de precios
- 2–4 planes en columnas; el **recomendado destacado** (borde de color, etiqueta "Más popular"), normalmente el del medio.
- Interruptor **mensual / anual** con el ahorro visible ("−20 %"); el precio anual también en su equivalente mensual.
- Por plan: nombre, para quién es (1 línea), precio grande, CTA y 4–8 ventajas con ✓. Lo que no incluye, en gris o directamente omitido.
- Tabla comparativa completa debajo (desplegable) para quien quiera detalle.
- Enterprise o "A medida" con "Hablar con ventas".
- Debajo: FAQ de facturación y garantías ("Cancela cuando quieras", "30 días de devolución").

## Footer
- Columnas agrupadas (Producto, Empresa, Recursos, Legal), con 4–6 enlaces cada una.
- Logo, frase corta, redes sociales, selector de idioma y, si aporta, suscripción al boletín.
- Legal: privacidad, términos y cookies.

## Detalles que suben la conversión
- Un único color para los CTA, repetidos a lo largo de la página con el mismo texto.
- Navegación superior mínima (4–5 enlaces + CTA). En landings de campaña, mejor sin menú.
- Velocidad: imágenes optimizadas (WebP/AVIF, `loading="lazy"` bajo el pliegue); LCP < 2,5 s.
- Legibilidad en móvil: titular de 32–40 px, cuerpo de 16–18 px, CTA a todo el ancho.
- Accesibilidad: contraste AA y el texto del CTA comprensible fuera de contexto.

## Errores típicos
- Titular ingenioso pero que no dice qué hace.
- Cinco CTA distintos compitiendo entre sí.
- Carrusel en el hero.
- Precios escondidos ("contáctanos") en un producto de autoservicio.
- Fotos de stock genéricas.
- Muros de texto sin capturas.