{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-with-faded-brand",
  "type": "registry:block",
  "title": "Footer with Faded Brand",
  "description": "Modern footer with oversized faded brand name and smooth transitions.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["clsx", "lucide-react", "motion", "tailwind-merge"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/footers/footer-with-faded-brand.tsx",
      "content": "'use client';\n\nimport { motion, type Variants } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { Twitter, Github, Linkedin } from 'lucide-react';\n\ninterface FooterColumn {\n  heading: string;\n  links: { text: string; url: string }[];\n}\n\ninterface FooterBrandProps {\n  brandName?: string;\n  tagline?: string;\n  columns?: FooterColumn[];\n  socials?: {\n    twitter?: string;\n    github?: string;\n    linkedin?: string;\n  };\n  copyright?: string;\n  legalLinks?: { text: string; url: string }[];\n  className?: string;\n}\n\nconst defaultColumns: FooterColumn[] = [\n  {\n    heading: 'Product',\n    links: [\n      { text: 'Features', url: '#' },\n      { text: 'Pricing', url: '#' },\n      { text: 'Changelog', url: '#' },\n      { text: 'Roadmap', url: '#' },\n    ],\n  },\n  {\n    heading: 'Company',\n    links: [\n      { text: 'About', url: '#' },\n      { text: 'Blog', url: '#' },\n      { text: 'Careers', url: '#' },\n      { text: 'Press', url: '#' },\n    ],\n  },\n  {\n    heading: 'Resources',\n    links: [\n      { text: 'Documentation', url: '#' },\n      { text: 'API Reference', url: '#' },\n      { text: 'Status', url: '#' },\n      { text: 'Community', url: '#' },\n    ],\n  },\n];\n\nconst defaultLegalLinks = [\n  { text: 'Terms', url: '#' },\n  { text: 'Privacy', url: '#' },\n  { text: 'Cookies', url: '#' },\n];\n\nconst containerVariants: Variants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 14 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.5, ease: 'easeOut' },\n  },\n};\n\nexport default function FooterWithFadedBrand({\n  brandName = 'NeuralOS',\n  tagline = 'Intelligence, Engineered.',\n  columns = defaultColumns,\n  socials = { twitter: '#', github: '#', linkedin: '#' },\n  copyright = '© 2026 NeuralOS, Inc. All rights reserved.',\n  legalLinks = defaultLegalLinks,\n  className,\n}: FooterBrandProps) {\n  return (\n    <footer\n      className={cn(\n        'w-full relative overflow-hidden bg-white dark:bg-neutral-950 select-none',\n        className\n      )}\n    >\n      <motion.div\n        variants={containerVariants}\n        initial='hidden'\n        whileInView='visible'\n        viewport={{ once: true }}\n        className='relative z-10 px-8 pt-16 pb-10 md:px-16 md:pt-16'\n      >\n        <motion.p\n          variants={itemVariants}\n          className='text-xs font-semibold tracking-[0.2em] uppercase mb-10 text-zinc-400 dark:text-zinc-500'\n        >\n          {tagline}\n        </motion.p>\n\n        <div className='flex flex-col gap-10 md:flex-row md:justify-between md:items-start'>\n          <div className='grid grid-cols-2 gap-x-12 gap-y-8 md:grid-cols-3 md:gap-x-20'>\n            {columns.map((col, ci) => (\n              <motion.div key={ci} variants={itemVariants}>\n                <p className='text-[11px] font-semibold tracking-widest uppercase mb-4 text-zinc-400 dark:text-zinc-500'>\n                  {col.heading}\n                </p>\n                <ul className='flex flex-col gap-3'>\n                  {col.links.map((link, li) => (\n                    <li key={li}>\n                      <a\n                        href={link.url}\n                        className='text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-colors duration-200'\n                      >\n                        {link.text}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </motion.div>\n            ))}\n          </div>\n\n          <motion.div variants={itemVariants} className='md:text-right'>\n            <p className='text-[11px] font-semibold tracking-widest uppercase mb-4 text-zinc-400 dark:text-zinc-500'>\n              Social\n            </p>\n            <div className='flex items-center gap-3 md:justify-end'>\n              {socials.twitter && (\n                <a\n                  href={socials.twitter}\n                  aria-label='Twitter / X'\n                  className='flex items-center justify-center w-9 h-9 rounded-full bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-300 dark:hover:bg-zinc-700 hover:text-zinc-900 dark:hover:text-white transition-all duration-200'\n                >\n                  <Twitter className='w-3.75 h-3.75' />\n                </a>\n              )}\n              {socials.github && (\n                <a\n                  href={socials.github}\n                  aria-label='GitHub'\n                  className='flex items-center justify-center w-9 h-9 rounded-full bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-300 dark:hover:bg-zinc-700 hover:text-zinc-900 dark:hover:text-white transition-all duration-200'\n                >\n                  <Github className='w-3.75 h-3.75' />\n                </a>\n              )}\n              {socials.linkedin && (\n                <a\n                  href={socials.linkedin}\n                  aria-label='LinkedIn'\n                  className='flex items-center justify-center w-9 h-9 rounded-full bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-300 dark:hover:bg-zinc-700 hover:text-zinc-900 dark:hover:text-white transition-all duration-200'\n                >\n                  <Linkedin className='w-3.75 h-3.75' />\n                </a>\n              )}\n            </div>\n          </motion.div>\n        </div>\n\n        <motion.div\n          variants={itemVariants}\n          className='mt-12 border-t border-zinc-300 dark:border-zinc-800'\n        />\n\n        <motion.div\n          variants={itemVariants}\n          className='mt-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between'\n        >\n          <p className='text-xs text-zinc-400 dark:text-zinc-500'>\n            {copyright}\n          </p>\n          <div className='flex items-center gap-5'>\n            {legalLinks.map((l, i) => (\n              <a\n                key={i}\n                href={l.url}\n                className='text-xs text-zinc-400 dark:text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors'\n              >\n                {l.text}\n              </a>\n            ))}\n          </div>\n        </motion.div>\n      </motion.div>\n\n      <motion.p \n        initial={{ opacity: 0, y: 40 }}\n        whileInView={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.8, ease: 'easeOut' }}\n        viewport={{ once: true }}\n        className='inset-x-0 mt-20 bg-linear-to-b from-neutral-50 to-neutral-200 bg-clip-text text-center font-bold text-transparent dark:from-neutral-950 dark:to-neutral-800'\n        style={{\n          fontSize: 'clamp(3rem, 15vw, 13rem)',\n        }}\n      >\n        {brandName}\n      </motion.p>\n    </footer>\n  );\n}\n\nexport { FooterWithFadedBrand };"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}