{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-full-bleed-rows",
  "title": "Features — Full-Bleed Rows",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-full-bleed-rows/FeatureFullBleedRows.tsx",
      "content": "'use client'\n\nimport { Fragment } from 'react'\nimport { ArrowRight } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst rows = [\n  {\n    eyebrow: 'Modelling',\n    title: 'The definition is the product',\n    body: 'Dashboards are an output. What your company argues about is the formula behind the number, so that is the thing that gets an owner, a review, and a history.',\n    detail: [\n      { label: 'Authored in', value: 'Your repository' },\n      { label: 'Reviewed by', value: 'The named owner' },\n      { label: 'Reverted in', value: 'One click' },\n    ],\n    reverse: false,\n  },\n  {\n    eyebrow: 'Governance',\n    title: 'Permissions that survive a share',\n    body: 'Scope resolves per query from your identity provider, so forwarding a dashboard link never widens what the recipient can see. Every evaluation is logged.',\n    detail: [\n      { label: 'Resolved at', value: 'Query time' },\n      { label: 'Sourced from', value: 'SCIM groups' },\n      { label: 'Retained for', value: '7 years' },\n    ],\n    reverse: true,\n  },\n  {\n    eyebrow: 'Operations',\n    title: 'Cost you can see before the invoice',\n    body: 'Query budgets are enforced by the planner before execution, and each dashboard reports what it costs to open. Spend stops being a monthly surprise.',\n    detail: [\n      { label: 'Enforced at', value: 'Plan time' },\n      { label: 'Scoped per', value: 'Team' },\n      { label: 'Reported per', value: 'Dashboard' },\n    ],\n    reverse: false,\n  },\n]\n\nexport function FeatureFullBleedRows() {\n  return (\n    <section data-slot=\"feature-full-bleed-rows\" className=\"bg-background\">\n      {/* Bands alternate surface as well as side, so the eye has two cues that a\n          new section started rather than relying on whitespace alone. */}\n      {rows.map((row, index) => (\n        <div key={row.title} className={`border-border border-b ${index % 2 === 1 ? 'bg-muted/40' : 'bg-background'}`}>\n          <div className=\"mx-auto grid max-w-6xl items-center gap-10 px-6 py-16 lg:grid-cols-2 lg:gap-16 lg:py-20\">\n            <div className={row.reverse ? 'lg:order-2' : undefined}>\n              <Badge variant=\"secondary\">{row.eyebrow}</Badge>\n              <h2 className=\"mt-4 text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">{row.title}</h2>\n              <p className=\"text-muted-foreground mt-3 max-w-prose leading-relaxed\">{row.body}</p>\n              <Button variant=\"link\" className=\"mt-4 h-auto p-0\">\n                Read the detail\n                <ArrowRight className=\"ml-1.5 size-3.5\" aria-hidden=\"true\" />\n              </Button>\n            </div>\n\n            <Card\n              className={\n                row.reverse\n                  ? 'lg:order-1 lg:-ml-[calc((100vw-100%)/2)] lg:rounded-l-none lg:border-l-0'\n                  : 'lg:-mr-[calc((100vw-100%)/2)] lg:rounded-r-none lg:border-r-0'\n              }\n            >\n              <CardContent className=\"p-0\">\n                <div className=\"border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs\">\n                  {row.eyebrow.toLowerCase()}\n                </div>\n                <dl>\n                  {row.detail.map((entry, entryIndex) => (\n                    <Fragment key={entry.label}>\n                      <div className=\"flex items-center justify-between gap-4 px-4 py-3\">\n                        <dt className=\"text-muted-foreground text-sm\">{entry.label}</dt>\n                        <dd className=\"text-sm font-medium\">{entry.value}</dd>\n                      </div>\n                      {entryIndex < row.detail.length - 1 && <Separator />}\n                    </Fragment>\n                  ))}\n                </dl>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      ))}\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureFullBleedRows.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Alternating full-bleed feature bands on contrasting surfaces, each pairing a headline and supporting detail with an edge-to-edge visual that runs past the container.",
  "categories": [
    "marketing"
  ]
}