{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "home-lab",
  "title": "Home Lab",
  "description": "Free tools / lab band with editable TOOLS catalog.",
  "dependencies": [
    "lucide-react",
    "next"
  ],
  "files": [
    {
      "path": "registry/default/blocks/home-lab.tsx",
      "content": "import { ArrowRight, ArrowUpRight } from \"lucide-react\"\nimport Link from \"next/link\"\n\n/**\n * Edit TOOLS to swap the lab catalog. Matches docs Home Lab band.\n */\nconst CONTENT = {\n  stamp: \"Free tools\",\n  headlineBefore: \"Proof between\",\n  headlineAccent: \"client sprints\",\n  headlineAfter: \".\",\n  lede: \"No signup. No watermark. Feel the craft before you hire it.\",\n  allHref: \"/tools\",\n  allLabel: \"All tools\",\n}\n\nconst TOOLS = [\n  {\n    name: \"OG Image Generator\",\n    tagline: \"Viral OG images in seconds\",\n    description:\n      \"Turn a single prompt into a polished 1200×630 Open Graph image.\",\n    href: \"/og\",\n    status: \"live\" as const,\n    highlights: [\"1200×630\", \"One-prompt generate\", \"Instant download\"],\n    featured: true,\n  },\n  {\n    name: \"Thumbnail Generator\",\n    tagline: \"Click-worthy thumbnails on demand\",\n    description:\n      \"YouTube, LinkedIn, and blog thumbnails from a prompt or a link.\",\n    href: \"/thumbnail\",\n    status: \"live\" as const,\n    highlights: [\"YouTube 16:9\", \"LinkedIn\", \"Blog covers\"],\n    featured: false,\n  },\n  {\n    name: \"Smart PDF Tools\",\n    tagline: \"Understand, extract, and transform PDFs\",\n    description: \"Summarize, extract tables, and convert - built for makers.\",\n    href: \"/tools#smart-pdf\",\n    status: \"soon\" as const,\n    highlights: [\"Summarize\", \"Extract tables\", \"Clean exports\"],\n    featured: false,\n  },\n  {\n    name: \"Link-to-Preview\",\n    tagline: \"Beautiful preview cards from any URL\",\n    description: \"Paste any link, get a designer-grade preview card.\",\n    href: \"/tools#link-scraper\",\n    status: \"soon\" as const,\n    highlights: [\"Embed HTML\", \"Fast OG scrape\", \"Themeable\"],\n    featured: false,\n  },\n]\n\nfunction statusLabel(status: \"live\" | \"beta\" | \"soon\") {\n  if (status === \"live\") return \"Live\"\n  if (status === \"beta\") return \"Beta\"\n  return \"Soon\"\n}\n\nexport function HomeLab() {\n  const featured = TOOLS.find((t) => t.featured) ?? TOOLS[0]!\n  const rest = TOOLS.filter((t) => t !== featured)\n\n  return (\n    <section className=\"border-t border-border-subtle\">\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"mx-auto flex max-w-7xl flex-col gap-6 border-x border-border-subtle px-6 py-12 sm:flex-row sm:items-end sm:justify-between sm:px-10 sm:py-16\">\n          <div className=\"max-w-2xl\">\n            <p className=\"text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase\">\n              {CONTENT.stamp}\n            </p>\n            <h2 className=\"mt-4 text-3xl font-medium tracking-tight text-foreground sm:text-5xl\">\n              {CONTENT.headlineBefore}{\" \"}\n              <span className=\"italic text-[var(--color-brand,#0b7bff)]\">\n                {CONTENT.headlineAccent}\n              </span>\n              {CONTENT.headlineAfter}\n            </h2>\n            <p className=\"mt-4 max-w-lg text-[15px] leading-relaxed text-muted-foreground\">\n              {CONTENT.lede}\n            </p>\n          </div>\n          <Link\n            href={CONTENT.allHref}\n            className=\"inline-flex h-10 shrink-0 items-center gap-1.5 rounded-lg border border-border-subtle px-4 text-sm font-medium\"\n          >\n            {CONTENT.allLabel}\n            <ArrowRight className=\"size-3.5\" aria-hidden />\n          </Link>\n        </div>\n      </div>\n\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"mx-auto max-w-7xl border-x border-border-subtle\">\n          <Link\n            href={featured.href}\n            className=\"group grid grid-cols-1 lg:grid-cols-12\"\n          >\n            <div className=\"flex flex-col justify-between gap-8 border-b border-border-subtle p-6 sm:p-8 lg:col-span-5 lg:border-r lg:border-b-0\">\n              <div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"inline-flex items-center gap-1.5 text-sm font-medium text-[var(--color-brand,#0b7bff)]\">\n                    <span className=\"size-1.5 animate-pulse rounded-full bg-[var(--color-brand,#0b7bff)]\" />\n                    {statusLabel(featured.status)}\n                  </span>\n                </div>\n                <h3 className=\"mt-4 text-2xl font-medium text-foreground sm:text-3xl\">\n                  {featured.name}\n                </h3>\n                <p className=\"mt-2 text-sm text-muted-foreground\">\n                  {featured.tagline}\n                </p>\n                <p className=\"mt-4 text-[15px] leading-relaxed text-muted-foreground\">\n                  {featured.description}\n                </p>\n              </div>\n              <span className=\"inline-flex items-center gap-1.5 text-sm font-medium group-hover:text-[var(--color-brand,#0b7bff)]\">\n                Open tool\n                <ArrowUpRight className=\"size-3.5\" />\n              </span>\n            </div>\n            <div className=\"flex items-center justify-center bg-muted/30 p-6 sm:p-8 lg:col-span-7\">\n              <div className=\"flex aspect-[1200/630] w-full max-w-xl flex-col justify-end rounded-xl bg-gradient-to-br from-[#0a0a0a] via-[#111827] to-[#0b7bff]/30 p-6 ring-1 ring-border-subtle\">\n                <p className=\"text-xl font-medium text-white sm:text-2xl\">\n                  Ship in days, not quarters.\n                </p>\n                <p className=\"mt-2 text-sm text-white/70\">\n                  {featured.highlights.join(\" · \")}\n                </p>\n              </div>\n            </div>\n          </Link>\n        </div>\n      </div>\n\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"mx-auto max-w-7xl border-x border-border-subtle\">\n          <ul className=\"grid grid-cols-1 divide-y divide-border-subtle md:grid-cols-3 md:divide-x md:divide-y-0\">\n            {rest.map((tool) => (\n              <li key={tool.name}>\n                <Link href={tool.href} className=\"group block p-6 sm:p-8\">\n                  <p className=\"text-xs font-medium text-[var(--color-brand,#0b7bff)]\">\n                    {statusLabel(tool.status)}\n                  </p>\n                  <h3 className=\"mt-2 text-lg font-medium text-foreground group-hover:text-[var(--color-brand,#0b7bff)]\">\n                    {tool.name}\n                  </h3>\n                  <p className=\"mt-2 text-sm text-muted-foreground\">\n                    {tool.description}\n                  </p>\n                  <p className=\"mt-4 font-mono text-[11px] text-muted-foreground\">\n                    {tool.highlights.join(\" · \")}\n                  </p>\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/home-lab.tsx"
    }
  ],
  "type": "registry:block"
}