{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "projects-block-shadcnui",
  "type": "registry:component",
  "title": "Projects Block",
  "description": "Animated project card with hover effects, image zoom, and link buttons",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/projects-block.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { motion } from \"framer-motion\";\nimport { ExternalLink, Github } from \"lucide-react\";\n\nconst project = {\n  title: \"E-Commerce Platform\",\n  description:\n    \"Full-stack online store with payment integration and inventory management\",\n  tags: [\"React\", \"Node.js\", \"PostgreSQL\", \"Stripe\"],\n  image:\n    \"https://images.unsplash.com/photo-1661956602116-aa6865609028?w=800&q=80\",\n  links: { demo: \"#\", github: \"#\" },\n};\n\nexport function ProjectsBlock() {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 30 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.5 }}\n    >\n      <Card className=\"group h-full rounded-2xl overflow-hidden border-border bg-card transition-all duration-300 hover:border-primary/50 mx-auto\">\n        <div className=\"relative aspect-video overflow-hidden\">\n          <motion.img\n            src={project.image}\n            alt={project.title}\n            className=\"h-full w-full object-cover grayscale focus-visible:outline-none transition-opacity\"\n            whileHover={{ scale: 1.1 }}\n            transition={{ duration: 0.4 }}\n          />\n          <div className=\"absolute inset-0 flex items-end justify-center gap-4 bg-gradient-to-t from-card via-card/60 to-transparent pb-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100\">\n            <motion.a\n              href={project.links.demo}\n              whileHover={{ scale: 1.1 }}\n              whileTap={{ scale: 0.95 }}\n              className=\"rounded-full bg-primary p-3 text-primary-foreground shadow-lg shadow-primary/50\"\n            >\n              <ExternalLink className=\"h-5 w-5\" />\n            </motion.a>\n            <motion.a\n              href={project.links.github}\n              whileHover={{ scale: 1.1 }}\n              whileTap={{ scale: 0.95 }}\n              className=\"rounded-full bg-secondary p-3 text-secondary-foreground shadow-lg\"\n            >\n              <Github className=\"h-5 w-5\" />\n            </motion.a>\n          </div>\n        </div>\n        <div className=\"p-6\">\n          <h3 className=\"mb-2 text-xl font-semibold text-foreground transition-colors group-hover:text-primary\">\n            {project.title}\n          </h3>\n          <p className=\"mb-4 line-clamp-2 text-muted-foreground\">\n            {project.description}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {project.tags.map((tag, tagIndex) => (\n              <Badge key={tagIndex} variant=\"secondary\" className=\"text-xs\">\n                {tag}\n              </Badge>\n            ))}\n          </div>\n        </div>\n      </Card>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/projects-block-shadcnui.tsx"
    }
  ]
}