{
  "name": "footer/multi-column",
  "type": "registry:component",
  "description": "Multi-column footer with navigation groups",
  "files": [
    {
      "path": "example/Footer/Footer_MultiColumn.astro",
      "type": "registry:component",
      "content": "---\n// Footer data structure\nconst footerSections = [\n  {\n    title: 'Product',\n    links: [\n      { name: 'Features', href: '#' },\n      { name: 'Integration', href: '#' },\n      { name: 'Pricing', href: '#' },\n    ],\n  },\n  {\n    title: 'Resources',\n    links: [\n      { name: 'Tutorials', href: '#' },\n      { name: 'Blog', href: '#' },\n      {\n        name: 'Community',\n        href: '#',\n        external: true,\n      },\n      {\n        name: 'Status',\n        href: '#',\n        external: true,\n      },\n    ],\n  },\n  {\n    title: 'Company',\n    links: [\n      { name: 'About', href: '#' },\n      { name: 'Careers', href: '#' },\n      { name: 'Contact', href: '#' },\n    ],\n  },\n  {\n    title: 'Legal',\n    links: [\n      { name: 'Terms of Service', href: '#' },\n      { name: 'Privacy Policy', href: '#' },\n      { name: 'Cookie Policy', href: '#' },\n      { name: 'Security', href: '#' },\n    ],\n  },\n  {\n    title: 'Connect',\n    links: [\n      { name: 'X', href: '#', external: true },\n      {\n        name: 'LinkedIn',\n        href: '#',\n        external: true,\n      },\n    ],\n  },\n];\n---\n\n<footer\n  class=\"relative px-6 pb-16 pt-16 md:px-8 md:pb-20 md:pt-20\"\n  data-scheme=\"shift\"\n>\n  <div class=\"container mb-12\">\n    <nav>\n      <div\n        class=\"grid grid-cols-2 justify-items-center gap-x-8 gap-y-8 md:grid-cols-5 md:gap-x-12\"\n      >\n        {\n          footerSections.map((section) => (\n            <div>\n              <h3 class=\"type-base pb-v2.5/12 md:type-sm\">{section.title}</h3>\n              <ul>\n                {section.links.map((link) => (\n                  <li class=\"py-1\">\n                    <a\n                      class=\"footer-link type-base py-v2.5/12 md:type-sm inline-block\"\n                      href={link.href}\n                      {...(link.external\n                        ? {\n                            target: \"_blank\",\n                            rel: \"noopener noreferrer\",\n                          }\n                        : {})}\n                    >\n                      {link.name}\n                      {link.external && (\n                        <span class=\"footer-link__icon\">&nbsp;↗</span>\n                      )}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))\n        }\n      </div>\n    </nav>\n  </div>\n\n  <div class=\"container flex flex-col items-center justify-center gap-4\">\n    <div class=\"flex items-center gap-4\">\n      <small class=\"type-base md:type-sm\">\n        © 2025 Pablo Studio. All rights reserved.\n      </small>\n    </div>\n  </div>\n</footer>\n"
    }
  ],
  "category": "example"
}