{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resources-teaser-grid",
  "title": "Resources Teaser Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/resources-teaser-grid/ResourcesTeaserGrid.tsx",
      "content": "'use client'\n\nimport { ArrowRight, ArrowUpRight } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst featured = {\n  kind: 'Engineering',\n  title: 'Why we version metric definitions instead of dashboards',\n  excerpt:\n    'Dashboards are the output. The definition is the thing teams argue about, so that is what belongs under review — with a diff, an owner, and a revert path.',\n  readTime: '9 min read',\n  date: 'Feb 18, 2026',\n  author: { name: 'Marcus Ellery', role: 'Staff Engineer', initials: 'ME' },\n}\n\nconst recent = [\n  { kind: 'Guide', title: 'A reconciliation checklist for your first close', readTime: '6 min' },\n  { kind: 'Benchmark', title: 'What close speed actually looks like across 240 finance teams', readTime: '11 min' },\n  { kind: 'Changelog', title: 'Row-level scoping now evaluates against SCIM groups', readTime: '3 min' },\n  { kind: 'Opinion', title: 'Self-serve analytics fails for reasons that are not technical', readTime: '7 min' },\n]\n\nexport function ResourcesTeaserGrid() {\n  return (\n    <section data-slot=\"resources-teaser-grid\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"flex flex-wrap items-end justify-between gap-6\">\n          <div className=\"max-w-2xl\">\n            <Badge variant=\"secondary\">Resources</Badge>\n            <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Notes from the build</h2>\n            <p className=\"text-muted-foreground mt-3 text-lg\">\n              Engineering write-ups, rollout guides, and the benchmarks behind the claims on this page.\n            </p>\n          </div>\n        </div>\n\n        <div className=\"mt-10 grid gap-4 lg:grid-cols-3\">\n          {/* Featured piece spans two columns; the recent list stacks beside it. */}\n          <Card className=\"group lg:col-span-2\">\n            <CardContent className=\"flex h-full flex-col p-6 lg:p-8\">\n              <div className=\"flex flex-wrap items-center gap-3\">\n                <Badge variant=\"outline\">{featured.kind}</Badge>\n                <span className=\"text-muted-foreground text-xs\">\n                  {featured.date} · {featured.readTime}\n                </span>\n              </div>\n\n              <h3 className=\"mt-4 text-2xl leading-snug font-semibold tracking-tight text-balance\">{featured.title}</h3>\n              <p className=\"text-muted-foreground mt-3 max-w-prose leading-relaxed\">{featured.excerpt}</p>\n\n              <div className=\"mt-auto flex items-center gap-3 pt-8\">\n                <Avatar className=\"size-9\">\n                  <AvatarFallback className=\"text-xs\">{featured.author.initials}</AvatarFallback>\n                </Avatar>\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-sm font-medium\">{featured.author.name}</p>\n                  <p className=\"text-muted-foreground truncate text-xs\">{featured.author.role}</p>\n                </div>\n                <Button variant=\"ghost\" size=\"sm\" className=\"ml-auto\">\n                  Read\n                  <ArrowUpRight\n                    className=\"ml-1 size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </div>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardContent className=\"p-2\">\n              <ul>\n                {recent.map((post, index) => (\n                  <li key={post.title}>\n                    <a\n                      href=\"#\"\n                      className=\"hover:bg-muted focus-visible:ring-ring block rounded-lg p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                    >\n                      <div className=\"text-muted-foreground flex items-center gap-2 font-mono text-xs tracking-wide uppercase\">\n                        <span>{post.kind}</span>\n                        <span aria-hidden=\"true\">·</span>\n                        <span>{post.readTime}</span>\n                      </div>\n                      <p className=\"mt-1.5 text-sm leading-snug font-medium\">{post.title}</p>\n                    </a>\n                    {index < recent.length - 1 && <Separator />}\n                  </li>\n                ))}\n              </ul>\n            </CardContent>\n          </Card>\n        </div>\n\n        <div className=\"border-border mt-8 flex flex-wrap items-center justify-between gap-4 border-t pt-6\">\n          <p className=\"text-muted-foreground text-sm\">New writing roughly every other week. No newsletter required.</p>\n          <Button variant=\"outline\">\n            View all resources\n            <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/ResourcesTeaserGrid.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Blog and resources teaser: one featured article spanning two columns with kind badge and read time, beside a stacked list of four recent pieces, closing on a view-all link row.",
  "categories": [
    "marketing"
  ]
}