Launch Countdown CTA

Cta81: Launch Countdown CTA

A closing call to action with centered copy above two image tiles, one floating a live countdown and the other an inline email capture, closing on a line of 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/cta81?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/cta81.tsx, the event12 countdown and form36 capture pieces it floats on the two tiles (installed to components/beste/piece/{name}.tsx), and the badge23 component it uses for the eyebrow.

Quick start

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

import { Cta81, cta81Demo } from "@/components/beste/block/cta81";

export default function Page() {
  return <Cta81 {...cta81Demo} />;
}

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

import { Cta81 } from "@/components/beste/block/cta81";
import { Event12 } from "@/components/beste/piece/event12";
import { Form36 } from "@/components/beste/piece/form36";

export default function Page() {
  return (
    <Cta81
      badge={{ label: "Early access" }}
      heading="The doors open in twelve days"
      description="When the counter reaches zero it opens to everyone, and the first hundred workspaces keep launch pricing for good."
      countdown={{
        media: (
          <Event12
            title="Opens to everyone in"
            units={[
              { value: "12", label: "days" },
              { value: "06", label: "hrs" },
              { value: "48", label: "min" },
            ]}
            caption="Launch pricing stops when the counter does."
          />
        ),
        image: { src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" },
      }}
      capture={{
        media: (
          <Form36
            label="Get the launch note"
            placeholder="you@practice.com"
            submitLabel="Join"
            finePrint="One email when we open the doors. Nothing else, ever."
          />
        ),
        image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
      }}
      note="Already on the list? We will write to the address you signed up with."
    />
  );
}

Props

type Panel = {
  media: ReactNode;
  image?: TileImage;
};

type TileImage = {
  src: string;
  alt: string;
};

Behavior notes

• The two panels are separate named props rather than an array, so each slot has a fixed meaning. That is deliberate: the layout is a countdown beside a capture, not a generic pair of tiles.
• Panels render independently. Passing only capture leaves a single tile in the left grid column rather than centering it, so pass both or adjust the grid yourself.
• media is required on a panel while image is optional, so a tile can float its asset on the plain muted surface.
• The capture form lives entirely inside the form36 piece. This block holds no form state and has no submit handler, so wiring the subscribe call is done on the piece.
• The tiles are fixed height per breakpoint (h-64, then md:h-72) and sit in a plain md:grid-cols-2, so both stay the same size regardless of what the pieces inside them contain.
• note is capped at max-w-xl and centered independently of the tiles, which keeps the fine print at a readable measure under a much wider row.