{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/footer.tsx",
      "content": "import React from 'react';\r\n\r\nconst Footer: React.FC = () => {\r\n  return (\r\n    <footer className=\"relative bg-black text-white w-full min-h-[600px] flex flex-col overflow-hidden pt-20 px-6 md:px-12 lg:px-24\">\r\n\r\n      <article id=\"lighting-wrap\">\r\n        <article id=\"lightings\">\r\n          <section id=\"light-one\" className=\"lighting-section\">\r\n            <section id=\"light-two\" className=\"lighting-section\">\r\n              <section id=\"light-three\" className=\"lighting-section\">\r\n                <section id=\"light-four\" className=\"lighting-section\">\r\n                  <section id=\"light-five\" className=\"lighting-section\" />\r\n                </section>\r\n              </section>\r\n            </section>\r\n          </section>\r\n        </article>\r\n      </article>\r\n\r\n      <div className=\"flex flex-col lg:flex-row justify-between w-full h-full pb-20 z-10 relative\">\r\n\r\n        <div className=\"flex flex-col mb-32 lg:mb-28 max-w-xl\">\r\n\r\n          <div className=\"mb-8\">\r\n            <span className=\"inline-block px-4 py-1.5 rounded-full bg-zinc-900 text-zinc-400 text-[10px] font-medium tracking-[0.2em] uppercase\">\r\n              Jatt UI\r\n            </span>\r\n          </div>\r\n\r\n          <h2 className=\"text-3xl md:text-5xl lg:text-6xl font-serif-elegant leading-tight\">\r\n            Build landing pages<br />\r\n            that feel alive<br />\r\n            and effortless\r\n          </h2>\r\n\r\n          <p className=\"mt-6 text-zinc-400 text-sm leading-relaxed max-w-md\">\r\n            JattUI helps you build stunning landing pages using beautifully\r\n            animated, copy-paste ready components — crafted to be subtle,\r\n            tasteful, and production-ready.\r\n          </p>\r\n        </div>\r\n\r\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12 lg:gap-24\">\r\n\r\n          <div className=\"flex flex-col space-y-6\">\r\n            <h3 className=\"text-zinc-500 text-[11px] font-medium tracking-[0.2em] uppercase\">\r\n              Product\r\n            </h3>\r\n            <ul className=\"flex flex-col space-y-3\">\r\n              <li><FooterLink href=\"#\">Components</FooterLink></li>\r\n              <li><FooterLink href=\"#\">Animations</FooterLink></li>\r\n              <li><FooterLink href=\"#\">Templates</FooterLink></li>\r\n              <li><FooterLink href=\"#\">Showcase</FooterLink></li>\r\n            </ul>\r\n          </div>\r\n\r\n          <div className=\"flex flex-col space-y-6\">\r\n            <h3 className=\"text-zinc-500 text-[11px] font-medium tracking-[0.2em] uppercase\">\r\n              Resources\r\n            </h3>\r\n            <ul className=\"flex flex-col space-y-3\">\r\n              <li><FooterLink href=\"#\">Documentation</FooterLink></li>\r\n              <li><FooterLink href=\"#\">Getting Started</FooterLink></li>\r\n              <li><FooterLink href=\"#\">Changelog</FooterLink></li>\r\n              <li><FooterLink href=\"#\">Roadmap</FooterLink></li>\r\n            </ul>\r\n          </div>\r\n\r\n          <div className=\"flex flex-col space-y-6\">\r\n            <h3 className=\"text-zinc-500 text-[11px] font-medium tracking-[0.2em] uppercase\">\r\n              Community\r\n            </h3>\r\n            <ul className=\"flex flex-col space-y-3\">\r\n              <li><FooterLink href=\"#\">GitHub</FooterLink></li>\r\n              <li><FooterLink href=\"#\">Discord</FooterLink></li>\r\n              <li><FooterLink href=\"#\">Twitter / X</FooterLink></li>\r\n              <li><FooterLink href=\"#\">Instagram</FooterLink></li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"absolute bottom-0 left-0 w-full pointer-events-none select-none flex justify-center overflow-hidden\">\r\n        <h1 className=\"text-[18vw] font-serif-elegant leading-none translate-y-[0%] tracking-tighter whitespace-nowrap wordmark-gradient\">\r\n          Jatt UI\r\n        </h1>\r\n      </div>\r\n\r\n      <div className=\"mt-auto pb-8 z-10 text-center w-full relative\">\r\n        <p className=\"text-[10px] tracking-[0.2em] text-zinc-700 font-medium uppercase\">\r\n          © 2025 Jatt UI — Crafted for modern web builders\r\n        </p>\r\n      </div>\r\n    </footer>\r\n  );\r\n};\r\n\r\ninterface FooterLinkProps {\r\n  href: string;\r\n  children: React.ReactNode;\r\n}\r\n\r\nconst FooterLink: React.FC<FooterLinkProps> = ({ href, children }) => {\r\n  return (\r\n    <a\r\n      href={href}\r\n      className=\"text-zinc-200 hover:text-white text-sm tracking-wide transition-colors duration-200 ease-in-out block\"\r\n    >\r\n      {children}\r\n    </a>\r\n  );\r\n};\r\n\r\nexport default Footer;",
      "type": "registry:ui",
      "target": "components/ui/footer.tsx"
    }
  ]
}