Half Photo CTA

Cta96: Half Photo CTA

A two-up call to action: copy, a pill and a short list of reassurances on a soft panel, with a square photograph drifting inside the other half of the same rounded frame.

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

Base UI flavor

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

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

Quick start

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

import { Cta96, cta96Demo } from "@/components/beste/block/cta96";

export default function Page() {
  return <Cta96 {...cta96Demo} />;
}

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

import { Cta96 } from "@/components/beste/block/cta96";

export default function Page() {
  return (
    <Cta96
      eyebrow="A first step"
      heading="One call. No decisions required."
      description="Twenty minutes to hear what brings you here and to say, honestly, whether we are the right place."
      button={{ label: "Book the twenty minutes", href: "/call", tone: "dark" }}
      notes={["Free, always", "Phone or video", "Nothing is booked afterwards unless you ask"]}
      image={{ src: "/photos/forest.jpg", alt: "Sunlight falling through tall trees onto a forest floor" }}
    />
  );
}

Props

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

Behavior notes

• The two halves live inside one overflow-hidden rounded-md wrapper, so the photograph is clipped by the panel's own corners and no radius has to be repeated on the image.
• The copy column is a flex with justify-between, so the button and its notes are pinned to the foot of the panel and stay level with the bottom of the photograph however short the copy is.
• The heading is given an explicit delay={0.3} so it starts after the eyebrow rather than with it, and the paragraph then waits on 0.3 + heading.split(" ").length * 0.05 to land as the last word settles.
• The photograph drifts -10% to 10% against a 1.2 scale inside a half that has no fixed aspect ratio: it takes its height from the copy beside it from md up, and falls back to min-h-[20rem] on a phone.
• The notes are a plain ul with dot markers drawn as spans, so the list keeps its semantics without inheriting browser bullet styling that would not match the type.
• Photos clear from blur(24px) on decode, with a complete check on mount so a cached image is never left blurred.
• Without image the copy panel simply takes the full width of the rounded frame.