Secciones de landing

Las landing pages (páginas de aterrizaje) se arman casi siempre con los mismos bloques: un hero que engancha, una sección de características, precios, testimonios y alguna cifra que genere confianza. Aquí tienes cada bloque listo para copiar, pegar y adaptar a la marca de tu cliente.

Todos los demos usan variables CSS en :root, así que cambiar la paleta completa es cuestión de editar unas pocas líneas.

Cómo combinarlos

Una estructura clásica que funciona: Hero → Características → Estadísticas → Testimonios → Precios → Footer. Copia el contenido de cada <section> en el mismo archivo y unifica las variables de :root en una sola.

Hero centrado

Cuándo usarlo: para productos, apps o servicios donde el mensaje es lo más importante. Es el hero más versátil: título grande, subtítulo y dos llamadas a la acción (una principal y una secundaria).

Hero centrado

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cambia --color-primario y --color-secundario para ajustar el botón, la etiqueta y el degradado del texto resaltado.
• --fondo-1 y --fondo-2 controlan el degradado suave del fondo.
• Las formas decorativas son .forma-1, .forma-2 y .forma-3: muévelas cambiando top, left, right y bottom, o bórralas si quieres algo más limpio.
• La palabra resaltada va dentro de un <span> en el <h1>; ponlo en la palabra clave de tu cliente.
• El tamaño del título usa clamp(), así que se adapta solo del móvil al escritorio.

Hero dividido

Cuándo usarlo: en software, SaaS o servicios donde conviene mostrar el producto (captura, mockup o ilustración) junto al mensaje. En móvil, la ilustración se coloca debajo del texto automáticamente.

Hero dividido

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Sustituye el <svg> dentro de .ventana por una captura real: <img src="captura.png" alt="Panel de control">.
• Ajusta la proporción de columnas en grid-template-columns: 1.05fr 1fr (por ejemplo 1fr 1fr para mitad y mitad).
• El punto de quiebre está en @media (max-width: 760px); súbelo si el texto se ve apretado en tablets.
• La lista de beneficios usa ::before con un check; cambia el carácter "✓" por otro símbolo si quieres.
• La tarjeta flotante .flotante es opcional: muestra una cifra llamativa o elimínala.

Hero oscuro con degradado

Cuándo usarlo: para lanzamientos, startups tecnológicas, productos con IA o páginas de "lista de espera". El fondo oscuro con manchas de color en movimiento se ve moderno y premium, y el formulario de email captura contactos desde el primer segundo.

Hero oscuro con degradado

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --blob-1, --blob-2 y --blob-3 son los colores de las manchas; prueba con tonos de tu marca.
• La velocidad del movimiento está en animation: flotar 14s; súbela para algo más tranquilo.
• La rejilla de fondo se hace con .hero::before; cambia background-size: 40px 40px para hacerla más grande o elimínala.
• El JS sólo valida el correo y muestra un mensaje. Para guardarlo de verdad, envía el formulario a un servicio como Formspree o a tu backend con fetch().
• Las animaciones se desactivan solas si el usuario tiene activado "reducir movimiento" en su sistema.

Error común

Quitar el <label> del input porque "no se ve". Un campo sin etiqueta es inaccesible para lectores de pantalla. Aquí la etiqueta existe pero está oculta visualmente con la clase .sr-only.

Tabla de precios

Cuándo usarlo: en cualquier producto o servicio con planes. El interruptor mensual/anual permite mostrar el descuento por pago anual, y el plan destacado guía al visitante hacia la opción que más te conviene vender.

Tabla de precios

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Los precios viven en los atributos data-mensual y data-anual de cada .monto; el JS sólo los lee, así que no tienes que tocar código para cambiarlos.
• Para destacar otro plan, mueve la clase destacado y la <span class="cinta"> a otro <article>.
• --color-primario cambia el plan destacado, el interruptor, los checks y los botones a la vez.
• Para agregar un cuarto plan, duplica un <article class="plan">; la rejilla con auto-fit se reacomoda sola.
• El interruptor usa role="switch" y aria-checked, así funciona con teclado y lectores de pantalla.

Testimonios

Cuándo usarlo: cerca de los precios o del botón de compra, para generar confianza con opiniones reales de clientes. Las tarjetas con estrellas y avatar son fáciles de escanear.

Testimonios

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• El avatar muestra iniciales con un color propio definido inline: style="--color-avatar:#ec4899". Para usar foto, cambia el <span class="avatar"> por <img class="avatar" src="..." alt="">.
• Actualiza el aria-label de las estrellas cuando cambies la calificación (por ejemplo "4 de 5 estrellas").
• --acento controla las comillas decorativas grandes de cada tarjeta.
• Se usa <figure>, <blockquote> y <figcaption>: la forma semántica correcta para una cita con su autor.

Buena práctica

Usa testimonios reales con nombre y empresa. Uno con nombre completo y cargo convence mucho más que diez anónimos.

Sección de características

Cuándo usarlo: para explicar los beneficios principales de un producto o servicio en un formato fácil de leer de un vistazo: un icono, un título corto y una frase.

Sección de características

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Los iconos son SVG en línea con stroke="currentColor", así que toman el color de --color-primario automáticamente.
• Puedes reemplazar cualquier icono por otro de librerías gratuitas como Lucide o Heroicons (copia sólo el <svg>).
• --icono-fondo cambia el cuadro detrás del icono; ponle border-radius: 50% a .icono para hacerlo circular.
• Cambia minmax(230px, 1fr) para controlar cuántas columnas caben por fila.

Contador de estadísticas

Cuándo usarlo: para mostrar cifras de confianza (clientes, años de experiencia, proyectos entregados). Los números cuentan desde cero cuando el usuario llega a la sección, lo que llama la atención sin ser invasivo.

Contador de estadísticas

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cada número se configura con atributos: data-objetivo="12500" (valor final), data-prefijo="$" y data-sufijo="+".
• Cambia la constante DURACION del JS para que el conteo sea más rápido o más lento.
• threshold: 0.4 indica que la animación empieza cuando el 40% del número es visible.
• El formato con comas sale de Intl.NumberFormat('es-MX'); usa 'es-ES' si prefieres puntos como separador de miles.
• El valor final ya está escrito en el HTML: si el JS falla o el usuario prefiere menos movimiento, igual se ve la cifra correcta.

// Así funciona la detección: IntersectionObserver avisa cuando el elemento entra en pantalla
const observer = new IntersectionObserver((entradas) => {
  entradas.forEach((entrada) => {
    if (entrada.isIntersecting) {
      animar(entrada.target);
      observer.unobserve(entrada.target); // sólo se anima una vez
    }
  });
}, { threshold: 0.4 });

Resumen

• Un buen hero tiene un titular claro, un subtítulo que explica el beneficio y una llamada a la acción visible.
• Usa variables CSS para adaptar todos los bloques a la paleta del cliente en segundos.
• Guarda los datos (precios, cifras) en atributos data-* para que el JS sea genérico y fácil de mantener.
• Respeta prefers-reduced-motion en todo lo que se anime.