# Case Study Section v1

> A minimal split case study: a vertically centered headline, summary, three results in a hairline-divided list, and a text link on the left, beside a tall rounded cover image on the right.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/case-study-section-v1).

- Page, with a live preview: https://shadcn.exchange/r/uiception/case-study-section-v1
- Screenshot: https://shadcn.exchange/shot/uiception/case-study-section-v1/light.png
- Registry item: https://uiception.com/r/case-study-section-v1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/case-study-section-v1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`, `https://uiception.com/r/block-media.json`

## Files

### `registry/new-york/blocks/case-study-section-v1/page.tsx`

```tsx
import CaseStudySectionV1 from "./components/case-study-section-v1"

export default function Page() {
  return <CaseStudySectionV1 />
}
```

### `registry/new-york/blocks/case-study-section-v1/components/case-study-section-v1.tsx`

```tsx
import Image from "next/image"
import Link from "next/link"
import { ArrowRightIcon } from "lucide-react"

import { createBlockImage } from "@/lib/block-media"
import { Button } from "@/components/ui/button"

import { caseStudy, metrics } from "../lib/config"

const blockImage = createBlockImage("case-study-section-v1")

const study = {
  title: caseStudy.title,
  summary: caseStudy.summary,
  src: blockImage(caseStudy.imageFile),
  alt: caseStudy.alt,
  href: caseStudy.href,
  linkLabel: caseStudy.linkLabel,
}

export default function CaseStudySectionV1() {
  return (
    <section className="py-16 md:py-24">
      <div className="mx-auto grid max-w-6xl gap-10 px-6 md:grid-cols-12 md:gap-12">
        <div className="flex flex-col md:col-span-5 md:justify-center">
          <h2 className="text-3xl leading-[1.15] font-medium tracking-tight text-foreground md:text-4xl">
            {study.title}
          </h2>
          <p className="mt-4 text-[0.9375rem] leading-relaxed text-muted-foreground">
            {study.summary}
          </p>

          <dl className="mt-8 divide-y divide-border border-y border-border">
            {metrics.map((metric) => (
              <div
                key={metric.id}
                className="flex items-baseline justify-between gap-6 py-3"
              >
                <dt className="text-sm text-muted-foreground">
                  {metric.label}
                </dt>
                <dd className="text-xl font-medium tracking-tight text-foreground tabular-nums">
                  {metric.value}
                </dd>
              </div>
            ))}
          </dl>

          <div className="mt-4">
            <Button variant="link" asChild className="px-0">
              <Link href={study.href}>
                {study.linkLabel}
                <ArrowRightIcon />
              </Link>
            </Button>
          </div>
        </div>

        <div className="relative aspect-4/3 overflow-hidden rounded-xl bg-muted md:col-span-7 md:aspect-auto md:min-h-128">
          <Image
            src={study.src}
            alt={study.alt}
            fill
            unoptimized
            priority
            sizes="(max-width: 768px) 100vw, 680px"
            className="object-cover"
          />
        </div>
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/case-study-section-v1/lib/config.ts`

```ts
export const caseStudy = {
  title: "How we rebuilt Acme's checkout.",
  summary:
    "Acme's checkout was spread across nine legacy pages, each with its own form styles. We rebuilt it as one flow on a shared component library that their team now maintains.",
  imageFile: "image-1.jpg",
  alt: "A brand mark on a soft gray background surrounded by paper shapes",
  href: "#",
  linkLabel: "View the project",
} as const

export type Metric = {
  id: string
  value: string
  label: string
}

export const metrics: Metric[] = [
  { id: "checkout", value: "38%", label: "Fewer abandoned checkouts" },
  { id: "timeline", value: "6 weeks", label: "From kickoff to launch" },
  { id: "speed", value: "2.4×", label: "Faster page loads" },
]
```

### `public/images/blocks/case-study-section-v1/image-1.jpg.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```