# Case Study 1 - Long-form case study with metrics and sidebar

> This component displays a detailed case study highlighting improvements in system reliability through AI monitoring, featuring key metrics, narrative sections, and visual elements. It also includes breadcrumbs for navigation, alerts for important notes, and buttons for user interactions such as contacting or learning more.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/case-study1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/case-study1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/case-study1-light-df2e257541e8598c.png
- Registry item: https://shadcnblocks.com/r/case-study1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/case-study1.json
```

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

## Dependencies

- npm packages: `cn`, `lucide-react`
- Registry items: `alert`, `breadcrumb`, `button`, `separator`

## Files

### `block/case-study1/case-study1.tsx`

```tsx
import { GitBranch, Lightbulb } from "lucide-react";
import { cn } from "cn";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
interface CaseStudy1Props {
  className?: string;
}

const CaseStudy1 = ({ className }: CaseStudy1Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-7xl">
          <Breadcrumb className="mb-6 lg:mb-10">
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href="/">Home</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator>/</BreadcrumbSeparator>
              <BreadcrumbItem>
                <BreadcrumbPage>Components</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
          <div className="relative flex-col gap-10 lg:flex lg:flex-row lg:justify-between">
            <div className="lg:max-w-[692px]">
              <div className="max lg:col-span-2">
                <div>
                  <h1 className="text-3xl font-extrabold text-pretty">
                    Boosting System Reliability by 125% with AI Monitoring
                  </h1>
                  <p className="mt-2 text-lg text-muted-foreground">
                    In a kingdom far away, where laughter once flowed freely, a
                    peculiar tale unfolded about a king who decided to tax the
                    very essence of joy itself - jokes and jest.
                  </p>
                  <img
                    src="https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/photos/photo-3-16x9.jpg"
                    alt="Cover photograph for the case study"
                    className="my-8 aspect-video w-full rounded-lg object-cover"
                  />
                  <div className="mb-8 grid grid-cols-2 gap-5 lg:grid-cols-4">
                    <div className="flex flex-col gap-2">
                      <p className="text-4xl font-semibold sm:text-5xl">19%</p>
                      <p className="text-sm text-muted-foreground">
                        increase in user engagement rate
                      </p>
                    </div>
                    <div className="flex flex-col gap-2">
                      <p className="text-4xl font-semibold sm:text-5xl">28%</p>
                      <p className="text-sm text-muted-foreground">
                        growth in customer retention rate
                      </p>
                    </div>
                    <div className="flex flex-col gap-2">
                      <p className="text-4xl font-semibold sm:text-5xl">72%</p>
                      <p className="text-sm text-muted-foreground">
                        satisfaction rate among users and customers
                      </p>
                    </div>
                    <div className="flex flex-col gap-2">
                      <p className="text-4xl font-semibold sm:text-5xl">
                        &gt;85%
                      </p>
                      <p className="text-sm text-muted-foreground">
                        positive feedback received from users
                      </p>
                    </div>
                  </div>
                </div>
                <div className="prose mb-8 max-w-full lg:max-w-prose dark:prose-invert">
                  <h2>How the Tax System Works</h2>
                  <p>
                    The king, seeing how much happier his subjects were,
                    realized the error of his ways and repealed the joke tax.
                    Jokester was declared a hero, and the kingdom lived happily
                    ever after.
                  </p>
                  <Alert>
                    <Lightbulb className="h-4 w-4" />
                    <AlertTitle>Royal Decree!</AlertTitle>
                    <AlertDescription>
                      Remember, all jokes must be registered at the Royal Jest
                      Office before telling them
                    </AlertDescription>
                  </Alert>

                  <h2>The People&apos;s Rebellion</h2>
                  <p>
                    The people of the kingdom, feeling uplifted by the laughter,
                    started to tell jokes and puns again, and soon the entire
                    kingdom was in on the joke.
                  </p>
                  <div>
                    <table>
                      <thead>
                        <tr>
                          <th>King&apos;s Treasury</th>
                          <th>People&apos;s happiness</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Empty</td>
                          <td>Overflowing</td>
                        </tr>
                        <tr className="m-0 border-t p-0 even:bg-muted">
                          <td>Modest</td>
                          <td>Satisfied</td>
                        </tr>
                        <tr className="m-0 border-t p-0 even:bg-muted">
                          <td>Full</td>
                          <td>Ecstatic</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <p>
                    The king, seeing how much happier his subjects were,
                    realized the error of his ways and repealed the joke tax.
                    Jokester was declared a hero, and the kingdom lived happily
                    ever after.
                  </p>

                  <h2>The King&apos;s Plan</h2>
                  <p>
                    The king thought long and hard, and finally came up with{" "}
                    <a href="#">a brilliant plan</a>: he would tax the jokes in
                    the kingdom.
                  </p>
                  <blockquote>
                    &ldquo;After all,&rdquo; he said, &ldquo;everyone enjoys a
                    good joke, so it&apos;s only fair that they should pay for
                    the privilege.&rdquo;
                  </blockquote>
                  <p>
                    The king&apos;s subjects were not amused. They grumbled and
                    complained, but the king was firm:
                  </p>
                  <ul>
                    <li>1st level of puns: 5 gold coins</li>
                    <li>2nd level of jokes: 10 gold coins</li>
                    <li>3rd level of one-liners : 20 gold coins</li>
                  </ul>
                  <p>
                    As a result, people stopped telling jokes, and the kingdom
                    fell into a gloom. But there was one person who refused to
                    let the king&apos;s foolishness get him down: a court jester
                    named Jokester.
                  </p>
                </div>
              </div>
            </div>
            <div className="h-fit lg:sticky lg:top-8 lg:max-w-80">
              <img
                src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
                alt="logo"
                className="mb-8 w-36"
              />
              <p className="mb-1.5 text-sm font-semibold">Overview</p>
              <p className="mb-5 text-sm text-muted-foreground">
                Our client implemented our solution to transform their business
                operations, resulting in improved efficiency, enhanced customer
                experience, and significant cost savings across their entire
                organization.
              </p>
              <p className="mb-1.5 text-sm font-semibold">Sector</p>
              <p className="mb-5 text-sm text-muted-foreground">Technology</p>
              <p className="mb-1.5 text-sm font-semibold">Solution</p>
              <Button size="sm" variant="outline">
                <GitBranch className="opacity-60" />
                Enterprise
              </Button>
              <Separator className="my-5" />
              <p className="mb-3 text-sm font-semibold">Want to learn more?</p>
              <Button size="sm">Contact us</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { CaseStudy1 };
```