Soft Panel CTA

Cta101: Soft Panel CTA

The plainest closing panel in the set: a soft rounded surface, a centred heading that settles in word by word, a short paragraph and a pair of pills, with no photograph and nothing to load.

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

Base UI flavor

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

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

Quick start

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

import { Cta101, cta101Demo } from "@/components/beste/block/cta101";

export default function Page() {
  return <Cta101 {...cta101Demo} />;
}

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

import { Cta101 } from "@/components/beste/block/cta101";

export default function Page() {
  return (
    <Cta101
      eyebrow="Ready when you are"
      heading="The room is here. The hour is yours."
      description="Book a first conversation, or write to us if that feels easier."
      buttons={[
        { label: "Book a conversation", href: "/book", tone: "dark" },
        { label: "Write to us", href: "mailto:hello@beste.co", tone: "outline" },
      ]}
    />
  );
}

Props

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

Behavior notes

• Nothing here loads: no photograph, no grain filter, no scroll listener. It is the block to reach for when a page already carries several image-heavy sections and the closing panel should cost nothing.
• The panel itself animates in as one piece while the lines inside it are staggered separately, so the surface arrives first and the copy resolves on it rather than everything appearing at once.
• The heading takes an explicit delay={0.3} so it starts after the eyebrow instead of alongside it, and the paragraph then waits on 0.3 + heading.split(" ").length * 0.05 to land as the last word does.
• Buttons wrap and centre, so two actions stack cleanly on a phone rather than shrinking side by side.
• Each button carries its own tone, so a solid primary and an outline alternative can sit together without either being styled from outside.
• The heading is capped at max-w-3xl inside a centred column, so a long sentence breaks into balanced lines instead of running the full width of the panel.