{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-wave-footer",
  "title": "Animated Wave Footer",
  "description": "component for the Animated Wave Footer",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "app/registry/footer/usage/animatefooter.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 { Facebook, Instagram, Linkedin, Twitter } from \"lucide-react\";\n\nexport default function AnimatedWaveFooter() {\n  return (\n    <footer className=\"relative bg-linear-to-b from-background to-primary/10 pt-20\">\n      <div className=\"absolute inset-0 overflow-hidden\">\n        <div className=\"absolute bottom-0 h-[500px] w-[1800px] animate-wave\">\n          <svg\n            className=\"h-full w-full\"\n            viewBox=\"0 0 1800 500\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M0 250C200 150 400 50 600 100C800 150 1000 350 1200 300C1400 250 1600 150 1800 250V500H0V250Z\"\n              fill=\"currentColor\"\n              className=\"text-primary/5\"\n            />\n            <path\n              d=\"M0 250C200 200 400 100 600 150C800 200 1000 350 1200 300C1400 250 1600 200 1800 250V500H0V250Z\"\n              fill=\"currentColor\"\n              className=\"text-primary/10\"\n            />\n          </svg>\n        </div>\n      </div>\n      <div className=\"container relative z-10 mx-auto px-4 md:px-6\">\n        <div className=\"grid gap-8 md:grid-cols-2 lg:grid-cols-4\">\n          <div>\n            <h2 className=\"mb-4 text-2xl font-bold\">Stay Connected</h2>\n            <form className=\"space-y-2\">\n              <div className=\"space-y-1\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  placeholder=\"Enter your email\"\n                  type=\"email\"\n                  className=\"backdrop-blur-xs\"\n                />\n              </div>\n              <Button type=\"submit\" className=\"w-full\">\n                Subscribe\n              </Button>\n            </form>\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>\n            <h3 className=\"mb-4 text-lg font-semibold\">Follow Us</h3>\n            <div className=\"flex space-x-4\">\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                <Facebook className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Facebook</span>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                <Twitter className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Twitter</span>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                <Instagram className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Instagram</span>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                <Linkedin className=\"h-4 w-4\" />\n                <span className=\"sr-only\">LinkedIn</span>\n              </Button>\n            </div>\n          </div>\n        </div>\n        <div className=\"mt-12 border-t pt-8 text-center\">\n          <p className=\"text-sm text-muted-foreground\">\n            © 2024 Your Company. All rights reserved.\n          </p>\n        </div>\n      </div>\n      <style jsx>{`\n        @keyframes wave {\n          0% {\n            transform: translateX(0);\n          }\n          100% {\n            transform: translateX(-50%);\n          }\n        }\n        .animate-wave {\n          animation: wave 15s linear infinite;\n        }\n      `}</style>\n    </footer>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/animate-footer.tsx"
    }
  ],
  "type": "registry:component"
}