{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"como-funciona-em-passos","type":"registry:block","title":"Como funciona em passos","description":"Três passos numerados ligados por uma linha.","author":"UI Catalog <https://ui.codehall.io>","dependencies":[],"registryDependencies":[],"files":[{"path":"components/blocks/como-funciona-em-passos.tsx","type":"registry:component","content":"'use client'\n\nimport { Link2, MessageSquare, TrendingUp } from 'lucide-react'\n\nconst STEPS = [\n  { Icon: Link2, title: 'Conecte seus canais', text: 'WhatsApp, Instagram e e-mail em 5 minutos, com o número que você já usa.' },\n  { Icon: MessageSquare, title: 'Deixe a IA qualificar', text: 'Ela responde dúvidas, pontua o lead e agenda. O humano entra na hora certa.' },\n  { Icon: TrendingUp, title: 'Feche no CRM', text: 'Pipeline, propostas e follow-ups no mesmo lugar, com relatório por origem.' },\n]\n\nexport default function ComoFuncionaPassos() {\n  return (\n    <section className=\"w-full px-6 py-20\">\n      <div className=\"mx-auto max-w-5xl\">\n        <div className=\"mx-auto max-w-xl text-center\">\n          <span className=\"text-sm font-medium text-muted-foreground\">Como funciona</span>\n          <h2 className=\"mt-2 text-3xl font-semibold tracking-tight sm:text-4xl\">Três passos. Nenhum consultor.</h2>\n        </div>\n        <ol className=\"relative mt-12 grid gap-8 md:grid-cols-3\">\n          <div className=\"absolute left-0 right-0 top-6 hidden h-px bg-border md:block\" aria-hidden />\n          {STEPS.map((s, i) => (\n            <li key={s.title} className=\"relative flex flex-col items-center text-center\">\n              <span className=\"relative flex size-12 items-center justify-center rounded-full border bg-background\">\n                <s.Icon className=\"size-5\" />\n                <span className=\"absolute -right-1 -top-1 flex size-5 items-center justify-center rounded-full bg-primary text-[10px] font-semibold text-primary-foreground\">{i + 1}</span>\n              </span>\n              <h3 className=\"mt-4 font-medium\">{s.title}</h3>\n              <p className=\"mt-1.5 max-w-xs text-sm text-muted-foreground\">{s.text}</p>\n            </li>\n          ))}\n        </ol>\n      </div>\n    </section>\n  )\n}\n"}]}