{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-2",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/cta-2.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { FiArrowRight } from \"react-icons/fi\";\nimport { FaStar, FaCircle } from \"react-icons/fa\";\n\ninterface Avatar {\n  initials: string;\n  colorClass: string;\n}\n\ninterface SocialProof {\n  avatars: Avatar[];\n  rating: number; // out of 5\n  label: string;\n}\n\ninterface CTASectionProps {\n  badge?: string;\n  headingLine1: string;\n  headingHighlight: string;\n  subtext: string;\n  primaryCTA: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  secondaryCTA?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  socialProof?: SocialProof;\n}\n\nconst DEFAULT_SOCIAL_PROOF: SocialProof = {\n  avatars: [\n    { initials: \"JK\", colorClass: \"bg-orange-500\" },\n    { initials: \"SR\", colorClass: \"bg-cyan-500\" },\n    { initials: \"ML\", colorClass: \"bg-violet-500\" },\n    { initials: \"AT\", colorClass: \"bg-emerald-500\" },\n  ],\n  rating: 5,\n  label: \"Loved by 12k+ engineers & designers\",\n};\n\nfunction AvatarStack({ avatars }: { avatars: Avatar[] }) {\n  return (\n    <div className=\"flex items-center\">\n      {avatars.map((avatar, i) => (\n        <div\n          key={i}\n          className={` ${avatar.colorClass} flex h-7 w-7 items-center justify-center rounded-full border-2 border-none text-[10px] font-semibold text-white shadow-[inset_0_0.5px_0px_rgba(255,255,255,0.5),inset_0_-0.5px_0px_rgba(0,0,0,0.3),inset_0_0.5px_10px_rgba(255,255,255,0.5),inset_0_-0.5px_4px_rgba(0,0,0,0.3)] ${i !== 0 ? \"-ml-2\" : \"\"} `}\n        >\n          {avatar.initials}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction StarRating({ rating }: { rating: number }) {\n  return (\n    <div className=\"flex items-center gap-[2px]\">\n      {Array.from({ length: 5 }).map((_, i) => (\n        <FaStar\n          key={i}\n          className={`text-[11px] ${\n            i < rating ? \"text-yellow-400\" : \"text-muted-foreground/30\"\n          }`}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default function CTASection({\n  badge = \"Trusted by 12,000+ teams\",\n  headingLine1 = \"Build faster.\",\n  headingHighlight = \"confidence.\",\n  subtext = \"Stop stitching together tools that don't talk. Everything your team needs — planning, review, and delivery — unified in one thoughtful workspace.\",\n  primaryCTA = { label: \"Get started free\" },\n  secondaryCTA = { label: \"See how it works\" },\n  socialProof = DEFAULT_SOCIAL_PROOF,\n}: CTASectionProps) {\n  return (\n    <section className=\"relative flex h-full w-full items-center justify-center\">\n      <div className=\"absolute inset-0 z-0 h-full w-full bg-transparent [background-image:radial-gradient(circle_at_1px_1px,rgba(0,0,0,0.15)_1px,transparent_0)] [mask-image:linear-gradient(to_bottom,black_60%,transparent)] [background-size:20px_20px] [mask-composite:intersect] dark:[background-image:radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.1)_1px,transparent_0)]\" />\n      <div className=\"relative z-10 w-full max-w-3xl overflow-hidden bg-transparent px-6 py-16 text-center sm:px-16 sm:py-20\">\n        <div className=\"mb-7 flex justify-center\">\n          <Badge\n            variant=\"secondary\"\n            className=\"text-muted-foreground flex items-center gap-1.5 rounded-full px-3 py-1 text-[10px] font-medium tracking-widest uppercase\"\n          >\n            <FaCircle className=\"text-primary animate-pulse text-[6px]\" />\n            {badge}\n          </Badge>\n        </div>\n\n        <h2 className=\"text-foreground mb-5 font-serif text-4xl leading-[1.08] font-normal tracking-tight sm:text-5xl md:text-6xl\">\n          {headingLine1}\n          <br />\n          Ship with{\" \"}\n          <span className=\"text-primary/80 italic\">{headingHighlight}</span>\n        </h2>\n\n        <p className=\"text-muted-foreground mx-auto mb-10 max-w-md text-base leading-relaxed\">\n          {subtext}\n        </p>\n\n        <div className=\"flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4\">\n          <Button\n            size=\"lg\"\n            className=\"group w-full gap-2 rounded-md text-sm font-semibold shadow-[inset_0_0.5px_0px_rgba(255,255,255,0.5),inset_0_-0.5px_0px_rgba(0,0,0,0.3),inset_0_0.5px_10px_rgba(255,255,255,0.5),inset_0_-0.5px_4px_rgba(0,0,0,0.3)] text-shadow-2xs sm:w-auto\"\n            onClick={primaryCTA.onClick}\n            asChild={!!primaryCTA.href}\n          >\n            {primaryCTA.href ? (\n              <a href={primaryCTA.href}>\n                {primaryCTA.label}\n                <FiArrowRight className=\"text-base transition-all duration-200 group-hover:translate-x-1\" />\n              </a>\n            ) : (\n              <>\n                {primaryCTA.label}\n                <FiArrowRight className=\"text-base transition-all duration-200 group-hover:translate-x-1\" />\n              </>\n            )}\n          </Button>\n\n          {secondaryCTA && (\n            <Button\n              size=\"lg\"\n              variant=\"outline\"\n              className=\"text-muted-foreground dark:text-muted hover:text-foreground w-full rounded-md border-none bg-linear-to-b from-zinc-100 to-zinc-50 text-sm font-medium shadow-[inset_0_0.5px_0px_rgba(255,255,255,0.2),inset_0_-0.5px_0px_rgba(0,0,0,0.1),inset_0_0.5px_4px_rgba(255,255,255,0.2),inset_0_-0.5px_4px_rgba(0,0,0,0.1)] transition-all text-shadow-2xs sm:w-auto\"\n              onClick={secondaryCTA.onClick}\n              asChild={!!secondaryCTA.href}\n            >\n              {secondaryCTA.href ? (\n                <a href={secondaryCTA.href}>{secondaryCTA.label}</a>\n              ) : (\n                <>{secondaryCTA.label}</>\n              )}\n            </Button>\n          )}\n        </div>\n\n        {socialProof && (\n          <div className=\"text-muted-foreground mt-6 flex items-center justify-center gap-2.5 text-xs\">\n            <AvatarStack avatars={socialProof.avatars} />\n            <StarRating rating={socialProof.rating} />\n            <span className=\"text-muted-foreground\">{socialProof.label}</span>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/cta-2.tsx"
    }
  ],
  "type": "registry:ui"
}