Agencia / servicios

Landing de alta conversión para agencias digitales, consultorías, despachos contables, empresas de software o cualquier negocio que venda servicios. Sigue la estructura clásica de una página de ventas: promesa → prueba social → servicios → proceso → casos → precios → objeciones (FAQ) → llamada a la acción.

Vista previa

Secciones y su objetivo

Sección	Objetivo de venta
Hero oscuro con degradados	Promesa clara + dos botones + prueba social (avatares, calificación). El mockup inclinado con tarjetas flotantes muestra resultados.
Logos de clientes	Confianza inmediata: "otros como tú ya nos eligieron".
Servicios	6 tarjetas que se invierten a oscuro al pasar el mouse.
Proceso	4 pasos numerados con contadores CSS (`counter()`): reduce la incertidumbre.
Casos de éxito + cifras	Tarjetas con foto y resultado concreto; contadores animados.
Precios	3 planes con el central destacado y selector mensual / anual que recalcula precios con JavaScript.
FAQ	Acordeón nativo con `details`/`summary` (sin JavaScript) para resolver objeciones.
CTA final	Captura de correo con oferta de valor ("diagnóstico gratuito").
Footer	4 columnas con enlaces y datos de contacto.

Personalización

Colores de marca

css

:root {
  --primario: #6d28d9;        /* violeta: botones, acentos */
  --primario-claro: #8b5cf6;  /* hover */
  --secundario: #f97316;      /* naranja: detalles, etiqueta "más popular" */
  --oscuro: #0f0a1f;          /* hero, proceso, footer */
  --fondo-alt: #f6f4fb;       /* fondos de secciones alternas */
}

Un despacho contable o legal se ve mejor con azul marino #1e3a8a y dorado #ca8a04; una consultoría ambiental con verde #047857 y lima #84cc16.

Planes y precios

Cada precio guarda su valor mensual en data-mensual. El script calcula el anual con 20 % de descuento:

html

<div class="precio" data-mensual="9900">$9,900<small> /mes</small></div>

p.innerHTML = `${mxn.format(anual ? base * 0.8 : base)}<small> /mes</small>`;

Para cambiar el descuento, modifica el 0.8 (0.85 = 15 %). Si el cliente no maneja planes, elimina el div con clase toggle y deja precios fijos o "Desde $X".

Logos de clientes

En la demo son nombres en texto. Sustitúyelos por imágenes SVG o PNG en escala de grises:

html

<div class="logos">
  <img src="img/logos/aurora.svg" alt="Aurora" height="32">
  <img src="img/logos/ferremax.svg" alt="FerreMax" height="32">
</div>

css

.logos img { filter: grayscale(1); opacity: .6; transition: .3s; }
.logos img:hover { filter: none; opacity: 1; }

Preguntas frecuentes

Agrega o quita bloques details. Escribe las preguntas que el cliente recibe más seguido por WhatsApp: cada una resuelta en la página es una objeción menos en la llamada de ventas.

Formulario final

Actualmente sólo muestra el mensaje de gracias. Conéctalo a:

Tu backend en PHP: formulario de contacto seguro.
Una API en Node: nodemailer.
Un servicio sin código: Formspree, Web3Forms, Brevo o Mailchimp (para crear una lista de correos).

document.getElementById('form-cta').addEventListener('submit', async (e) => {
  e.preventDefault();
  const res = await fetch('/api/leads', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(Object.fromEntries(new FormData(e.target))),
  });
  if (res.ok) { e.target.style.display = 'none'; document.getElementById('gracias').style.display = 'block'; }
});

Técnicas CSS interesantes de esta plantilla

Fondos con varios radial-gradient superpuestos para el efecto "aurora" del hero, sin imágenes.
Texto con degradado: background-clip: text + color: transparent.
Logo con conic-gradient: un cuadrado redondeado multicolor en una línea.
Mockup 3D con transform: perspective(1200px) rotateY(-10deg).
Numeración automática de pasos con counter-reset / counter-increment.

Mide las conversiones

Instala Google Analytics 4 o Plausible y registra un evento cada vez que alguien envíe el formulario o haga clic en "Agenda una llamada". Así podrás demostrarle al cliente cuántos prospectos genera su sitio.

Casos reales

No publiques casos de éxito o logos de clientes sin su permiso. Si la agencia es nueva, sustituye la sección de casos por "Proyectos de muestra" o testimonios de clientes reales aunque sean pocos.

Agencia / servicios ​

Vista previa ​

Secciones y su objetivo ​

Personalización ​

Colores de marca ​

Planes y precios ​

Logos de clientes ​

Preguntas frecuentes ​

Formulario final ​

Técnicas CSS interesantes de esta plantilla ​