{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-home",
  "type": "registry:component",
  "title": "Blog home",
  "description": "A blog index page with a marketing nav, tag filter chips for all, design and engineering, a grid of post cards with excerpts and dates, and a footer.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/blog-card.json",
    "https://ui.minidev.pro/r/chip-filter.json",
    "https://ui.minidev.pro/r/footer-mega.json",
    "https://ui.minidev.pro/r/nav-marketing.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/blog-home.tsx",
      "type": "registry:ui",
      "target": "components/ui/blog-home.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { NavMarketing } from \"@/components/ui/nav-marketing\"\nimport { BlogCard } from \"@/components/ui/blog-card\"\nimport { FooterMega } from \"@/components/ui/footer-mega\"\nimport { ChipFilter } from \"@/components/ui/chip-filter\"\n\nfunction BlogHome({ className }: { className?: string }) {\n  const [tag, setTag] = React.useState(\"all\")\n  return (\n    <div data-slot=\"blog-home\" data-tier=\"premium\" className={cn(\"bg-bg\", className)}>\n      <NavMarketing />\n      <div className=\"mx-auto max-w-5xl space-y-8 px-6 py-16\">\n        <div>\n          <h1 className=\"text-4xl font-medium tracking-[-0.026em] text-fg\">Blog</h1>\n          <p className=\"mt-2 text-sm text-fg-muted\">Craft notes on Hairline UI, motion, and audit gates.</p>\n        </div>\n        <ChipFilter\n          value={tag}\n          onChange={setTag}\n          options={[\n            { value: \"all\", label: \"All\" },\n            { value: \"design\", label: \"Design\" },\n            { value: \"eng\", label: \"Engineering\" },\n          ]}\n        />\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          <BlogCard tag=\"Design\" title=\"Why Hairline beats blur\" excerpt=\"Structure from borders and highlights — not soft shadows everywhere.\" date={new Date().toISOString()} />\n          <BlogCard tag=\"Engineering\" title=\"Audit gates that stick\" excerpt=\"Screenshots + axe on every gallery route before merge.\" date={new Date().toISOString()} />\n          <BlogCard tag=\"Product\" title=\"Free vs Premium without guilt\" excerpt=\"Primitives stay MIT. Motion packs soft-gate for launches.\" date={new Date().toISOString()} />\n        </div>\n      </div>\n      <FooterMega columns={[{ title: \"More\", links: [{ label: \"Docs\", href: \"#\" }, { label: \"Gallery\", href: \"#\" }] }]} />\n    </div>\n  )\n}\nexport { BlogHome }\n"
    }
  ]
}