{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["button","@efferd/logo","@efferd/facebook-icon","@efferd/instagram-icon","@efferd/linkedin-icon","@efferd/youtube-icon"],"name":"footer-6","description":"Sticky layered footer with gradient background, social icons, and animated link groups.","dependencies":["motion"],"categories":["footer"],"files":[{"path":"registry/blocks/footer/6/footer.tsx","type":"registry:component","content":"\"use client\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\nimport type { ReactNode } from \"react\";\nimport { FacebookIcon } from \"@/components/icons/facebook-icon\";\nimport { InstagramIcon } from \"@/components/icons/instagram-icon\";\nimport { LinkedinIcon } from \"@/components/icons/linkedin-icon\";\nimport { YoutubeIcon } from \"@/components/icons/youtube-icon\";\nimport { Logo } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\n\ntype FooterLink = {\n\ttitle: string;\n\thref: string;\n\ticon?: ReactNode;\n};\ntype FooterLinkGroup = {\n\tlabel: string;\n\tlinks: FooterLink[];\n};\n\nexport function StickyFooter() {\n\treturn (\n\t\t<footer\n\t\t\tclassName=\"relative h-(--footer-height) w-full border-t [--footer-height:520px]\"\n\t\t\tstyle={{ clipPath: \"polygon(0% 0, 100% 0%, 100% 100%, 0 100%)\" }}\n\t\t>\n\t\t\t<div className=\"fixed bottom-0 h-(--footer-height) w-full\">\n\t\t\t\t<div className=\"sticky top-[calc(100vh-var(--footer-height))] h-full overflow-y-auto\">\n\t\t\t\t\t<div\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\tclassName=\"absolute inset-0 isolate z-0 opacity-50 contain-strict dark:opacity-60\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"absolute top-0 left-0 h-320 w-140 -translate-y-87.5 -rotate-45 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\t\t\t\t\t\t<div className=\"absolute top-0 left-0 h-320 w-60 -rotate-45 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\t\t\t\t\t\t<div className=\"absolute top-0 left-0 h-320 w-60 -translate-y-87.5 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)]\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"relative mx-auto flex size-full max-w-6xl flex-col justify-between gap-5\">\n\t\t\t\t\t\t<div className=\"grid grid-cols-1 gap-8 px-4 pt-12 md:grid-cols-2 lg:grid-cols-4\">\n\t\t\t\t\t\t\t<AnimatedContainer className=\"w-full space-y-4\">\n\t\t\t\t\t\t\t\t<Logo className=\"h-5\" />\n\t\t\t\t\t\t\t\t<p className=\"mt-8 text-muted-foreground text-sm md:mt-0\">\n\t\t\t\t\t\t\t\t\tBeautifully crafted shadcn blocks by efferd.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t\t\t\t{socialLinks.map((link, index) => (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t\t\t\t\tkey={`social-${link.href}-${index}`}\n\t\t\t\t\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<a href={link.href}>{link.icon}</a>\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</AnimatedContainer>\n\t\t\t\t\t\t\t{footerLinkGroups.map((group, index) => (\n\t\t\t\t\t\t\t\t<AnimatedContainer\n\t\t\t\t\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\t\t\t\t\tdelay={0.1 + index * 0.1}\n\t\t\t\t\t\t\t\t\tkey={group.label}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"mb-10 md:mb-0\">\n\t\t\t\t\t\t\t\t\t\t<h3 className=\"text-sm uppercase\">{group.label}</h3>\n\t\t\t\t\t\t\t\t\t\t<ul className=\"mt-4 space-y-2 text-muted-foreground text-sm md:text-xs lg:text-sm\">\n\t\t\t\t\t\t\t\t\t\t\t{group.links.map((link) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li key={link.title}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex items-center hover:text-foreground [&_svg]:me-1 [&_svg]:size-4\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thref={link.href}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{link.icon}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{link.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</AnimatedContainer>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex flex-col items-center justify-between gap-2 border-t p-4 text-muted-foreground text-sm md:flex-row\">\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t&copy; {new Date().getFullYear()} efferd, All rights reserved.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<a className=\"hover:text-foreground\" href=\"#\">\n\t\t\t\t\t\t\t\tLicense\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</footer>\n\t);\n}\n\nconst socialLinks = [\n\t{\n\t\ttitle: \"Facebook\",\n\t\thref: \"#\",\n\t\ticon: <FacebookIcon />,\n\t},\n\t{\n\t\ttitle: \"Instagram\",\n\t\thref: \"#\",\n\t\ticon: <InstagramIcon />,\n\t},\n\t{\n\t\ttitle: \"Youtube\",\n\t\thref: \"#\",\n\t\ticon: <YoutubeIcon />,\n\t},\n\t{\n\t\ttitle: \"LinkedIn\",\n\t\thref: \"#\",\n\t\ticon: <LinkedinIcon />,\n\t},\n];\n\nconst footerLinkGroups: FooterLinkGroup[] = [\n\t{\n\t\tlabel: \"Product\",\n\t\tlinks: [\n\t\t\t{ title: \"Payments\", href: \"#\" },\n\t\t\t{ title: \"Cards & Issuing\", href: \"#\" },\n\t\t\t{ title: \"Lending & Credit\", href: \"#\" },\n\t\t\t{ title: \"Wealth Management\", href: \"#\" },\n\t\t\t{ title: \"Insurance\", href: \"#\" },\n\t\t\t{ title: \"Crypto Wallets\", href: \"#\" },\n\t\t\t{ title: \"Treasury Management\", href: \"#\" },\n\t\t\t{ title: \"Merchant Services\", href: \"#\" },\n\t\t\t{ title: \"Point of Sale\", href: \"#\" },\n\t\t\t{ title: \"Embedded Finance\", href: \"#\" },\n\t\t\t{ title: \"Open Banking API\", href: \"#\" },\n\t\t\t{ title: \"SDKs & Integrations\", href: \"#\" },\n\t\t\t{ title: \"Pricing\", href: \"/pricing\" },\n\t\t],\n\t},\n\t{\n\t\tlabel: \"Resources\",\n\t\tlinks: [\n\t\t\t{ title: \"Blog\", href: \"#\" },\n\t\t\t{ title: \"Case Studies\", href: \"#\" },\n\t\t\t{ title: \"Documentation\", href: \"#\" },\n\t\t\t{ title: \"API Reference\", href: \"#\" },\n\t\t\t{ title: \"Developer Tools\", href: \"#\" },\n\t\t\t{ title: \"Whitepapers\", href: \"#\" },\n\t\t\t{ title: \"Reports & Research\", href: \"#\" },\n\t\t\t{ title: \"Events & Webinars\", href: \"#\" },\n\t\t\t{ title: \"E-books\", href: \"#\" },\n\t\t\t{ title: \"Community Forum\", href: \"#\" },\n\t\t\t{ title: \"Release Notes\", href: \"#\" },\n\t\t\t{ title: \"System Status\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tlabel: \"Company\",\n\t\tlinks: [\n\t\t\t{ title: \"About Us\", href: \"#\" },\n\t\t\t{ title: \"Leadership\", href: \"#\" },\n\t\t\t{ title: \"Careers\", href: \"#\" },\n\t\t\t{ title: \"Press\", href: \"#\" },\n\t\t\t{ title: \"Sustainability\", href: \"#\" },\n\t\t\t{ title: \"Diversity & Inclusion\", href: \"#\" },\n\t\t\t{ title: \"Investor Relations\", href: \"#\" },\n\t\t\t{ title: \"Partners\", href: \"#\" },\n\t\t\t{ title: \"Legal & Compliance\", href: \"#\" },\n\t\t\t{ title: \"Privacy Policy\", href: \"#\" },\n\t\t\t{ title: \"Cookie Policy\", href: \"#\" },\n\t\t\t{ title: \"Terms of Service\", href: \"#\" },\n\t\t\t{ title: \"AML & KYC Policy\", href: \"#\" },\n\t\t],\n\t},\n];\n\ntype AnimatedContainerProps = React.ComponentProps<typeof motion.div> & {\n\tchildren?: React.ReactNode;\n\tdelay?: number;\n};\n\nfunction AnimatedContainer({\n\tdelay = 0.1,\n\tchildren,\n\t...props\n}: AnimatedContainerProps) {\n\tconst shouldReduceMotion = useReducedMotion();\n\n\tif (shouldReduceMotion) {\n\t\treturn children;\n\t}\n\n\treturn (\n\t\t<motion.div\n\t\t\tinitial={{ filter: \"blur(4px)\", translateY: -8, opacity: 0 }}\n\t\t\ttransition={{ delay, duration: 0.8 }}\n\t\t\tviewport={{ once: true }}\n\t\t\twhileInView={{ filter: \"blur(0px)\", translateY: 0, opacity: 1 }}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</motion.div>\n\t);\n}\n"}]}