{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["lucide-react","motion"],"description":"Mega footer with newsletter and social links","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { Github, Linkedin, Twitter, Youtube } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nconst ANIMATION_DURATION = 0.25;\nconst DELAY_INCREMENT = 0.05;\nconst HOVER_SCALE = 1.1;\nconst TAP_SCALE = 0.95;\nconst DELAY_NEWSLETTER = 6;\nconst DELAY_BOTTOM = 7;\n\nexport interface FooterMegaProps {\n  columns?: Array<{\n    title: string;\n    links: Array<{ label: string; href: string }>;\n  }>;\n  copyright?: string;\n  description?: string;\n  logo?: ReactNode;\n  newsletter?: {\n    title: string;\n    description: string;\n    placeholder: string;\n    buttonText: string;\n  };\n  socialLinks?: Array<{\n    icon: ReactNode;\n    href: string;\n    label: string;\n  }>;\n}\n\nconst defaultColumns = [\n  {\n    links: [\n      { href: \"#features\", label: \"Features\" },\n      { href: \"#pricing\", label: \"Pricing\" },\n      { href: \"#changelog\", label: \"Changelog\" },\n      { href: \"#docs\", label: \"Documentation\" },\n    ],\n    title: \"Product\",\n  },\n  {\n    links: [\n      { href: \"#about\", label: \"About\" },\n      { href: \"#blog\", label: \"Blog\" },\n      { href: \"#careers\", label: \"Careers\" },\n      { href: \"#contact\", label: \"Contact\" },\n    ],\n    title: \"Company\",\n  },\n  {\n    links: [\n      { href: \"#community\", label: \"Community\" },\n      { href: \"#github\", label: \"GitHub\" },\n      { href: \"#discord\", label: \"Discord\" },\n      { href: \"#help\", label: \"Help Center\" },\n    ],\n    title: \"Resources\",\n  },\n  {\n    links: [\n      { href: \"#privacy\", label: \"Privacy Policy\" },\n      { href: \"#terms\", label: \"Terms of Service\" },\n      { href: \"#cookies\", label: \"Cookie Policy\" },\n    ],\n    title: \"Legal\",\n  },\n];\n\nconst defaultSocialLinks = [\n  {\n    href: \"https://twitter.com\",\n    icon: <Twitter className=\"h-5 w-5\" />,\n    label: \"Twitter\",\n  },\n  {\n    href: \"https://github.com\",\n    icon: <Github className=\"h-5 w-5\" />,\n    label: \"GitHub\",\n  },\n  {\n    href: \"https://linkedin.com\",\n    icon: <Linkedin className=\"h-5 w-5\" />,\n    label: \"LinkedIn\",\n  },\n  {\n    href: \"https://youtube.com\",\n    icon: <Youtube className=\"h-5 w-5\" />,\n    label: \"YouTube\",\n  },\n];\n\nexport const FooterMega = ({\n  logo = <span className=\"font-bold text-2xl text-foreground\">SmoothUI</span>,\n  description = \"Beautiful animated React components for building modern user interfaces with smooth animations and delightful interactions.\",\n  columns = defaultColumns,\n  newsletter = {\n    buttonText: \"Subscribe\",\n    description: \"Get the latest updates and news delivered to your inbox.\",\n    placeholder: \"Enter your email\",\n    title: \"Subscribe to our newsletter\",\n  },\n  socialLinks = defaultSocialLinks,\n  copyright = \"© 2024 SmoothUI. All rights reserved.\",\n}: FooterMegaProps) => {\n  const shouldReduceMotion = useReducedMotion();\n\n  const getAnimationProps = (delay = 0) => {\n    if (shouldReduceMotion) {\n      return {\n        animate: { opacity: 1 },\n        initial: { opacity: 1 },\n        transition: { duration: 0 },\n      };\n    }\n\n    return {\n      initial: { opacity: 0, y: 20 },\n      transition: {\n        bounce: 0.1,\n        delay,\n        duration: ANIMATION_DURATION,\n        type: \"spring\" as const,\n      },\n      viewport: { once: true },\n      whileInView: { opacity: 1, y: 0 },\n    };\n  };\n\n  const getHoverProps = () => {\n    if (shouldReduceMotion) {\n      return {};\n    }\n\n    return {\n      whileHover: { scale: HOVER_SCALE },\n      whileTap: { scale: TAP_SCALE },\n    };\n  };\n\n  return (\n    <footer className=\"border-border border-t bg-background\">\n      <div className=\"mx-auto max-w-7xl px-6 py-16\">\n        {/* Top Section: Logo, Description, Columns, Newsletter */}\n        <motion.div\n          {...getAnimationProps()}\n          className=\"grid grid-cols-1 gap-12 lg:grid-cols-12\"\n        >\n          {/* Logo and Description */}\n          <motion.div\n            {...getAnimationProps(DELAY_INCREMENT)}\n            className=\"lg:col-span-3\"\n          >\n            <div className=\"mb-4\">{logo}</div>\n            <p className=\"text-foreground/70 text-sm leading-relaxed\">\n              {description}\n            </p>\n          </motion.div>\n\n          {/* Link Columns */}\n          <div className=\"grid grid-cols-2 gap-8 sm:grid-cols-4 lg:col-span-5\">\n            {columns.map((column, columnIndex) => (\n              <motion.div\n                key={column.title}\n                {...getAnimationProps(DELAY_INCREMENT * (columnIndex + 2))}\n              >\n                <h4 className=\"mb-4 font-semibold text-foreground text-sm uppercase tracking-wide\">\n                  {column.title}\n                </h4>\n                <ul className=\"space-y-3\">\n                  {column.links.map((link) => (\n                    <li key={link.label}>\n                      <a\n                        className=\"text-foreground/70 text-sm transition-colors hover:text-brand\"\n                        href={link.href}\n                      >\n                        {link.label}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </motion.div>\n            ))}\n          </div>\n\n          {/* Newsletter */}\n          <motion.div\n            {...getAnimationProps(DELAY_INCREMENT * DELAY_NEWSLETTER)}\n            className=\"lg:col-span-4\"\n          >\n            <h4 className=\"mb-2 font-semibold text-foreground text-lg\">\n              {newsletter.title}\n            </h4>\n            <p className=\"mb-4 text-foreground/70 text-sm\">\n              {newsletter.description}\n            </p>\n            <form\n              className=\"flex flex-col gap-3 sm:flex-row\"\n              onSubmit={(e) => e.preventDefault()}\n            >\n              <input\n                aria-label=\"Email address\"\n                className=\"flex-1 rounded-lg border border-border bg-background px-4 py-2.5 text-sm placeholder:text-foreground/50 focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20\"\n                placeholder={newsletter.placeholder}\n                type=\"email\"\n              />\n              <SmoothButton type=\"submit\" variant=\"candy\">\n                {newsletter.buttonText}\n              </SmoothButton>\n            </form>\n          </motion.div>\n        </motion.div>\n\n        {/* Bottom Section: Copyright and Social Links */}\n        <motion.div\n          {...getAnimationProps(DELAY_INCREMENT * DELAY_BOTTOM)}\n          className=\"mt-12 flex flex-col items-center justify-between gap-6 border-border border-t pt-8 sm:flex-row\"\n        >\n          <p className=\"text-foreground/60 text-sm\">{copyright}</p>\n\n          <div className=\"flex gap-4\">\n            {socialLinks.map((social) => (\n              <motion.a\n                aria-label={social.label}\n                className=\"text-foreground/60 transition-colors hover:text-brand\"\n                href={social.href}\n                key={social.label}\n                rel=\"noopener noreferrer\"\n                target=\"_blank\"\n                {...getHoverProps()}\n              >\n                {social.icon}\n                <span className=\"sr-only\">{social.label}</span>\n              </motion.a>\n            ))}\n          </div>\n        </motion.div>\n      </div>\n    </footer>\n  );\n};\n\nexport default FooterMega;\n","path":"index.tsx","target":"components/smoothui/footer-3/index.tsx","type":"registry:block"}],"name":"footer-3","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Footer 3","type":"registry:block"}