{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about70",
  "title": "Company History Rows",
  "description": "A company story told as hairline rows keyed by a light year figure, set against a media column that sticks while they scroll and stacks an image tile floating a live growth metric over a captioned photograph.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/about70/about70.tsx",
      "content": "\"use client\";\n\nimport { Badge23 } from \"@/components/beste/component/badge23\";\nimport type { ReactNode } from \"react\";\nimport { Stats16 } from \"@/components/beste/piece/stats16\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Badge {\n  label: string;\n}\n\ninterface TileImage {\n  src: string;\n  alt: string;\n}\n\ninterface Milestone {\n  year: string;\n  title: string;\n  description: string;\n  marker?: string;\n}\n\ninterface Photo {\n  image: TileImage;\n  caption: string;\n}\n\ninterface About70Props {\n  badge?: Badge;\n  heading?: string;\n  description?: string;\n  milestones?: Milestone[];\n  closing?: string;\n  media?: ReactNode;\n  image?: TileImage;\n  mediaCaption?: string;\n  photo?: Photo;\n  className?: string;\n}\n\nexport const about70Demo: About70Props = {\n  badge: { label: \"How we got here\" },\n  heading: \"Six years, one problem, and a lot of very long Tuesdays\",\n  description:\n    \"We started by sitting behind a reception desk for a fortnight. Most of what follows came out of that.\",\n  milestones: [\n    {\n      year: \"2020\",\n      title: \"A fortnight behind the desk\",\n      description:\n        \"Two of us spent ten working days at a Bristol practice doing the receptionist's job badly. We came out with a list of forty things that were nobody's fault and everybody's problem.\",\n      marker: \"The beginning\",\n    },\n    {\n      year: \"2021\",\n      title: \"The first booking anyone else made\",\n      description:\n        \"One clinic, one room, and a scheduler that did nothing but avoid double-bookings. It ran for eight months before we added a second feature.\",\n    },\n    {\n      year: \"2023\",\n      title: \"Records and money in the same product\",\n      description:\n        \"Practices kept telling us the scheduler was fine and the rest of their week was not. Billing and records arrived together because separating them was what had broken everything else.\",\n    },\n    {\n      year: \"2024\",\n      title: \"Multi-site, because groups asked twice\",\n      description:\n        \"Four clinics sharing one waiting list turned out to be a different product, not a bigger one. It took a year and a rewrite of how capacity is modelled.\",\n    },\n    {\n      year: \"2026\",\n      title: \"Eleven practices, thirteen rooms, still no sales team\",\n      description:\n        \"Everyone who has bought Sirius spoke to an engineer first. We intend to keep that true for as long as it is possible.\",\n      marker: \"Today\",\n    },\n  ],\n  closing:\n    \"We are eighteen people. Nine of them write code, four have worked in a clinic, and all of them take support shifts.\",\n  media: (\n    <Stats16\n      label=\"Appointments booked\"\n      value=\"1,284\"\n      delta=\"12.4%\"\n      direction=\"up\"\n      caption=\"every month, across eleven practices\"\n      bars={[12, 21, 30, 38, 47, 61, 72, 86]}\n    />\n  ),\n  image: {\n    src: \"https://images.unsplash.com/photo-1750918619871-dc74c9a57394?q=80&w=2222&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    alt: \"Soft blue gradient backdrop\",\n  },\n  mediaCaption:\n    \"One bar for each year on this page. The first four are the ones nobody would have called a business.\",\n  photo: {\n    image: {\n      src: \"https://images.unsplash.com/photo-1744349350577-af263c4c9039?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      alt: \"Two colleagues talking in a clinic corridor\",\n    },\n    caption: \"Bristol, the fortnight that started it\",\n  },\n};\n\nexport function About70({\n  badge,\n  heading,\n  description,\n  milestones = [],\n  closing,\n  media,\n  image,\n  mediaCaption,\n  photo,\n  className,\n}: About70Props) {\n  return (\n    <section className={cn(\"bg-background py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 md:px-6\">\n        {badge && <Badge23 label={badge.label} />}\n\n        <div className=\"mt-6 border-t border-border pt-8 md:pt-10\">\n          <div className=\"grid gap-6 md:grid-cols-2 md:gap-12\">\n            {heading && (\n              <h2 className=\"text-3xl font-light leading-[1.1] tracking-tight text-foreground md:text-5xl\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <div className=\"flex md:justify-end\">\n                <p className=\"max-w-md text-base leading-relaxed text-muted-foreground\">\n                  {description}\n                </p>\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div className=\"mt-12 grid gap-10 md:mt-16 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)] lg:gap-16\">\n          <div>\n            {milestones.map((milestone, index) => (\n              <div\n                key={index}\n                className=\"grid gap-4 border-t border-border py-8 last:border-b sm:grid-cols-[7rem_minmax(0,1fr)] sm:gap-10\"\n              >\n                <div>\n                  <p className=\"text-2xl font-light tracking-tight tabular-nums text-foreground\">\n                    {milestone.year}\n                  </p>\n                  {milestone.marker && (\n                    <p className=\"mt-2 text-sm text-muted-foreground\">{milestone.marker}</p>\n                  )}\n                </div>\n                <div>\n                  <h3 className=\"text-xl font-medium text-foreground\">{milestone.title}</h3>\n                  <p className=\"mt-3 text-base leading-relaxed text-muted-foreground\">\n                    {milestone.description}\n                  </p>\n                </div>\n              </div>\n            ))}\n\n            {closing && (\n              <p className=\"mt-8 max-w-2xl text-base leading-relaxed text-muted-foreground\">\n                {closing}\n              </p>\n            )}\n          </div>\n\n          <div className=\"flex flex-col gap-6 lg:sticky lg:top-24 lg:self-start\">\n            {media && (\n              <div>\n                <div className=\"relative flex h-72 items-center justify-center overflow-hidden rounded-md bg-muted\">\n                  {image && (\n                    <img\n                      className=\"absolute inset-0 size-full object-cover\"\n                      src={image.src}\n                      alt={image.alt}\n                    />\n                  )}\n                  <div className=\"relative z-10 size-full\">{media}</div>\n                </div>\n                {mediaCaption && (\n                  <p className=\"mt-3 text-sm leading-relaxed text-muted-foreground\">\n                    {mediaCaption}\n                  </p>\n                )}\n              </div>\n            )}\n\n            {photo && (\n              <figure>\n                <div className=\"relative h-64 w-full overflow-hidden rounded-md bg-muted\">\n                  <img\n                    className=\"absolute inset-0 size-full object-cover\"\n                    src={photo.image.src}\n                    alt={photo.image.alt}\n                  />\n                </div>\n                <figcaption className=\"mt-3 text-sm text-muted-foreground\">\n                  {photo.caption}\n                </figcaption>\n              </figure>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/about70.tsx"
    },
    {
      "path": "registry-pieces/stats16/stats16.tsx",
      "content": "\"use client\";\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ntype Direction = \"up\" | \"down\";\n\ninterface Stats16Props {\n  label?: string;\n  value?: string;\n  delta?: string;\n  direction?: Direction;\n  caption?: string;\n  bars?: number[];\n  className?: string;\n}\n\nexport const stats16Demo: Stats16Props = {\n  label: \"Visits this month\",\n  value: \"1,284\",\n  delta: \"12.4%\",\n  direction: \"up\",\n  caption: \"vs. 1,142 last month\",\n  bars: [38, 52, 44, 61, 55, 72, 68, 86],\n};\n\nexport function Stats16({\n  label,\n  value,\n  delta,\n  direction = \"up\",\n  caption,\n  bars = [],\n  className,\n}: Stats16Props) {\n  const peak = Math.max(...bars, 1);\n  const Trend = direction === \"up\" ? TrendingUp : TrendingDown;\n\n  return (\n    <div className={cn(\"relative flex size-full items-center justify-center p-4\", className)}>\n      <div className=\"w-full max-w-72 rounded-md border border-border bg-card p-5 shadow-xl\">\n        {label && <p className=\"text-sm text-muted-foreground\">{label}</p>}\n\n        <div className=\"mt-1 flex items-baseline gap-2\">\n          {value && (\n            <span className=\"text-3xl font-semibold tracking-tight tabular-nums text-card-foreground\">\n              {value}\n            </span>\n          )}\n          {delta && (\n            <span\n              className={cn(\n                \"flex items-center gap-1 text-sm font-medium\",\n                direction === \"up\" ? \"text-emerald-500\" : \"text-rose-500\"\n              )}\n            >\n              <Trend className=\"size-3.5\" aria-hidden=\"true\" />\n              {delta}\n            </span>\n          )}\n        </div>\n\n        {bars.length > 0 && (\n          <div className=\"mt-4 flex h-10 items-end gap-1\" aria-hidden=\"true\">\n            {bars.map((bar, index) => (\n              <span\n                key={index}\n                className={cn(\n                  \"flex-1 rounded-sm\",\n                  index === bars.length - 1 ? \"bg-primary\" : \"bg-primary/20\"\n                )}\n                style={{ height: `${Math.max((bar / peak) * 100, 8)}%` }}\n              />\n            ))}\n          </div>\n        )}\n\n        {caption && <p className=\"mt-3 text-sm text-muted-foreground\">{caption}</p>}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/piece/stats16.tsx"
    },
    {
      "path": "registry-components/badge23/badge23.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype Tone = \"muted\" | \"foreground\" | \"primary\";\n\ninterface Badge23Props {\n  /** Eyebrow label (rendered uppercase) */\n  label: string;\n  /** Text/border tone */\n  tone?: Tone;\n  /** Additional classes merged onto the root */\n  className?: string;\n}\n\nconst toneStyles: Record<Tone, string> = {\n  muted: \"border-border text-muted-foreground\",\n  foreground: \"border-foreground/30 text-foreground\",\n  primary: \"border-primary/40 text-primary\",\n};\n\nexport const badge23Demo: Badge23Props = {\n  label: \"Product\",\n};\n\nexport function Badge23({ label, tone = \"muted\", className }: Badge23Props) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-md border bg-transparent px-2.5 py-1 font-mono text-sm uppercase leading-none tracking-widest\",\n        toneStyles[tone],\n        className\n      )}\n    >\n      {label}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/component/badge23.tsx"
    }
  ],
  "type": "registry:block"
}