{"$schema":"https://ui.artbloom.tech/schema/registry-item.json","name":"contact-form","type":"registry:block","title":"Contact Form","description":"A two-column contact section: labelled, accessible form fields beside contact details with inline SVG icons. One file, no deps.","author":"@artbloom","dependencies":[],"registryDependencies":[],"files":[{"path":"components/blocks/contact-form.tsx","target":"components/blocks/contact-form.tsx","content":"function MailIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" aria-hidden=\"true\" className=\"h-5 w-5 flex-none text-indigo-600\">\n      <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n      <path d=\"m3 7 9 6 9-6\" />\n    </svg>\n  );\n}\n\nfunction ChatIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" aria-hidden=\"true\" className=\"h-5 w-5 flex-none text-indigo-600\">\n      <path d=\"M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v10z\" />\n    </svg>\n  );\n}\n\nfunction PinIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" aria-hidden=\"true\" className=\"h-5 w-5 flex-none text-indigo-600\">\n      <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z\" />\n      <circle cx=\"12\" cy=\"10\" r=\"3\" />\n    </svg>\n  );\n}\n\nconst details = [\n  { Icon: MailIcon, label: \"Email us\", value: \"hello@example.com\" },\n  { Icon: ChatIcon, label: \"Live chat\", value: \"Available Mon–Fri, 9am–6pm\" },\n  { Icon: PinIcon, label: \"Visit us\", value: \"100 Market Street, San Francisco\" },\n];\n\nconst inputClass =\n  \"mt-2 block w-full rounded-lg border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/30\";\n\nexport default function ContactForm() {\n  return (\n    <section className=\"w-full bg-white py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-6xl px-6\">\n        <div className=\"grid grid-cols-1 gap-16 lg:grid-cols-2\">\n          <div className=\"max-w-lg\">\n            <p className=\"text-sm font-semibold text-indigo-600\">Contact</p>\n            <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl\">\n              Get in touch\n            </h2>\n            <p className=\"mt-4 text-lg text-slate-500\">\n              Have a question or want to work together? Send us a message and we&apos;ll get back to you within one business day.\n            </p>\n\n            <dl className=\"mt-10 space-y-6\">\n              {details.map(({ Icon, label, value }) => (\n                <div key={label} className=\"flex items-start gap-4\">\n                  <Icon />\n                  <div>\n                    <dt className=\"text-sm font-medium text-slate-900\">{label}</dt>\n                    <dd className=\"text-sm text-slate-500\">{value}</dd>\n                  </div>\n                </div>\n              ))}\n            </dl>\n          </div>\n\n          <form className=\"rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8\">\n            <div className=\"grid grid-cols-1 gap-5 sm:grid-cols-2\">\n              <div>\n                <label htmlFor=\"first-name\" className=\"block text-sm font-medium text-slate-900\">\n                  First name\n                </label>\n                <input\n                  id=\"first-name\"\n                  name=\"first-name\"\n                  type=\"text\"\n                  autoComplete=\"given-name\"\n                  placeholder=\"Jane\"\n                  className={inputClass}\n                />\n              </div>\n              <div>\n                <label htmlFor=\"last-name\" className=\"block text-sm font-medium text-slate-900\">\n                  Last name\n                </label>\n                <input\n                  id=\"last-name\"\n                  name=\"last-name\"\n                  type=\"text\"\n                  autoComplete=\"family-name\"\n                  placeholder=\"Doe\"\n                  className={inputClass}\n                />\n              </div>\n            </div>\n\n            <div className=\"mt-5\">\n              <label htmlFor=\"email\" className=\"block text-sm font-medium text-slate-900\">\n                Email\n              </label>\n              <input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                autoComplete=\"email\"\n                placeholder=\"jane@example.com\"\n                className={inputClass}\n              />\n            </div>\n\n            <div className=\"mt-5\">\n              <label htmlFor=\"message\" className=\"block text-sm font-medium text-slate-900\">\n                Message\n              </label>\n              <textarea\n                id=\"message\"\n                name=\"message\"\n                rows={4}\n                placeholder=\"Tell us how we can help…\"\n                className={inputClass}\n              />\n            </div>\n\n            <button\n              type=\"submit\"\n              className=\"mt-6 inline-flex w-full items-center justify-center rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\"\n            >\n              Send message\n            </button>\n            <p className=\"mt-3 text-center text-xs text-slate-400\">\n              By submitting this form you agree to our privacy policy.\n            </p>\n          </form>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block"}],"meta":{"kind":"blocks","categories":["contact"],"docs":"https://ui.artbloom.tech/artbloom/blocks/contact-form"}}