{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-4",
  "registryDependencies": [
    "@fulldev/button",
    "@fulldev/section",
    "@fulldev/icon"
  ],
  "files": [
    {
      "path": "src/components/blocks/features-4.astro",
      "content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\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  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, features } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <h2\n          class=\"text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n        >\n          {title}\n        </h2>\n        <p\n          class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\"\n        >\n          {description}\n        </p>\n        {\n          buttons?.length && (\n            <div class=\"mt-6 flex flex-wrap gap-3\">\n              {buttons.map(({ href, label, ...button }, index) => (\n                <Button\n                  as=\"a\"\n                  href={href}\n                  variant={\n                    button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                  }\n                  {...button}\n                >\n                  {label}\n                </Button>\n              ))}\n            </div>\n          )\n        }\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {\n          features.map((feature) => (\n            <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n                <Icon name={feature.icon} class=\"size-5\" />\n              </div>\n              <div class=\"flex flex-col gap-1.5\">\n                <h3 class=\"text-foreground text-base font-medium\">\n                  {feature.title}\n                </h3>\n                <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                  {feature.description}\n                </p>\n              </div>\n              {feature.href && feature.linkText && (\n                <a\n                  href={feature.href}\n                  class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n                >\n                  {feature.linkText}\n                  <Icon name=\"arrow-right\" class=\"size-3.5\" />\n                </a>\n              )}\n            </div>\n          ))\n        }\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}