{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "contact-form",
    "type": "registry:component",
    "title": "Contact form",
    "description": "A demo-request section with an underline-style form and an expectations rail.",
    "registryDependencies": [
        "tokens",
        "field",
        "button",
        "avatar"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/contact-form.html",
            "type": "registry:file",
            "target": "components/contact-form.html",
            "content": "<!-- Contact form\n     A demo-request section: a centred two-tone heading, a form with\n     underline-style fields on the left, and an expectations rail with a\n     checklist, an avatar group and office locations on the right. The form\n     posts nowhere by default; wire up the action attribute. Marketing theme. -->\n\n<section class=\"dp-cform\">\n  <div class=\"dp-cform-head\">\n    <p class=\"dp-cform-eyebrow\">Contact</p>\n    <h2 class=\"dp-cform-title\">Your competitive edge awaits <span class=\"light\">Book a personalised demo</span></h2>\n  </div>\n\n  <div class=\"dp-cform-panel\">\n    <form class=\"dp-cform-form\" action=\"#\" method=\"post\">\n      <div class=\"dp-cform-row\">\n        <div class=\"dp-field\">\n          <label class=\"dp-field-label\" for=\"cf-first\">First name</label>\n          <input class=\"dp-field-input\" id=\"cf-first\" name=\"first_name\" type=\"text\" autocomplete=\"given-name\">\n        </div>\n        <div class=\"dp-field\">\n          <label class=\"dp-field-label\" for=\"cf-last\">Last name</label>\n          <input class=\"dp-field-input\" id=\"cf-last\" name=\"last_name\" type=\"text\" autocomplete=\"family-name\">\n        </div>\n      </div>\n\n      <div class=\"dp-field\">\n        <label class=\"dp-field-label\" for=\"cf-email\">Work email</label>\n        <input class=\"dp-field-input\" id=\"cf-email\" name=\"email\" type=\"email\" autocomplete=\"email\">\n      </div>\n\n      <div class=\"dp-field\">\n        <label class=\"dp-field-label\" for=\"cf-company\">Company or organisation name</label>\n        <input class=\"dp-field-input\" id=\"cf-company\" name=\"company\" type=\"text\" autocomplete=\"organization\">\n      </div>\n\n      <div class=\"dp-field\">\n        <label class=\"dp-field-label\" for=\"cf-why\">Why would you like to try Dataprovider.com?</label>\n        <textarea class=\"dp-field-input\" id=\"cf-why\" name=\"reason\" rows=\"3\"></textarea>\n      </div>\n\n      <div class=\"dp-field\">\n        <label class=\"dp-field-label\" for=\"cf-source\">How did you hear about us?</label>\n        <select class=\"dp-field-input\" id=\"cf-source\" name=\"source\">\n          <option value=\"\">Please select</option>\n          <option value=\"search\">Search engine</option>\n          <option value=\"social\">Social media</option>\n          <option value=\"referral\">Referral</option>\n          <option value=\"event\">Event or conference</option>\n          <option value=\"other\">Other</option>\n        </select>\n      </div>\n\n      <label class=\"dp-cform-check\">\n        <input type=\"checkbox\" name=\"newsletter\" value=\"yes\">\n        <span>Subscribe to our newsletter.</span>\n      </label>\n\n      <button class=\"dp-btn\" data-variant=\"cta\" type=\"submit\">Request a free demo</button>\n    </form>\n\n    <aside class=\"dp-cform-aside\">\n      <h3 class=\"dp-cform-aside-title\">What can you expect?</h3>\n      <ul class=\"dp-cform-list\">\n        <li>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n          A personalised demo, not a sales pitch\n        </li>\n        <li>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n          Completely free, zero obligations\n        </li>\n        <li>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n          30 to 60 minutes based on your needs\n        </li>\n      </ul>\n\n      <span class=\"dp-avatar-group\">\n        <span class=\"dp-avatar\" data-size=\"sm\" aria-label=\"Team member\">AK</span>\n        <span class=\"dp-avatar\" data-size=\"sm\" aria-label=\"Team member\">RV</span>\n        <span class=\"dp-avatar\" data-size=\"sm\" aria-label=\"Team member\">MB</span>\n      </span>\n\n      <div class=\"dp-cform-locations\">\n        <p class=\"dp-cform-loc-label\">Locations</p>\n        <div class=\"dp-cform-loc-grid\">\n          <address class=\"dp-cform-loc\">\n            <span class=\"dp-cform-loc-name\">Operations</span>\n            Van Elmptstraat 10<br>\n            9723 ZL Groningen<br>\n            The Netherlands\n          </address>\n          <address class=\"dp-cform-loc\">\n            <span class=\"dp-cform-loc-name\">International</span>\n            Weesperplein 4b<br>\n            1018 XA Amsterdam<br>\n            The Netherlands\n          </address>\n        </div>\n      </div>\n    </aside>\n  </div>\n</section>\n"
        },
        {
            "path": "components/contact-form.css",
            "type": "registry:file",
            "target": "components/contact-form.css",
            "content": "/* Contact form\n   A demo-request section with a centred two-tone heading and a two-column\n   panel: an underline-style form on the left and an expectations rail on the\n   right. Colour and type from tokens.css (marketing theme). */\n\n.dp-cform {\n  max-width: 66rem;\n  margin: 0 auto;\n  padding: var(--dp-space-12) var(--dp-space-6);\n}\n\n.dp-cform-head {\n  margin: 0 auto var(--dp-space-10);\n  max-width: 40rem;\n  text-align: center;\n}\n\n.dp-cform-eyebrow {\n  margin: 0 0 var(--dp-space-3);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--dp-link);\n}\n\n.dp-cform-title {\n  margin: 0;\n  font-size: var(--dp-text-4xl);\n  line-height: var(--dp-leading-tight);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-cform-title .light {\n  display: block;\n  font-weight: var(--dp-weight-light);\n}\n\n.dp-cform-panel {\n  display: grid;\n  grid-template-columns: 1.4fr 1fr;\n  gap: var(--dp-space-10);\n  padding: var(--dp-space-8);\n  background: var(--dp-surface);\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-xl);\n  box-shadow: var(--dp-shadow-md);\n}\n\n@media (max-width: 800px) { .dp-cform-panel { grid-template-columns: 1fr; gap: var(--dp-space-8); } }\n\n/* form */\n.dp-cform-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-5);\n}\n\n.dp-cform-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--dp-space-5);\n}\n\n@media (max-width: 480px) { .dp-cform-row { grid-template-columns: 1fr; } }\n\n/* The underline fields come from the field component. */\n\n.dp-cform-check {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-3);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n  cursor: pointer;\n}\n\n.dp-cform-check input {\n  width: 1.1rem;\n  height: 1.1rem;\n  accent-color: var(--dp-link);\n}\n\n.dp-cform-form .dp-btn { align-self: flex-start; }\n\n/* aside */\n.dp-cform-aside {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-5);\n}\n\n.dp-cform-aside-title {\n  margin: 0;\n  font-size: var(--dp-text-lg);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-cform-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-3);\n}\n\n.dp-cform-list li {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-3);\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text);\n}\n\n.dp-cform-list svg { width: 1rem; height: 1rem; flex: none; color: var(--dp-success); }\n\n.dp-cform-locations {\n  margin-top: var(--dp-space-2);\n  padding-top: var(--dp-space-5);\n  border-top: 1px solid var(--dp-border);\n}\n\n.dp-cform-loc-label {\n  margin: 0 0 var(--dp-space-3);\n  font-size: var(--dp-text-xs);\n  font-weight: var(--dp-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--dp-text-muted);\n}\n\n.dp-cform-loc-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--dp-space-4);\n}\n\n.dp-cform-loc {\n  font-style: normal;\n  font-size: var(--dp-text-sm);\n  line-height: var(--dp-leading-normal);\n  color: var(--dp-text-muted);\n}\n\n.dp-cform-loc-name {\n  display: block;\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n"
        }
    ]
}