{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-2",
  "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 { LogoIcon } 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    <footer className=\"relative mx-auto flex w-full max-w-5xl flex-col items-center justify-center rounded-t-4xl border-t bg-[radial-gradient(35%_128px_at_50%_0%,theme(colors.white/8%),transparent)] px-4 py-6 md:rounded-t-6xl md:px-6\">\n      <div className=\"-translate-x-1/2 -translate-y-1/2 absolute top-0 right-1/2 left-1/2 h-px w-1/3 rounded-full bg-foreground/20 blur\" />\n\n      <div className=\"grid w-full gap-8 xl:grid-cols-3 xl:gap-8\">\n        <AnimatedContainer className=\"space-y-4\">\n          <LogoIcon className=\"size-6\" />\n          <p className=\"mt-8 text-muted-foreground text-sm md:mt-0\">\n            &copy; {new Date().getFullYear()} freddy, All rights reserved\n          </p>\n        </AnimatedContainer>\n\n        <div className=\"mt-10 grid grid-cols-2 gap-8 md:grid-cols-4 xl:col-span-2 xl:mt-0\">\n          {footerLinks.map((section, index) => (\n            <AnimatedContainer delay={0.1 + index * 0.1} key={section.label}>\n              <div className=\"mb-10 md:mb-0\">\n                <h3 className=\"text-xs\">{section.label}</h3>\n                <ul className=\"mt-4 space-y-2 text-muted-foreground text-sm\">\n                  {section.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                        key={`${section.label}-${link.title}`}\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>\n    </footer>\n  );\n}\n\ntype ViewAnimationProps = {\n  delay?: number;\n  className?: ComponentProps<typeof motion.div>[\"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    <motion.div\n      className={className}\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    >\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"
    }
  ],
  "meta": {
    "height": "50vh"
  },
  "categories": [
    "footer"
  ],
  "type": "registry:block"
}