Two Case Studies

Showcase51: Two Case Studies

Two case studies side by side: each carries a photograph that drifts inside its frame, a client and sector rule, a serif title, a summary, and a ruled foot pairing the headline result with a read link.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/showcase51?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/showcase51?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/showcase51.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports showcase51Demo alongside the block: the exact props behind the preview above. Spread it to get a working case study section in one line.

import { Showcase51, showcase51Demo } from "@/components/beste/block/showcase51";

export default function Page() {
  return <Showcase51 {...showcase51Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Showcase51 } from "@/components/beste/block/showcase51";

export default function Page() {
  return (
    <Showcase51
      eyebrow="Case studies"
      heading="Two companies, two years, and what changed."
      button={{ label: "Bring us to your team", href: "/workplace", tone: "outline" }}
      studies={[
        {
          client: "A design studio of forty",
          sector: "Creative",
          title: "Confidential sessions for a team that never switched off",
          summary: "Eight monthly hours, booked directly by staff, never reported back.",
          result: { value: "0", label: "Burnout departures in the second year" },
          href: "/cases/studio",
          image: { src: "/rooms/table.jpg", alt: "A calm room with a long stone table" },
        },
      ]}
      labels={{ read: "Read the case" }}
    />
  );
}

Props

type Study = {
  client: string;
  sector: string;
  title: string;
  summary: string;
  result: { value: string; label: string };
  href: string;
  image: { src: string; alt: string };
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The result block carries mt-auto, so both feet sit on the same line however uneven the summaries above them are; that is what makes the two figures comparable at a glance.
• result.value is a free string, so "0", "58%" and "3x" all render as given with no parsing and no count-up.
• Each card carries three links to the same case (the image, the title and the read link) rather than one wrapper, so the summary stays selectable and the heading keeps its own accessible name.
• client and sector are printed either side of a dot as separate spans, so a long client name wraps without stranding the dot.
• Each photograph owns its own scroll listener, so the two drift at their own moment as they reach the viewport.
• The read link's arrow lifts only under motion-safe:, so the affordance is dropped for reduced motion while the link keeps working.
• Titles are h3 under the section h2, and the grid is two across from md, so a third study wraps to a new row rather than compressing the pair.