{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-block-shadcnui",
  "type": "registry:block",
  "title": "Blog Block",
  "description": "Animated blog posts grid with staggered cards, date/time indicators, and hover effects",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/blog-block.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { motion } from \"framer-motion\";\nimport { ArrowRight, Calendar, Clock } from \"lucide-react\";\n\nconst blogPosts = [\n  {\n    title: \"Building Scalable React Applications\",\n    excerpt:\n      \"Learn the best practices and patterns for creating React applications that can grow with your business needs.\",\n    date: \"2024-01-15\",\n    readTime: \"8 min read\",\n    category: \"React\",\n    image:\n      \"https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800&q=80\",\n  },\n  {\n    title: \"Microservices Architecture Explained\",\n    excerpt:\n      \"A comprehensive guide to understanding and implementing microservices in modern applications.\",\n    date: \"2024-01-10\",\n    readTime: \"12 min read\",\n    category: \"Architecture\",\n    image:\n      \"https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&q=80\",\n  },\n  {\n    title: \"TypeScript Tips for Better Code\",\n    excerpt:\n      \"Advanced TypeScript techniques that will improve your code quality and developer experience.\",\n    date: \"2024-01-05\",\n    readTime: \"6 min read\",\n    category: \"TypeScript\",\n    image:\n      \"https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=800&q=80\",\n  },\n];\n\nconst container = {\n  hidden: { opacity: 0 },\n  show: {\n    opacity: 1,\n    transition: { staggerChildren: 0.15 },\n  },\n};\n\nconst item = {\n  hidden: { opacity: 0, y: 30 },\n  show: { opacity: 1, y: 0, transition: { duration: 0.5 } },\n};\n\nexport function BlogBlock() {\n  return (\n    <section className=\"bg-background px-4 py-24 sm:px-6 lg:px-8\">\n      <div className=\"mx-auto max-w-7xl\">\n        <motion.div\n          initial={{ opacity: 0, y: -20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-16 text-center\"\n        >\n          <h2 className=\"mb-4 text-4xl font-bold text-foreground md:text-5xl\">\n            Latest Blog Posts\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-lg text-muted-foreground\">\n            Insights, tutorials, and thoughts on web development and technology\n          </p>\n        </motion.div>\n\n        <motion.div\n          variants={container}\n          initial=\"hidden\"\n          whileInView=\"show\"\n          viewport={{ once: true }}\n          className=\"grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2\"\n        >\n          {blogPosts.map((post, index) => (\n            <motion.div key={index} variants={item}>\n              <Card className=\"group h-full overflow-hidden border-border bg-card transition-all duration-300 hover:border-primary/50\">\n                <div className=\"relative aspect-video overflow-hidden\">\n                  <motion.img\n                    src={post.image}\n                    alt={post.title}\n                    className=\"h-full w-full object-cover\"\n                    whileHover={{ scale: 1.1 }}\n                    transition={{ duration: 0.4 }}\n                  />\n                  <div className=\"absolute left-4 top-4\">\n                    <Badge\n                      variant=\"secondary\"\n                      className=\"bg-background/90 backdrop-blur-sm\"\n                    >\n                      {post.category}\n                    </Badge>\n                  </div>\n                </div>\n\n                <div className=\"p-6\">\n                  <div className=\"mb-3 flex items-center gap-4 text-sm text-muted-foreground\">\n                    <span className=\"flex items-center gap-1\">\n                      <Calendar className=\"h-4 w-4\" />\n                      {new Date(post.date).toLocaleDateString(\"en-US\", {\n                        month: \"short\",\n                        day: \"numeric\",\n                        year: \"numeric\",\n                      })}\n                    </span>\n                    <span className=\"flex items-center gap-1\">\n                      <Clock className=\"h-4 w-4\" />\n                      {post.readTime}\n                    </span>\n                  </div>\n\n                  <h3 className=\"mb-2 line-clamp-2 text-xl font-semibold text-foreground transition-colors group-hover:text-primary\">\n                    {post.title}\n                  </h3>\n\n                  <p className=\"mb-4 line-clamp-3 text-muted-foreground\">\n                    {post.excerpt}\n                  </p>\n\n                  <Button\n                    variant=\"ghost\"\n                    className=\"h-auto gap-2 p-0 group-hover:text-primary\"\n                  >\n                    Read More\n                    <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n                  </Button>\n                </div>\n              </Card>\n            </motion.div>\n          ))}\n        </motion.div>\n\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ delay: 0.5, duration: 0.6 }}\n          className=\"mt-12 text-center\"\n        >\n          <Button size=\"lg\" variant=\"outline\">\n            View All Posts\n          </Button>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/blog-block-shadcnui.tsx"
    }
  ]
}