Clients & Outcomes

Agency20: Clients & Outcomes

A proof section that pairs a grayscale client logo cloud with a stacked list of measurable outcomes, each stat led by a large number/suffix pair and an icon.

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

Base UI flavor

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

This installs the block to components/beste/block/agency20.tsx, the badge6 component it uses for the eyebrow, and its dependencies.

Quick start

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

import { Agency20, agency20Demo } from "@/components/beste/block/agency20";

export default function AboutPage() {
  return <Agency20 {...agency20Demo} />;
}

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

import { Agency20 } from "@/components/beste/block/agency20";

export default function AboutPage() {
  return (
    <Agency20
      label="Proof, not promises"
      heading="The brands we measure, and the numbers we move."
      intro="Every engagement below ships with a number we agreed on before we started."
      trustedLabel="Trusted by"
      clients={[
        { name: "Aurora Labs", logo: "https://oud.pics/sm/l/logoipsum-380.png" },
        { name: "Northwind", logo: "https://oud.pics/sm/l/logoipsum-388.png" },
      ]}
      outcomes={[
        { stat: "3.1", suffix: "x", description: "Blended ROAS lift for a DTC skincare brand." },
        { stat: "42", suffix: "%", description: "Lower cost per acquisition for a subscription app." },
      ]}
    />
  );
}

Props

type Client = { name: string; logo: string };
type Outcome = { stat: string; suffix: string; description: string };

Behavior notes

• Outcome icons are not configurable per item: they come from a fixed three-icon array (TrendingUp, BarChart3, Repeat) cycled with index % outcomeIcons.length, so a fifth outcome reuses the first icon rather than falling back to a generic one.
• Client logos default to grayscale opacity-70 and switch to full color at opacity-100 on hover; there is no active/selected state, only the hover transition.
• The layout is an asymmetric lg:grid-cols-[1fr_1.4fr] grid, giving the outcomes column more width than the logo cloud since outcome descriptions run longer.
• outcome.suffix renders in text-primary immediately after outcome.stat, so short suffixes like % or x read as a colored unit attached to the number rather than a separate label.
• Outcome rows are separated by a top border except the first, which drops both the border and its top padding.