{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "visual-case-study",
  "title": "Case Study",
  "description": "Case study band with editable CONTENT and before/after.",
  "registryDependencies": [
    "@atroui/before-after-slider"
  ],
  "files": [
    {
      "path": "registry/default/blocks/visual-case-study.tsx",
      "content": "\"use client\"\n\nimport { BeforeAfterSlider } from \"./before-after-slider\"\n\n/** Edit CONTENT to match your case study. */\nconst CONTENT = {\n  title: \"7-day MVP that converted the first 40 waitlist users\",\n  client: { name: \"Acme Labs\", industry: \"SaaS\" },\n  projectType: \"MVP sprint\",\n  timeline: \"7 days\",\n  budget: \"Fixed\",\n  challenge:\n    \"The founder had a Notion backlog and no shipping cadence. Agency quotes were months out.\",\n  solution:\n    \"One engineer, fixed scope, daily async updates. Auth, core workflow, and a deployable Next.js app.\",\n  testimonial: \"We talked to the person building it every day - no handoffs.\",\n  testimonialAuthor: \"Alex R., Founder\",\n  mockupVariant: \"saas\" as const,\n  results: [\n    {\n      metric: \"Time to launch\",\n      value: \"7 days\",\n      description: \"From kickoff to production URL\",\n    },\n    {\n      metric: \"Waitlist conversions\",\n      value: \"40\",\n      description: \"First week after ship\",\n    },\n  ],\n  technologies: [\"Next.js\", \"Postgres\", \"Tailwind\"],\n}\n\nexport function VisualCaseStudy({\n  study = CONTENT,\n}: {\n  study?: typeof CONTENT\n}) {\n  const variant = study.mockupVariant ?? \"saas\"\n  const topResult = study.results[0]\n\n  return (\n    <article className=\"overflow-hidden border border-border-subtle bg-background text-foreground\">\n      <header className=\"border-b border-border-subtle px-5 py-6 sm:px-8 sm:py-8\">\n        <div className=\"flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground\">\n          <span className=\"font-medium uppercase tracking-wide text-foreground\">\n            {study.client.industry}\n          </span>\n          <span aria-hidden>·</span>\n          <span>{study.projectType}</span>\n          <span aria-hidden>·</span>\n          <span>\n            {study.timeline} · {study.budget}\n          </span>\n        </div>\n        <h2 className=\"ds-display mt-4 max-w-3xl text-2xl tracking-tight sm:text-3xl\">\n          {study.title}\n        </h2>\n        <p className=\"mt-2 text-sm text-muted-foreground\">{study.client.name}</p>\n      </header>\n\n      <div className=\"border-b border-border-subtle px-5 py-6 sm:px-8 sm:py-8\">\n        <BeforeAfterSlider variant={variant} />\n        <p className=\"mt-3 text-center text-xs text-muted-foreground\">\n          Drag the handle or use arrow keys to compare wireframe vs shipped UI.\n        </p>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-12\">\n        <div className=\"space-y-8 border-b border-border-subtle p-5 sm:p-8 lg:col-span-7 lg:border-r lg:border-b-0\">\n          <div>\n            <p className=\"ms-stamp\">The challenge</p>\n            <p className=\"mt-4 text-[15px] leading-relaxed text-foreground/90\">\n              {study.challenge}\n            </p>\n          </div>\n          <div>\n            <p className=\"ms-stamp\">The solution</p>\n            <p className=\"mt-4 text-[15px] leading-relaxed text-foreground/90\">\n              {study.solution}\n            </p>\n          </div>\n          {study.testimonial ? (\n            <blockquote className=\"border-l-2 border-brand pl-5\">\n              <p className=\"text-[15px] leading-relaxed text-foreground/90\">\n                &ldquo;{study.testimonial}&rdquo;\n              </p>\n              {study.testimonialAuthor ? (\n                <footer className=\"mt-3 text-xs text-muted-foreground\">\n                  - {study.testimonialAuthor}\n                </footer>\n              ) : null}\n            </blockquote>\n          ) : null}\n        </div>\n\n        <aside className=\"flex flex-col gap-8 bg-muted/30 p-5 sm:p-8 lg:col-span-5\">\n          {topResult ? (\n            <div>\n              <p className=\"ds-mono-label\">Outcome</p>\n              <p className=\"ds-display mt-3 text-4xl tracking-tight sm:text-5xl\">\n                {topResult.value}\n              </p>\n              <p className=\"mt-2 text-sm text-muted-foreground\">\n                {topResult.metric}\n                {topResult.description ? ` - ${topResult.description}` : \"\"}\n              </p>\n            </div>\n          ) : null}\n\n          {study.results.length > 0 ? (\n            <div>\n              <p className=\"ds-mono-label\">All results</p>\n              <ul className=\"mt-3 space-y-3\">\n                {study.results.map((result) => (\n                  <li\n                    key={result.metric}\n                    className=\"border-b border-border-subtle pb-3 last:border-0\"\n                  >\n                    <p className=\"text-sm font-medium text-foreground\">\n                      {result.value}\n                      <span className=\"ml-2 text-muted-foreground\">\n                        {result.metric}\n                      </span>\n                    </p>\n                    {result.description ? (\n                      <p className=\"mt-0.5 text-xs text-muted-foreground\">\n                        {result.description}\n                      </p>\n                    ) : null}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ) : null}\n\n          {study.technologies.length > 0 ? (\n            <div>\n              <p className=\"ds-mono-label\">Stack</p>\n              <ul className=\"mt-3 flex flex-wrap gap-2\">\n                {study.technologies.map((tech) => (\n                  <li\n                    key={tech}\n                    className=\"rounded-md border border-border-subtle bg-background px-3 py-1 text-xs text-muted-foreground\"\n                  >\n                    {tech}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ) : null}\n        </aside>\n      </div>\n    </article>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/visual-case-study.tsx"
    }
  ],
  "type": "registry:block"
}