{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-3",
  "registryDependencies": [
    "@fulldev/button",
    "@fulldev/field",
    "@fulldev/input",
    "@fulldev/section",
    "@fulldev/textarea",
    "@fulldev/icon"
  ],
  "files": [
    {
      "path": "src/components/blocks/contact-3.astro",
      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h2\n          class=\"text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n        >\n          {title}\n        </h2>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {\n          contactItems.map((item) => (\n            <div class=\"flex gap-4\">\n              {item.href ? (\n                <Button\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"secondary\"\n                  size=\"icon\"\n                  class=\"text-primary shrink-0\"\n                  aria-label={item.title}\n                >\n                  <Icon name={item.icon} />\n                </Button>\n              ) : (\n                <Button\n                  variant=\"secondary\"\n                  size=\"icon\"\n                  class=\"text-primary shrink-0\"\n                  aria-label={item.title}\n                >\n                  <Icon name={item.icon} />\n                </Button>\n              )}\n              <div class=\"flex flex-col gap-1\">\n                <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n                <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                  {item.description}\n                </p>\n              </div>\n            </div>\n          ))\n        }\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for=\"contact-name-3\">{form.nameLabel}</FieldLabel>\n                <Input id=\"contact-name-3\" placeholder={form.namePlaceholder} />\n              </Field>\n              <Field>\n                <FieldLabel for=\"contact-email-3\">{form.emailLabel}</FieldLabel>\n                <Input\n                  id=\"contact-email-3\"\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for=\"contact-message-3\"\n                >{form.messageLabel}</FieldLabel\n              >\n              <Textarea\n                id=\"contact-message-3\"\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n            </Field>\n            <Button size=\"lg\" class=\"w-full\">{form.actionLabel}</Button>\n          </FieldGroup>\n        </FieldSet>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-3/4 w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}