CTA 01

About this block

CTA 01 is a horizontal call-to-action banner with a headline, a short description, and two action buttons (primary and secondary) aligned on the same row. Built with Tailwind CSS flexbox, it adapts from a stacked mobile layout to an inline desktop layout. The section has no background image or decoration — it relies on contrast with the surrounding sections to draw attention. Both buttons are shadcn/ui Button components with configurable variants.

When to use it

• End of a landing page section where you want to catch users before they scroll past without converting
• Between major content sections to re-engage visitors who are reading but haven't clicked yet
• Products where a soft secondary CTA (learn more, see demo) complements the primary conversion action
• Pages that need a conversion prompt without the visual weight of a full card or modal

Notes

The secondary button should reduce friction, not compete with the primary. Use it for demo requests, documentation links, or video previews — not a second sign-up path.

Frequently asked questions

Does CTA 01 include a background image or illustration?

No, it's intentionally plain — it relies on contrast with surrounding sections rather than decoration to draw attention.

What should the secondary button link to?

Something low-friction like a demo, documentation, or video preview — not a second sign-up path, which would compete with the primary CTA.

Does it stack on mobile?

Yes, the flexbox layout adapts from an inline row on desktop to a stacked column on mobile automatically.