{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-block-baseui",
  "type": "registry:block",
  "title": "CTA Block",
  "description": "Call-to-action section with gradient overlay, animated buttons, and status indicator (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/cta-block-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\nimport { motion } from \"framer-motion\";\nimport { ArrowRight, MessageSquare } from \"lucide-react\";\n\nexport function CTABlockBaseui() {\n  return (\n    <section>\n      <div className=\"mx-auto max-w-5xl\">\n        <motion.div\n          initial={{ opacity: 0, scale: 0.95 }}\n          whileInView={{ opacity: 1, scale: 1 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6 }}\n        >\n          <div className=\"relative overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm\">\n            {/* Background Pattern */}\n            <div className=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]\" />\n\n            {/* Gradient Overlay */}\n            <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5\" />\n\n            <div className=\"relative z-10 p-8 text-center md:p-12 lg:p-16\">\n              <motion.div\n                initial={{ opacity: 0, y: 20 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                viewport={{ once: true }}\n                transition={{ delay: 0.2, duration: 0.6 }}\n              >\n                <h2 className=\"mb-6 text-3xl font-bold text-foreground md:text-4xl lg:text-5xl\">\n                  Ready to Start Your Project?\n                </h2>\n\n                <p className=\"mx-auto mb-8 max-w-2xl text-lg text-muted-foreground md:text-xl\">\n                  Let's turn your ideas into reality. Get in touch today and\n                  let's discuss how we can work together to build something\n                  amazing.\n                </p>\n\n                <motion.div\n                  initial={{ opacity: 0, y: 20 }}\n                  whileInView={{ opacity: 1, y: 0 }}\n                  viewport={{ once: true }}\n                  transition={{ delay: 0.4, duration: 0.6 }}\n                  className=\"flex flex-col justify-center gap-4 sm:flex-row\"\n                >\n                  <Button className=\"group inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 sm:w-auto\">\n                    Start a Conversation\n                    <MessageSquare className=\"h-4 w-4 transition-transform group-hover:scale-110\" />\n                  </Button>\n\n                  <Button className=\"group inline-flex h-11 w-full items-center justify-center gap-2 rounded-md border border-input bg-background px-8 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 sm:w-auto\">\n                    View My Work\n                    <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n                  </Button>\n                </motion.div>\n\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  whileInView={{ opacity: 1 }}\n                  viewport={{ once: true }}\n                  transition={{ delay: 0.6, duration: 0.6 }}\n                  className=\"mt-8 flex flex-col items-center justify-center gap-4 text-sm text-muted-foreground sm:flex-row sm:gap-8\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"h-2 w-2 animate-pulse rounded-full bg-primary\" />\n                    <span>Available for new projects</span>\n                  </div>\n                  <div>\n                    <span>Response time: &lt;24 hours</span>\n                  </div>\n                </motion.div>\n              </motion.div>\n            </div>\n          </div>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/cta-block-baseui.tsx"
    }
  ]
}