Ruled Proof CTA

Cta102: Ruled Proof CTA

A closing band ruled top and bottom rather than filled: the heading and its line on one side, and on the other a pill above a row of avatars, a short star rating and a count.

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

Base UI flavor

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

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

Quick start

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

import { Cta102, cta102Demo } from "@/components/beste/block/cta102";

export default function Page() {
  return <Cta102 {...cta102Demo} />;
}

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

import { Cta102 } from "@/components/beste/block/cta102";

export default function Page() {
  return (
    <Cta102
      heading="Most people wish they had come sooner."
      description="You do not need a reason, a diagnosis or a plan. You need twenty free minutes and a phone."
      button={{ label: "Take the twenty minutes", href: "/call", tone: "dark" }}
      avatars={[{ src: "/people/one.jpg", alt: "Portrait of a client" }]}
      rating={5}
      proof="4.9 from 140 people this year" 
    />
  );
}

Props

type Avatar = {
  src: string;
  alt: string;
};

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

Behavior notes

• The section is drawn with a border-y on the inner grid instead of a filled panel, so it reads as a rule across the page and sits comfortably between two sections that already use surfaces.
• rating is rounded and clamped into 0 to 5 before drawing, so an out-of-range value cannot produce a wall of stars or a negative count.
• Only filled stars are drawn, with no empty track behind them, so three stars read as three marks rather than as three out of five.
• The stars are size-3.5 and sit directly above the proof line rather than beside it, which keeps them subordinate to the sentence instead of competing with the heading for attention.
• The avatar stack carries shrink-0, so a long proof line wraps rather than compressing the portraits.
• The two columns are vertically centred, so a short right column stays level with a two-line heading instead of riding at its top.
• There is no eyebrow prop here on purpose: the block is meant to be the quietest closing band in the set, and the heading opens it directly.