ko-system/página-de-aterrizaje

Página de aterrizaje

Una página de aterrizaje tiene un solo trabajo: mover a un visitante específico hacia una acción. Cada sección construye el caso para esa acción o elimina una razón para no tomarla. Decide la acción primero, luego diseña.

1. Decide antes de construir

Escribe esto (en DESIGN.md si la aplicación lo tiene) antes de tocar JSX:

• Audiencia: quién llega aquí y qué saben ya.
• Acción principal: un verbo ("Iniciar prueba gratuita", "Reservar mesa", "Solicitar presupuesto"). Cada página tiene exactamente una etiqueta de CTA principal; repítela, no la varíes.
• Acción secundaria: opcional y de menor compromiso ("Ver precios", "Ver demo").
• Prueba que realmente tienes: números reales, nombres de clientes, citas, calificaciones. Nunca inventes testimonios, logotipos, recuentos de usuarios o precios. Si el propietario no los ha proporcionado, omite la sección o usa un TODO claramente marcado en los datos de contenido, no en el texto visible.

2. Orden de secciones (predeterminado)

#	Sección	Propósito	Bloque
1	Encabezado	Marca, 3-5 enlaces de navegación, CTA principal	SiteHeader
2	Héroe	Promesa + CTA principal sobre el pliegue	Hero
3	Tira de prueba	Logotipos, calificación o un número duro	LogoMarquee o estadísticas
4	Problema/resultado	Por qué duele el statu quo, qué cambia	Section + SectionHeader
5	Características	3-6 beneficios, cada uno vinculado a un resultado	FeatureGrid o BentoGrid
6	Cómo funciona	3-4 pasos cuando el proceso no es familiar	StepList
7	Testimonios	Citas reales con nombre y cargo	Testimonials
8	Precios	Planes, o precio "desde" y lo que incluye	PricingTable
9	FAQ	Objeciones respondidas con claridad	Faq
10	CTA final	Reafirmar promesa + misma CTA principal	CtaBand
11	Pie de página	Contacto, legal, enlaces secundarios	SiteFooter

Elimina las secciones que no tengan contenido real. Una página corta y honesta es mejor que una larga y rellena. Mantén al mínimo las secciones 1, 2, 5 y 10.

3. Reglas del héroe

• Exactamente un <h1> en la página, dentro del héroe. Hero ya renderiza su title como h1; no agregues otro h1 en otro lugar. Los títulos de sección son h2.
• El titular indica el resultado para la audiencia en menos de ~10 palabras. El subtítulo (una o dos oraciones, de menos de ~25 palabras) dice cómo, para quién o qué lo hace diferente.
• CTA principal visible sin desplazamiento a 375x667 y 1280x800. Colócala en la propiedad actions de Hero; enlaza al destino real (ruta, mailto:, tel:, ancla de formulario), nunca href="#".
• Medios: una captura de pantalla real del producto, foto o ilustración que muestre el resultado. Establece width/height explícitos en la imagen y no cargues de forma diferida la imagen del héroe (generalmente es el elemento LCP).
• Línea de confianza opcional debajo de la CTA: "No se requiere tarjeta de crédito", "4.8/5 de 1200 reseñas".

4. Jerarquía del texto

1. Titular (h1): resultado. 2. Subtítulo: mecanismo o audiencia. 3. CTA: verbo + objeto.
2. Títulos de sección (h2): declaraciones de beneficio, no etiquetas ("Cierra los libros en un día", no "Características").
3. Cuerpo: párrafos cortos, de menos de ~80 caracteres por línea (max-w-prose o max-w-xl).

Escribe texto específico y simple en el idioma de la aplicación. Sin lorem ipsum, sin "Revoluciona tu flujo de trabajo", sin "Característica 1". Consulta references/copy-formulas.md.

5. Diseño y ritmo visual

• Usa tokens semánticos (bg-background, bg-secondary, text-muted-foreground), nunca clases de paleta sin procesar. Alterna Section tone="muted" para separar bloques en lugar de agregar bordes y sombras en todas partes.
• Varía las formas de las secciones: una cuadrícula, luego una imagen/texto dividido, luego una cita a ancho completo. Evita una página que sea solo cuadrículas de tarjetas idénticas apiladas.
• Un elemento audaz por página (el visual del héroe o un tratamiento tipográfico). Mantén el resto tranquilo.
• Envuelve los grupos de contenido en <Reveal> con retraso escalonado delay={index * 80}; BentoGrid, Testimonials y PricingTable ya se revelan a sí mismos.
• Móvil primero: columna única por debajo de md, botones de CTA de ancho completo en teléfonos (w-full sm:w-auto), objetivos táctiles de al menos 44px.

6. Detalles de conversión

• Repite la CTA principal después de las características o los precios y en el CtaBand final.
• Navegación por anclas: asigna id a las secciones (<Section id="pricing">) y enlaza a #pricing; agrega scroll-mt-20 para que el encabezado fijo no cubra los títulos.
• Formularios en la página: solicita el mínimo (correo electrónico, o nombre + teléfono). Muestra validación en línea y un estado de éxito claro (consulta la habilidad de validación de formularios).
• Precios: muestra la moneda y el período de facturación, destaca un plan y explica qué sucede después de hacer clic (duración de la prueba, cancelación).
• Accesibilidad: foco visible, texto alternativo en imágenes significativas, contraste 4.5:1, botones que dicen lo que hacen.

7. Lista de verificación final

• Un solo h1, en el héroe; los títulos de sección son h2 en orden.
• CTA principal sobre el pliegue en móvil y escritorio, apuntando a un objetivo real.
• Cada afirmación, número, logotipo y cita es real o la sección se elimina.
• La imagen del héroe tiene width/height y no tiene carga diferida; otras imágenes tienen carga diferida.
• Título de página y meta descripción establecidos (consulta la habilidad de metadatos SEO).
• Verificado en anchos de 375px, 768px y 1280px con una captura de pantalla.
• Ejecutado audit_landing_sections y corregidas las fallas.

Script

audit_landing_sections lee el archivo de la página y los componentes locales que importa. Argumentos (todos opcionales): { "file": "src/pages/Index.tsx" }. Sin file intenta src/pages/Index.tsx, app/page.tsx, src/app/page.tsx, pages/index.tsx y src/pages/index.tsx. Devuelve checks (pass, warn o fail), detected (secciones) y placeholders. Es heurístico: confirma las fallas leyendo el código antes de cambiar algo.