{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-section",
  "type": "registry:ui",
  "title": "Contact section (MIAN)",
  "description": "The end of a company or agency page: what happens after you write, direct details, and a short form, side by side.",
  "categories": [
    "sections",
    "contact section",
    "contact form",
    "get in touch",
    "start a project"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/contact-section.css",
      "type": "registry:file",
      "target": "mian/components/contact-section.css",
      "content": ".mn-contact { display: grid; gap: clamp(2rem, 5cqi, 4rem); align-items: start; }\n@container mn (min-width: 52rem) { .mn-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }\n.mn-contact-details { display: grid; gap: .9rem; margin: .5rem 0 0; }\n.mn-contact-details > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-top: .9rem; border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-contact-details dt { color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-contact-details dd { margin: 0; overflow-wrap: anywhere; }"
    },
    {
      "path": "mian/examples/contact-section.html",
      "type": "registry:file",
      "target": "mian/examples/contact-section.html",
      "content": "<!-- Start a project -->\n<section class=\"mn-section\" aria-labelledby=\"ct-h\"><div class=\"mn-container\"><div class=\"mn-contact\">\n  <div class=\"mn-stack\" style=\"--mn-gap:1.25rem\"><h2 class=\"mn-title\" id=\"ct-h\">Tell us what you are making.</h2><p class=\"mn-intro\">A few lines are enough. We reply within two working days with questions or a first estimate.</p>\n    <dl class=\"mn-contact-details\"><div><dt>Email</dt><dd><a class=\"mn-link\" href=\"mailto:hello@forma.example\">hello@forma.example</a></dd></div><div><dt>Studio</dt><dd>Str. Popa Nan 12, Bucharest</dd></div><div><dt>Hours</dt><dd>Mon–Fri, 9:00–18:00 EET</dd></div></dl></div>\n  <form class=\"mn-card mn-contact-form\" action=\"#\" aria-labelledby=\"ct-h\"><div class=\"mn-card-body mn-form\">\n    <div class=\"mn-form-row\"><div class=\"mn-field\"><label class=\"mn-label\" for=\"ct-name\">Name</label><input class=\"mn-input\" id=\"ct-name\" autocomplete=\"name\" required></div><div class=\"mn-field\"><label class=\"mn-label\" for=\"ct-mail\">Email</label><input class=\"mn-input\" id=\"ct-mail\" type=\"email\" autocomplete=\"email\" required></div></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"ct-budget\">Budget</label><select class=\"mn-select\" id=\"ct-budget\"><option>Under €15,000</option><option>€15,000–40,000</option><option>Over €40,000</option><option>Not sure yet</option></select></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"ct-msg\">About the project</label><textarea class=\"mn-textarea\" id=\"ct-msg\" rows=\"4\" required></textarea></div>\n    <button class=\"mn-btn\" type=\"submit\">Send the brief</button>\n  </div></form>\n</div></div></section>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/contact-section",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-contact",
        "mn-contact-details",
        "mn-contact-form"
      ],
      "accessibility": [
        "Every field has a visible label and autocomplete; required fields say so in text.",
        "Say what happens after sending (“We reply within two working days”) near the button.",
        "Direct details (email, phone) are real links so they can be used without the form."
      ],
      "intents": [
        "contact form section",
        "get in touch",
        "start a project",
        "enquiry form",
        "request a quote",
        "agency contact"
      ]
    }
  }
}