A call-to-action banner that sits near the end of a page. A rounded violet panel holds a headline and one supporting sentence on the left and two pill buttons on the right, with a thin row of three reassurance points along the bottom. A set of faint concentric rings drawn in SVG sits in one corner so the solid colour does not look flat. On phones the buttons drop under the text and stretch to full width.
const content = {
heading: "Take bookings while the salon is closed",
body: "Clients pick a time, pay a deposit and get a reminder the day before. You wake up to a full calendar.",
primary: "Open your booking page",
secondary: "See a live example",
points: ["Free for the first 30 days", "No card needed", "Set up in about ten minutes"],
};
export default function CtaBannerOnBrandColour() {
return (
<section className="bg-white px-4 py-12 sm:px-6 sm:py-16">
<div className="relative mx-auto max-w-6xl overflow-hidden rounded-3xl bg-violet-700 px-6 py-12 text-white sm:px-12 sm:py-16">
<svg viewBox="0 0 400 400" fill="none" aria-hidden="true" className="pointer-events-none absolute -bottom-40 -right-28 h-[520px] w-[520px] text-white">
<circle cx="200" cy="200" r="70" stroke="currentColor" strokeOpacity=".22" strokeWidth="1.5" />
<circle cx="200" cy="200" r="115" stroke="currentColor" strokeOpacity=".16" strokeWidth="1.5" />
<circle cx="200" cy="200" r="160" stroke="currentColor" strokeOpacity=".11" strokeWidth="1.5" />
<circle cx="200" cy="200" r="199" stroke="currentColor" strokeOpacity=".07" strokeWidth="1.5" />
</svg>
<div className="relative flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between lg:gap-12">
<div className="max-w-xl">
<h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">{content.heading}</h2>
<p className="mt-4 text-lg leading-relaxed text-violet-100">{content.body}</p>
</div>
<div className="flex flex-none flex-col gap-3 sm:flex-row sm:items-center">
<a
href="#"
className="inline-flex h-12 items-center justify-center gap-2 rounded-full bg-white px-6 text-sm font-semibold text-violet-800 transition hover:bg-violet-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-violet-700"
>
{content.primary}
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className="h-4 w-4">
<path d="M4 10h11m-4-4.5L15.5 10 11 14.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</a>
<a
href="#"
className="inline-flex h-12 items-center justify-center rounded-full bg-violet-900 px-6 text-sm font-semibold text-white transition hover:bg-violet-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-violet-700"
>
{content.secondary}
</a>
</div>
</div>
<ul className="relative mt-10 flex flex-col gap-3 border-t border-violet-500 pt-6 text-sm text-violet-100 sm:flex-row sm:flex-wrap sm:gap-x-8">
{content.points.map((point) => (
<li key={point} className="flex items-center gap-2">
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className="h-4 w-4 flex-none text-white">
<path d="M4.5 10.5l3.5 3.5 7.5-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
{point}
</li>
))}
</ul>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/cta-banner-on-brand-colour.json
Most often just above the footer, after the visitor has read what the product does. It also works between long sections of a page as a reminder, as long as it does not appear more than twice.
One line on a desktop, two at most. Say what the visitor gets, not what you want them to do; the button already carries the instruction.
One if the page has a single goal. Add a second, quieter button only when some visitors are not ready for the main action and you would rather keep them than lose them.
Use the 700 or 800 step of a Tailwind colour with white text, and the 100 step of the same colour for the supporting sentence. Lighter backgrounds such as the 500 step often fail contrast with white.
Related: Button Set: Primary, Secondary, Ghost, Icon and Loading, Newsletter Signup with Benefit List, Sticky Bottom Offer Bar, Split Hero with Email Capture.
More call-to-action sections or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.