{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "newsletter",
    "type": "registry:component",
    "title": "Newsletter",
    "description": "A two-column subscribe section with benefit copy and a name and email capture form.",
    "registryDependencies": [
        "tokens",
        "field",
        "button"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/newsletter.html",
            "type": "registry:file",
            "target": "components/newsletter.html",
            "content": "<!-- Newsletter\n     A subscribe section: an eyebrow and two-tone heading with a short benefit\n     list on the left, and a name and email capture form on the right. Uses the\n     underline field component. The form posts nowhere by default; wire up the\n     action attribute. Marketing theme. -->\n\n<section class=\"dp-newsletter\">\n  <div class=\"dp-newsletter-body\">\n    <p class=\"dp-newsletter-eyebrow\">Newsletter</p>\n    <h2 class=\"dp-newsletter-title\">Subscribe to get monthly <span class=\"light\">web data insights</span></h2>\n    <p class=\"dp-newsletter-expect\">What can you expect?</p>\n    <ul class=\"dp-newsletter-list\">\n      <li><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> The latest tech news</li>\n      <li><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> Exclusive insights from data experts</li>\n      <li><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> One email a month, no spam</li>\n    </ul>\n  </div>\n\n  <form class=\"dp-newsletter-form\" action=\"#\" method=\"post\">\n    <div class=\"dp-field\">\n      <label class=\"dp-field-label\" for=\"nl-first\">First name</label>\n      <input class=\"dp-field-input\" id=\"nl-first\" name=\"first_name\" type=\"text\" autocomplete=\"given-name\">\n    </div>\n    <div class=\"dp-field\">\n      <label class=\"dp-field-label\" for=\"nl-last\">Last name</label>\n      <input class=\"dp-field-input\" id=\"nl-last\" name=\"last_name\" type=\"text\" autocomplete=\"family-name\">\n    </div>\n    <div class=\"dp-field\">\n      <label class=\"dp-field-label\" for=\"nl-email\">Email</label>\n      <input class=\"dp-field-input\" id=\"nl-email\" name=\"email\" type=\"email\" autocomplete=\"email\">\n    </div>\n    <button class=\"dp-btn\" data-variant=\"cta\" type=\"submit\">Subscribe</button>\n  </form>\n</section>\n"
        },
        {
            "path": "components/newsletter.css",
            "type": "registry:file",
            "target": "components/newsletter.css",
            "content": "/* Newsletter\n   A two-column subscribe section: benefit copy on the left, a name and email\n   capture form on the right. Underline fields come from the field component.\n   Colour and type from tokens.css (marketing theme). */\n\n.dp-newsletter {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--dp-space-10);\n  align-items: start;\n  max-width: 66rem;\n  margin: 0 auto;\n  padding: var(--dp-space-12) var(--dp-space-6);\n}\n\n@media (max-width: 760px) { .dp-newsletter { grid-template-columns: 1fr; gap: var(--dp-space-8); } }\n\n.dp-newsletter-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-newsletter-title {\n  margin: 0 0 var(--dp-space-6);\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-newsletter-title .light {\n  display: block;\n  font-weight: var(--dp-weight-light);\n}\n\n.dp-newsletter-expect {\n  margin: 0 0 var(--dp-space-4);\n  font-size: var(--dp-text-lg);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-newsletter-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-newsletter-list li {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-3);\n  font-size: var(--dp-text-base);\n  color: var(--dp-text);\n}\n\n.dp-newsletter-list svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--dp-success); }\n\n.dp-newsletter-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-5);\n}\n\n.dp-newsletter-form .dp-btn { align-self: flex-start; }\n"
        }
    ]
}