{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-5",
  "type": "registry:block",
  "description": "Sticky layered footer with gradient background, social icons, and animated link groups.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/footer/5/sticky-footer.tsx",
      "content": "\"use client\";\nimport {\n  FacebookIcon,\n  InstagramIcon,\n  LinkedinIcon,\n  YoutubeIcon,\n} from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\nimport { Logo } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\n\ntype FooterLink = {\n  title: string;\n  href: string;\n  icon?: React.ComponentType<{ className?: string }>;\n};\ntype FooterLinkGroup = {\n  label: string;\n  links: FooterLink[];\n};\n\nexport function StickyFooter() {\n  return (\n    <footer\n      className=\"relative h-[560px] w-full border-t\"\n      style={{ clipPath: \"polygon(0% 0, 100% 0%, 100% 100%, 0 100%)\" }}\n    >\n      <div className=\"fixed bottom-0 h-[560px] w-full\">\n        <div className=\"sticky top-[calc(100vh-560px)] h-full overflow-y-auto\">\n          <div className=\"relative flex size-full flex-col justify-between gap-5 px-4\">\n            <div\n              aria-hidden\n              className=\"absolute inset-0 isolate z-0 opacity-50 contain-strict dark:opacity-100\"\n            >\n              <div className=\"-translate-y-87.5 -rotate-45 absolute top-0 left-0 h-320 w-140 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,--theme(--color-foreground/.06)_0,hsla(0,0%,55%,.02)_50%,--theme(--color-foreground/.01)_80%)]\" />\n              <div className=\"-rotate-45 absolute top-0 left-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)] [translate:5%_-50%]\" />\n              <div className=\"-translate-y-87.5 -rotate-45 absolute top-0 left-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)]\" />\n            </div>\n            <div className=\"flex flex-col gap-8 pt-12 md:flex-row\">\n              <AnimatedContainer className=\"w-full min-w-2xs max-w-sm space-y-4\">\n                <Logo className=\"h-5\" />\n                <p className=\"mt-8 text-muted-foreground text-sm md:mt-0\">\n                  Innovative fintech empowering businesses with seamless\n                  payments, lending, and financial infrastructure worldwide.\n                </p>\n                <div className=\"flex gap-2\">\n                  {socialLinks.map((link, index) => (\n                    <Button\n                      key={`social-${link.href}-${index}`}\n                      size=\"icon-sm\"\n                      variant=\"outline\"\n                    >\n                      <link.icon className=\"size-4\" />\n                    </Button>\n                  ))}\n                </div>\n              </AnimatedContainer>\n              {footerLinkGroups.map((group, index) => (\n                <AnimatedContainer\n                  className=\"w-full\"\n                  delay={0.1 + index * 0.1}\n                  key={group.label}\n                >\n                  <div className=\"mb-10 md:mb-0\">\n                    <h3 className=\"text-sm uppercase\">{group.label}</h3>\n                    <ul className=\"mt-4 space-y-2 text-muted-foreground text-sm md:text-xs lg:text-sm\">\n                      {group.links.map((link) => (\n                        <li key={link.title}>\n                          <a\n                            className=\"inline-flex items-center transition-all duration-300 hover:text-foreground\"\n                            href={link.href}\n                          >\n                            {link.icon && <link.icon className=\"me-1 size-4\" />}\n                            {link.title}\n                          </a>\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                </AnimatedContainer>\n              ))}\n            </div>\n            <div className=\"flex flex-col items-center justify-between gap-2 border-t py-4 text-muted-foreground text-sm md:flex-row\">\n              <p>\n                &copy; {new Date().getFullYear()} efferd, All rights reserved.\n              </p>\n              <a className=\"hover:text-foreground\" href=\"#\">\n                License\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nconst socialLinks = [\n  { title: \"Facebook\", href: \"#\", icon: FacebookIcon },\n  { title: \"Instagram\", href: \"#\", icon: InstagramIcon },\n  { title: \"Youtube\", href: \"#\", icon: YoutubeIcon },\n  { title: \"LinkedIn\", href: \"#\", icon: LinkedinIcon },\n];\n\nconst footerLinkGroups: FooterLinkGroup[] = [\n  {\n    label: \"Product\",\n    links: [\n      { title: \"Payments\", href: \"#\" },\n      { title: \"Cards & Issuing\", href: \"#\" },\n      { title: \"Lending & Credit\", href: \"#\" },\n      { title: \"Wealth Management\", href: \"#\" },\n      { title: \"Insurance\", href: \"#\" },\n      { title: \"Crypto Wallets\", href: \"#\" },\n      { title: \"FX & Currency Exchange\", href: \"#\" },\n      { title: \"Treasury Management\", href: \"#\" },\n      { title: \"Merchant Services\", href: \"#\" },\n      { title: \"Point of Sale\", href: \"#\" },\n      { title: \"Embedded Finance\", href: \"#\" },\n      { title: \"Open Banking API\", href: \"#\" },\n      { title: \"SDKs & Integrations\", href: \"#\" },\n      { title: \"Pricing\", href: \"#\" },\n    ],\n  },\n  {\n    label: \"Solutions\",\n    links: [\n      { title: \"Startups\", href: \"#\" },\n      { title: \"Enterprises\", href: \"#\" },\n      { title: \"Marketplaces\", href: \"#\" },\n      { title: \"Freelancers\", href: \"#\" },\n      { title: \"E-commerce\", href: \"#\" },\n      { title: \"Banks & Credit Unions\", href: \"#\" },\n      { title: \"Investment Platforms\", href: \"#\" },\n      { title: \"Insurance Providers\", href: \"#\" },\n      { title: \"Payment Gateways\", href: \"#\" },\n      { title: \"Government & Public Sector\", href: \"#\" },\n      { title: \"Nonprofits\", href: \"#\" },\n      { title: \"Education\", href: \"#\" },\n      { title: \"Healthcare\", href: \"#\" },\n    ],\n  },\n  {\n    label: \"Resources\",\n    links: [\n      { title: \"Blog\", href: \"#\" },\n      { title: \"Case Studies\", href: \"#\" },\n      { title: \"Documentation\", href: \"#\" },\n      { title: \"API Reference\", href: \"#\" },\n      { title: \"Developer Tools\", href: \"#\" },\n      { title: \"Guides & Tutorials\", href: \"#\" },\n      { title: \"Whitepapers\", href: \"#\" },\n      { title: \"Reports & Research\", href: \"#\" },\n      { title: \"Events & Webinars\", href: \"#\" },\n      { title: \"E-books\", href: \"#\" },\n      { title: \"Community Forum\", href: \"#\" },\n      { title: \"Release Notes\", href: \"#\" },\n      { title: \"System Status\", href: \"#\" },\n    ],\n  },\n  {\n    label: \"Company\",\n    links: [\n      { title: \"About Us\", href: \"#\" },\n      { title: \"Leadership\", href: \"#\" },\n      { title: \"Careers\", href: \"#\" },\n      { title: \"Press\", href: \"#\" },\n      { title: \"Sustainability\", href: \"#\" },\n      { title: \"Diversity & Inclusion\", href: \"#\" },\n      { title: \"Investor Relations\", href: \"#\" },\n      { title: \"Partners\", href: \"#\" },\n      { title: \"Legal & Compliance\", href: \"#\" },\n      { title: \"Privacy Policy\", href: \"#\" },\n      { title: \"Cookie Policy\", href: \"#\" },\n      { title: \"Terms of Service\", href: \"#\" },\n      { title: \"AML & KYC Policy\", href: \"#\" },\n      { title: \"Regulatory Disclosures\", href: \"#\" },\n    ],\n  },\n];\n\ntype AnimatedContainerProps = React.ComponentProps<typeof motion.div> & {\n  children?: React.ReactNode;\n  delay?: number;\n};\n\nfunction AnimatedContainer({\n  delay = 0.1,\n  children,\n  ...props\n}: AnimatedContainerProps) {\n  const shouldReduceMotion = useReducedMotion();\n\n  if (shouldReduceMotion) {\n    return children;\n  }\n\n  return (\n    <motion.div\n      initial={{ filter: \"blur(4px)\", translateY: -8, opacity: 0 }}\n      transition={{ delay, duration: 0.8 }}\n      viewport={{ once: true }}\n      whileInView={{ filter: \"blur(0px)\", translateY: 0, opacity: 1 }}\n      {...props}\n    >\n      {children}\n    </motion.div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/logo.tsx",
      "content": "import type React from \"react\";\n\nexport const LogoIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <path\n      d=\"M 15.03125 23.851562 C 14.117188 23.609375 13.417969 23 13 22.101562 C 12.808594 21.691406 12.808594 21.613281 12.808594 18.375 C 12.808594 15.066406 12.808594 15.066406 13.097656 14.484375 C 13.429688 13.8125 13.898438 13.351562 14.585938 13.027344 C 15.074219 12.800781 15.074219 12.800781 18.386719 12.800781 C 21.699219 12.800781 21.699219 12.800781 22.28125 13.089844 C 22.953125 13.421875 23.414062 13.890625 23.738281 14.578125 C 23.964844 15.066406 23.964844 15.066406 23.988281 18.140625 C 24.015625 20.769531 24 21.285156 23.875 21.710938 C 23.5625 22.789062 22.769531 23.582031 21.699219 23.863281 C 20.964844 24.042969 15.746094 24.042969 15.03125 23.851562 Z M 21.679688 22.390625 C 21.863281 22.304688 22.117188 22.085938 22.246094 21.917969 C 22.480469 21.613281 22.480469 21.613281 22.480469 18.375 C 22.480469 15.136719 22.480469 15.136719 22.238281 14.824219 C 21.757812 14.1875 21.792969 14.195312 18.386719 14.195312 C 15.667969 14.195312 15.308594 14.214844 15.066406 14.34375 C 14.691406 14.542969 14.359375 14.960938 14.246094 15.355469 C 14.144531 15.753906 14.132812 20.847656 14.246094 21.328125 C 14.386719 21.9375 14.847656 22.398438 15.441406 22.519531 C 15.625 22.554688 17.027344 22.582031 18.5625 22.574219 C 21.105469 22.554688 21.375 22.539062 21.679688 22.390625 Z M 21.679688 22.390625 \"\n      opacity=\"50%\"\n    />\n    <path d=\"M 2.859375 23.085938 C 2.089844 22.84375 1.324219 22.15625 0.976562 21.398438 C 0.792969 20.996094 0.785156 20.882812 0.785156 17.636719 C 0.785156 14.28125 0.785156 14.28125 1.019531 13.785156 C 1.296875 13.1875 1.855469 12.609375 2.441406 12.324219 C 2.875 12.105469 2.875 12.105469 6.195312 12.078125 C 9.4375 12.054688 9.523438 12.0625 10.03125 12.246094 C 10.71875 12.507812 11.441406 13.21875 11.730469 13.933594 C 11.9375 14.457031 11.9375 14.472656 11.9375 17.636719 C 11.9375 21.136719 11.9375 21.128906 11.371094 21.953125 C 11.03125 22.433594 10.550781 22.800781 9.925781 23.035156 C 9.480469 23.199219 9.261719 23.207031 6.335938 23.199219 C 4.035156 23.199219 3.128906 23.164062 2.859375 23.085938 Z M 2.859375 23.085938 \" />\n    <path d=\"M 13.898438 11.695312 C 13.226562 11.4375 12.503906 10.703125 12.25 10.023438 C 12.070312 9.519531 12.058594 9.433594 12.085938 6.195312 C 12.113281 2.929688 12.113281 2.867188 12.3125 2.476562 C 12.636719 1.824219 13.070312 1.386719 13.707031 1.074219 C 14.289062 0.785156 14.289062 0.785156 17.644531 0.785156 C 20.90625 0.785156 21.007812 0.792969 21.410156 0.976562 C 21.984375 1.238281 22.65625 1.890625 22.933594 2.476562 C 23.179688 2.964844 23.179688 2.964844 23.179688 6.316406 C 23.179688 9.667969 23.179688 9.667969 22.890625 10.25 C 22.578125 10.886719 22.140625 11.324219 21.488281 11.644531 C 21.097656 11.84375 21.042969 11.84375 17.734375 11.863281 C 14.492188 11.878906 14.359375 11.878906 13.898438 11.695312 Z M 13.898438 11.695312 \" />\n    <path d=\"M 2.214844 11.078125 C 1.324219 10.824219 0.609375 10.207031 0.199219 9.3125 C 0 8.894531 0 8.832031 0 5.574219 C 0 2.265625 0 2.265625 0.234375 1.769531 C 0.53125 1.132812 1.132812 0.535156 1.769531 0.238281 C 2.265625 0.00390625 2.265625 0.00390625 5.578125 0.00390625 C 8.886719 0.00390625 8.886719 0.00390625 9.386719 0.238281 C 10.019531 0.535156 10.621094 1.132812 10.917969 1.769531 C 11.152344 2.265625 11.152344 2.265625 11.152344 5.574219 C 11.152344 8.882812 11.152344 8.882812 10.925781 9.371094 C 10.605469 10.058594 10.144531 10.53125 9.472656 10.859375 C 8.886719 11.148438 8.886719 11.148438 5.75 11.164062 C 3.441406 11.183594 2.507812 11.15625 2.214844 11.078125 Z M 8.898438 9.605469 C 9.238281 9.425781 9.613281 8.988281 9.699219 8.683594 C 9.734375 8.554688 9.757812 7.117188 9.757812 5.488281 C 9.757812 2.179688 9.769531 2.207031 9.132812 1.726562 C 8.820312 1.484375 8.820312 1.484375 5.804688 1.457031 C 4.148438 1.4375 2.65625 1.457031 2.5 1.484375 C 2.34375 1.507812 2.066406 1.683594 1.882812 1.855469 C 1.375 2.335938 1.34375 2.632812 1.421875 5.976562 C 1.480469 8.816406 1.480469 8.816406 1.726562 9.128906 C 2.214844 9.773438 2.316406 9.789062 5.75 9.773438 C 8.285156 9.753906 8.660156 9.738281 8.898438 9.605469 Z M 8.898438 9.605469 \" />\n  </svg>\n);\n\nexport const Logo = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    fill=\"currentColor\"\n    viewBox=\"0 0 90 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <defs>\n      <clipPath id=\"a\">\n        <path d=\"M12.785 12.781h11.172V24H12.785Zm0 0\" />\n      </clipPath>\n      <clipPath id=\"b\">\n        <path d=\"M.008 0h11.148v11.2H.008Zm0 0\" />\n      </clipPath>\n    </defs>\n    <g clipPath=\"url(#a)\">\n      <path\n        d=\"M15.008 23.855c-.91-.242-1.61-.851-2.028-1.75-.19-.41-.19-.488-.19-3.73 0-3.309 0-3.309.288-3.89a3 3 0 0 1 1.485-1.458c.488-.226.488-.226 3.792-.226 3.31 0 3.31 0 3.887.289.672.332 1.133.8 1.453 1.488.227.488.227.488.25 3.563.028 2.632.012 3.148-.113 3.574-.309 1.078-1.102 1.87-2.168 2.152-.734.18-5.941.18-6.656-.012m6.637-1.46c.18-.086.433-.305.562-.473.234-.305.234-.305.234-3.547 0-3.238 0-3.238-.242-3.55-.476-.637-.441-.63-3.844-.63-2.71 0-3.07.02-3.312.149-.375.199-.707.617-.82 1.011-.098.399-.11 5.497 0 5.977.14.61.601 1.07 1.195 1.191.184.036 1.582.063 3.113.055 2.54-.02 2.809-.035 3.114-.183m0 0\"\n        opacity=\"50%\"\n      />\n    </g>\n    <path d=\"M2.86 23.09c-.766-.242-1.532-.93-1.88-1.688-.183-.402-.187-.515-.187-3.765 0-3.356 0-3.356.23-3.852.278-.598.836-1.176 1.422-1.46.43-.22.43-.22 3.746-.247 3.235-.023 3.32-.015 3.829.168.683.262 1.406.973 1.695 1.688.207.523.207.539.207 3.703 0 3.504 0 3.496-.567 4.32-.34.48-.82.848-1.44 1.082-.446.164-.665.172-3.583.164-2.297 0-3.203-.035-3.473-.113M13.879 11.695c-.672-.258-1.395-.992-1.645-1.672-.18-.503-.191-.59-.164-3.832.028-3.265.028-3.328.223-3.718.324-.653.758-1.09 1.395-1.403.578-.289.578-.289 3.93-.289 3.253 0 3.355.008 3.757.192.57.261 1.242.914 1.52 1.5.246.488.246.488.246 3.84 0 3.355 0 3.355-.29 3.937a2.9 2.9 0 0 1-1.398 1.395c-.39.199-.445.199-3.746.218-3.238.016-3.371.016-3.828-.168m0 0\" />\n    <g clipPath=\"url(#b)\">\n      <path d=\"M2.219 11.078c-.89-.254-1.602-.871-2.012-1.765-.2-.418-.2-.481-.2-3.743 0-3.308 0-3.308.235-3.804A3.34 3.34 0 0 1 1.773.234C2.27 0 2.27 0 5.574 0c3.301 0 3.301 0 3.801.234.633.297 1.23.895 1.527 1.532.235.496.235.496.235 3.804 0 3.313 0 3.313-.227 3.801-.32.688-.777 1.16-1.45 1.488-.585.29-.585.29-3.714.305-2.305.02-3.234-.008-3.527-.086m6.668-1.473c.34-.18.715-.617.8-.921.036-.13.06-1.567.06-3.2 0-3.308.01-3.28-.626-3.761-.312-.243-.312-.243-3.32-.27-1.653-.02-3.145 0-3.297.027-.156.024-.434.2-.617.372-.508.48-.54.777-.461 4.12.058 2.844.058 2.844.304 3.157.489.644.59.66 4.016.644 2.531-.02 2.902-.035 3.14-.168m0 0\" />\n    </g>\n    <path d=\"m33.688 17.254-1.622-2.125 3.325-2.57a1.6 1.6 0 0 0-.696-.434 3 3 0 0 0-.957-.145q-.626.001-1.148.266a2.75 2.75 0 0 0-.903.707q-.379.445-.59 1.047c-.14.402-.206.84-.206 1.313q0 .655.246 1.257c.164.403.394.758.68 1.063q.432.46 1.019.734a3 3 0 0 0 1.27.278c.84 0 1.57-.243 2.199-.723q.942-.72 1.152-2.008l3.375.367a7.6 7.6 0 0 1-.879 2.387q-.614 1.053-1.504 1.797-.891.75-2.027 1.14a7.5 7.5 0 0 1-2.445.395 6.6 6.6 0 0 1-2.606-.512 6.1 6.1 0 0 1-2.039-1.402 6.3 6.3 0 0 1-1.32-2.11q-.474-1.223-.473-2.663-.001-1.44.473-2.676a6.2 6.2 0 0 1 1.332-2.125 6.2 6.2 0 0 1 2.043-1.387q1.177-.499 2.59-.5 2.195 0 3.777.973c1.059.644 1.855 1.582 2.398 2.804ZM47.973 6.684H46.69q-.601 0-.968.277-.366.277-.368.98v1h2.618v3.25h-2.618v9.493h-3.347V8.864c0-1.962.418-3.372 1.254-4.239q1.26-1.296 3.48-1.297h1.23ZM54.723 6.684H53.44q-.601 0-.968.277-.366.277-.368.98v1h2.618v3.25h-2.618v9.493h-3.347V8.864c0-1.962.418-3.372 1.258-4.239q1.255-1.296 3.476-1.297h1.23ZM61.21 17.254l-1.62-2.125 3.324-2.57a1.6 1.6 0 0 0-.695-.434 3 3 0 0 0-.953-.145q-.632.001-1.153.266-.52.26-.902.707-.38.445-.59 1.047-.206.603-.207 1.313 0 .655.246 1.257.252.605.68 1.063.433.46 1.023.734.586.277 1.266.278c.84 0 1.57-.243 2.2-.723q.94-.72 1.151-2.008l3.375.367a7.6 7.6 0 0 1-.878 2.387q-.614 1.053-1.504 1.797-.891.75-2.028 1.14A7.5 7.5 0 0 1 61.5 22a6.6 6.6 0 0 1-2.605-.512 6.1 6.1 0 0 1-2.04-1.402 6.3 6.3 0 0 1-1.32-2.11q-.473-1.223-.472-2.663-.001-1.44.472-2.676a6.2 6.2 0 0 1 1.332-2.125 6.2 6.2 0 0 1 2.043-1.387q1.178-.499 2.59-.5 2.199 0 3.781.973c1.055.644 1.852 1.582 2.395 2.804ZM76.805 12.348h-.758q-1.413 0-2.121.855c-.469.567-.703 1.29-.703 2.16v6.32h-3.559V8.942h3.164v2.41h.05c.317-.855.75-1.5 1.31-1.925q.838-.645 1.964-.645h.653ZM89.992 3.328v12.063c0 .89-.152 1.742-.457 2.543a6.6 6.6 0 0 1-1.285 2.113 6 6 0 0 1-1.988 1.43q-1.161.522-2.551.523a5.9 5.9 0 0 1-2.496-.523 6.1 6.1 0 0 1-1.965-1.43 6.8 6.8 0 0 1-1.293-2.125 7.3 7.3 0 0 1-.473-2.637q0-1.335.461-2.555a6.5 6.5 0 0 1 1.282-2.125 6.3 6.3 0 0 1 1.921-1.44 5.4 5.4 0 0 1 2.407-.54q.527 0 1.007.117.487.122 1.008.25v3.54a5 5 0 0 0-.851-.286 4 4 0 0 0-.953-.105q-1.285 0-2.106.879-.825.876-.824 2.293 0 1.417.809 2.296a2.65 2.65 0 0 0 2.015.875q1.359-.001 2.172-.875.811-.881.813-2.218V3.328Zm0 0\" />\n  </svg>\n);\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "footer"
  ]
}