{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-01",
  "title": "Simple 3-card blog grid",
  "description": "Three equal-width cards with an image placeholder, category label, title, excerpt, date, and read time — clean grid with hover shadow lift.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/blog/blog-01.tsx",
      "content": "import { ArrowRight } from \"lucide-react\"\n\nconst posts = [\n  {\n    id: 1,\n    category: \"Engineering\",\n    title: \"How we cut cold-start latency by 60% across all edge regions\",\n    excerpt:\n      \"A deep dive into our deployment pipeline refactor and the caching layer that changed everything about how we handle request distribution.\",\n    date: \"May 28, 2025\",\n    readTime: \"8 min read\",\n  },\n  {\n    id: 2,\n    category: \"Design\",\n    title: \"Building a token-first design system that scales across 12 products\",\n    excerpt:\n      \"Semantic tokens, dark mode, and the decision to move entirely to OKLCH. Here&apos;s what we learned after six months in production.\",\n    date: \"May 14, 2025\",\n    readTime: \"6 min read\",\n  },\n  {\n    id: 3,\n    category: \"Product\",\n    title: \"Shipping faster without breaking things: our new release cadence\",\n    excerpt:\n      \"Weekly releases used to terrify us. After restructuring our QA pipeline and adopting feature flags at the team level, they&apos;re routine.\",\n    date: \"Apr 30, 2025\",\n    readTime: \"5 min read\",\n  },\n]\n\nexport default function Blog01() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-5xl px-6 sm:px-10\">\n        <div className=\"mb-12 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\">\n          <div>\n            <span className=\"font-mono text-[11px] uppercase tracking-widest text-muted-foreground\">\n              Blog\n            </span>\n            <h2 className=\"mt-3 text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl\">\n              From the team\n            </h2>\n          </div>\n          <a\n            href=\"#\"\n            className=\"group inline-flex items-center gap-1.5 text-sm font-medium text-foreground hover:text-primary\"\n          >\n            All posts\n            <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-8 sm:grid-cols-3\">\n          {posts.map((post) => (\n            <a\n              key={post.id}\n              href=\"#\"\n              className=\"group flex flex-col gap-4 rounded-2xl border border-border bg-card p-6 transition-shadow hover:shadow-2xl hover:shadow-black/10\"\n            >\n              <div className=\"aspect-[16/9] w-full rounded-xl bg-muted\" />\n              <div className=\"flex flex-col gap-2\">\n                <span className=\"text-xs font-medium text-primary\">\n                  {post.category}\n                </span>\n                <h3 className=\"text-balance text-sm font-semibold leading-snug text-foreground group-hover:text-primary transition-colors\">\n                  {post.title}\n                </h3>\n                <p className=\"line-clamp-3 text-xs text-muted-foreground text-pretty\">\n                  {post.excerpt}\n                </p>\n              </div>\n              <div className=\"mt-auto flex items-center gap-2 text-xs text-muted-foreground\">\n                <span>{post.date}</span>\n                <span aria-hidden>·</span>\n                <span>{post.readTime}</span>\n              </div>\n            </a>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/blog-01.tsx"
    }
  ],
  "categories": [
    "blog"
  ],
  "type": "registry:block"
}