{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-banner",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/stats-section/stats-banner.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\nimport { motion } from 'motion/react'\r\n\r\nexport const StatsBanner = () => {\r\n  return (\r\n    <section className=\"py-20 px-6 bg-linear-to-b from-slate-50 to-white overflow-hidden min-h-screen\">\r\n      <div className=\"max-w-6xl mx-auto\">\r\n        <div className=\"text-center mb-12\">\r\n          <motion.h2\r\n            initial={{ opacity: 0, y: 20 }}\r\n            whileInView={{ opacity: 1, y: 0 }}\r\n            viewport={{ once: true }}\r\n            className=\"text-5xl font-semibold text-slate-900 mb-4 text-balance\"\r\n          >\r\n            Trusted by Thousands\r\n          </motion.h2>\r\n          <motion.p\r\n            initial={{ opacity: 0, y: 20 }}\r\n            whileInView={{ opacity: 1, y: 0 }}\r\n            viewport={{ once: true }}\r\n            transition={{ delay: 0.1 }}\r\n            className=\"text-slate-600 text-lg max-w-2xl mx-auto\"\r\n          >\r\n            Join businesses worldwide who've transformed their advertising with\r\n            our platform\r\n          </motion.p>\r\n        </div>\r\n\r\n        <div className=\"space-y-6\">\r\n          {/* Hero Stat */}\r\n          <motion.div\r\n            initial={{ opacity: 0, y: 30 }}\r\n            whileInView={{ opacity: 1, y: 0 }}\r\n            viewport={{ once: true }}\r\n            transition={{ delay: 0.2 }}\r\n            className=\"relative w-full rounded-3xl p-16 text-center text-white shadow-2xl shadow-blue-500/20 overflow-hidden group\"\r\n          >\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1762503203754-62c5a0c969d9?q=80&w=1492&auto=format&fit=crop\"\r\n              alt=\"gradient\"\r\n              className=\"w-full h-full object-cover absolute left-0 top-0\"\r\n            />\r\n            {/* Animated background elements */}\r\n            <div className=\"absolute inset-0 opacity-20 pointer-events-none\">\r\n              <div className=\"absolute top-10 right-10 w-32 h-32 bg-white rounded-full blur-3xl\"></div>\r\n              <div className=\"absolute bottom-10 left-10 w-40 h-40 bg-blue-300 rounded-full blur-3xl\"></div>\r\n            </div>\r\n\r\n            {/* Grid pattern overlay */}\r\n            <div className=\"absolute inset-0 opacity-5 bg-[linear-gradient(to_right,#ffffff_1px,transparent_1px),linear-gradient(to_bottom,#ffffff_1px,transparent_1px)] bg-size-[4rem_4rem]\"></div>\r\n\r\n            <div className=\"relative z-10\">\r\n              <motion.span\r\n                initial={{ scale: 0.5, opacity: 0 }}\r\n                whileInView={{ scale: 1, opacity: 1 }}\r\n                viewport={{ once: true }}\r\n                transition={{ delay: 0.3, type: 'spring', stiffness: 100 }}\r\n                className=\"text-7xl md:text-8xl font-semibold block mb-3 bg-linear-to-r from-white to-blue-100 bg-clip-text text-transparent\"\r\n              >\r\n                500K+\r\n              </motion.span>\r\n              <p className=\"text-xl md:text-2xl font-medium text-blue-50\">\r\n                Campaigns Successfully Managed\r\n              </p>\r\n            </div>\r\n          </motion.div>\r\n\r\n          {/* Secondary Stats Grid */}\r\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n            <StatBox number=\"300K+\" label=\"Ads Optimized Daily\" delay={0.3} />\r\n            <StatBox number=\"140K+\" label=\"Campaigns Built\" delay={0.4} />\r\n            <StatBox number=\"100K+\" label=\"Happy Customers\" delay={0.5} />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n\r\nconst StatBox = ({\r\n  number,\r\n  label,\r\n  delay,\r\n}: {\r\n  number: string\r\n  label: string\r\n  delay: number\r\n}) => (\r\n  <motion.div\r\n    initial={{ opacity: 0, y: 20 }}\r\n    whileInView={{ opacity: 1, y: 0 }}\r\n    viewport={{ once: true }}\r\n    transition={{ delay }}\r\n    whileHover={{ y: -4, transition: { duration: 0.2 } }}\r\n    className=\"bg-white rounded-2xl p-8 text-center border border-slate-200 shadow-lg shadow-slate-200/50 hover:shadow-xl hover:shadow-slate-300/50 hover:border-blue-200 transition-all duration-300 group\"\r\n  >\r\n    <span className=\"text-4xl md:text-5xl font-semibold text-slate-900 block mb-3 transition-colors\">\r\n      {number}\r\n    </span>\r\n    <p className=\"text-slate-600 text-base font-medium\">{label}</p>\r\n  </motion.div>\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"
}