{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-overview",
  "title": "Pricing Overview",
  "description": "Fixed-package pricing band with editable CONTENT and PACKAGES.",
  "dependencies": [
    "lucide-react",
    "next"
  ],
  "files": [
    {
      "path": "registry/default/blocks/pricing-overview.tsx",
      "content": "import { ArrowRight, Check } from \"lucide-react\"\nimport Link from \"next/link\"\n\n/**\n * Edit CONTENT / PACKAGES to match your studio pricing.\n * Matches the AtroUI docs Pricing Overview band (no motion deps).\n */\nconst CONTENT = {\n  stamp: \"Pricing\",\n  headlineBefore: \"Fixed packages.\",\n  headlineAccent: \"No hourly theater.\",\n  lede: \"Scope once, price once, ship once. You know the number before we write a line of code.\",\n  allHref: \"/services\",\n  allLabel: \"All packages\",\n  investmentLabel: \"Investment\",\n  investmentNote:\n    \"Scope once. Price once. Ship once. If we go over, that's our problem - not yours.\",\n}\n\nconst PACKAGES = [\n  {\n    id: \"mvp-sprint\",\n    name: \"7-Day MVP Sprint\",\n    tagline: \"One core workflow, live\",\n    timeline: \"7 days\",\n    price: \"$4,800\",\n    priceSuffix: \"fixed\",\n    badge: \"Most booked\",\n    features: [\n      \"Fixed scope before day one\",\n      \"Auth, core flow, deploy\",\n      \"Daily async updates\",\n      \"Handoff docs included\",\n    ],\n    ctaLabel: \"Start a sprint\",\n    ctaHref: \"/contact?service=mvp-sprint\",\n    detailsHref: \"/services/mvp-sprint\",\n    highlight: true,\n    description: \"Ship one validated workflow in a week.\",\n  },\n  {\n    id: \"ai-feature\",\n    name: \"AI Feature\",\n    tagline: \"Drop AI into an existing product\",\n    timeline: \"5-10 days\",\n    price: \"from $2,400\",\n    priceSuffix: \"\",\n    badge: \"\",\n    features: [],\n    ctaLabel: \"Scope AI\",\n    ctaHref: \"/contact?service=ai-integration\",\n    detailsHref: \"/services/ai-feature\",\n    highlight: false,\n    description: \"Model wiring, UX, and evals for one feature.\",\n  },\n  {\n    id: \"design-system\",\n    name: \"Design System\",\n    tagline: \"Tokens, components, docs\",\n    timeline: \"2-3 weeks\",\n    price: \"from $3,600\",\n    priceSuffix: \"\",\n    badge: \"\",\n    features: [],\n    ctaLabel: \"Talk systems\",\n    ctaHref: \"/contact?service=design-system\",\n    detailsHref: \"/services/design-system\",\n    highlight: false,\n    description: \"A coherent dark-first kit your team can extend.\",\n  },\n  {\n    id: \"full-stack\",\n    name: \"Full-Stack Build\",\n    tagline: \"Longer engagement\",\n    timeline: \"Scoped after a call\",\n    price: \"Custom\",\n    priceSuffix: \"\",\n    badge: \"\",\n    features: [],\n    ctaLabel: \"Book intro\",\n    ctaHref: \"/contact?service=full-stack-build\",\n    detailsHref: \"/services/full-stack\",\n    highlight: false,\n    description: \"Multi-week product work with fixed milestones.\",\n  },\n]\n\nexport function PricingOverview() {\n  const featured = PACKAGES.find((p) => p.highlight) ?? PACKAGES[0]!\n  const rest = PACKAGES.filter((p) => p.id !== featured.id)\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            </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          <div className=\"grid grid-cols-1 lg:grid-cols-12\">\n            <div className=\"flex flex-col justify-between gap-8 border-b border-border-subtle p-6 sm:p-8 lg:col-span-7 lg:border-r lg:border-b-0 lg:p-10\">\n              <div>\n                {featured.badge ? (\n                  <span className=\"mb-3 inline-block text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase\">\n                    {featured.badge}\n                  </span>\n                ) : null}\n                <h3 className=\"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} · {featured.timeline}\n                </p>\n                <ul className=\"mt-6 space-y-2.5\">\n                  {featured.features.slice(0, 4).map((f) => (\n                    <li\n                      key={f}\n                      className=\"flex items-start gap-2 text-sm text-foreground/90\"\n                    >\n                      <Check\n                        className=\"mt-0.5 size-3.5 shrink-0 text-[var(--color-brand,#0b7bff)]\"\n                        strokeWidth={2.5}\n                        aria-hidden\n                      />\n                      <span>{f}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n              <Link\n                href={featured.ctaHref}\n                className=\"inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-foreground px-5 text-sm font-medium text-background sm:w-auto\"\n              >\n                {featured.ctaLabel}\n                <ArrowRight className=\"size-4\" aria-hidden />\n              </Link>\n            </div>\n\n            <div className=\"flex flex-col justify-between gap-8 bg-muted/30 p-6 sm:p-8 lg:col-span-5 lg:p-10\">\n              <div>\n                <p className=\"font-mono text-[11px] tracking-wide text-muted-foreground uppercase\">\n                  {CONTENT.investmentLabel}\n                </p>\n                <p className=\"mt-3 text-4xl font-medium tracking-tight text-foreground sm:text-5xl md:text-6xl\">\n                  {featured.price}\n                </p>\n                {featured.priceSuffix ? (\n                  <p className=\"mt-2 text-sm text-muted-foreground\">\n                    {featured.priceSuffix} · {featured.timeline}\n                  </p>\n                ) : null}\n              </div>\n              <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                {CONTENT.investmentNote}\n              </p>\n            </div>\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          <ul className=\"divide-y divide-border-subtle\">\n            {rest.map((s, i) => (\n              <li key={s.id}>\n                <div className=\"grid grid-cols-1 gap-3 px-6 py-5 md:grid-cols-12 md:items-center md:gap-4 md:px-8 md:py-6\">\n                  <span className=\"font-mono text-[11px] tabular-nums text-muted-foreground md:col-span-1\">\n                    {String(i + 2).padStart(2, \"0\")}\n                  </span>\n                  <div className=\"md:col-span-4\">\n                    <p className=\"text-base font-medium text-foreground sm:text-lg\">\n                      {s.name}\n                    </p>\n                    <p className=\"mt-1 text-xs text-muted-foreground\">\n                      {s.tagline} · {s.timeline}\n                    </p>\n                  </div>\n                  <p className=\"hidden text-sm text-muted-foreground md:col-span-3 md:block md:line-clamp-2\">\n                    {s.description}\n                  </p>\n                  <div className=\"flex flex-wrap items-center gap-4 md:col-span-4 md:justify-end\">\n                    <span className=\"text-lg font-semibold tabular-nums text-foreground\">\n                      {s.price}\n                      {s.priceSuffix ? (\n                        <span className=\"ml-1.5 text-sm font-normal text-muted-foreground\">\n                          {s.priceSuffix}\n                        </span>\n                      ) : null}\n                    </span>\n                    <Link\n                      href={s.detailsHref}\n                      className=\"inline-flex min-h-10 items-center text-sm font-medium text-muted-foreground hover:text-foreground\"\n                    >\n                      Details\n                    </Link>\n                  </div>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/pricing-overview.tsx"
    }
  ],
  "type": "registry:block"
}