{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-cards",
  "title": "Stats Cards",
  "description": "A set of animated statistic cards with hover effects.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/stats-cards/stats-cards.tsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport { cn } from \"@/lib/utils\";\nimport { LazyMotion, domAnimation, m } from \"motion/react\";\nimport { Inter } from \"next/font/google\";\n\nconst inter = Inter({ subsets: [\"latin\"] });\n\ninterface StatsCardsProps {\n  className?: string;\n  width?: string;\n  height?: string;\n  images?: string[];\n}\n\nexport function StatsCards({\n  className,\n  width = \"w-70\",\n  height = \"h-84\",\n  images = [\"/images/models/1.png\", \"/images/models/2.png\"],\n}: StatsCardsProps) {\n  return (\n    <LazyMotion features={domAnimation}>\n      <div\n        className={cn(\n          \"flex flex-wrap items-center justify-center gap-6 sm:gap-4 md:gap-0 px-4 py-4 bg-orange-50\",\n          inter.className,\n          className\n        )}\n      >\n        {/* Card 1: Revenue */}\n        <m.div\n          className={cn(\n            `relative z-10 ${width} ${height} bg-white rounded-[16px] p-5 flex flex-col justify-between hover:z-50`\n          )}\n          initial={{\n            rotate: -3,\n          }}\n          whileHover={{\n            rotate: 0,\n            scale: 1.05,\n            transition: { duration: 0.3, ease: \"easeInOut\" },\n          }}\n        >\n          <div>\n            <h2 className=\"text-[#FF4400] text-5xl font-semibold tracking-tighter\">\n              $100k+\n            </h2>\n          </div>\n          <div>\n            <h4 className=\"text-[#FF4400] font-medium text-lg leading-tight tracking-tighter\">\n              Revenue driven\n            </h4>\n            <div className=\"w-full h-px bg-[#FF4400] my-2\"></div>\n            <p className=\"text-[#FF4400] text-sm leading-tight tracking-tight max-w-[90%]\">\n              From scroll-stopping campaigns that actually sell.\n            </p>\n          </div>\n        </m.div>\n\n        {/* Card 2: Image Stats */}\n        <m.div\n          className={cn(\n            `relative z-20 ${width} ${height} rounded-[16px] overflow-hidden group hover:z-50`\n          )}\n          initial={{\n            rotate: 2,\n            y: 1,\n          }}\n          whileHover={{\n            rotate: 0,\n            scale: 1.05,\n            transition: { duration: 0.3, ease: \"easeInOut\" },\n          }}\n        >\n          <Image\n            src={images[0]}\n            alt=\"Model\"\n            fill\n            sizes=\"(max-width: 768px) 90vw, 400px\"\n            className=\"object-cover\"\n          />\n          <div className=\"absolute top-5 left-5 bg-white/90 py-[4px] px-[8px] rounded-full text-xs font-semibold tracking-tighter text-black \">\n            900k Liked\n          </div>\n        </m.div>\n\n        {/* Card 3: Impressions */}\n        <m.div\n          className={cn(\n            `relative z-30 ${width} ${height} bg-[#FF4400] rounded-[16px] p-5 flex flex-col justify-between  flex-shrink-0 hover:z-50`\n          )}\n          initial={{\n            rotate: 8,\n          }}\n          whileHover={{\n            rotate: 0,\n            scale: 1.02,\n            transition: { duration: 0.3, ease: \"easeInOut\" },\n          }}\n        >\n          <div>\n            <h2 className=\"text-white text-5xl font-semibold tracking-tighter\">\n              37M+\n            </h2>\n          </div>\n          <div>\n            <h4 className=\"text-white font-medium text-lg leading-tight tracking-tighter\">\n              Organic impressions\n            </h4>\n            <div className=\"w-full h-px bg-white my-2\"></div>\n            <p className=\"text-white text-sm leading-tight tracking-tight max-w-[90%]\">\n              Growth through content that sells, not just trends.\n            </p>\n          </div>\n        </m.div>\n\n        {/* Card 4: Image Stats */}\n        <m.div\n          className={cn(\n            `relative z-40 ${width} ${height} rounded-[16px] overflow-hidden -ml-1 hover:z-50`\n          )}\n          initial={{\n            rotate: -4,\n          }}\n          whileHover={{\n            rotate: 0,\n            scale: 1.05,\n            transition: { duration: 0.3, ease: \"easeInOut\" },\n          }}\n        >\n          <Image\n            src={images[1]}\n            alt=\"Campaign\"\n            fill\n            sizes=\"(max-width: 768px) 90vw, 400px\"\n            className=\"object-cover\"\n          />\n          <div className=\"absolute bottom-5 right-5 bg-white/90 py-[4px] px-[8px] rounded-full text-xs font-semibold tracking-tighter text-black \">\n            1.5M Viewed\n          </div>\n        </m.div>\n      </div>\n    </LazyMotion>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}