{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-1",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/cta-1.tsx",
      "content": "import React from \"react\";\nimport { Button } from \"@/components/ui/button\";\n\nexport interface CTAProps {\n  /**\n   * The main icon displayed on the left side of the CTA block.\n   */\n  icon?: React.ReactNode;\n  /**\n   * The primary heading text.\n   */\n  title: string;\n  /**\n   * The secondary description text.\n   */\n  description?: string;\n  /**\n   * The text to display inside the action button.\n   */\n  buttonText: string;\n  /**\n   * An optional URL for the action button. If provided, the button acts as an anchor tag.\n   */\n  buttonLink?: string;\n  /**\n   * An optional icon to display inside the action button.\n   */\n  buttonIcon?: React.ReactNode;\n  /**\n   * An optional click handler for the action button, useful if buttonLink is not provided.\n   */\n  onButtonClick?: () => void;\n}\n\nexport function Cta1({\n  title,\n  description,\n  buttonText,\n  buttonLink,\n  buttonIcon,\n  onButtonClick,\n}: CTAProps) {\n  return (\n    <section className=\"w-full max-w-5xl py-16\">\n      <div className=\"container mx-auto px-4 md:px-6\">\n        <div className=\"text-card-foreground bg-primary/10 border-primary/20 relative isolate flex flex-col items-center justify-between gap-8 overflow-hidden rounded-xl border p-8 shadow-sm md:flex-row md:gap-12 md:px-10 md:py-20\">\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute top-1/2 left-[max(-7rem,calc(50%-52rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl\"\n          >\n            <div\n              style={{\n                clipPath:\n                  \"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)\",\n              }}\n              className=\"from-primary to-primary/60 aspect-[577/310] w-[36rem] bg-gradient-to-r opacity-30\"\n            />\n          </div>\n\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute top-1/2 left-[max(45rem,calc(50%+8rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl\"\n          >\n            <div\n              style={{\n                clipPath:\n                  \"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)\",\n              }}\n              className=\"from-primary to-primary/60 aspect-[577/310] w-[36rem] bg-gradient-to-r opacity-30\"\n            />\n          </div>\n\n          <div className=\"flex max-w-sm flex-col items-center gap-6 text-center md:flex-row md:items-center md:gap-8 md:text-left\">\n            <div className=\"flex flex-col gap-2\">\n              <h2 className=\"text-2xl font-semibold tracking-tight md:text-4xl\">\n                {title}\n              </h2>\n              {description && (\n                <p className=\"text-muted-foreground max-w-[600px] text-base\">\n                  {description}\n                </p>\n              )}\n            </div>\n          </div>\n\n          <div className=\"mt-2 flex w-full shrink-0 justify-center md:mt-0 md:w-auto\">\n            {buttonLink ? (\n              <Button\n                asChild\n                size=\"lg\"\n                className=\"h-12 w-full px-8 text-base shadow-[inset_0_2px_4px_rgba(255,255,255,0.5),inset_0_-2px_5px_rgba(0,0,0,0.1),0_8px_20px_rgba(0,0,0,0.1)] md:w-auto dark:border-white/20 dark:bg-white/10 dark:shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),inset_0_-2px_4px_rgba(0,0,0,0.3),0_8px_20px_rgba(0,0,0,0.25)]\"\n              >\n                <a href={buttonLink}>\n                  {buttonText}\n                  {buttonIcon && (\n                    <span className=\"ml-2 flex items-center\">{buttonIcon}</span>\n                  )}\n                </a>\n              </Button>\n            ) : (\n              <Button\n                size=\"lg\"\n                onClick={onButtonClick}\n                className=\"h-12 w-full px-8 text-base shadow-[inset_0_2px_4px_rgba(255,255,255,0.5),inset_0_-2px_5px_rgba(0,0,0,0.1),0_8px_20px_rgba(0,0,0,0.1)] md:w-auto dark:border-white/20 dark:bg-white/10 dark:shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),inset_0_-2px_4px_rgba(0,0,0,0.3),0_8px_20px_rgba(0,0,0,0.25)]\"\n              >\n                {buttonText}\n                {buttonIcon && (\n                  <span className=\"ml-2 flex items-center\">{buttonIcon}</span>\n                )}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/cta-1.tsx"
    }
  ],
  "type": "registry:ui"
}