{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ruixen-gradient-footer-demo",
  "type": "registry:example",
  "title": "Ruixen Gradient Footer Demo",
  "description": "Grab the handle and drag up to stretch the footer open and reveal the rainbow glow.",
  "registryDependencies": [
    "https://ruixen.com/r/ruixen-gradient-footer"
  ],
  "files": [
    {
      "path": "registry/example/ruixen-gradient-footer-demo.tsx",
      "content": "import { RuixenGradientFooter } from \"@/registry/ruixenui/ruixen-gradient-footer\";\n\nconst columns = [\n  {\n    title: \"Product\",\n    links: [\"Overview\", \"Features\", \"Integrations\", \"Pricing\", \"Changelog\"],\n  },\n  {\n    title: \"Resources\",\n    links: [\"Docs\", \"Guides\", \"API reference\", \"Support\", \"Status\"],\n  },\n  { title: \"Company\", links: [\"About\", \"Careers\", \"Blog\", \"Press\", \"Contact\"] },\n  { title: \"Legal\", links: [\"Privacy\", \"Terms\", \"Security\", \"Cookies\"] },\n];\n\nexport default function RuixenGradientFooterDemo() {\n  return (\n    <div className=\"flex min-h-full flex-col\">\n      {/* The reveal needs at least a band-height of scroll above the footer,\n          otherwise the glow starts out already half-risen. */}\n      <div className=\"flex h-[55vh] shrink-0 items-center justify-center px-6 text-center font-mono text-xs uppercase tracking-wider text-muted-foreground\">\n        Scroll down to the footer ↓\n      </div>\n\n      <RuixenGradientFooter gradientHeight=\"40vh\">\n        <div className=\"mx-auto w-full max-w-5xl px-6 pt-12\">\n          <div className=\"grid gap-10 pb-10 sm:grid-cols-2 lg:grid-cols-6\">\n            <div className=\"lg:col-span-2\">\n              <div className=\"flex items-center gap-2 text-foreground\">\n                <svg viewBox=\"0 0 24 24\" className=\"size-5\" aria-hidden>\n                  <path d=\"M12 2 22 12 12 22 2 12Z\" fill=\"currentColor\" />\n                  <path\n                    d=\"M12 8 16 12 12 16 8 12Z\"\n                    className=\"fill-background\"\n                  />\n                </svg>\n                <span className=\"font-mono text-sm uppercase tracking-widest\">\n                  Lumen Studio\n                </span>\n              </div>\n              <p className=\"mt-4 max-w-xs text-sm text-muted-foreground\">\n                Design tooling for teams who ship on Fridays. Built for the\n                browser, offline by default.\n              </p>\n\n              <div className=\"mt-6 flex max-w-xs gap-2\">\n                <input\n                  type=\"email\"\n                  aria-label=\"Email address\"\n                  placeholder=\"you@company.com\"\n                  className=\"h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-foreground/40 focus:outline-none\"\n                />\n                <button\n                  type=\"button\"\n                  className=\"h-9 shrink-0 rounded-md bg-foreground px-3 font-mono text-xs uppercase tracking-wider text-background transition-opacity hover:opacity-90\"\n                >\n                  Join\n                </button>\n              </div>\n            </div>\n\n            <nav className=\"grid grid-cols-2 gap-10 font-mono text-xs uppercase tracking-wider sm:grid-cols-4 lg:col-span-4\">\n              {columns.map((col) => (\n                <div key={col.title}>\n                  <h3 className=\"text-foreground\">{col.title}</h3>\n                  <ul className=\"mt-4 flex flex-col gap-3\">\n                    {col.links.map((link) => (\n                      <li key={link}>\n                        <a\n                          href=\"#\"\n                          className=\"text-muted-foreground transition-colors hover:text-foreground\"\n                        >\n                          {link}\n                        </a>\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              ))}\n            </nav>\n          </div>\n\n          <div className=\"flex flex-col items-center justify-between gap-3 border-t border-border/60 pt-6 pb-2 font-mono text-xs uppercase tracking-wider text-muted-foreground sm:flex-row\">\n            <span>© 2026 Lumen Studio</span>\n            <span className=\"flex items-center gap-2\">\n              <span className=\"size-1.5 rounded-full bg-primary\" />\n              All systems normal\n            </span>\n            <span>Amsterdam · Remote</span>\n          </div>\n        </div>\n      </RuixenGradientFooter>\n    </div>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/ruixen-gradient-footer-demo.tsx"
    }
  ]
}