{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"hero-split-com-mockup","type":"registry:block","title":"Hero split com mockup","description":"Texto à esquerda e um card de métricas com sparkline à direita.","author":"UI Catalog <https://ui.codehall.io>","dependencies":[],"registryDependencies":["badge","button","card"],"files":[{"path":"components/blocks/hero-split-com-mockup.tsx","type":"registry:component","content":"'use client'\n\nimport { ArrowRight, Check, TrendingUp } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Badge } from '@/components/ui/badge'\n\nconst BULLETS = ['Sem cartão de crédito', 'Setup em 5 minutos', 'Cancele quando quiser']\n\nexport default function HeroSplitComMockup() {\n  return (\n    <section className=\"w-full px-6 py-20 sm:py-28\">\n      <div className=\"mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2\">\n        <div>\n          <Badge variant=\"outline\">Plataforma de vendas</Badge>\n          <h1 className=\"mt-4 text-4xl font-semibold tracking-tight sm:text-5xl\">O painel que seu time comercial vai abrir todo dia.</h1>\n          <p className=\"mt-4 max-w-lg text-lg text-muted-foreground\">Pipeline, metas e conversas no mesmo lugar. Veja o que fecha, o que trava e o que a IA sugere fazer agora.</p>\n          <div className=\"mt-8 flex flex-wrap gap-3\">\n            <Button size=\"lg\">\n              Criar conta <ArrowRight data-icon=\"inline-end\" />\n            </Button>\n            <Button size=\"lg\" variant=\"ghost\">\n              Falar com vendas\n            </Button>\n          </div>\n          <ul className=\"mt-6 flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted-foreground\">\n            {BULLETS.map((b) => (\n              <li key={b} className=\"flex items-center gap-1.5\">\n                <Check className=\"size-4 text-emerald-500\" /> {b}\n              </li>\n            ))}\n          </ul>\n        </div>\n\n        <div className=\"relative\">\n          <div className=\"absolute -inset-4 -z-10 rounded-3xl bg-muted/60\" />\n          <Card className=\"shadow-xl\">\n            <CardHeader>\n              <CardDescription>Receita no mês</CardDescription>\n              <CardTitle className=\"text-3xl tabular-nums\">R$ 184.320</CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <div className=\"flex items-center gap-2 text-sm\">\n                <Badge variant=\"secondary\" className=\"gap-1\">\n                  <TrendingUp className=\"size-3\" /> +18,4%\n                </Badge>\n                <span className=\"text-muted-foreground\">vs. mês anterior</span>\n              </div>\n              <svg viewBox=\"0 0 400 120\" className=\"h-28 w-full text-primary\">\n                <defs>\n                  <linearGradient id=\"hsm-fill\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                    <stop offset=\"0\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n                    <stop offset=\"1\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n                  </linearGradient>\n                </defs>\n                <path d=\"M0 95 C 40 90, 60 70, 100 72 S 160 50, 200 55 S 260 30, 300 28 S 360 18, 400 10 V 120 H 0 Z\" fill=\"url(#hsm-fill)\" />\n                <path d=\"M0 95 C 40 90, 60 70, 100 72 S 160 50, 200 55 S 260 30, 300 28 S 360 18, 400 10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" />\n              </svg>\n              <div className=\"grid grid-cols-3 gap-3 text-sm\">\n                {[\n                  ['Leads', '1.284'],\n                  ['Propostas', '312'],\n                  ['Fechadas', '97'],\n                ].map(([l, v]) => (\n                  <div key={l} className=\"rounded-lg border p-3\">\n                    <div className=\"text-xs text-muted-foreground\">{l}</div>\n                    <div className=\"text-lg font-semibold tabular-nums\">{v}</div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n"}]}