{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-detailed",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/footer-section/footer-detailed.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\nimport { Button } from '@repo/shadcn'\r\n\r\nconst footerLinks = [\r\n  {\r\n    title: 'Product',\r\n    links: ['Overview', 'Pricing', 'Integrations', 'Documentation'],\r\n  },\r\n  {\r\n    title: 'Company',\r\n    links: ['About Us', 'Careers', 'Brand', 'Press'],\r\n  },\r\n  {\r\n    title: 'Resources',\r\n    links: ['Blog', 'Newsletter', 'Support', 'Guides'],\r\n  },\r\n  {\r\n    title: 'Social',\r\n    links: ['Twitter', 'GitHub', 'LinkedIn', 'YouTube'],\r\n  },\r\n]\r\n\r\nexport const DetailedFooter = () => {\r\n  return (\r\n    <footer className=\"w-full bg-zinc-950 text-zinc-400 border-t border-zinc-800 min-h-screen\">\r\n      <div className=\"max-w-7xl mx-auto px-4 pt-16 pb-8 sm:px-6 lg:px-8\">\r\n        <div className=\"grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-5\">\r\n          <div className=\"col-span-2 lg:col-span-1\">\r\n            <div className=\"flex items-center gap-2 mb-6\">\r\n              <div className=\"size-8 rounded bg-white flex items-center justify-center\">\r\n                <span className=\"text-zinc-900 font-bold text-xs\">P</span>\r\n              </div>\r\n              <span className=\"text-white font-semibold tracking-tight\">\r\n                Platform\r\n              </span>\r\n            </div>\r\n            <p className=\"text-sm text-pretty leading-relaxed mb-6\">\r\n              Building the next generation of creative tools for digital\r\n              artisans.\r\n            </p>\r\n          </div>\r\n\r\n          {footerLinks.map((section) => (\r\n            <div key={section.title}>\r\n              <h3 className=\"text-xs font-semibold text-white uppercase tracking-wider mb-4\">\r\n                {section.title}\r\n              </h3>\r\n              <ul className=\"space-y-3\">\r\n                {section.links.map((link) => (\r\n                  <li key={link}>\r\n                    <a\r\n                      href=\"#\"\r\n                      className=\"text-sm hover:text-white transition-colors\"\r\n                    >\r\n                      {link}\r\n                    </a>\r\n                  </li>\r\n                ))}\r\n              </ul>\r\n            </div>\r\n          ))}\r\n        </div>\r\n\r\n        <div className=\"mt-16 pt-8 border-t border-zinc-800 flex flex-col items-center justify-between gap-4 md:flex-row\">\r\n          <div className=\"flex gap-4\">\r\n            <span className=\"text-xs\">© 2026 Platform Inc.</span>\r\n            <a href=\"#\" className=\"text-xs hover:text-white\">\r\n              Terms\r\n            </a>\r\n            <a href=\"#\" className=\"text-xs hover:text-white\">\r\n              Privacy\r\n            </a>\r\n          </div>\r\n\r\n          <form\r\n            className=\"w-full max-w-sm relative\"\r\n            onSubmit={(e) => e.preventDefault()}\r\n          >\r\n            <input\r\n              type=\"email\"\r\n              placeholder=\"Enter your email\"\r\n              className=\"w-full bg-zinc-900 border border-zinc-800 rounded-full px-4 py-2.5 pr-12 text-sm focus:outline-none focus:ring-2 focus:ring-white/20 transition-all\"\r\n            />\r\n            <Button className=\"absolute right-2 top-1/2 -translate-y-1/2 bg-white text-zinc-900 size-8 rounded-full flex items-center justify-center hover:bg-zinc-200 transition-colors\">\r\n              <svg\r\n                className=\"size-4\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n              >\r\n                <path\r\n                  strokeLinecap=\"round\"\r\n                  strokeLinejoin=\"round\"\r\n                  strokeWidth={2}\r\n                  d=\"M13 7l5 5m0 0l-5 5m5-5H6\"\r\n                />\r\n              </svg>\r\n            </Button>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </footer>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}