{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-11",
  "registryDependencies": [
    "@fulldev/avatar",
    "@fulldev/button",
    "@fulldev/rating",
    "@fulldev/section"
  ],
  "files": [
    {
      "path": "src/components/blocks/hero-11.astro",
      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1\n      class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <p\n      class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\"\n    >\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {\n          socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))\n        }\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div\n    class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\"\n  >\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n    />\n  </div>\n</Section>\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}