{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-01",
  "title": "Centered contact form",
  "description": "Centered headline with a clean three-field contact form — the safest starting point for any marketing site.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input"
  ],
  "files": [
    {
      "path": "content/components/contact/contact-01.tsx",
      "content": "import { ArrowRight, Clock, Mail, ShieldCheck } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\n\nexport default function Contact01() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-2xl px-6 sm:px-10\">\n        <div className=\"flex flex-col items-center gap-3 text-center\">\n          <span className=\"grid size-10 place-items-center rounded-full bg-foreground/5 text-foreground\">\n            <Mail className=\"size-5\" />\n          </span>\n          <h2 className=\"font-semibold text-3xl tracking-tight sm:text-4xl\">\n            Get in touch\n          </h2>\n          <p className=\"max-w-md text-balance text-muted-foreground\">\n            Drop us a note and we&apos;ll get back within one business day.\n          </p>\n        </div>\n\n        <form className=\"mt-10 flex flex-col gap-4 rounded-2xl border border-border bg-card p-6 shadow-sm shadow-black/5 sm:p-8\">\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <Field label=\"Name\" id=\"c1-name\" placeholder=\"Ada Lovelace\" />\n            <Field\n              label=\"Email\"\n              id=\"c1-email\"\n              placeholder=\"you@company.com\"\n              type=\"email\"\n            />\n          </div>\n          <div className=\"flex flex-col gap-1.5\">\n            <label\n              htmlFor=\"c1-msg\"\n              className=\"text-sm font-medium text-foreground\"\n            >\n              How can we help?\n            </label>\n            <textarea\n              id=\"c1-msg\"\n              rows={5}\n              placeholder=\"Tell us a bit about your project.\"\n              className=\"flex w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:border-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15\"\n            />\n          </div>\n          <Button type=\"submit\" size=\"lg\" className=\"h-11 w-full rounded-lg\">\n            Send message\n            <ArrowRight />\n          </Button>\n\n          <div className=\"mt-2 flex flex-wrap items-center justify-between gap-3 border-t border-border pt-4 text-xs text-muted-foreground\">\n            <span className=\"inline-flex items-center gap-1.5\">\n              <Clock className=\"size-3\" />\n              Replies in &lt; 24h, business days\n            </span>\n            <span className=\"inline-flex items-center gap-1.5\">\n              <ShieldCheck className=\"size-3 text-emerald-500\" />\n              We never share your message\n            </span>\n          </div>\n        </form>\n      </div>\n    </section>\n  )\n}\n\nfunction Field({\n  label,\n  id,\n  type = \"text\",\n  placeholder,\n}: {\n  label: string\n  id: string\n  type?: string\n  placeholder?: string\n}) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <label htmlFor={id} className=\"text-sm font-medium text-foreground\">\n        {label}\n      </label>\n      <Input id={id} type={type} placeholder={placeholder} className=\"h-11\" />\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/contact-01.tsx"
    }
  ],
  "categories": [
    "contact"
  ],
  "type": "registry:block"
}