{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-with-minimal-outline",
  "type": "registry:block",
  "title": "Footer with Minimal Outline",
  "description": "Clean footer with minimal outlined brand text and smooth animations.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["clsx", "motion", "tailwind-merge"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/footers/footer-with-minimal-outline.tsx",
      "content": "'use client';\n\nimport { motion, type Variants } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface FooterColumn {\n  heading: string;\n  links: { text: string; url: string }[];\n}\n\ninterface FooterWithMinimalOutlineProps {\n  brandName?: string;\n  columns?: FooterColumn[];\n  copyright?: string;\n  className?: string;\n}\n\nconst defaultColumns: FooterColumn[] = [\n  {\n    heading: 'Product',\n    links: [\n      { text: 'AI Assistant', url: '#' },\n      { text: 'Automation', url: '#' },\n      { text: 'Analytics', url: '#' },\n      { text: 'Integrations', url: '#' },\n      { text: 'API', url: '#' },\n    ],\n  },\n  {\n    heading: 'Company',\n    links: [\n      { text: 'About Us', url: '#' },\n      { text: 'Careers', url: '#' },\n      { text: 'Blog', url: '#' },\n      { text: 'Press Kit', url: '#' },\n    ],\n  },\n  {\n    heading: 'Resources',\n    links: [\n      { text: 'Documentation', url: '#' },\n      { text: 'Help Center', url: '#' },\n      { text: 'Community', url: '#' },\n    ],\n  },\n  {\n    heading: 'Legal',\n    links: [\n      { text: 'Privacy', url: '#' },\n      { text: 'Terms', url: '#' },\n      { text: 'Security', url: '#' },\n    ],\n  },\n];\n\nconst containerVariants: Variants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 20 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.5, ease: 'easeOut' },\n  },\n};\n\nexport default function FooterWithMinimalOutline({\n  brandName = 'Syntara',\n  columns = defaultColumns,\n  copyright = '© 2026 Syntara AI',\n  className,\n}: FooterWithMinimalOutlineProps) {\n  return (\n    <footer\n      className={cn(\n        'relative w-full overflow-hidden bg-white px-8 py-20 dark:bg-neutral-950',\n        className\n      )}\n    >\n      <motion.div\n        variants={containerVariants}\n        initial='hidden'\n        whileInView='visible'\n        viewport={{ once: true }}\n        className='mx-auto flex max-w-7xl flex-col items-start justify-between text-sm text-neutral-500 sm:flex-row md:px-8'\n      >\n        <motion.div variants={itemVariants}>\n          <div className='mr-0 mb-4 md:mr-4 md:flex'>\n            <a\n              className='relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-black'\n              href='#'\n            >\n              <span className='font-medium text-black dark:text-white'>\n                {brandName}\n              </span>\n            </a>\n          </div>\n          <div className='mt-2 ml-2'>{copyright}</div>\n          <div className='mt-2 ml-2 text-sm text-neutral-500'>\n            All right reserved.\n          </div>\n        </motion.div>\n\n        <div className='mt-10 grid grid-cols-2 items-start gap-10 sm:grid-cols-4 sm:mt-0'>\n          {columns.map((col, ci) => (\n            <motion.div\n              key={ci}\n              variants={itemVariants}\n              className='flex w-full flex-col justify-center space-y-4'\n            >\n              <p className='font-bold text-neutral-600 transition-colors dark:text-neutral-300'>\n                {col.heading}\n              </p>\n              <ul className='list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300'>\n                {col.links.map((link, li) => (\n                  <li key={li} className='list-none'>\n                    <a\n                      className='transition-colors hover:text-neutral-800'\n                      href={link.url}\n                    >\n                      {link.text}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </motion.div>\n          ))}\n        </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 text-center font-bold text-transparent dark:[--stroke:#d4d4d4] [--stroke:#525252]'\n        style={{\n          fontSize: 'clamp(3rem, 15vw, 13rem)',\n          WebkitTextStroke: '1.5px var(--stroke, #525252)',\n        }}\n      >\n        {brandName}\n      </motion.p>\n    </footer>\n  );\n}\n\nexport { FooterWithMinimalOutline };"
    },
    {
      "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}"
    }
  ]
}