{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-1",
  "description": "Clean footer with company links, resources, and social icons.",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/footer/1/footer.tsx",
      "content": "import {\n  FacebookIcon,\n  GithubIcon,\n  InstagramIcon,\n  LinkedinIcon,\n  TwitterIcon,\n  YoutubeIcon,\n} from \"lucide-react\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Footer() {\n  const company = [\n    {\n      title: \"About Us\",\n      href: \"#\",\n    },\n    {\n      title: \"Careers\",\n      href: \"#\",\n    },\n    {\n      title: \"Brand assets\",\n      href: \"#\",\n    },\n    {\n      title: \"Privacy Policy\",\n      href: \"#\",\n    },\n    {\n      title: \"Terms of Service\",\n      href: \"#\",\n    },\n  ];\n\n  const resources = [\n    {\n      title: \"Blog\",\n      href: \"#\",\n    },\n    {\n      title: \"Help Center\",\n      href: \"#\",\n    },\n    {\n      title: \"Contact Support\",\n      href: \"#\",\n    },\n    {\n      title: \"Community\",\n      href: \"#\",\n    },\n    {\n      title: \"Security\",\n      href: \"#\",\n    },\n  ];\n\n  const socialLinks = [\n    {\n      icon: FacebookIcon,\n      link: \"#\",\n    },\n    {\n      icon: GithubIcon,\n      link: \"#\",\n    },\n    {\n      icon: InstagramIcon,\n      link: \"#\",\n    },\n    {\n      icon: LinkedinIcon,\n      link: \"#\",\n    },\n    {\n      icon: TwitterIcon,\n      link: \"#\",\n    },\n    {\n      icon: YoutubeIcon,\n      link: \"#\",\n    },\n  ];\n  return (\n    <footer className=\"relative\">\n      <div\n        className={cn(\n          \"mx-auto max-w-5xl lg:border-x\",\n          \"dark:bg-[radial-gradient(35%_80%_at_30%_0%,theme(colors.foreground/10%),transparent)]\"\n        )}\n      >\n        <div className=\"absolute inset-x-0 h-px w-full bg-border\" />\n        <div className=\"grid max-w-5xl grid-cols-6 gap-6 p-4\">\n          <div className=\"col-span-6 flex flex-col gap-4 pt-5 md:col-span-4\">\n            <a className=\"w-max\" href=\"#\">\n              <LogoIcon className=\"size-6\" />\n            </a>\n            <p className=\"max-w-sm text-balance font-mono text-muted-foreground text-sm\">\n              A comprehensive financial technology platform.\n            </p>\n            <div className=\"flex gap-2\">\n              {socialLinks.map((item, index) => (\n                <Button\n                  key={`social-${item.link}-${index}`}\n                  size=\"icon-sm\"\n                  variant=\"outline\"\n                >\n                  <a href={item.link} target=\"_blank\">\n                    <item.icon className=\"size-3.5\" />\n                  </a>\n                </Button>\n              ))}\n            </div>\n          </div>\n          <div className=\"col-span-3 w-full md:col-span-1\">\n            <span className=\"text-muted-foreground text-xs\">Resources</span>\n            <div className=\"mt-2 flex flex-col gap-2\">\n              {resources.map(({ href, title }) => (\n                <a\n                  className=\"w-max text-sm hover:underline\"\n                  href={href}\n                  key={title}\n                >\n                  {title}\n                </a>\n              ))}\n            </div>\n          </div>\n          <div className=\"col-span-3 w-full md:col-span-1\">\n            <span className=\"text-muted-foreground text-xs\">Company</span>\n            <div className=\"mt-2 flex flex-col gap-2\">\n              {company.map(({ href, title }) => (\n                <a\n                  className=\"w-max text-sm hover:underline\"\n                  href={href}\n                  key={title}\n                >\n                  {title}\n                </a>\n              ))}\n            </div>\n          </div>\n        </div>\n        <div className=\"absolute inset-x-0 h-px w-full bg-border\" />\n        <div className=\"flex max-w-4xl flex-col justify-between gap-2 py-4\">\n          <p className=\"text-center font-light text-muted-foreground text-sm\">\n            &copy; {new Date().getFullYear()} freddy, All rights reserved\n          </p>\n        </div>\n      </div>\n    </footer>\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": "40vh"
  },
  "categories": [
    "footer"
  ],
  "type": "registry:block"
}