Two-Path Closing Cards

Cta83: Two-Path Closing Cards

A closing call to action offering two routes as side-by-side cards, each with an icon tile, a short kicker, a checked list on hairlines and its own action, with the recommended route outlined in the accent.

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

Base UI flavor

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

This installs the block to components/beste/block/cta83.tsx plus the badge23 and button21 components it uses for the eyebrow and the card actions.

Quick start

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

import { Cta83, cta83Demo } from "@/components/beste/block/cta83";

export default function Page() {
  return <Cta83 {...cta83Demo} />;
}

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

import { Cta83 } from "@/components/beste/block/cta83";
import { PhoneCall, Rocket } from "lucide-react";

export default function Page() {
  return (
    <Cta83
      badge={{ label: "Two ways in" }}
      heading="Start on your own, or start with us on the call"
      description="Both routes end in the same workspace."
      paths={[
        {
          icon: Rocket,
          kicker: "Self-serve",
          title: "Open a workspace now",
          description: "Sign up, import a list of members, and have a booking page before lunch.",
          points: ["Free for your first clinic", "No card, no sales call"],
          button: { label: "Start free", href: "/signup" },
          featured: true,
        },
        {
          icon: PhoneCall,
          kicker: "Guided",
          title: "Bring the whole practice across",
          description: "Thirty minutes with an engineer, then a dry run on your own data.",
          points: ["Mapping done with your lead", "A private dry-run workspace"],
          button: { label: "Book a call", href: "/demo" },
        },
      ]}
    />
  );
}

Props

import type { LucideIcon } from "lucide-react";

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

type PathCard = {
  icon: LucideIcon;
  kicker: string;
  title: string;
  description: string;
  points: string[];
  button: ActionLink;
  featured?: boolean;
};

Behavior notes

• featured drives two things at once: the card border switches from border-border to border-primary and its surface from bg-muted to bg-card, and the action switches from outline to primary. Marking both paths featured removes the distinction entirely.
• Nothing enforces a single featured card, so it is on you to mark exactly one.
• Cards are flex flex-col with the point list marked flex-1, so two cards with different amounts of copy still end at the same height and both actions land on the same line.
• Point lists use border-t with last:border-b, closing each list at the bottom so it reads as a small table rather than an open list.
• Both actions carry the same ArrowRight icon through Button21's icon prop, so the visual weight difference between the two routes comes from tone alone rather than from different affordances.
• Icons are passed as components, not names. Import the lucide-react icon and hand it over; the block renders it at size-5 in a size-10 tinted tile marked aria-hidden.
• The grid is md:grid-cols-2 with no lg variant, so the two cards go side by side at tablet width and stay that way.