{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glassmorphism-statistics-card-shadcnui",
  "type": "registry:component",
  "title": "Glassmorphism Statistics Card",
  "description": "Interactive statistics card with hover reveal and smooth transitions",
  "registryDependencies": [
    "button",
    "card"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/glassmorphism-statistics-card.tsx",
      "content": "\"use client\";\n\nimport { Card } from \"@/components/ui/card\";\nimport { motion } from \"framer-motion\";\nimport { Award, Bike, TrendingUp } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst athlete = {\n  name: \"Marcus Chen\",\n  title: \"Professional Mountain Biker\",\n  description:\n    \"Elite endurance athlete specializing in cross-country and trail racing\",\n  image:\n    \"https://images.unsplash.com/photo-1541625602330-2277a4c46182?w=800&q=80\",\n  stats: [\n    { label: \"Total Distance\", value: \"12,450 km\", icon: Bike },\n    { label: \"Avg Speed\", value: \"28.5 km/h\", icon: TrendingUp },\n    { label: \"Achievements\", value: \"47 Wins\", icon: Award },\n  ],\n};\n\nexport function GlassmorphismStatisticsCard() {\n  const [isImageLoaded, setIsImageLoaded] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 30 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.5 }}\n      className=\"w-full max-w-md\"\n    >\n      <motion.div\n        onHoverStart={() => setIsHovered(true)}\n        onHoverEnd={() => setIsHovered(false)}\n        initial=\"default\"\n        animate={isHovered ? \"hover\" : \"default\"}\n      >\n        <Card\n          className=\"group relative h-96 overflow-hidden border border-border/40 transition-all duration-500 hover:border-border/60 hover:shadow-xl sm:h-[500px]\"\n          role=\"article\"\n          aria-label={`${athlete.name} - ${athlete.title}`}\n        >\n          {/* Background Image with loading state */}\n          <div className=\"absolute inset-0\">\n            {!isImageLoaded && (\n              <div className=\"absolute inset-0 animate-pulse bg-muted\" />\n            )}\n            <motion.div\n              className=\"h-full w-full\"\n              variants={{\n                default: { scale: 1 },\n                hover: { scale: 1.05 },\n              }}\n              transition={{ duration: 0.6 }}\n            >\n              <img\n                src={athlete.image || \"/placeholder.svg\"}\n                alt={athlete.name}\n                className=\"h-full w-full object-cover\"\n                onLoad={() => setIsImageLoaded(true)}\n              />\n            </motion.div>\n            <motion.div\n              className=\"absolute inset-0 bg-gradient-to-t from-background/90 via-background/30 to-transparent\"\n              animate={{\n                opacity: isHovered ? 0.9 : 0.75,\n              }}\n              transition={{ duration: 0.4 }}\n            />\n          </div>\n\n          {/* Content Container */}\n          <div className=\"relative flex h-full flex-col justify-between\">\n            <motion.div\n              className=\"relative z-10 flex-1\"\n              variants={{\n                default: { opacity: 0 },\n                hover: { opacity: 1 },\n              }}\n              transition={{ duration: 0.4 }}\n            />\n\n            {/* Text content at end of card */}\n            <motion.div\n              className=\"relative z-10 p-4 sm:p-6\"\n              variants={{\n                default: { y: 0, opacity: 1 },\n                hover: { y: -12, opacity: 0.7 },\n              }}\n              transition={{ duration: 0.4, ease: \"easeOut\" }}\n            >\n              <div className=\"space-y-1 sm:space-y-2\">\n                <h3 className=\"text-2xl font-bold text-foreground sm:text-3xl\">\n                  {athlete.name}\n                </h3>\n                <p className=\"text-xs font-medium text-muted-foreground sm:text-sm\">\n                  {athlete.title}\n                </p>\n                <p className=\"line-clamp-2 text-xs text-muted-foreground/80 sm:text-sm\">\n                  {athlete.description}\n                </p>\n              </div>\n            </motion.div>\n\n            {/* Stats grid - appears on hover */}\n            <motion.div\n              className=\"relative z-20 border-t border-border/20 backdrop-blur-sm\"\n              variants={{\n                default: { opacity: 0, height: 0 },\n                hover: { opacity: 1, height: \"auto\" },\n              }}\n              transition={{ duration: 0.4, ease: \"easeOut\" }}\n            >\n              <div className=\"grid grid-cols-3 divide-x divide-border/20\">\n                {athlete.stats.map((stat, index) => {\n                  const Icon = stat.icon;\n                  return (\n                    <motion.div\n                      key={stat.label}\n                      className=\"flex flex-col items-center justify-center p-3 sm:p-4\"\n                      variants={{\n                        default: { opacity: 0, y: 8 },\n                        hover: { opacity: 1, y: 0 },\n                      }}\n                      transition={{\n                        duration: 0.3,\n                        delay: index * 0.06,\n                        ease: \"easeOut\",\n                      }}\n                      whileHover={{ scale: 1.02 }}\n                    >\n                      <Icon className=\"mb-2 h-4 w-4 text-muted-foreground sm:h-5 sm:w-5\" />\n                      <p className=\"text-xs text-muted-foreground/70\">\n                        {stat.label}\n                      </p>\n                      <p className=\"mt-1 text-sm font-bold text-foreground sm:text-base\">\n                        {stat.value}\n                      </p>\n                    </motion.div>\n                  );\n                })}\n              </div>\n            </motion.div>\n          </div>\n        </Card>\n      </motion.div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glassmorphism-statistics-card-shadcnui.tsx"
    }
  ]
}