React Booking CTA Section with a Powered By Badge and Soft Blue Glow

Pro

A calm, centred call to action for a booking or scheduling product. Your logo sits at the top, a small Powered by badge under it, then a bold question, a reassuring sentence and one blue button. Two large blurred blue shapes glow in the lower corners over a pale blue wash.

CTA Section With Floating Booking Icons block preview

One question, one button

CTA Section with Floating Booking Icons is a React and Tailwind CSS booking CTA section: a centred stack of logo, badge, headline, supporting line and a single button over a soft blue radial background with blurred glows. It is drawn for light themed sites in Next.js or any React app.

Despite its name, the block contains no floating icons. Its effect comes from space and softness: one clear question such as Ready to upgrade your booking experience, a sentence that removes risk, such as no credit card required, and a single blue button, with nothing else competing for attention.

The Powered by badge is useful when the CTA sits on a partner's or customer's site, for example a booking widget page, where you want your brand present without leading with it.

From logo to button

Logo image

A 72px logo at the top, set with logoSrc and logoAlt.

Powered by badge

A small sand coloured pill with a diamond mark and your label, warm against the cool blue around it.

Headline and lede

An h2 question and one line that lowers the risk of clicking.

Blue button

A single solid blue button with its label as the accessible name and an optional click handler.

Glow background

A pale blue radial wash with two blurred blue blobs in the bottom corners, all CSS and hidden from assistive technology.

When a quiet booking CTA fits

Use it when

Sign up pages for service providers such as salons, tutors and clinics.
Booking, scheduling and appointment products.
A single action such as start booking for free.
Light, friendly brands that use blue.
Pages embedded for partners, where a Powered by line matters.

Skip it when

You want the brand name to lead; here the badge is deliberately small and quiet.
You expected animated floating app icons; the block has none.
Dark themed sites; it is drawn for light only.
You need a secondary action or a testimonial.
Your logo is wide; the 72px slot suits square marks.

Logo, badge and copy

Set logoSrc and logoAlt to your own square mark; the default points at a sample logo on the Wensity asset host. badgeLabel sets the Powered by text, headline and lede set the copy, and ctaLabel, ctaHref and onCtaClick set the button.

Only write no credit card required if that is true for your sign up. The blue values for the button and glows are in the component; change them together if blue is not your colour.

Phrase the headline as a question the visitor can answer yes to, and keep the button label as the action that follows from that yes, for example Create my booking page rather than Learn more.

npx wensity@latest add cta-section-with-floating-booking-icons --type block

page.tsx

import { FloatingBookingIconsCta } from "@/components/wensity/blocks/cta-section-with-floating-booking-icons";

export function BookingCta() {
  return (
    <FloatingBookingIconsCta
      logoSrc="/brand/slotly-mark.png"
      logoAlt="Slotly"
      badgeLabel="Powered by Slotly"
      headline="Let clients book you while you sleep."
      lede="Set your hours once. Slotly handles reminders and reschedules."
      ctaLabel="Create your booking page"
      ctaHref="/signup"
    />
  );
}

Props

Prop	Type	Default	Description
`logoSrc / logoAlt`	string	-	Your square logo and its alt text.
`badgeLabel`	string	"Powered by Rune"	Text in the small badge under the logo.
`headline`	string	"Ready to Upgrade Your Booking Experience?"	The question in the middle.
`lede`	string	-	One line that removes risk, such as free to start.
`ctaLabel / ctaHref / onCtaClick`	string / handler	-	The only button.

Small and static

Visible focus ring

The button draws a blue focus ring with an offset on keyboard focus, so it stays easy to find when tabbing.

Under ninety lines

One of the smallest blocks in the library, with no state and no animation library.

One image

The logo is the only request. Host it yourself rather than relying on the sample URL.

Decorative glows

The blurred shapes are aria-hidden and cost only a CSS blur filter.

Light only

Colours are fixed for light backgrounds. On a dark site, place it in a light band or recolour the wash.

Nothing moves

The glows are still, so the section is calm for motion sensitive visitors without any extra code.

Block details

CTA Section With Floating Booking Icons

Category: CTA Sections
Renders: CSS only. Paints as soon as the stylesheet arrives
Theme: Fixed light surface. No dark variant
Dependencies: clsxtailwind-merge
Source: 90 lines, 3 KB in one file
Install: wensity add cta-section-with-floating-booking-icons --type block
Tags: light, cta, booking, calendar, logo, conversion
Last updated: October 13, 2026