React CTA section components

A call to action band closes the page. It is not a second hero and it is not a feature split. Everything above it has already argued the case, so the only decisions left are what the button says, what stands beside it, and whether the visitor believes the people on the other side exist. Two competing buttons of equal weight is the most common way this band fails.

CTA Section With Checklist And Cart Visual is the ecommerce close. A timer icon opens the left column, a five minute cart clear promise follows, three checked benefit rows sit under it, and one inverted button ends the stack. A shopping cart glyph with speed lines fills the right column. Pick it when the offer is speed and the proof is a short list.

CTA Section With Tilted Plan Cards is the seat close. A shadowed panel holds the headline and a Get Started pill in the middle. Starter and Pro hang off the lower corners and tilt inward so the offer reads as two objects on a table. Dashed corner arcs keep the empty space from looking unfinished. Two seats is the whole argument, so a third plan or a yearly switch belongs in a pricing section instead.

CTA Section With Frosted Glass Testimonial Card is the enterprise close. Copy and two actions sit on the left of a glass panel. A nested quote card sits on the right with five stars, a paragraph and a named officer. A violet wash lives inside the bottom of the panel. Do not ship it with a placeholder quote, because a lorem card beside a signup button reads as a brochure.

CTA Section With Floating Booking Icons is the calendar close. The band is the stage: a company mark, a powered by badge, the headline and one blue pill. Frosted corner blobs keep it from reading as paper. This one is light only, because the pale blue wash and the dark mark both need a bright ground.

CTA Section With Staggered Image Grid is the trial close with faces. Copy sits on the left, five office portraits sit on the right in a staggered grid with square corners and a tight gap. The offset is the design. Line the tiles up on a regular grid and the collage becomes a contact sheet parked beside a headline.

CTA Section With Overlapping Customer Avatars is the catalog close. Four faces overlap on one row, a customer count sits beside them, a rating row sits under that, and the whole stack sits inside the cropped top of a phone docked to the bottom of the band. Pass the rating as null when there is no real score, rather than printing an invented one.

CTA Section With Centered Contact Avatars is the quiet close after a list has already done the selling. An outer panel holds a nested inner card. Three team faces sit in the middle with the centre portrait on top. One blue Contact us button is the only action, which is why this belongs at the end of a documentation or FAQ page rather than at the end of a landing page.

CTA Section With Instagram Thumbnail Grid is the community close. A row of rounded thumbnails sits above the copy, each carrying a corner mark, and five social brand icons sit under a gradient outlined Follow along pill. Without real posts in the row it is a follow button with nothing behind it.

CTA Section With Scattered Avatars is the crowd close. A card sits on a wash, copy and a Get Started pill sit in the middle, and ten portraits float around them at mixed sizes so the field feels occupied. CTA Section With Split Booking And Stars is the sales close: copy on the left, six overlapping avatars with hover tooltips, a five star row with a score and a team count, then Book a call and Start free trial side by side on the right.

Replace the demo copy before this ships. The five minute cart line, the twenty dollar Starter and sixty dollar Pro, the James Cooper quote, the Powered by Rune badge, the thirty day trial lede, the 35,000 customer count, the 27,000 team count and every avatar are samples. A live domain running any of those numbers unchanged is claiming a result it cannot support.

Only one action should look primary. The blocks that ship two, such as the frosted glass panel and the split booking band, give the second one a quieter treatment on purpose. Matching both to the same fill turns the close into a fork, and a fork at the bottom of a page reliably loses to a single button.

Do not stack two CTA bands on one page. Pick the checklist and cart when the offer is a fast checkout, the tilted plans when a seat has to be named, the frosted glass when a customer quote carries the close, the booking band when the product is a calendar, the staggered grid or the scattered avatars when the people are the argument, the overlapping avatars when a catalog needs a count, the Instagram row when the feed is the proof, or the split booking band when the next step is a call.

Most of these follow light and dark. Card frames turn near black, the washes stay but go quieter, and the accents keep their hue so the button still reads as the action. The floating booking band is the exception and stays light. Check the contrast on the accent pill in both modes before shipping, because a blue that passes on white often fails on near black.

Set the href before you ship, not after. Every one of these bands renders fine with a placeholder link, so a dead close is invisible in review and only shows up in the funnel a week later.

Put the band at the end, under the last section that made a claim. A call to action above the fold is a hero. A call to action halfway down interrupts the argument it depends on.