{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-details",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/stats-section/stats-details.tsx",
      "content": "import React from 'react'\r\nimport { TrendingUp, Users, Database } from 'lucide-react'\r\n\r\nconst stats = [\r\n  {\r\n    label: 'Revenue Growth',\r\n    value: '+142%',\r\n    description: 'Year-over-year increase in recurring revenue streams.',\r\n    icon: <TrendingUp className=\"w-5 h-5\" />,\r\n  },\r\n  {\r\n    label: 'Customer Retention',\r\n    value: '94%',\r\n    description: 'Average retention rate across our enterprise tier.',\r\n    icon: <Users className=\"w-5 h-5\" />,\r\n  },\r\n  {\r\n    label: 'Data Processed',\r\n    value: '14PB',\r\n    description: 'Petabytes of raw telemetry processed daily across nodes.',\r\n    icon: <Database className=\"w-5 h-5\" />,\r\n  },\r\n]\r\n\r\nexport const DetailedStats = () => {\r\n  return (\r\n    <section className=\"bg-white min-h-screen flex flex-col justify-center\">\r\n      <div className=\"max-w-7xl mx-auto px-5\">\r\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n          {stats.map((stat) => (\r\n            <div\r\n              key={stat.label}\r\n              className=\"group p-8 rounded-2xl relative overflow-hidden bg-zinc-50 border border-zinc-100 hover:border-zinc-200 transition-colors\"\r\n            >\r\n              <article className=\"relative z-10\">\r\n                <div className=\"size-8 rounded-lg bg-white group-hover:bg-orange-600 border border-zinc-200 flex items-center justify-center text-lg font-bold text-zinc-900 mb-6 group-hover:text-white transition-colors\">\r\n                  {stat.icon}\r\n                </div>\r\n                <h3 className=\"text-xs font-bold uppercase tracking-widest group-hover:text-zinc-100 text-zinc-400 mb-2\">\r\n                  {stat.label}\r\n                </h3>\r\n                <p className=\"text-4xl font-semibold tracking-tight group-hover:text-white text-zinc-900 mb-4 \">\r\n                  {stat.value}\r\n                </p>\r\n                <p className=\"text-sm group-hover:text-zinc-100 text-zinc-500 text-pretty leading-relaxed\">\r\n                  {stat.description}\r\n                </p>\r\n              </article>\r\n              <img\r\n                src=\"https://images.unsplash.com/photo-1604076984203-587c92ab2e58?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n                alt=\"supportive img\"\r\n                className=\"absolute top-0 left-0 w-full object-fill opacity-0 group-hover:opacity-100 pointer-events-none\"\r\n              />\r\n            </div>\r\n          ))}\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"
}