Migration Process CTA

Cta85: Migration Process CTA

A closing call to action on a soft section that puts a live step tracker between centered copy and three hairline notes, then lands on a single action with its fine print.

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

Base UI flavor

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

This installs the block to components/beste/block/cta85.tsx, the progress16 step-tracker piece it floats on the tile (installed to components/beste/piece/progress16.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Cta85, cta85Demo } from "@/components/beste/block/cta85";

export default function Page() {
  return <Cta85 {...cta85Demo} />;
}

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

import { Cta85 } from "@/components/beste/block/cta85";
import { Progress16 } from "@/components/beste/piece/progress16";

export default function Page() {
  return (
    <Cta85
      badge={{ label: "Four steps" }}
      heading="You are one afternoon away from a live clinic"
      description="Every practice went through the same four steps, and none took longer than a fortnight."
      media={
        <Progress16
          title="Your migration"
          steps={["Export", "Map fields", "Review", "Go live"]}
          activeIndex={0}
          caption="Step one is sending us whatever your current system will give up."
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      notes={[
        {
          title: "You send, we read",
          description: "Any export, any shape. We have not met a format that stopped us yet.",
        },
        {
          title: "One hour together",
          description: "Your lead and our engineer agree what each old field becomes.",
        },
      ]}
      button={{ label: "Start your migration", href: "/migrate" }}
      finePrint="Nothing is charged until your first clinic is taking real bookings."
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type StepNote = {
  title: string;
  description: string;
};

Behavior notes

• The section is bg-muted and the media tile is bg-background, inverting the usual relationship so the tile reads as raised against the section rather than recessed into it.
• Widths narrow and widen deliberately down the block: max-w-2xl for the copy, max-w-3xl for the tile, max-w-4xl for the notes. That keeps the eye moving outward rather than presenting three items of the same width.
• The action row is flex flex-col items-center, so the button keeps its intrinsic width and the fine print sits centered directly under it rather than beside it.
• Notes each carry their own border-t, so the rules are per column and stop at the gaps.
• The notes grid is md:grid-cols-3, so three is the count the layout is tuned for. A fourth wraps onto a second row.
• The tracker inside the tile is presentational. This block holds no migration state, so activeIndex is passed to the piece as fixed copy.