Handheld Reminder CTA

Cta91: Handheld Reminder CTA

A closing call to action that leads with a narrow portrait tile floating a live phone frame, then sets centered copy and two actions beneath it over three hairline promises.

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

Base UI flavor

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

This installs the block to components/beste/block/cta91.tsx, the browser35 phone-frame piece it floats on the tile (installed to components/beste/piece/browser35.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { Browser35 } from "@/components/beste/piece/browser35";
import { Cta91, cta91Demo } from "@/components/beste/block/cta91";

export default function Page() {
  return <Cta91 {...cta91Demo} />;
}

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

import { Browser35 } from "@/components/beste/piece/browser35";
import { Cta91 } from "@/components/beste/block/cta91";

export default function Page() {
  return (
    <Cta91
      badge={{ label: "For the member" }}
      heading="Send them something they can actually use"
      description="Every appointment leaves as a link that opens on any phone."
      media={
        <Browser35
          time="09:41"
          title="Appointment"
          status="Confirmed"
          headline="Wednesday, 14 May · 09:00"
          rows={[
            { label: "With", value: "Dr Amelia Frost" },
            { label: "Room", value: "Clinic 2, ground floor" },
          ]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      buttons={[
        { label: "See a live reminder", href: "/reminder" },
        { label: "Book a demo", href: "/demo", tone: "outline" },
      ]}
      promises={[
        {
          title: "Nothing to install",
          description: "It is a link. It opens in whatever browser is already on the phone.",
        },
        {
          title: "Rescheduling in two taps",
          description: "Members move themselves into a real opening.",
        },
      ]}
    />
  );
}

Props

type ButtonTone = "primary" | "neutral" | "outline";

type ActionLink = {
  label: string;
  href: string;
  tone?: ButtonTone;
};

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

Behavior notes

• The tile leads the block, above the eyebrow. That reversal is the point: the artefact is shown before it is described, which is why media is the first child of the container.
• The tile is a portrait crop, h-96 inside max-w-xs, so it reads as a handset rather than as a wide media band. It is centered with mx-auto rather than gridded.
• The tile height is fixed at every breakpoint, so the phone frame keeps its proportions on mobile instead of stretching to the container width.
• The promise columns each carry their own border-t, so the rules are per column and stop at the gaps.
• The promises grid is md:grid-cols-3, which is the count the layout is tuned for. A fourth wraps onto a second row.
• Button tones fall back positionally: tone is honored when set, otherwise the first button renders primary and every later one renders outline.
• PromiseItem is named rather than being called Promise, since that would shadow the global Promise type inside the installed file.