Toda landing page SaaS de éxito sigue la misma estructura. No es por falta de creatividad de los fundadores, sino porque esa estructura funciona: refleja con exactitud cómo evalúa el software un cliente potencial. La persona necesita entender qué hace el producto (hero), comprobar que otros confían en él (prueba social), descubrir cómo resuelve su problema (características), comparar planes (precios), escuchar a usuarios reales (testimonios), obtener respuestas a sus objeciones (FAQ) y recibir un empujón para actuar (CTA final). Esta guía desglosa cada sección con buenas prácticas y patrones de implementación en React.
1. Hero con CTA
La sección hero es, con diferencia, la de mayor impacto en toda la página. Tiene una sola misión: comunicar tu propuesta de valor con la claridad suficiente para que el visitante siga bajando.
<section style={{
minHeight: "85vh",
display: "flex",
alignItems: "center",
padding: "var(--section-padding-y-lg) 0",
background: "var(--color-background)",
}}>
<div style={{
maxWidth: "720px",
margin: "0 auto",
textAlign: "center",
padding: "0 var(--container-padding-x)",
}}>
<span style={{
display: "inline-block",
padding: "0.5rem 1.25rem",
borderRadius: "var(--radius-full)",
border: "1px solid var(--color-accent-border)",
background: "var(--color-accent-subtle)",
fontSize: "0.8125rem",
fontWeight: 500,
marginBottom: "1.5rem",
}}>
Now in public beta
</span>
<h1 style={{
fontSize: "clamp(2.5rem, 5vw, 4.5rem)",
fontWeight: 700,
lineHeight: 1.08,
letterSpacing: "-0.03em",
}}>
Ship features, not infrastructure
</h1>
<p style={{
fontSize: "1.125rem",
lineHeight: 1.7,
color: "var(--color-foreground-muted)",
marginTop: "1.5rem",
maxWidth: "560px",
margin: "1.5rem auto 0",
}}>
The developer platform that handles auth, billing, and deployment
so you can focus on what makes your product different.
</p>
<div style={{ display: "flex", gap: "1rem", justifyContent: "center", marginTop: "2rem" }}>
<a href="/signup" style={{
padding: "0.875rem 2rem",
borderRadius: "var(--radius-full)",
background: "var(--color-accent)",
color: "#fff",
fontWeight: 600,
textDecoration: "none",
}}>
Start free trial
</a>
<a href="/demo" style={{
padding: "0.875rem 2rem",
borderRadius: "var(--radius-full)",
border: "1px solid var(--color-border)",
color: "var(--color-foreground)",
fontWeight: 500,
textDecoration: "none",
}}>
Watch demo
</a>
</div>
</div>
</section>
Buenas prácticas para los hero de SaaS:
- Una sola propuesta de valor, no tres. "Ship features, not infrastructure" es claro. "Lanza funciones, colabora mejor y ahorra dinero" son tres mensajes peleándose por la atención.
- CTA orientada a la acción: "Start free trial" supera a "Get started". "Start free trial" le dice al usuario exactamente qué pasa a continuación.
- Insignia para crear urgencia: "Now in public beta" o "Nuevo: analítica con IA" dan un motivo para actuar ya.
- Dos CTA como máximo: una principal (alto compromiso) y otra secundaria (bajo compromiso). La CTA secundaria capta a los interesados que todavía no están listos para registrarse.
2. Barra de prueba social
Coloca la prueba social justo después del hero. Esta sección cierra la brecha entre "suena interesante" y "los demás están de acuerdo":
<section style={{
padding: "3rem 0",
borderTop: "1px solid var(--color-border)",
borderBottom: "1px solid var(--color-border)",
}}>
<div style={{
maxWidth: "var(--container-max-width)",
margin: "0 auto",
textAlign: "center",
}}>
<p style={{ fontSize: "0.875rem", color: "var(--color-foreground-muted)", marginBottom: "2rem" }}>
Trusted by engineering teams at
</p>
<div style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "center",
alignItems: "center",
gap: "3rem",
opacity: 0.6,
}}>
{logos.map((logo) => (
<img key={logo.alt} src={logo.src} alt={logo.alt} style={{ height: 28 }} />
))}
</div>
</div>
</section>
Las barras de logotipos rinden mejor con entre 4 y 6 marcas reconocibles. Si aún no tienes clientes de renombre, sustitúyelas por métricas: "4.200+ equipos", "99,9 % de disponibilidad", "más de 50 M de llamadas a la API procesadas". Los números también son prueba social.
3. Vitrina de características
La sección de características explica cómo funciona el producto. Dos disposiciones dominan las landing pages SaaS:
Filas alternas: texto a la izquierda, captura a la derecha y, luego, al revés. Cada fila destaca una característica. Esta disposición va bien con 3 o 4 características.
Cuadrícula de características: una rejilla de 3 columnas con tarjetas, cada una con su icono, título y descripción. Es mejor cuando hay 6 o más características y conviene mantener la paridad visual.
Buenas prácticas:
- Empieza por el beneficio, no por la función: "Despliega en 30 segundos" (beneficio) frente a "Despliegue con un clic" (función). Los beneficios responden a la pregunta "¿y a mí por qué me importa?".
- Una captura por característica: mostrar la interfaz aporta credibilidad. Si tu producto luce bien, enséñalo. Si no, arregla la interfaz antes que la landing page.
- Descripciones de 2 frases: las secciones de características son para ojear, no para leer. Si una función necesita un párrafo entero para explicarse, necesita su propia página.
4. Tabla de precios
La sección de precios es donde la intención se convierte en acción. Las páginas de precios SaaS suelen mostrar 3 planes uno al lado del otro:
- Gratis / Starter: establece una base de referencia y elimina el riesgo
- Pro: el plan que de verdad quieres que la gente compre, resaltado visualmente
- Enterprise: transmite escalabilidad, normalmente con un "Contactar con ventas"
Buenas prácticas:
- Resalta el plan central: usa un borde de acento, una insignia de "El más popular" o una tarjeta elevada
- Conmutador anual/mensual: por defecto el anual, mostrando el ahorro de forma explícita
- Lista de funciones bajo cada plan: entre 5 y 8 puntos como máximo, con marcas de verificación
- Una CTA por plan: "Empezar gratis", "Iniciar prueba", "Contactar con ventas"
Para ver patrones de implementación, consulta la guía detallada sobre cómo construir tablas comparativas en React.
5. Testimonios
Los testimonios responden a la pregunta "¿esto funciona de verdad?". Tres formatos dan buen resultado:
- Tarjetas de cita: cuadrícula de 3 columnas con testimonios breves, con nombre, cargo, empresa y avatar
- Testimonio destacado: una cita grande con foto, centrada y con mucho peso visual
- Muro de testimonios: una cuadrícula tipo mosaico con entre 6 y 12 citas, que transmite el volumen de clientes satisfechos
Buenas prácticas:
- Nombres y fotos reales: los testimonios anónimos no tienen ninguna credibilidad
- Resultados concretos: "Redujimos el tiempo de despliegue de 2 horas a 5 minutos" supera a "Gran producto, muy recomendable"
- Ajusta el testimonio a la sección: coloca un testimonio sobre precios cerca de la sección de precios y uno sobre el onboarding cerca del hero
6. FAQ
La sección de FAQ gestiona las objeciones que, de otro modo, impedirían convertir a un cliente potencial. Temas habituales en las FAQ de SaaS:
- Precios y facturación (duración de la prueba gratuita, política de cancelación, reembolsos)
- Seguridad y cumplimiento (SOC 2, RGPD, ubicación de los datos)
- Migración (importar datos, cambiar desde la competencia)
- Soporte (tiempos de respuesta, canales, documentación)
Impleméntala como un acordeón con transiciones de altura suaves:
"use client";
import { useState } from "react";
interface FAQItem {
question: string;
answer: string;
}
export function FAQ({ items }: { items: FAQItem[] }) {
const [openIndex, setOpenIndex] = useState<number | null>(null);
return (
<div style={{ maxWidth: "720px", margin: "0 auto" }}>
{items.map((item, i) => (
<div
key={item.question}
style={{ borderBottom: "1px solid var(--color-border)" }}
>
<button
onClick={() => setOpenIndex(openIndex === i ? null : i)}
style={{
width: "100%",
padding: "1.25rem 0",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
background: "none",
border: "none",
cursor: "pointer",
fontSize: "1rem",
fontWeight: 600,
color: "var(--color-foreground)",
textAlign: "left",
}}
>
{item.question}
<span style={{
transform: openIndex === i ? "rotate(45deg)" : "rotate(0deg)",
transition: "transform 200ms ease",
fontSize: "1.5rem",
lineHeight: 1,
}}>
+
</span>
</button>
<div style={{
maxHeight: openIndex === i ? "500px" : "0",
overflow: "hidden",
transition: "max-height 300ms ease",
}}>
<p style={{
paddingBottom: "1.25rem",
fontSize: "0.9375rem",
lineHeight: 1.7,
color: "var(--color-foreground-muted)",
}}>
{item.answer}
</p>
</div>
</div>
))}
</div>
);
}
Mantén las respuestas concisas, de 2 o 3 frases cada una. Enlaza a la documentación para las respuestas detalladas.
7. CTA final
La CTA del final es tu última oportunidad de convertir. Debe diferenciarse visualmente del resto de la página: un color de fondo que contraste, texto más grande y una única acción clara:
Buenas prácticas:
- Repite la propuesta de valor: quien ha llegado hasta el final está interesado. Refuerza por qué debería actuar.
- Lenguaje que elimina fricción: "Sin tarjeta de crédito", "Gratis para equipos de menos de 5 personas", "Cancela cuando quieras"
- Un único botón: aquí no hay CTA secundaria. Una acción, un botón.
El orden de las secciones importa
La secuencia anterior no es arbitraria. Sigue el modelo AIDA adaptado al SaaS:
- Atención: el hero capta la atención con la propuesta de valor
- Interés: la prueba social y las características despiertan el interés
- Deseo: los precios, los testimonios y las FAQ generan deseo y resuelven objeciones
- Acción: la CTA final convierte
Reordenar las secciones (poner los precios antes que las características, o las FAQ antes que los testimonios) rompe el flujo psicológico. Prueba variaciones, pero parte siempre del orden ya demostrado.
Secciones de landing page SaaS listas para usar
Crear cada una de estas secciones desde cero (responsive, accesible, con tematización y animaciones) lleva semanas. El catálogo de Incubator incluye versiones listas para producción de cada sección descrita aquí: heros, barras de prueba social, secciones de características, tablas de precios, testimonios, acordeones de FAQ y secciones CTA. Para una experiencia guiada, el generador de landing pages SaaS te permite elegir secciones por categoría y exportar una página completa. Cada componente está creado para Next.js 15 con Tailwind CSS v4 y Framer Motion, listo para copiar y pegar.
Relacionado en incubator
- Componentes de sección hero: secciones hero listas para landing pages SaaS.
- Componentes de tabla de precios: secciones de precios para copiar y pegar, con conmutadores de plan.
- Componentes de testimonios: tarjetas de cita, muros y diseños de testimonio destacado.
- Componentes de FAQ: secciones de FAQ en acordeón con transiciones suaves.
- Componentes de CTA: secciones de llamada a la acción de alto contraste para convertir.