{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footers-demo",
  "title": "Footers Demo",
  "description": "component for the Footers Demo",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "label",
    "switch",
    "textarea",
    "tooltip"
  ],
  "files": [
    {
      "path": "app/registry/footer/footerdemo.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n  Facebook,\n  Instagram,\n  Linkedin,\n  Moon,\n  Send,\n  Sun,\n  Twitter,\n} from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\n\nexport default function Footerdemo() {\n  const { resolvedTheme, setTheme } = useTheme();\n  const [isChatOpen, setIsChatOpen] = React.useState(false);\n  const isDarkMode = resolvedTheme === \"dark\";\n\n  return (\n    <footer className=\"relative border-t bg-background text-foreground transition-colors duration-300\">\n      <div className=\"container mx-auto px-4 py-12 md:px-6 lg:px-8\">\n        <div className=\"grid gap-12 md:grid-cols-2 lg:grid-cols-4\">\n          <div className=\"relative\">\n            <h2 className=\"mb-4 text-3xl font-bold tracking-tight\">\n              Stay Connected\n            </h2>\n            <p className=\"mb-6 text-muted-foreground\">\n              Join our newsletter for the latest updates and exclusive offers.\n            </p>\n            <form className=\"relative\">\n              <Input\n                type=\"email\"\n                placeholder=\"Enter your email\"\n                className=\"pr-12 backdrop-blur-xs\"\n              />\n              <Button\n                type=\"submit\"\n                size=\"icon\"\n                className=\"absolute right-1 top-1 h-8 w-8 rounded-full bg-primary text-primary-foreground transition-transform hover:scale-105\"\n              >\n                <Send className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Subscribe</span>\n              </Button>\n            </form>\n            <div className=\"absolute -right-4 top-0 h-24 w-24 rounded-full bg-primary/10 blur-2xl\" />\n          </div>\n          <div>\n            <h3 className=\"mb-4 text-lg font-semibold\">Quick Links</h3>\n            <nav className=\"space-y-2 text-sm\">\n              <a\n                href=\"#\"\n                className=\"block transition-colors hover:text-primary\"\n              >\n                Home\n              </a>\n              <a\n                href=\"#\"\n                className=\"block transition-colors hover:text-primary\"\n              >\n                About Us\n              </a>\n              <a\n                href=\"#\"\n                className=\"block transition-colors hover:text-primary\"\n              >\n                Services\n              </a>\n              <a\n                href=\"#\"\n                className=\"block transition-colors hover:text-primary\"\n              >\n                Products\n              </a>\n              <a\n                href=\"#\"\n                className=\"block transition-colors hover:text-primary\"\n              >\n                Contact\n              </a>\n            </nav>\n          </div>\n          <div>\n            <h3 className=\"mb-4 text-lg font-semibold\">Contact Us</h3>\n            <address className=\"space-y-2 text-sm not-italic\">\n              <p>123 Innovation Street</p>\n              <p>Tech City, TC 12345</p>\n              <p>Phone: (123) 456-7890</p>\n              <p>Email: hello@example.com</p>\n            </address>\n          </div>\n          <div className=\"relative\">\n            <h3 className=\"mb-4 text-lg font-semibold\">Follow Us</h3>\n            <div className=\"mb-6 flex space-x-4\">\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      className=\"rounded-full\"\n                    >\n                      <Facebook className=\"h-4 w-4\" />\n                      <span className=\"sr-only\">Facebook</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    <p>Follow us on Facebook</p>\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      className=\"rounded-full\"\n                    >\n                      <Twitter className=\"h-4 w-4\" />\n                      <span className=\"sr-only\">Twitter</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    <p>Follow us on Twitter</p>\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      className=\"rounded-full\"\n                    >\n                      <Instagram className=\"h-4 w-4\" />\n                      <span className=\"sr-only\">Instagram</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    <p>Follow us on Instagram</p>\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      className=\"rounded-full\"\n                    >\n                      <Linkedin className=\"h-4 w-4\" />\n                      <span className=\"sr-only\">LinkedIn</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    <p>Connect with us on LinkedIn</p>\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n            </div>\n            <div className=\"flex items-center space-x-2\">\n              <Sun className=\"h-4 w-4\" />\n              <Switch\n                id=\"dark-mode\"\n                checked={isDarkMode}\n                onCheckedChange={(checked) => setTheme(checked ? \"dark\" : \"light\")}\n              />\n              <Moon className=\"h-4 w-4\" />\n              <Label htmlFor=\"dark-mode\" className=\"sr-only\">\n                Toggle dark mode\n              </Label>\n            </div>\n          </div>\n        </div>\n        <div className=\"mt-12 flex flex-col items-center justify-between gap-4 border-t pt-8 text-center md:flex-row\">\n          <p className=\"text-sm text-muted-foreground\">\n            © 2024 Your Company. All rights reserved.\n          </p>\n          <nav className=\"flex gap-4 text-sm\">\n            <a href=\"#\" className=\"transition-colors hover:text-primary\">\n              Privacy Policy\n            </a>\n            <a href=\"#\" className=\"transition-colors hover:text-primary\">\n              Terms of Service\n            </a>\n            <a href=\"#\" className=\"transition-colors hover:text-primary\">\n              Cookie Settings\n            </a>\n          </nav>\n        </div>\n      </div>\n      <Button\n        onClick={() => setIsChatOpen(!isChatOpen)}\n        className=\"fixed bottom-4 right-4 z-50 rounded-full shadow-lg\"\n      >\n        {isChatOpen ? \"Close Chat\" : \"Open Chat\"}\n      </Button>\n      {isChatOpen && (\n        <div className=\"fixed bottom-20 right-4 z-50 w-80 rounded-lg border bg-background p-4 shadow-lg\">\n          <h4 className=\"mb-4 text-lg font-semibold\">Live Chat</h4>\n          <div className=\"mb-4 h-40 overflow-y-auto rounded border p-2\">\n            <p className=\"mb-2\">\n              <strong>Support:</strong> Hello! How can I assist you today?\n            </p>\n          </div>\n          <form className=\"flex gap-2\">\n            <Textarea\n              placeholder=\"Type your message...\"\n              className=\"grow\"\n            />\n            <Button type=\"submit\" size=\"icon\">\n              <Send className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Send message</span>\n            </Button>\n          </form>\n        </div>\n      )}\n    </footer>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/footer-demo.tsx"
    }
  ],
  "type": "registry:component"
}