CTA Split

split x closing

A closing call-to-action — heading, one line of copy, and dual buttons beside a supporting visual.

ctaconversionsplit

Ready to build something people love?

Start from a block and ship today.

Get startedTalk to us

Code

relume-cta.tsx

export function CtaSplit() {
  return (
    <section className="mx-auto max-w-6xl px-6 py-16 md:py-24">
      <div className="grid grid-cols-1 gap-x-16 gap-y-10 md:grid-cols-2 md:items-center">
        <div>
          <h2 className="mb-5 text-4xl font-bold tracking-tight">Ready to build something people love?</h2>
          <p className="text-lg text-muted-foreground">Start from a block, keep your tokens, and ship today.</p>
          <div className="mt-8 flex flex-wrap gap-4">
            <a className="rounded-full bg-foreground px-5 py-2.5 text-background">Get started</a>
            <a className="rounded-full border border-border px-5 py-2.5">Talk to us</a>
          </div>
        </div>
        <div className="aspect-video w-full rounded-2xl border border-border bg-muted" />
      </div>
    </section>
  );
}

Adapted from the Relume Library — swap the placeholder copy and it themes itself from your project tokens.

Use it in another build

Drop this section into a page, keep your project tokens, and it themes itself. Or tell Claude Code: “add the CTA Split section and fill it with my copy.”