{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "home-principle",
  "title": "Home Principle",
  "description": "How-we-work principles band with editable CONTENT and PRINCIPLES.",
  "files": [
    {
      "path": "registry/default/blocks/home-principle.tsx",
      "content": "/**\n * Edit CONTENT / PRINCIPLES to match your studio.\n * Matches the AtroUI docs Home Principle band.\n */\nconst CONTENT = {\n  stamp: \"How we work\",\n  headlineBefore: \"You talk to the person who\",\n  headlineAccent: \"builds it\",\n  headlineAfter: \".\",\n}\n\nconst PRINCIPLES = [\n  {\n    title: \"Fixed scope\",\n    status: \"Locked\",\n    detail: \"Agreed before day one - no creep theatre.\",\n    tone: \"ok\" as const,\n  },\n  {\n    title: \"Fixed price\",\n    status: \"Guaranteed\",\n    detail: \"$4,800 MVP · from $2,400 AI feature.\",\n    tone: \"brand\" as const,\n  },\n  {\n    title: \"No handoffs\",\n    status: \"Direct\",\n    detail: \"One senior engineer. Not your 14th channel.\",\n    tone: \"warm\" as const,\n  },\n]\n\nconst toneText = {\n  ok: \"text-emerald-700 dark:text-emerald-400\",\n  brand: \"text-[var(--color-brand,#0b7bff)]\",\n  warm: \"text-amber-800 dark:text-amber-400\",\n} as const\n\nconst toneDot = {\n  ok: \"bg-emerald-700 dark:bg-emerald-400\",\n  brand: \"bg-[var(--color-brand,#0b7bff)]\",\n  warm: \"bg-amber-800 dark:bg-amber-400\",\n} as const\n\nexport function HomePrinciple() {\n  return (\n    <section className=\"border-t border-border-subtle\">\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"mx-auto max-w-7xl border-x border-border-subtle px-6 py-12 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          </div>\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          <ol className=\"grid grid-cols-1 divide-y divide-border-subtle md:grid-cols-3 md:divide-x md:divide-y-0\">\n            {PRINCIPLES.map((item, i) => (\n              <li key={item.title} className=\"p-6 sm:p-8\">\n                <p className=\"font-mono text-[11px] tabular-nums text-muted-foreground\">\n                  {String(i + 1).padStart(2, \"0\")}\n                </p>\n                <h3 className=\"mt-3 text-lg font-medium text-foreground\">\n                  {item.title}\n                </h3>\n                <p\n                  className={`mt-2 flex items-center gap-1.5 text-sm font-medium ${toneText[item.tone]}`}\n                >\n                  <span\n                    className={`size-1.5 shrink-0 rounded-full ${toneDot[item.tone]}`}\n                    aria-hidden\n                  />\n                  {item.status}\n                </p>\n                <p className=\"mt-3 text-sm leading-relaxed text-muted-foreground\">\n                  {item.detail}\n                </p>\n              </li>\n            ))}\n          </ol>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/home-principle.tsx"
    }
  ],
  "type": "registry:block"
}