{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "review-card10",
  "title": "Review",
  "description": "Review built with shadcn/ui.",
  "files": [
    {
      "path": "contents/examples/cards/review/10/index.tsx",
      "content": "import { StarIcon } from \"lucide-react\";\n\nfunction Stars({ value }: { value: number }) {\n  return (\n    <div className=\"flex items-center justify-center gap-0.5\">\n      {Array.from({ length: 5 }).map((_, i) => {\n        const fill = Math.min(Math.max(value - i, 0), 1);\n        return (\n          <span key={i} className=\"relative inline-block size-5\">\n            <StarIcon className=\"size-5 fill-muted text-muted\" />\n            <span\n              className=\"absolute inset-0 overflow-hidden\"\n              style={{ width: `${fill * 100}%` }}>\n              <StarIcon className=\"size-5 fill-amber-400 text-amber-400\" />\n            </span>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default function ReviewCard() {\n  return (\n    <div className=\"flex items-center justify-center rounded-2xl bg-gradient-to-br from-violet-950 via-purple-900 to-violet-950 p-8 md:p-12\">\n      <div className=\"relative w-full max-w-sm pt-8\">\n\n        {/* Speech bubble card */}\n        <div className=\"relative rounded-2xl bg-card px-7 pb-7 pt-12 text-center shadow-xl\">\n          {/* Avatar straddling top edge */}\n          <div className=\"absolute -top-8 left-1/2 z-10 -translate-x-1/2\">\n            <div className=\"rounded-full p-[3px] ring-2 ring-violet-400 bg-violet-950\">\n              <img\n                src=\"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&h=120&fit=crop&crop=face\"\n                alt=\"Alex Reynolds\"\n                className=\"size-16 rounded-full object-cover\"\n              />\n            </div>\n          </div>\n\n          <h3 className=\"text-xl font-extrabold uppercase tracking-wide\">\n            Alex Reynolds\n          </h3>\n          <p className=\"mt-1 text-xs uppercase tracking-widest text-muted-foreground\">\n            Senior Product Manager\n          </p>\n\n          <div className=\"mt-3\">\n            <Stars value={3.5} />\n          </div>\n\n          {/* Quote block */}\n          <div className=\"relative mt-4 px-6 py-2 text-left\">\n            <span className=\"absolute left-0 top-0 font-serif text-5xl leading-none text-violet-500\">&ldquo;</span>\n            <span className=\"absolute bottom-0 right-0 font-serif text-5xl leading-none text-violet-500\">&rdquo;</span>\n            <p className=\"text-sm leading-relaxed text-muted-foreground\">\n              Switched to this product after years of trying different options\n              and the difference was immediately noticeable. Setup took less than\n              five minutes, the interface is intuitive, and the results have been\n              consistently reliable. Customer support actually answered my\n              questions without sending me to a FAQ page. Genuinely one of the\n              better purchases I have made this year.\n            </p>\n          </div>\n\n          {/* Bubble tail */}\n          <div className=\"absolute -bottom-3 left-10 size-6 rotate-45 bg-card\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/review-card10.tsx"
    }
  ],
  "type": "registry:block"
}