Founder Quote CTA

Cta100: Founder Quote CTA

A founder quote as the whole call to action: the sentence settles in word by word at display size, then a portrait, a name and role, and a pill beside a quieter 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/cta100?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Cta100, cta100Demo } from "@/components/beste/block/cta100";

export default function Page() {
  return <Cta100 {...cta100Demo} />;
}

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

import { Cta100 } from "@/components/beste/block/cta100";

export default function Page() {
  return (
    <Cta100
      eyebrow="From the founder"
      quote="Nobody has ever walked into this room too early. Plenty of people have told me they wish they had come sooner."
      author={{
        name: "Laura Marling",
        role: "Founder and psychotherapist",
        avatar: { src: "/team/laura.jpg", alt: "Portrait of the founder" },
      }}
      button={{ label: "Come sooner", href: "/book", tone: "dark" }}
      link={{ label: "Read the whole story", href: "/story" }}
    />
  );
}

Props

type Author = {
  name: string;
  role: string;
  avatar: { src: string; alt: string };
};

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

Behavior notes

• The quote is rendered as a real blockquote, not a heading, so a long sentence set at display size does not end up in the page outline as a section title.
• Its stagger is tightened to 0.03s, faster than the component's default, because a quote runs to far more words than a heading and the default rhythm would leave the reader waiting.
• Everything after it waits on 0.2 + quote.split(" ").length * 0.03, the same arithmetic, so the attribution lands exactly as the final word settles however long the quote is.
• The author block is centred as a unit but its text is left aligned, so the name and role read as a signature rather than as two more centred lines.
• The action row wraps and centres, so the pill and the link stack cleanly on a phone instead of the link shrinking beside the button.
• The link's arrow lifts only under motion-safe:, so the affordance is dropped for reduced motion while the link keeps working.
• Every part is optional, so this works as a bare quote, as a quote with an attribution, or as the full closing section.