{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-3",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/cta-3.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport {\n  MdArrowOutward,\n  MdPlayArrow,\n  MdDashboardCustomize,\n  MdAutoAwesomeMosaic,\n  MdWaves,\n  MdDonutSmall,\n  MdHexagon,\n  MdBlurOn,\n} from \"react-icons/md\";\nimport type { IconType } from \"react-icons\";\n\nexport interface ProductCardItem {\n  id: string;\n  name: string;\n  icon: IconType;\n}\n\nexport interface HeroProductSectionProps {\n  badgeText?: string;\n  headline?: React.ReactNode;\n  subtitle?: string;\n  primaryCta?: { label: string; href?: string; onClick?: () => void };\n  secondaryCta?: { label: string; href?: string; onClick?: () => void };\n  products?: ProductCardItem[];\n}\n\nconst DEFAULT_PRODUCTS: ProductCardItem[] = [\n  { id: \"synergy\", name: \"Synergy™\", icon: MdDashboardCustomize },\n  { id: \"apex\", name: \"Apex™\", icon: MdAutoAwesomeMosaic },\n  { id: \"horizon\", name: \"Horizon™\", icon: MdWaves },\n  { id: \"catalyst\", name: \"Catalyst™\", icon: MdDonutSmall },\n  { id: \"phoenix\", name: \"Phoenix™\", icon: MdHexagon },\n  { id: \"pulse\", name: \"Pulse™\", icon: MdBlurOn },\n];\n\nfunction ProductCard({ name, icon: Icon }: Omit<ProductCardItem, \"id\">) {\n  return (\n    <Card className=\"group dark:shadow-[inset_0_0_2px_2px_rgba(255,255,255,0.04),inset_0_0_0_1px_rgba(255,255,255,0.08),0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.5),0px_2px_4px_0px_rgba(0,0,0,0.4)]' relative flex h-24 cursor-pointer items-center justify-center gap-3 overflow-hidden rounded-none bg-zinc-100 p-1 shadow-[inset_0_0_2px_2px_rgba(255,255,255,0),inset_0_0_0_1px_rgba(0,0,0,0),0px_0px_0px_1px_rgba(0,0,0,0),0px_1px_2px_-1px_rgba(0,0,0,0),0px_2px_4px_0px_rgba(0,0,0,0)] transition-all duration-300 dark:bg-zinc-800\">\n      <div className=\"bg-background flex size-full flex-col items-center justify-center gap-2\">\n        <div className=\"from-primary/[0.03] absolute inset-0 bg-gradient-to-br to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n\n        <div className=\"rounded-mone bg-transaprent text-muted-foreground/80 group-hover:bg-primary-600 group-hover:text-primary group-hover:ring-primary-600 relative flex h-10 w-10 scale-200 items-center justify-center transition-all duration-300\">\n          <Icon className=\"text-2xl\" />\n        </div>\n\n        <span className=\"text-foreground relative z-10 text-[15px] font-semibold tracking-tight transition-colors duration-300\">\n          {name}\n        </span>\n      </div>\n    </Card>\n  );\n}\n\nexport default function Cta3({\n  headline = \"Explore what's next\",\n  subtitle = \"Transform your workflow with intuitive tools.\",\n  primaryCta = { label: \"Start your free trial\" },\n  secondaryCta = { label: \"How it works?\" },\n  products = DEFAULT_PRODUCTS,\n}: HeroProductSectionProps) {\n  return (\n    <section className=\"bg-background flex h-full justify-center items-center px-6 py-16 md:py-20\">\n      <div className=\"mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16\">\n        <div className=\"flex flex-col items-start gap-6\">\n          <div className=\"flex flex-col gap-4\">\n            <h1 className=\"text-foreground text-4xl font-semibold tracking-tight sm:text-5xl lg:text-[56px] lg:leading-[1.1]\">\n              {headline}\n            </h1>\n\n            <p className=\"text-muted-foreground max-w-md text-base sm:text-lg\">\n              {subtitle}\n            </p>\n          </div>\n\n          <div className=\"flex flex-wrap items-center gap-4\">\n            <Button\n              className=\"bg-primary/60 border-primary/80 text-md h-12 rounded-none border-dashed px-6 font-semibold text-white shadow-[inset_0_0px_4px_2px_rgba(255,255,255,0.4)] dark:shadow-[inset_0_0px_4px_2px_rgba(0,0,0,0.4)]\"\n              onClick={primaryCta.onClick}\n              asChild={!!primaryCta.href}\n            >\n              {primaryCta.href ? (\n                <a\n                  href={primaryCta.href}\n                  className=\"flex items-center justify-center gap-2\"\n                >\n                  {primaryCta.label}\n                  <MdArrowOutward className=\"h-4 w-4\" />\n                </a>\n              ) : (\n                <button className=\"flex items-center justify-center gap-2\">\n                  {primaryCta.label}\n                  <MdArrowOutward className=\"h-4 w-4\" />\n                </button>\n              )}\n            </Button>\n\n            <Button\n              variant=\"secondary\"\n              className=\"bg-muted/60 text-foreground hover:bg-muted/80 h-12 gap-2 rounded-none border-dashed border-black/50 px-6 text-[15px] font-medium shadow-none dark:border-zinc-400\"\n              onClick={secondaryCta.onClick}\n              asChild={!!secondaryCta.href}\n            >\n              {secondaryCta.href ? (\n                <a\n                  href={secondaryCta.href}\n                  className=\"flex items-center justify-center gap-2\"\n                >\n                  <MdPlayArrow className=\"text-muted-foreground size-5\" />\n                  {secondaryCta.label}\n                </a>\n              ) : (\n                <button className=\"flex items-center justify-center gap-2\">\n                  <MdPlayArrow className=\"text-muted-foreground size-5\" />\n                  {secondaryCta.label}\n                </button>\n              )}\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"border-border bg-muted grid grid-cols-2 gap-2 border p-1 sm:grid-cols-3\">\n          {products.map(({ id, ...rest }) => (\n            <ProductCard key={id} {...rest} />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/cta-3.tsx"
    }
  ],
  "type": "registry:ui"
}