Camilexx/enviosxpress-web

🚀 Habilidad de CRO para Páginas de Aterrizaje

Crea páginas de aterrizaje que conviertan visitantes en clientes. Cada elemento respaldado por psicología de conversión y patrones probados.

---

Referencia Rápida

JERARQUÍA DE CONVERSIÓN (verificar en este orden):
1. ¿La propuesta de valor es clara en 5 segundos? → Título del héroe
2. ¿El CTA es visible sin hacer scroll? → Ubicación del botón
3. ¿Hay prueba social presente? → Testimonios, logos, números
4. ¿Se abordan las objeciones? → FAQ, garantías
5. ¿Se minimizó la fricción? → Campos del formulario, velocidad de carga

---

Arquitectura de Secciones (De Arriba a Abajo)

FLUJO ÓPTIMO DE PÁGINA DE ATERRIZAJE:
┌─────────────────────────────────────────┐
│  1. NAVBAR — Logo + Navegación + Botón CTA  │
├─────────────────────────────────────────┤
│  2. HÉROE — Titular + Subtítulo + CTA + Imagen │
│     (sin hacer scroll, < 3 segundos)       │
├─────────────────────────────────────────┤
│  3. BARRA DE PRUEBA SOCIAL — Logos / Números  │
├─────────────────────────────────────────┤
│  4. PROBLEMA — Puntos de dolor (formato PAS)  │
├─────────────────────────────────────────┤
│  5. SOLUCIÓN — Tu producto como respuesta   │
├─────────────────────────────────────────┤
│  6. CARACTERÍSTICAS — 3-6 beneficios clave         │
├─────────────────────────────────────────┤
│  7. CÓMO FUNCIONA — 3 pasos              │
├─────────────────────────────────────────┤
│  8. TESTIMONIOS — Citas de usuarios reales     │
├─────────────────────────────────────────┤
│  9. PRECIOS — Planes + Comparación        │
├─────────────────────────────────────────┤
│ 10. FAQ — Manejo de objeciones            │
├─────────────────────────────────────────┤
│ 11. CTA FINAL — Último empujón de conversión    │
├─────────────────────────────────────────┤
│ 12. PIE DE PÁGINA — Enlaces + Legal + Contacto    │
└─────────────────────────────────────────┘

---

Patrones de la Sección Héroe

Patrón 1: Héroe Partido (Titular a la Izquierda, Visual a la Derecha)

<section class="hero">
  <div class="hero-grid">
    <!-- Izquierda: Texto -->
    <div class="hero-content">
      <span class="hero-badge">🚀 Nuevo en 2026</span>
      <h1 class="hero-title">
        Envía paquetes a
        <span class="text-gradient">todo Ecuador</span>
        desde $2.50
      </h1>
      <p class="hero-subtitle">
        El servicio de courier más rápido y confiable. 
        Entrega en 24-48h con seguimiento en tiempo real.
      </p>
      <div class="hero-actions">
        <a href="#cotizar" class="btn btn-primary btn-lg">
          Cotizar envío gratis
          <svg><!-- icono de flecha --></svg>
        </a>
        <a href="#como-funciona" class="btn btn-secondary btn-lg">
          Ver cómo funciona
        </a>
      </div>
      <div class="hero-proof">
        <div class="hero-avatars"><!-- avatares apilados --></div>
        <p><strong>+2,500</strong> emprendedores confían en nosotros</p>
      </div>
    </div>
    
    <!-- Derecha: Visual -->
    <div class="hero-visual">
      <!-- Captura de pantalla del producto, ilustración o video -->
    </div>
  </div>
</section>

.hero {
  padding: var(--space-section) 0;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 540px;
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.hero-avatars {
  display: flex;
}
.hero-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  margin-left: -8px;
}
.hero-avatars img:first-child {
  margin-left: 0;
}

/* Móvil */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-subtitle { max-width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-proof { justify-content: center; }
  .hero-visual { order: -1; }
}

---

Patrones de Prueba Social

Barra de Logos

<section class="social-proof-bar">
  <p class="social-proof-label">Confían en nosotros</p>
  <div class="logo-scroll">
    <div class="logo-track">
      <!-- Repite los logos 2x para desplazamiento infinito -->
      <img src="/logos/brand1.svg" alt="Marca 1" />
      <img src="/logos/brand2.svg" alt="Marca 2" />
      <!-- ... -->
    </div>
  </div>
</section>

.social-proof-bar {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: center;
}

.social-proof-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-8);
}

.logo-scroll {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.logo-track {
  display: flex;
  gap: var(--space-12);
  animation: scroll 30s linear infinite;
}

.logo-track img {
  height: 28px;
  opacity: 0.4;
  filter: grayscale(100%);
  transition: all var(--duration-normal) var(--ease-out);
}

.logo-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

Barra de Estadísticas

<div class="stats-bar">
  <div class="stat">
    <span class="stat-value" data-count="15000">15,000+</span>
    <span class="stat-label">Envíos entregados</span>
  </div>
  <div class="stat">
    <span class="stat-value">98.5%</span>
    <span class="stat-label">Tasa de entrega</span>
  </div>
  <div class="stat">
    <span class="stat-value">24h</span>
    <span class="stat-label">Tiempo promedio</span>
  </div>
  <div class="stat">
    <span class="stat-value">4.9★</span>
    <span class="stat-label">Calificación</span>
  </div>
</div>

---

Sección de Precios

Diseño de 3 Planes con Alternador

<section class="pricing" id="pricing">
  <div class="container">
    <div class="section-header">
      <h2>Planes simples y transparentes</h2>
      <p>Sin costos ocultos. Cancela cuando quieras.</p>
    </div>
    
    <!-- Alternador -->
    <div class="pricing-toggle">
      <span class="toggle-label" data-active="monthly">Mensual</span>
      <button class="toggle-switch" role="switch" aria-checked="false">
        <span class="toggle-thumb"></span>
      </button>
      <span class="toggle-label" data-active="yearly">
        Anual <span class="toggle-badge">-20%</span>
      </span>
    </div>
    
    <!-- Cuadrícula de Planes -->
    <div class="plans-grid">
      <!-- Básico -->
      <div class="plan-card">
        <div class="plan-header">
          <h3>Básico</h3>
          <p class="plan-desc">Para emprendedores que inician</p>
        </div>
        <div class="plan-price">
          <span class="price-amount" data-monthly="$19" data-yearly="$15">$19</span>
          <span class="price-period">/mes</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 100 envíos/mes</li>
          <li class="feature-included">✓ Seguimiento básico</li>
          <li class="feature-included">✓ Soporte por email</li>
          <li class="feature-excluded">✗ Acceso API</li>
          <li class="feature-excluded">✗ Prioridad</li>
        </ul>
        <button class="btn btn-secondary btn-lg btn-full">Empezar gratis</button>
      </div>
      
      <!-- Pro (Destacado) -->
      <div class="plan-card plan-featured">
        <div class="plan-badge">Más popular</div>
        <div class="plan-header">
          <h3>Profesional</h3>
          <p class="plan-desc">Para negocios en crecimiento</p>
        </div>
        <div class="plan-price">
          <span class="price-amount" data-monthly="$49" data-yearly="$39">$49</span>
          <span class="price-period">/mes</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 500 envíos/mes</li>
          <li class="feature-included">✓ Seguimiento en tiempo real</li>
          <li class="feature-included">✓ Soporte prioritario</li>
          <li class="feature-included">✓ Acceso API</li>
          <li class="feature-included">✓ Dashboard de análisis</li>
        </ul>
        <button class="btn btn-primary btn-lg btn-full">Empezar ahora</button>
      </div>
      
      <!-- Empresa -->
      <div class="plan-card">
        <div class="plan-header">
          <h3>Empresa</h3>
          <p class="plan-desc">Solución personalizada</p>
        </div>
        <div class="plan-price">
          <span class="price-amount">Personalizado</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ Envíos ilimitados</li>
          <li class="feature-included">✓ Account manager dedicado</li>
          <li class="feature-included">✓ SLA garantizado</li>
          <li class="feature-included">✓ Integración personalizada</li>
          <li class="feature-included">✓ Facturación corporativa</li>
        </ul>
        <button class="btn btn-secondary btn-lg btn-full">Contactar ventas</button>
      </div>
    </div>
    
    <!-- Garantía -->
    <div class="guarantee">
      <span class="guarantee-icon">🛡️</span>
      <p>Garantía de satisfacción de 30 días. Si no estás satisfecho, te devolvemos tu dinero.</p>
    </div>
  </div>
</section>

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: var(--space-12) auto;
}

.plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}

.plan-featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-xl);
  transform: scale(1.05);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

.price-amount {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-text);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-included {
  color: var(--color-text);
}

.feature-excluded {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.btn-full {
  width: 100%;
}

@media (max-width: 768px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .plan-featured {
    transform: none;
    order: -1;
  }
}

---

Sección de FAQ

<section class="faq">
  <div class="container">
    <h2>Preguntas frecuentes</h2>
    <div class="faq-grid">
      <details class="faq-item">
        <summary class="faq-question">
          ¿Cuánto tarda la entrega?
          <svg class="faq-arrow"><!-- cheurón --></svg>
        </summary>
        <div class="faq-answer">
          <p>Nuestro tiempo promedio de entrega es de 24-48 horas 
          para ciudades principales y 48-72 horas para zonas rurales.</p>
        </div>
      </details>
      <!-- Más elementos... -->
    </div>
  </div>
</section>

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-question {
  padding: var(--space-5) 0;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-arrow {
  transition: transform var(--duration-normal) var(--ease-out);
}

details[open] .faq-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  animation: slideDown 0.3s var(--ease-out);
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 200px; }
}

---

Fórmulas de Copywriting

Titular del Héroe (PAS: Problema → Agitación → Solución)

FÓRMULA: [Resultado Deseado] + [en Tiempo Específico] + [Sin Objeción Principal]

EJEMPLOS:
✅ "Envía paquetes a todo Ecuador desde $2.50 — entrega en 24h"
✅ "Lanza tu tienda online en 48 horas sin saber programar"
✅ "Duplica tus ventas en 30 días con email marketing automático"

❌ "La mejor plataforma de envíos" (genérico, sin beneficio)
❌ "Soluciones innovadoras de logística" (corporativo vacío)

Viñetas de Características (FAB: Característica → Ventaja → Beneficio)

FÓRMULA: [Verbo de acción] + [lo que hace] + [por qué importa]

EJEMPLOS:
✅ "Rastrea cada paquete en tiempo real — nunca pierdas un envío"
✅ "Cobra contra entrega — tus clientes pagan al recibir"
✅ "Integra tu tienda en 5 minutos — sin código, sin complicaciones"

Botones de CTA

FÓRMULA: [Verbo] + [Beneficio] + [Si aplica, Urgencia/Especificidad]

EJEMPLOS:
✅ "Cotiza tu envío gratis ahora"
✅ "Empieza tu prueba gratuita — sin tarjeta"
✅ "Descarga el kit de inicio →"

Consejos:
- Usa verbos de acción fuertes (Cotiza, Empieza, Descarga, Obtén)
- Incluye un beneficio claro (gratis, sin compromiso, inmediato)
- Crea urgencia cuando sea apropiado (ahora, hoy, limitado)
- Evita "Enviar" o "Hacer clic aquí" (genéricos, débiles)

---

Estrategias de Pruebas A/B

Qué Probar Primero

Prioridad	Elemento	Impacto Potencial	Esfuerzo
1	Titular del héroe	Alto	Bajo
2	Texto del CTA	Alto	Bajo
3	Imagen del héroe	Medio	Medio
4	Prueba social	Medio-Alto	Bajo
5	Estructura de precios	Alto	Medio
6	Diseño del formulario	Medio	Medio
7	Copy del FAQ	Bajo-Medio	Bajo
8	Color del CTA	Bajo	Bajo

Estructura de Prueba

HIPÓTESIS:
Si [cambio], entonces [resultado esperado], porque [razón].

EJEMPLO:
Si cambiamos el titular de "Servicio de Envíos" a "Envía a todo Ecuador desde $2.50", 
entonces la tasa de clics en el CTA aumentará un 20%, 
porque el nuevo titular comunica un beneficio específico y elimina una objeción de precio.

Métricas Clave

MÉTRICAS PRINCIPALES:
- Tasa de conversión (objetivo primario)
- Tasa de clics en CTA (micro-conversión)
- Tasa de rebote (engagement inicial)
- Tiempo en página (interés)
- Tasa de scroll profundidad (alcance de contenido)

MÉTRICAS SECUNDARIAS:
- Tasa de apertura de FAQ (resolución de objeciones)
- Tasa de clics en plan de precios (intención de compra)
- Tasa de abandono de formulario (fricción)

---

Checklist de Optimización

Antes de Publicar

• ¿El titular comunica el beneficio principal en < 5 segundos?
• ¿El CTA principal es visible sin hacer scroll?
• ¿Hay al menos una forma de prueba social?
• ¿Las objeciones comunes están cubiertas en el FAQ?
• ¿Los formularios tienen < 5 campos?
• ¿La página carga en < 3 segundos?
• ¿Es responsiva en móvil y escritorio?
• ¿Hay un solo objetivo de conversión principal?

Después de Publicar

• ¿Está configurado el seguimiento de conversiones?
• ¿Hay al menos una prueba A/B en ejecución?
• ¿Se están revisando los datos semanalmente?
• ¿Se están documentando los aprendizajes?

---

Conclusión

Esta habilidad te proporciona una base sólida y probada para construir páginas de aterrizaje que conviertan. No es necesario implementar todos los patrones de inmediato; prioriza según tu audiencia y producto. Recuerda: la optimización de la tasa de conversión es un proceso iterativo. Prueba, aprende y mejora continuamente.

Siguiente paso: Elige la sección que más impacto pueda tener en tu conversión actual y comienza con una prueba A/B simple.

---

Habilidad mantenida por Camilexx — Contribuciones y feedback bienvenidos.