{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-block-baseui",
  "type": "registry:block",
  "title": "Blog Block",
  "description": "Animated blog posts grid with staggered cards, date/time indicators, and hover effects (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/blog-block-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\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 BlogBlockBaseui() {\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              <div className=\"group h-full overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm 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                    <span className=\"inline-flex items-center rounded-full border border-border bg-background/90 px-2.5 py-0.5 text-xs font-semibold backdrop-blur-sm\">\n                      {post.category}\n                    </span>\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 className=\"inline-flex h-auto items-center gap-2 bg-transparent p-0 text-sm font-medium text-foreground transition-colors group-hover:text-primary\">\n                    Read More\n                    <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n                  </Button>\n                </div>\n              </div>\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 className=\"inline-flex h-11 items-center justify-center rounded-md border border-input bg-background px-8 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\">\n            View All Posts\n          </Button>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/blog-block-baseui.tsx"
    }
  ]
}