Pain Points

Seccion que lista las horas que pierde tu usuario ideal configurando todo desde cero, sumando al final el tiempo total desperdiciado.

Import

import { PainPoints } from "@/components/landing";

Que incluye

• Lista de pain points con horas en rojo (destructive)
• Suma total destacada ("44+ horas de dolores de cabeza")
• Flecha inferior con texto "Hay una forma mas facil" como transicion a la siguiente sección
• Fondo bg-muted con bordes redondeados
• Layout centrado y compacto (max-w-lg)

Tips

• Nunca menciones tu producto en está sección. Solo habla del problema.
• Profundiza en el resultado emocional: frustracion, perdida de tiempo, motivacion agotada.
• Usa números concretos (horas, semanas, porcentajes). Los datos duelen mas que las palabras.
• Cierra con una transicion que genere curiosidad hacia la solución.
• Maximo 5-7 pain points. Mas de eso y el visitante pierde el interes.

Personalizacion

Cambiar los pain points

Edita el array painPoints en components/landing/pain-points.tsx:

const painPoints = [
  { hours: "8 hrs", text: "configurando autenticación" },
  { hours: "12 hrs", text: "integrando Stripe y webhooks" },
  { hours: "4 hrs", text: "con emails transaccionales" },
  { hours: "6 hrs", text: "disenando una landing page" },
  { hours: "10 hrs", text: "creando un dashboard con roles" },
  { hours: "4 hrs", text: "configurando SEO + Analytics" },
  { hours: "∞ hrs", text: "sobreanalizando todo..." },
];

Cambiar la suma total

Actualiza el texto del total para que coincida con tus pain points:

<span className="text-destructive font-medium">44+ horas</span>{" "}
de dolores de cabeza

Cambiar el texto de transicion

Edita el texto junto al icono ArrowDown:

<p>Hay una forma mas facil</p>