{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footer-2", "type": "registry:block", "description": "Animated footer with link sections, brand logo, and social icons.", "dependencies": [ "motion" ], "files": [ { "path": "registry/blocks/footer/2/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 type { ComponentProps, ReactNode } from \"react\";\nimport { Logo } from \"@/components/logo\";\n\ntype FooterLink = {\n title: string;\n href: string;\n icon?: React.ComponentType<{ className?: string }>;\n};\n\ntype FooterSection = {\n label: string;\n links: FooterLink[];\n};\n\nconst footerLinks: FooterSection[] = [\n {\n label: \"Product\",\n links: [\n { title: \"Features\", href: \"#\" },\n { title: \"Pricing\", href: \"#\" },\n { title: \"Testimonials\", href: \"#\" },\n { title: \"Integration\", href: \"#\" },\n ],\n },\n {\n label: \"Company\",\n links: [\n { title: \"FAQs\", href: \"#\" },\n { title: \"About Us\", href: \"#\" },\n { title: \"Privacy Policy\", href: \"#\" },\n { title: \"Terms of Services\", href: \"#\" },\n ],\n },\n {\n label: \"Resources\",\n links: [\n { title: \"Blog\", href: \"#\" },\n { title: \"Changelog\", href: \"#\" },\n { title: \"Brand\", href: \"#\" },\n { title: \"Help\", href: \"#\" },\n ],\n },\n {\n label: \"Social Links\",\n links: [\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 },\n];\n\nexport function Footer() {\n return (\n \n );\n}\n\ntype ViewAnimationProps = {\n delay?: number;\n className?: ComponentProps[\"className\"];\n children: ReactNode;\n};\n\nfunction AnimatedContainer({\n className,\n delay = 0.1,\n children,\n}: ViewAnimationProps) {\n const shouldReduceMotion = useReducedMotion();\n\n if (shouldReduceMotion) {\n return children;\n }\n\n return (\n \n {children}\n \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 \n \n \n \n \n \n);\n\nexport const Logo = (props: React.ComponentProps<\"svg\">) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n", "type": "registry:component" } ], "meta": { "height": "50vh" }, "categories": [ "footer" ] }