{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/facebook-icon","@efferd/instagram-icon","@efferd/linkedin-icon","@efferd/youtube-icon"],"name":"footer-3","description":"Animated footer with link sections, brand logo, and social icons.","dependencies":["motion"],"categories":["footer"],"files":[{"path":"registry/blocks/footer/3/footer.tsx","type":"registry:component","content":"\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/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\";\n\ntype FooterLink = {\n\ttitle: string;\n\thref: string;\n\ticon?: ReactNode;\n};\n\ntype FooterSection = {\n\tlabel: string;\n\tlinks: FooterLink[];\n};\n\nconst footerLinks: FooterSection[] = [\n\t{\n\t\tlabel: \"Product\",\n\t\tlinks: [\n\t\t\t{ title: \"Features\", href: \"#\" },\n\t\t\t{ title: \"Pricing\", href: \"#\" },\n\t\t\t{ title: \"Testimonials\", href: \"#\" },\n\t\t\t{ title: \"Integration\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tlabel: \"Company\",\n\t\tlinks: [\n\t\t\t{ title: \"FAQs\", href: \"#\" },\n\t\t\t{ title: \"About Us\", href: \"#\" },\n\t\t\t{ title: \"Privacy Policy\", href: \"#\" },\n\t\t\t{ title: \"T&S\", href: \"#\" },\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: \"Changelog\", href: \"#\" },\n\t\t\t{ title: \"Brand\", href: \"#\" },\n\t\t\t{ title: \"Help\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tlabel: \"Social Links\",\n\t\tlinks: [\n\t\t\t{\n\t\t\t\ttitle: \"Facebook\",\n\t\t\t\thref: \"#\",\n\t\t\t\ticon: <FacebookIcon />,\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: \"Instagram\",\n\t\t\t\thref: \"#\",\n\t\t\t\ticon: <InstagramIcon />,\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: \"Youtube\",\n\t\t\t\thref: \"#\",\n\t\t\t\ticon: <YoutubeIcon />,\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: \"LinkedIn\",\n\t\t\t\thref: \"#\",\n\t\t\t\ticon: <LinkedinIcon />,\n\t\t\t},\n\t\t],\n\t},\n];\n\nexport function Footer() {\n\treturn (\n\t\t<footer\n\t\t\tclassName={cn(\n\t\t\t\t\"relative mx-auto flex w-full max-w-5xl flex-col items-center justify-center rounded-t-4xl border-t px-6 md:rounded-t-6xl md:px-8\",\n\t\t\t\t\"dark:bg-[radial-gradient(35%_128px_at_50%_0%,--theme(--color-foreground/.1),transparent)]\"\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"absolute top-0 right-1/2 left-1/2 h-px w-1/3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/20 blur\" />\n\n\t\t\t<div className=\"grid w-full gap-8 py-6 md:py-8 lg:grid-cols-3 lg:gap-8\">\n\t\t\t\t<AnimatedContainer className=\"space-y-4\">\n\t\t\t\t\t<Logo className=\"h-4\" />\n\t\t\t\t\t<p className=\"mt-8 text-muted-foreground text-sm md:mt-0\">\n\t\t\t\t\t\tBeautify your app with efferd.\n\t\t\t\t\t</p>\n\t\t\t\t</AnimatedContainer>\n\n\t\t\t\t<div className=\"mt-10 grid grid-cols-2 gap-8 md:grid-cols-4 lg:col-span-2 lg:mt-0\">\n\t\t\t\t\t{footerLinks.map((section, index) => (\n\t\t\t\t\t\t<AnimatedContainer delay={0.1 + index * 0.1} key={section.label}>\n\t\t\t\t\t\t\t<div className=\"mb-10 md:mb-0\">\n\t\t\t\t\t\t\t\t<h3 className=\"text-xs\">{section.label}</h3>\n\t\t\t\t\t\t\t\t<ul className=\"mt-4 space-y-2 text-muted-foreground text-sm\">\n\t\t\t\t\t\t\t\t\t{section.links.map((link) => (\n\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<a\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex items-center duration-250 hover:text-foreground [&_svg]:me-1.5 [&_svg]:size-3.5\"\n\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\tkey={`${section.label}-${link.title}`}\n\t\t\t\t\t\t\t\t\t\t\t>\n\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{link.title}\n\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AnimatedContainer>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"h-px w-full bg-linear-to-r via-border\" />\n\t\t\t<div className=\"flex w-full items-center justify-center py-4\">\n\t\t\t\t<p className=\"text-muted-foreground text-sm\">\n\t\t\t\t\t&copy; {new Date().getFullYear()} efferd, All rights reserved\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</footer>\n\t);\n}\n\nfunction AnimatedContainer({\n\tclassName,\n\tdelay = 0.1,\n\tchildren,\n}: {\n\tdelay?: number;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) {\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\tclassName={className}\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>\n\t\t\t{children}\n\t\t</motion.div>\n\t);\n}\n"}]}