{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["motion"],"description":"Split layout CTA block with text and illustration","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { getImageKitUrl } from \"@/lib/smoothui-data\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n  bounce: 0.1,\n  duration: 0.25,\n  type: \"spring\" as const,\n};\n\nexport function CtaSplit() {\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <section aria-labelledby=\"cta-split-heading\">\n      <div className=\"py-24 md:py-32\">\n        <div className=\"mx-auto grid max-w-6xl items-center gap-12 px-6 md:grid-cols-2\">\n          <motion.div\n            initial={\n              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -24 }\n            }\n            transition={shouldReduceMotion ? { duration: 0 } : SPRING}\n            viewport={{ once: true }}\n            whileInView={\n              shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }\n            }\n          >\n            <h2\n              className=\"text-balance font-bold text-3xl tracking-tight md:text-4xl\"\n              id=\"cta-split-heading\"\n            >\n              Ship faster with animated components\n            </h2>\n            <p className=\"mt-4 text-foreground/70 text-lg leading-relaxed\">\n              Stop building UI from scratch. Use production-ready, beautifully\n              animated components that work with your existing design system.\n            </p>\n            <div className=\"mt-8 flex flex-wrap gap-4\">\n              <SmoothButton size=\"lg\" variant=\"candy\">\n                Browse Components\n              </SmoothButton>\n              <SmoothButton size=\"lg\" variant=\"outline\">\n                View on GitHub\n              </SmoothButton>\n            </div>\n          </motion.div>\n\n          <motion.div\n            className=\"relative\"\n            initial={\n              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: 24 }\n            }\n            transition={shouldReduceMotion ? { duration: 0 } : SPRING}\n            viewport={{ once: true }}\n            whileInView={\n              shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }\n            }\n          >\n            <div className=\"overflow-hidden rounded-2xl border shadow-lg\">\n              <img\n                alt=\"Product preview showing animated UI components\"\n                className=\"h-auto w-full object-cover\"\n                draggable={false}\n                src={getImageKitUrl(\"/images/hero-smoothui.png\", {\n                  format: \"auto\",\n                  quality: 85,\n                  width: 800,\n                })}\n              />\n            </div>\n          </motion.div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default CtaSplit;\n","path":"index.tsx","target":"components/smoothui/cta-2/index.tsx","type":"registry:block"}],"name":"cta-2","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/data.json"],"title":"Cta 2","type":"registry:block"}