Call to Action Block

The Call to Action (CTA) block is designed to encourage users to take a desired action on the page. For example sign up to your product. The text should be short and catchy and really give the user a reason to press that button.

Front End

Content Model

The content model for the CTA block is as follows:

title: Text Field - Required

text: Text Field - Required

button: Block - Required

Code

The CTA block uses the BlockData type from the Contento JavaScript SDK and also and uses the Button block.

import { BlockData } from '@gocontento/client'
import Button from './Button'

export default function CTA({ block }: { block: BlockData }) {
  return (
    <div className="py-9 md:py-16">
      <div className="mx-auto max-w-[1000px] bg-zinc-100 px-6 py-24 md:px-16">
        <div className="prose mx-auto flex flex-col items-center justify-center">
          <h2 className="mt-5 text-center text-3xl font-semibold leading-snug md:text-5xl">
            {block.fields.title.text}
          </h2>
          <p className="text-center text-lg">{block.fields.text.text}</p>
          {block.fields.button.blocks.length > 0 &&
            block.fields.button.blocks.map((button: BlockData) => {
              return (
                <Button key={button.fields.button_text.text} button={button} />
              )
            })}
        </div>
      </div>
    </div>
  )
}