CTA Section

Dedicated section prompting the primary action.

html

<section class="cta cta--center" style="background:#241430;">
  <h2 class="cta__heading">Ready to see it for yourself?</h2>
  <p class="cta__body">Start a free trial today, no credit card required.</p>
  <button type="button" class="cta__button" style="color:#241430;">Start free trial</button>
</section>
<style>
.cta { padding: 56px 24px; border-radius: 16px; font: 16px/1.5 system-ui, sans-serif; color: #FAF7F2; }
.cta--center { text-align: center; }
.cta--left { text-align: left; }
.cta__heading { margin: 0 0 12px; font-size: 30px; font-weight: 800; }
.cta__body { margin: 0 0 24px; opacity: .85; max-width: 52ch; }
.cta--center .cta__body { margin-left: auto; margin-right: auto; }
.cta__button { background: #FAF7F2; border: none; padding: 14px 28px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }
.cta__button:hover, .cta__button:focus-visible { opacity: .9; }
</style>

tailwind

<section class="cta-tw cta-tw--center px-6 py-14 rounded-2xl font-sans text-[#FAF7F2]" style="background:#241430;">
  <h2 class="m-0 mb-3 text-3xl font-extrabold">Ready to see it for yourself?</h2>
  <p class="m-0 mb-6 opacity-85 max-w-[52ch]">Start a free trial today, no credit card required.</p>
  <button type="button" class="bg-[#FAF7F2] border-0 px-7 py-3.5 rounded-xl font-bold text-[15px] cursor-pointer hover:opacity-90" style="color:#241430;">Start free trial</button>
</section>
<style>
.cta-tw--center { text-align: center; }
.cta-tw--center p { margin-left: auto; margin-right: auto; }
.cta-tw--left { text-align: left; }
</style>

react

export function CtaSection({
  heading = "Ready to see it for yourself?",
  body = "Start a free trial today, no credit card required.",
  buttonText = "Start free trial",
  bg = "#241430",
  align = "center",
}) {
  return (
    <section style={{ padding: "56px 24px", borderRadius: 16, font: "16px/1.5 system-ui, sans-serif", color: "#FAF7F2", background: bg, textAlign: align }}>
      <h2 style={{ margin: "0 0 12px", fontSize: 30, fontWeight: 800 }}>{heading}</h2>
      <p style={{ margin: align === "center" ? "0 auto 24px" : "0 0 24px", opacity: 0.85, maxWidth: "52ch" }}>{body}</p>
      <button type="button" style={{ background: "#FAF7F2", border: "none", padding: "14px 28px", borderRadius: 10,
        fontWeight: 700, fontSize: 15, cursor: "pointer", color: bg }}>
        {buttonText}
      </button>
    </section>
  );
}