{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-2",
  "type": "registry:block",
  "description": "Modern contact card with info section and built-in form area.",
  "files": [
    {
      "path": "registry/blocks/contact/2/contact-card.tsx",
      "content": "import { type LucideIcon, PlusIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype ContactInfoProps = React.ComponentProps<\"div\"> & {\n  icon: LucideIcon;\n  label: string;\n  value: string;\n};\n\ntype ContactCardProps = React.ComponentProps<\"div\"> & {\n  // Content props\n  title?: string;\n  description?: string;\n  contactInfo?: ContactInfoProps[];\n  formSectionClassName?: string;\n};\n\nexport function ContactCard({\n  title = \"Contact With Us\",\n  description = \"If you have any questions regarding our Services or need help, please fill out the form here. We do our best to respond within 1 business day.\",\n  contactInfo,\n  className,\n  formSectionClassName,\n  children,\n  ...props\n}: ContactCardProps) {\n  return (\n    <div\n      className={cn(\n        \"relative grid h-full w-full border md:grid-cols-2 lg:grid-cols-3\",\n        className\n      )}\n      {...props}\n    >\n      <PlusIcon\n        className=\"-top-[12.5px] -left-[12.5px] absolute h-6 w-6\"\n        strokeWidth={1}\n      />\n      <PlusIcon\n        className=\"-top-[12.5px] -right-[12.5px] absolute h-6 w-6\"\n        strokeWidth={1}\n      />\n      <PlusIcon\n        className=\"-bottom-[12.5px] -left-[12.5px] absolute h-6 w-6\"\n        strokeWidth={1}\n      />\n      <PlusIcon\n        className=\"-right-[12.5px] -bottom-[12.5px] absolute h-6 w-6\"\n        strokeWidth={1}\n      />\n\n      <div className=\"col-span-1 flex flex-col justify-between bg-secondary/50 lg:col-span-2 dark:bg-background\">\n        <div className=\"relative h-full space-y-4 px-4 py-8 md:p-8\">\n          <h1 className=\"font-semibold text-3xl md:text-4xl lg:text-5xl\">\n            {title}\n          </h1>\n          <p className=\"max-w-xl text-muted-foreground text-sm md:text-base lg:text-lg\">\n            {description}\n          </p>\n          <div className=\"grid gap-4 md:grid md:grid-cols-2 lg:grid-cols-3\">\n            {contactInfo?.map((info) => (\n              <ContactInfo key={info.label} {...info} />\n            ))}\n          </div>\n        </div>\n      </div>\n      <div\n        className={cn(\n          \"col-span-1 flex h-full w-full items-center border-t bg-card px-4 py-8 md:border-t-0 md:border-l dark:bg-card/50\",\n          formSectionClassName\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ContactInfo({\n  icon: Icon,\n  label,\n  value,\n  className,\n  ...props\n}: ContactInfoProps) {\n  return (\n    <div className={cn(\"flex items-center gap-3 py-3\", className)} {...props}>\n      <div className=\"rounded-lg border bg-card p-3 shadow\">\n        <Icon className=\"h-5 w-5\" />\n      </div>\n      <div>\n        <p className=\"font-medium\">{label}</p>\n        <p className=\"text-muted-foreground text-xs\">{value}</p>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "60vh"
  },
  "categories": [
    "contact"
  ]
}