CTA 1: framed call to action
A closing call-to-action panel: large heading, one line of reassurance and two buttons, over a softly lit animated grid.
// Ballmac UI: CTA 1. https://ui.ballmac.com/blocks/cta-1
import * as React from "react"
import { ArrowRight } from "lucide-react"
import { AnimatedGrid } from "@/components/ballmac/animated-grid"
import { buttonVariants } from "@/components/ballmac/button"
import { cn } from "@/lib/utils"
type Cta1Props = Omit<React.ComponentProps<"section">, "title"> & {
/** The heading. */
title?: string
/** One sentence under the heading. */
description?: string
/** Main call to action. */
primaryAction?: { label: string; href: string }
/** Secondary call to action. */
secondaryAction?: { label: string; href: string }
}
function Cta1({
title = "Ready when you are.",
description = "Set up your first project in under a minute. No credit card required.",
primaryAction = { label: "Get started", href: "#" },
secondaryAction = { label: "Talk to sales", href: "#" },
className,
...props
}: Cta1Props) {
return (
<section data-slot="cta-1" className={cn("mx-auto max-w-6xl px-4 py-20 sm:px-6", className)} {...props}>
<div className="relative isolate overflow-hidden rounded-3xl border bg-card px-6 py-16 text-center sm:px-12 md:py-24">
<AnimatedGrid className="absolute inset-0 -z-10 [mask-image:radial-gradient(ellipse_60%_70%_at_50%_50%,#000_20%,transparent_75%)]" />
<h2 className="mx-auto max-w-2xl text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-5xl">{title}</h2>
<p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">{description}</p>
<div className="mt-8 flex flex-wrap justify-center gap-3">
<a className={buttonVariants({ size: "lg", shape: "pill" })} href={primaryAction.href}>
{primaryAction.label} <ArrowRight className="rtl:rotate-180"/>
</a>
<a className={buttonVariants({ variant: "outline", size: "lg", shape: "pill" })} href={secondaryAction.href}>{secondaryAction.label}</a>
</div>
</div>
</section>
)
}
export { Cta1, type Cta1Props }Installation
$ pnpm dlx shadcn@latest add @ballmac/cta-1Install the dependencies.
$ pnpm add lucide-reactAdd the Ballmac items it builds on.
$ pnpm dlx shadcn@latest add @ballmac/animated-grid @ballmac/buttonCopy the source into your project.
components/ballmac/blocks/cta-1/cta-1.tsx// Ballmac UI: CTA 1. https://ui.ballmac.com/blocks/cta-1 import * as React from "react" import { ArrowRight } from "lucide-react" import { AnimatedGrid } from "@/components/ballmac/animated-grid" import { buttonVariants } from "@/components/ballmac/button" import { cn } from "@/lib/utils" type Cta1Props = Omit<React.ComponentProps<"section">, "title"> & { /** The heading. */ title?: string /** One sentence under the heading. */ description?: string /** Main call to action. */ primaryAction?: { label: string; href: string } /** Secondary call to action. */ secondaryAction?: { label: string; href: string } } function Cta1({ title = "Ready when you are.", description = "Set up your first project in under a minute. No credit card required.", primaryAction = { label: "Get started", href: "#" }, secondaryAction = { label: "Talk to sales", href: "#" }, className, ...props }: Cta1Props) { return ( <section data-slot="cta-1" className={cn("mx-auto max-w-6xl px-4 py-20 sm:px-6", className)} {...props}> <div className="relative isolate overflow-hidden rounded-3xl border bg-card px-6 py-16 text-center sm:px-12 md:py-24"> <AnimatedGrid className="absolute inset-0 -z-10 [mask-image:radial-gradient(ellipse_60%_70%_at_50%_50%,#000_20%,transparent_75%)]" /> <h2 className="mx-auto max-w-2xl text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-5xl">{title}</h2> <p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">{description}</p> <div className="mt-8 flex flex-wrap justify-center gap-3"> <a className={buttonVariants({ size: "lg", shape: "pill" })} href={primaryAction.href}> {primaryAction.label} <ArrowRight className="rtl:rotate-180"/> </a> <a className={buttonVariants({ variant: "outline", size: "lg", shape: "pill" })} href={secondaryAction.href}>{secondaryAction.label}</a> </div> </div> </section> ) } export { Cta1, type Cta1Props }Update the import paths to match your project setup.
Usage
import { Cta1 } from "@/components/ballmac/blocks/cta-1/cta-1"
export default function Cta1Demo() {
return <Cta1 />
}Dependencies
- npm
- lucide-react
Use with AI
The last section before the footer: one decisive action. Edit title, description and the two actions. With the shadcn MCP server set up (guide), ask your agent:
Add the Ballmac UI CTA 1: framed call to action (@ballmac/cta-1) to this project with the shadcn MCP, then use it where it fits.
Use it for
- End of landing and pricing pages
- Between long content sections to prompt sign-up
Not for
- Top of the page (use a hero)
Registry JSON: https://ui.ballmac.com/r/cta-1.json
Free to use in personal and commercial projects.
More call to action blocks
CTA 2: waitlist over light beams
A waitlist or newsletter signup over rising light beams: heading, email field with validation, loading, success and error states.
CTA 3: install command
A closing call-to-action for developer products: heading, two buttons and a copyable install command with package-manager tabs, over a soft dotted glow.
Cta Pro 1: newsletter sign-up
A calm card with a validated email form, busy and error states, a success message that takes focus and a row of avatars with a reader count.
Cta Pro 2: split card with picture
Heading, two buttons, reassurances and a rating beside a picture slot (generated art by default).