{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-19",
  "title": "Feature 19",
  "description": "An editorial split section with large title, two compared image panels, circular arrow button, and footer bar",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/registry/blocks/feature-19/feature.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface Feature19Panel {\n  label: string;\n  image?: string;\n  description: string;\n}\n\ninterface Feature19Props {\n  title?: string;\n  panels?: [Feature19Panel, Feature19Panel];\n  className?: string;\n}\n\nconst Feature19 = ({\n  title = \"Stop building landing pages from scratch.\",\n  panels = [\n    {\n      label: \"From scratch\",\n      image:\n        \"https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp\",\n      description:\n        \"Custom CSS and one-off components might get you there, but perpetually rebuilding the same sections severely slows your team down.\",\n    },\n    {\n      label: \"With blocks\",\n      image:\n        \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n      description:\n        \"With production-ready blocks, a landing page can come together through copy, paste and customization — and your brand can be part of the process.\",\n    },\n  ],\n  className,\n}: Feature19Props) => (\n  <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n    <div className=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:gap-16\">\n      {/* Left: large editorial title, flush to top */}\n      <h2 className=\"text-4xl leading-tight font-medium tracking-tight md:text-5xl\">\n        {title}\n      </h2>\n\n      {/* Right: two compared image panels with circular arrow between */}\n      <div className=\"relative\">\n        <div className=\"grid grid-cols-2 gap-4\">\n          {panels.map((panel, index) => (\n            <div key={index} className=\"flex flex-col gap-4\">\n              <div className=\"relative overflow-hidden rounded-xl bg-muted\">\n                {panel.image ? (\n                  <img\n                    src={panel.image}\n                    alt={panel.label}\n                    className=\"aspect-3/4 w-full object-cover\"\n                  />\n                ) : (\n                  <div className=\"aspect-3/4 w-full\" />\n                )}\n                <span className=\"absolute top-4 left-4 text-sm font-medium text-white\">\n                  {panel.label}\n                </span>\n              </div>\n              <p className=\"text-sm text-muted-foreground\">\n                {panel.description}\n              </p>\n            </div>\n          ))}\n        </div>\n\n        {/* Circular arrow button overlapping both panels */}\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"absolute top-[40%] left-1/2 z-10 size-12 -translate-x-1/2 rounded-full shadow-md\"\n          aria-label=\"Compare\"\n        >\n          <ArrowRight className=\"size-5\" />\n        </Button>\n      </div>\n    </div>\n  </section>\n);\n\nexport default Feature19;\nexport type { Feature19Props, Feature19Panel };\n",
      "type": "registry:component",
      "target": "components/feature-19.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-19.webp",
    "imageDark": "/r/previews/feature-19-dark.webp"
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}