{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-section",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/stats-section/stats-section.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\nimport { motion } from 'motion/react'\r\n\r\nconst stats = [\r\n  { label: 'Founded', value: '2023' },\r\n  { label: 'Remote', value: '100%' },\r\n  { label: 'Capital', value: '$2.5M' },\r\n  { label: 'Partners', value: '50+' },\r\n]\r\n\r\nexport const StatsSection = () => {\r\n  return (\r\n    <section className=\"py-32 px-6 bg-neutral-950 text-white min-h-screen relative\">\r\n      <div className=\"absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(125%_125%_at_50%_10%,rgba(255,255,255,0)_40%,rgba(102,51,238,1)_100%)] pointer-events-none\"></div>\r\n      <div className=\"max-w-7xl mx-auto\">\r\n        <div className=\"grid lg:grid-cols-2 gap-24 items-center \">\r\n          <div className=\"space-y-10\">\r\n            <span className=\"inline-flex px-4 py-1.5 text-xs font-semibold border border-zinc-800 rounded-full text-zinc-500 uppercase tracking-[0.2em] bg-zinc-900/50\">\r\n              Agency Metrics\r\n            </span>\r\n            <h2 className=\"text-6xl md:text-7xl font-bold font-dmSans tracking-tighter text-balance leading-none\">\r\n              Our Existence <br />\r\n              <span className=\"text-zinc-600\">Explained.</span>\r\n            </h2>\r\n            <div className=\"grid grid-cols-2 gap-x-12 gap-y-16 pt-12\">\r\n              {stats.map((stat, i) => (\r\n                <motion.div\r\n                  key={stat.label}\r\n                  initial={{ opacity: 0, x: -10 }}\r\n                  whileInView={{ opacity: 1, x: 0 }}\r\n                  viewport={{ once: true }}\r\n                  transition={{\r\n                    duration: 0.3,\r\n                    delay: i * 0.05,\r\n                    ease: 'easeOut',\r\n                  }}\r\n                >\r\n                  <div className=\"text-5xl font-semibold mb-2 tracking-tighter\">\r\n                    {stat.value}\r\n                  </div>\r\n                  <div className=\"text-sm font-medium text-zinc-500 uppercase tracking-widest\">\r\n                    {stat.label}\r\n                  </div>\r\n                </motion.div>\r\n              ))}\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"relative group\">\r\n            <div className=\"absolute -inset-20 bg-linear-to-tr from-white/15 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-1000 blur-3xl pointer-events-none\" />\r\n            <div className=\"space-y-8 relative z-10\">\r\n              <p className=\"text-xl md:text-2xl text-zinc-400 leading-relaxed text-pretty font-medium\">\r\n                We recognized a demand for solutions that empower enterprises to\r\n                distill exponential information into its purest and most\r\n                simplistic form.\r\n              </p>\r\n              <div className=\"h-px w-20 bg-zinc-800\" />\r\n              <p className=\"text-lg text-zinc-500 leading-relaxed text-pretty\">\r\n                Looking at the market, we encountered software solutions that\r\n                struggled to handle considerable, ever-changing data\r\n                complexities. We saw tools that needed to be faster, more\r\n                convenient, and more precise for effective deployment.\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\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"
}