Two Route Photo Columns

Usecase51: Two Route Photo Columns

Two ways of working, side by side: a photograph, an eyebrow, a statement, a dotted list of terms and a CTA in each column, with a sealed divider centred on the picture band between them.

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/usecase51?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/usecase51.tsx plus the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Usecase51, usecase51Demo } from "@/components/beste/block/usecase51";

export default function Page() {
  return <Usecase51 {...usecase51Demo} />;
}

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

import { Usecase51 } from "@/components/beste/block/usecase51";

export default function Page() {
  return (
    <Usecase51
      badge={{ label: "Two ways in" }}
      heading="Some clients need a system. Others need one beautiful thing."
      labels={{ divider: "Or" }}
      columns={[
        {
          eyebrow: "The long engagement",
          title: "Build the system once, run it for years",
          description: "For teams shipping continuously.",
          points: ["Twelve to twenty weeks", "Named lead for the duration"],
          buttonLabel: "Plan an engagement",
          href: "/contact",
          src: "/routes/system.jpg",
          alt: "Specimen sheets on a studio table",
          tone: "dark",
        },
        {
          eyebrow: "The single object",
          title: "One catalogue, one identity, one room",
          description: "For a specific thing with a specific date.",
          points: ["Four to eight weeks", "Fixed price agreed up front"],
          buttonLabel: "Commission one thing",
          href: "/contact",
          src: "/routes/object.jpg",
          alt: "Printed editorial spread",
          tone: "outline",
        },
      ]}
    />
  );
}

Props

type AudienceColumn = {
  eyebrow: string;
  title: string;
  description: string;
  points: string[];
  buttonLabel: string;
  href: string;
  src: string;
  alt: string;
  tone?: "dark" | "outline";
};

type Usecase51Labels = {
  divider?: string;
};

Behavior notes

• The divider is sized to mirror a column: the same aspect-[16/10] and a width of calc((100%-4rem)/2), so its hairline spans exactly the picture band and the seal lands on the photographs' own centre line rather than floating somewhere down the text.
• It is aria-hidden and pointer-events-none, because it is a piece of typography rather than content, and it only appears from md up, where two columns actually sit side by side.
• The seal sits on bg-background over the rule, which is what lets the line pass behind it without showing through.
• Points use dotted top rules (border-t border-dotted), a lighter texture than the section's solid rules, so a four-item list does not read as four more sections.
• tone defaults to "dark", so the two CTAs can be set as a primary and a secondary route without either being invisible.
• Each column is flex flex-col with the CTA wrapper on mt-auto, so both buttons line up even when one route has a longer description.
• The header is centred while the columns stay left-aligned, which keeps the comparison readable rather than centring four different text lengths.