{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-blog-card-shadcnui",
  "type": "registry:component",
  "title": "Glass Blog Card",
  "description": "Glassmorphism blog card with image zoom, author info, and read action",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-blog-card.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport { BookOpen, Clock } from \"lucide-react\";\n\ninterface GlassBlogCardProps {\n  title?: string;\n  excerpt?: string;\n  image?: string;\n  author?: {\n    name: string;\n    avatar: string;\n  };\n  date?: string;\n  readTime?: string;\n  tags?: string[];\n  className?: string;\n}\n\nconst defaultPost = {\n  title: \"The Future of UI Design\",\n  excerpt:\n    \"Exploring the latest trends in glassmorphism, 3D elements, and micro-interactions.\",\n  image:\n    \"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80\",\n  author: {\n    name: \"Moumen Soliman\",\n    avatar: \"https://github.com/shadcn.png\",\n  },\n  date: \"Dec 2, 2025\",\n  readTime: \"5 min read\",\n  tags: [\"Design\", \"UI/UX\"],\n};\n\nexport function GlassBlogCard({\n  title = defaultPost.title,\n  excerpt = defaultPost.excerpt,\n  image = defaultPost.image,\n  author = defaultPost.author,\n  date = defaultPost.date,\n  readTime = defaultPost.readTime,\n  tags = defaultPost.tags,\n  className,\n}: GlassBlogCardProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.4 }}\n      className={cn(\"w-full max-w-[400px]\", className)}\n    >\n      <Card className=\"group relative h-full overflow-hidden rounded-2xl border-border/50 bg-card/80 backdrop-blur-md transition-all duration-300 hover:border-primary/50 hover:shadow-xl hover:shadow-primary/10\">\n        {/* Image Section */}\n        <div className=\"relative aspect-[16/9] overflow-hidden\">\n          <motion.img\n            src={image}\n            alt={title}\n            className=\"h-full w-full object-cover transition-transform duration-500 group-hover:scale-110\"\n          />\n          <div className=\"absolute inset-0 bg-gradient-to-t from-background/80 to-transparent opacity-60 transition-opacity duration-300 group-hover:opacity-40\" />\n\n          <div className=\"absolute bottom-3 left-3 flex gap-2\">\n            {tags?.map((tag, index) => (\n              <Badge\n                key={index}\n                variant=\"secondary\"\n                className=\"bg-background/50 backdrop-blur-sm hover:bg-background/80\"\n              >\n                {tag}\n              </Badge>\n            ))}\n          </div>\n\n          {/* Hover Overlay Action */}\n          <div className=\"absolute inset-0 flex items-center justify-center bg-background/20 backdrop-blur-[2px] opacity-0 transition-opacity duration-300 group-hover:opacity-100\">\n            <motion.button\n              whileHover={{ scale: 1.05 }}\n              whileTap={{ scale: 0.95 }}\n              className=\"flex items-center gap-2 rounded-full bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground shadow-lg shadow-primary/25\"\n            >\n              <BookOpen className=\"h-4 w-4\" />\n              Read Article\n            </motion.button>\n          </div>\n        </div>\n\n        {/* Content Section */}\n        <div className=\"flex flex-col gap-4 p-5\">\n          <div className=\"space-y-2\">\n            <h3 className=\"text-xl font-semibold leading-tight tracking-tight text-foreground transition-colors group-hover:text-primary\">\n              {title}\n            </h3>\n            <p className=\"line-clamp-2 text-sm text-muted-foreground\">\n              {excerpt}\n            </p>\n          </div>\n\n          <div className=\"flex items-center justify-between border-t border-border/50 pt-4\">\n            <div className=\"flex items-center gap-2\">\n              <Avatar className=\"h-8 w-8 border border-border/50\">\n                <AvatarImage src={author.avatar} alt={author.name} />\n                <AvatarFallback>{author.name[0]}</AvatarFallback>\n              </Avatar>\n              <div className=\"flex flex-col text-xs\">\n                <span className=\"font-medium text-foreground\">\n                  {author.name}\n                </span>\n                <span className=\"text-muted-foreground\">{date}</span>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              <Clock className=\"h-3 w-3\" />\n              <span>{readTime}</span>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glass-blog-card-shadcnui.tsx"
    }
  ]
}