{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"design-to-deploy-beam","type":"registry:component","title":"Design to Deploy Beam","description":"Pipeline Figma → Next.js → Claude → Deploy com feixes entre as etapas.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"components/illustrations/design-to-deploy-beam.tsx","type":"registry:component","content":"'use client'\n\nimport { motion } from 'motion/react'\nimport { Code2, Figma, Rocket, Sparkles } from 'lucide-react'\n\n// \"Design to Deploy Beam\": pipeline horizontal Figma → código → IA → deploy, com feixes entre as etapas.\nconst STAGES = [\n  { Icon: Figma, label: 'Figma' },\n  { Icon: Code2, label: 'Next.js' },\n  { Icon: Sparkles, label: 'Claude' },\n  { Icon: Rocket, label: 'Deploy' },\n]\n\nexport default function DesignToDeployBeam() {\n  return (\n    <div className=\"w-full max-w-xl text-foreground\">\n      <svg viewBox=\"0 0 560 120\" className=\"h-auto w-full\" role=\"img\" aria-label=\"Pipeline do design ao deploy\">\n        <defs>\n          <linearGradient id=\"d2d-beam\" x1=\"0\" x2=\"1\">\n            <stop offset=\"0\" stopColor=\"var(--primary)\" stopOpacity=\"0\" />\n            <stop offset=\"0.5\" stopColor=\"var(--primary)\" />\n            <stop offset=\"1\" stopColor=\"var(--primary)\" stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        {STAGES.map((s, i) => {\n          const x = 70 + i * 140\n          return (\n            <g key={s.label}>\n              {i < STAGES.length - 1 && (\n                <>\n                  <path d={`M ${x + 36} 60 H ${x + 104}`} stroke=\"var(--border)\" strokeWidth=\"1.5\" />\n                  <motion.path\n                    d={`M ${x + 36} 60 H ${x + 104}`}\n                    stroke=\"url(#d2d-beam)\"\n                    strokeWidth=\"2.5\"\n                    strokeLinecap=\"round\"\n                    initial={{ pathLength: 0.5, pathSpacing: 1, pathOffset: 0 }}\n                    animate={{ pathLength: 0.5, pathSpacing: 1, pathOffset: 1 }}\n                    transition={{ duration: 1.4, repeat: Infinity, ease: 'linear', delay: i * 0.35 }}\n                  />\n                </>\n              )}\n              <motion.g initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 + i * 0.12 }}>\n                <rect x={x - 36} y={24} width=\"72\" height=\"72\" rx=\"16\" fill=\"var(--card)\" stroke=\"var(--border)\" />\n                <foreignObject x={x - 36} y={24} width=\"72\" height=\"72\">\n                  <div className=\"flex h-[72px] w-[72px] flex-col items-center justify-center gap-1 text-foreground\">\n                    <s.Icon className=\"size-5\" />\n                    <span className=\"text-[11px] font-medium\">{s.label}</span>\n                  </div>\n                </foreignObject>\n              </motion.g>\n            </g>\n          )\n        })}\n      </svg>\n    </div>\n  )\n}\n"}]}