{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-5",
  "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 { LogoIcon } 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(colors.foreground/6%)_0,hsla(0,0%,55%,.02)_50%,theme(colors.foreground/1%)_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(colors.foreground/4%)_0,theme(colors.foreground/1%)_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(colors.foreground/4%)_0,theme(colors.foreground/1%)_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                <LogoIcon className=\"size-6\" />\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()} freddy, 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": "\"use client\";\n\nimport Image from \"next/image\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype LogoProps = {\n  className?: string;\n};\n\nexport const LogoIcon = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block size-6 animate-pulse rounded-full bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-icon-light.png\"\n      : \"/logo/freddy-logo-icon-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"size-6 object-contain\", className)}\n      height={250}\n      priority\n      src={src}\n      width={250}\n    />\n  );\n};\n\nexport const Logo = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block h-6 w-24 animate-pulse rounded bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-light.png\"\n      : \"/logo/freddy-logo-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"h-6 w-auto object-contain\", className)}\n      height={106}\n      priority\n      src={src}\n      width={344}\n    />\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "footer"
  ],
  "type": "registry:block"
}